發布頁面 · uni-app跨平臺移動應用開發

``` <template> <view class="ts-column ts-flex-item ts-padding"> <view class="ts-row"> <view class="ts-row ts-padding ts-flex-item"> <ts-button class="ts-flex-item" :borderRadius="30" type="error" :inverted="type!='丟失'" @click="switchType">丟失</ts-button> </view> <view class="ts-row ts-padding ts-flex-item"> <ts-button class="ts-flex-item" :borderRadius="30" type="primary" :inverted="type==='丟失'" @click="switchType">撿到</ts-button> </view> </view> <view class="ts-row" style="align-items: center;"> <view class="ts-row"> 我的名字 </view> <input type="text" v-model="linkman" placeholder="請填寫您的姓名" /> </view> <view class="ts-row" style="align-items: center;"> <view class="ts-row"> 手機號碼 </view> <input type="text" v-model="mobile" placeholder="請填寫您的手機號碼" /> </view> <view class="ts-row" style="align-items: center;"> <view class="ts-row"> {{typeMessage}}物品 </view> <input type="text" v-model="title" :placeholder="'請填寫'+typeMessage+'物品的名稱'" /> </view> <view class="ts-row" style="align-items: center;"> <view class="ts-row"> {{typeMessage}}地點 </view> <input type="text" v-model="address" :placeholder="'請填寫'+typeMessage+'物品的地點'" /> </view> <view class="ts-column"> <view class="ts-row"> {{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="'請填寫'+typeMessage+'物品的地點'"> </textarea> </view> </view> <view class="ts-column"> <view class="ts-row ts-flex-item ts-h6"> 上傳{{typeMessage}}物品的圖片，方便找回，最多上傳9張圖片。 </view> <view class="ts-row ts-flex-item"> <ts-image-uploader :count="9" @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 { // image // } from '@/common/api'; import { event } from '@/common/api/lost'; // import { // mapState, // mapMutations, // mapActions // } from 'vuex' export default { components: { tsImageUploader }, data() { return { type: "丟失", title: "校園卡", address: '羅馬廣場', linkman: '張三', mobile: '18928779500', description: '校園卡，編號XXXXXXXX', // title: "", // address: '', // linkman: '', // mobile: '', // description: '', files: [], } }, async onLoad(e) { // if (await this.checkLogin()) { // // } }, methods: { //checkLogin // ...mapActions({ // getUserInfo: 'user/getUserInfo', // checkLogin: 'checkLogin', // }), switchType() { this.type = this.type == "丟失" ? "撿到" : "丟失"; }, onChange(files) { console.log(files) this.files = files; }, async doPublish() { uni.showModal({ title: '提示', content: `您確認要發布該條消息嗎？`, success: async (res) => { if (res.confirm) { //上傳圖片 let tmp_ids = new Set(); for (let f of this.files) { let formdata = {}; //文件上傳到服務器，返回圖片ID // const res = await 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 } const res = await event.create(data); console.log(res); if (res.errno === 0) { //添加成功 uni.navigateBack({ delta: 1 }); } else { uni.showToast({ title: res.errmsg, duration: 2000 }); // console.log(res); } } else if (res.cancel) { // console.log('用戶點擊取消'); } } }); }, }, computed: { typeMessage() { return (this.type == "丟失" ? "丟失" : "撿到"); } } } </script> <style> view { line-height: 3em; } input { border-bottom: #C0C0C0 solid 1px; display: flex; flex: 1; margin-left: 30upx; } </style> ```