``` <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> ```