``` <template> <view class="ts-column ts-padding"> <view class="ts-row"> <view class="ts-row ts-padding" style="flex:1;"> <ts-button :borderRadius="30" type="success" :inverted="type!='丢失'" @click="switchType">丢失</ts-button> </view> <view class="ts-row ts-padding" style="flex:1;"> <ts-button :borderRadius="30" type="success" :inverted="type==='丢失'" @click="switchType">捡到</ts-button> </view> </view> <view class="ts-row ts-padding"> </view> <view class="ts-row"> <view class="ts-row" style="flex:1;"> 我的名字 </view> <view class="ts-row" style="flex:3;"> <input type="text" v-model="linkman" placeholder="请填写您的姓名" /> </view> </view> <view class="ts-row"> <view class="ts-row" style="flex:1;"> 联系方式 </view> <view class="ts-row" style="flex:3;"> <input type="text" v-model="mobile" placeholder="请填写您的手机号码" /> </view> </view> <view class="ts-row"> <view class="ts-row" style="flex:1;"> {{typeMessage}}物品 </view> <view class="ts-row" style="flex:3;"> <input type="text" v-model="title" placeholder="请填写丢失物品的名称" /> </view> </view> <view class="ts-row"> <view class="ts-row" style="flex:1;"> {{typeMessage}}地点 </view> <view class="ts-row" style="flex:3;"> <input type="text" v-model="address" placeholder="请填写丢失物品的地点" /> </view> </view> <view class="ts-column"> <view class="ts-row" style="flex:1;"> {{typeMessage}}物品简单描述 </view> <view class="ts-row" style="flex:1;"> <textarea v-model="description" style="height: 200upx; border: #3C3E49 solid 1upx; width: 100%; padding: 10upx;" placeholder="请填写丢失物品的地点"> </textarea> </view> </view> <view class="ts-column"> <view class="ts-row ts-flex-item ts-h6"> 上传{{typeMessage}}物品的图片，方便找回，最多上传3张图片。 </view> <view class="ts-row ts-flex-item"> <ts-image-uploader :count="3" @change="onChange"></ts-image-uploader> </view> </view> <view class="ts-column"> <view class="ts-row ts-flex-item"> <ts-button class="ts-row ts-flex-item" @tap="doPublish">发布</ts-button> </view> </view> </view> </template> <script> import tsImageUploader from "@/components/teaset/components/ts-image-uploader/ts-image-uploader.vue" import * as api from '@/common/api'; import * as request from '@/common/request' export default { components: { tsImageUploader }, data() { return { type: "丢失", title: "校园卡", address: '罗马广场', linkman: '张三', mobile: '18928779500', description: '校园卡，编号XXXXXXXX', files: [], } }, methods: { switchType() { this.type = this.type == "丢失" ? "捡到" : "丢失"; }, onChange(files) { console.log(files) this.files = files; }, async doPublish() { //上传图片 let tmp_ids = new Set(); for (let f of this.files) { let formdata = {}; const res = await api.image.upload(f, formdata); if (res.errno === 0) { tmp_ids.add(res.data.id); } } const image_ids = Array.from(tmp_ids).join(',') console.log(image_ids); let data = { image_ids: image_ids, title: this.title, address: this.address, linkman: this.linkman, mobile: this.mobile, description: this.description, type: this.type, user_id: this.user_id } // console.log(data); const res = await api.event.create(data); console.log(res); }, }, computed: { typeMessage() { return (this.type == "丢失" ? "丢失" : "捡到"); } } } </script> <style> view { font-size: 32upx; line-height: 2.2em; } input { border-bottom: #C0C0C0 solid 1px; display: flex; flex: 3; } </style> ```