<template> <view class="content"> <view class="" v-if="suessShow"> <view class="fabBtn"> <view class="btn"> <image src="../../static/ic_41@2x.png" mode="" @click="submit"></image> </view> </view> <view class="goodBox"> <view class="leftImg"> <image src="../../static/ic_21@2x.png" mode=""></image> </view> <view class="nameBox"> 科麦斯无油静音空吗压力小型气550W-8L便捷吹尘木工打钉枪气泵空气压缩机 </view> </view> <view class="evaluateBox"> <view class="textBox"> <view class="textrLeft"> <image src="../../static/ic_42@2x.png" mode="" class="editIcon"></image> </view> <view class="textRight"> <textarea value="" placeholder="从多个角度评价宝贝,可以帮助更多想买的人" confirm-type="done" maxlength="-1" @input="bindInput" /> </view> </view> <view class="imgBox"> <image src="../../static/ic_43@2x.png" mode="" style="width: 160rpx;height: 160rpx;margin-right: 10rpx;" @click="uploadImg"></image> <view class="uploadImg" v-for="(item,idnex) in fileList" :key="index"> <image :src="item" mode=""></image> <image src="../../static/ic_19@2x.png" mode="" class="delicon" @click="deleteImg(index)"> </image> </view> </view> </view> </view> <view class="noData" v-else> <image src="../../static/ic_44@2x.png" mode="" style="width: 320rpx;height: 320rpx;"></image> <view class="fabuText"> 发布成功 </view> </view> </view> </template> <script> import request from '../../utils/request.js' export default { data() { return { inputValue: '', //内容输入框 suessShow: true, //是否成功 fileList: [], urlImg: [], tempFilePaths: [], btnClick: true } }, methods: { bindInput(e) { this.inputValue = e.detail.value }, submit() { uni.showModal({ title: '提示', content: '确定发布吗?', success: function(res) { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console.log('用户点击取消'); } } }); }, uploadImg() { let that = this that.tempFilePaths = [] uni.chooseImage({ count: 6, success: (chooseImageRes) => { let list = chooseImageRes.tempFilePaths list.forEach((item, index) => { that.tempFilePaths.push(item); }) let lists = that.tempFilePaths lists.forEach(ele => { const uploadTask = uni.uploadFile({ url: 'https://ketao.shequtaoapp.com/api/common/upload', filePath: ele, fileType: 'image', name: 'file', formData: { 'user': 'test' }, header: { 'token': uni.getStorageSync('token') || '' }, success: (uploadFileRes) => { let uploadList = JSON.parse(uploadFileRes.data).data that.fileList.push(uploadList.url) that.urlImg.push(uploadList.save_path) } }); }) } }); }, //删除图片 deleteImg(idx) { this.fileList.splice(idx, 1); this.urlImg.splice(idx, 1); this.tempFilePaths.splice(idx, 1); }, //发布 submit() { let that = this uni.showModal({ title: '提示', content: '确定发布吗?', success: function(res) { if (res.confirm) { let postData = { content: this.inputValue, images: this.fileList.toString(), id: '', //商品id order_item_id: '', //订单商品id level: '', //评星 } if (that.btnClick) { that.btnClick=false request.post('/api/order/comment', postData).then(res => { if (res.code == 1) { uni.navigateBack({ delta: 1 }) uni.showToast({ title: '发布成功' }) } else { uni.showToast({ title: res.msg, icon: 'none' }) } }).catch(err => { }) } } else if (res.cancel) { console.log('用户点击取消'); } } }); } } } </script> <style> .content { min-height: 100vh; background-color: #F7F8FA; box-sizing: border-box; } .fabBtn { padding: 16rpx 32rpx; box-sizing: border-box; background-color: #fff; display: flex; justify-content: flex-end; border-bottom: 2rpx solid #F7F8FA } .btn image { width: 114rpx; height: 52rpx; } .goodBox { background-color: #fff; padding: 32rpx; box-sizing: border-box; display: flex; align-items: center; border-bottom: 2rpx solid #F7F8FA } .leftImg { width: 136rpx; height: 136rpx; margin-right: 32rpx; } .leftImg image { width: 100%; height: 100%; border-radius: 8rpx; } .nameBox { flex: 1; color: #323233; font-size: 26rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .evaluateBox { background-color: #fff; padding: 32rpx; box-sizing: border-box; } .textBox { display: flex; justify-content: space-around; } .editIcon { width: 32rpx; height: 32rpx; } .uploadImg { width: 160rpx; height: 160rpx; margin-right: 10rpx; margin-bottom: 10rpx; position: relative; } .imgBox { display: flex; flex-wrap: wrap; } .uploadImg image { width: 100%; height: 100%; } .delicon { position: absolute; top: 0; right: 0; width: 40rpx !important; height: 40rpx !important; background-color: #fff; } .fabuText { color: #323233; font-size: 36rpx; text-align: center; font-weight: 600; } .noData { width: 320rpx; height: 380rpx; padding-top: 230rpx; margin: 0 auto; } </style>