<template> <view class="bg"> <view class="commodity"> <view @click="linkto(item)" class="mc_item" v-for="(item,index) in dataList.orderlist" :key="index"> <view class="item_swipe"> <view class="box_img"> <u--image width="180rpx" height="180rpx" :src="item.fileList[0].fileUrl" ></u--image> </view> <view class="box_text"> <view class="box_title"> {{ item.name }} </view> <view class="box_type"> 已选择 配方原料 </view> <view class="box_num"> <view class="bn_left"> ¥1888 </view> <view class="bn_right"> {{ 'x' + item.num }} </view> </view> </view> </view> </view> <u-divider ></u-divider> <view class="rateBox"> 整体满意度 <u-rate active-color="#ffcf00" inactive-color="#b2b2b2" :count="5" v-model="rateValue"></u-rate> </view> <view class="pjBox"> <u--textarea v-model="value1" placeholder="展开对商品评价..." count maxlength="200" ></u--textarea> </view> <view class="upload"> <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="3" ></u-upload> </view> </view> <view style="height: 200rpx;"></view> <view class="btnBox"> <view class="btn"> 提交评价 </view> </view> </view> </template> <script> import env from "@/http/config/config.js" export default { components: { }, data() { return { fileList1:[], value1:'', dataList:{ orderlist:[ { check:false, name:'产品名称产', num:2, }, { check:false, name:'产品名称产品名称产品名称产品产品名称产品名称产品名称产品', num:1, } ], time:'2023-04-12 18:31:56', name:'产品名称产', type:'待付款', }, } }, onLoad() { }, methods: { linktoPublishComments(){ uni.navigateTo({ url: '/pages/market/PublishComments' }); }, linkto(item){ uni.navigateTo({ url: '/pages/market/OrderDetails' }); }, // 删除图片 deletePic(event) { this[`fileList${event.name}`].splice(event.index, 1) }, // 新增图片 async afterRead(event) { // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 let lists = [].concat(event.file) let fileListLen = this[`fileList${event.name}`].length lists.map((item) => { this[`fileList${event.name}`].push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i].url) let item = this[`fileList${event.name}`][fileListLen] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise(url) { return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: env.BASEURL + '/open/upload/uploadFile', filePath: url, name: 'file', formData: { user: 'test' }, success: (res) => { const fileData = JSON.parse(res.data) if (fileData.code == 500) { resolve('') }else{ const fileData = JSON.parse(res.data) resolve(fileData.data) } } }); }) }, } } </script> <style> .bg{ width: 750rpx; height: auto; min-height: 100vh; background: #F1F1F1; border-radius: 0rpx 0rpx 0rpx 0rpx; display: flex; flex-direction: column; align-items: center; } .commodity{ width: 702rpx; height: auto; /* min-height: 954rpx; */ background: #FFFFFF; border-radius: 16rpx 16rpx 16rpx 16rpx; opacity: 1; margin-top: 24rpx; /* padding-bottom: 100rpx; */ } .commodity_title{ width: 650rpx; height: 40rpx; font-size: 28rpx; font-weight: 500; color: #999; line-height: 40rpx; padding: 24rpx 0 0 24rpx; display: flex; justify-content: space-between; align-items: center; } .mc_item{ width: 702rpx; height: 244rpx; background: #FFFFFF; border-radius: 16rpx 16rpx 16rpx 16rpx; opacity: 1; margin-top: 24rpx; } .item_swipe{ width: 678rpx; height: 244rpx; background: #FFFFFF; border-radius: 16rpx 16rpx 16rpx 16rpx; opacity: 1; display: flex; align-items: center; flex-direction: row; padding-left: 24rpx; } .box_img{ width: 180rpx; height: 180rpx; background-color: #999999; } .box_text{ width: 392rpx; height: 200rpx; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between; } .box_title{ width: 392rpx; height: 40rpx; font-size: 28rpx; font-weight: bold; color: #333333; line-height: 40rpx; display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:1; } .box_type{ width: 410rpx; height: 48rpx; background: #EEEEEE; border-radius: 8rpx 8rpx 8rpx 8rpx; opacity: 1; font-size: 28rpx; font-weight: 500; color: #999999; padding-left: 24rpx; line-height: 48rpx; display: -webkit-box; word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:1; } .box_num{ width: 410rpx; display: flex; justify-content: space-between; align-items: center; } .rateBox{ display: flex; margin: 24rpx; } .pjBox{ margin-left: 24rpx; width: 654rpx; /* height: 320rpx; */ background: #F1F1F1; border-radius: 16rpx 16rpx 16rpx 16rpx; opacity: 1; } .btnBox{ width: 750rpx; height: 100rpx; background: #FFFFFF; border-radius: 0rpx 0rpx 0rpx 0rpx; opacity: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; position: fixed; bottom: 0; } .btn{ width: 702rpx; height: 80rpx; background: #46A6FF; border-radius: 64rpx 64rpx 64rpx 64rpx; opacity: 1; font-weight: 500; color: #FFFFFF; line-height: 80rpx; text-align: center; } .upload{ width: 702rpx; margin: 48rpx 0 48rpx 24rpx; } </style>