uniapp---------订单多商品评价及图片上传、删除功能

效果图如下：

 前端代码如下：

<template>
  <view id="orderPj">
    <view class="Box" v-for="(items,i) in info" :key="i" style="background-color: #fff;margin-bottom: 20rpx;">
    <view class="goodsBox" >
      <image :src="items.pic" mode=""></image>
      <view class="goodsRight">
        <view class="goodsRight-t">
          <view class="name">
             {{items.name}}
          </view>
        </view>
        <view class="color" v-for="(itemss,indexs) in items.attr" :key="indexs">
          <text >{{itemss.attr_group_name}}: {{itemss.attr_name}}</text>
        </view>
      </view>
    </view>
    <view class="beizhu">
    	<image src="../../static/remarks.png" mode=""></image>
    	<textarea  placeholder="有什么需要帮你备注的吗"   v-model="items.text" style="height: 88rpx;"/>
    </view>
    <view class="upload">
      <image src="../../static/upload.png" mode="" @click="uploadImg(items,i)" class="img" v-if="items.imgs.length!=3"></image>
      <view class="xl" v-for="(kk,m) in items.imgs">
          <image :src="kk" class="img1" mode="aspectFill"></image>
          <image src="../../static/close-on.png" class="closeImg" @click="deleteImg(i,m)" ></image>
       </view>
    <!-- <htz-image-upload  :max="3"  v-model="items.imgs" :uploadSuccess="ceshiUploadSuccess" action="上传地址，写自己的"></htz-image-upload> -->
		</view>
    <text style="font-size: 22rpx;color: #999;">最多上传3张图片</text>
   </view>
   <view class="" style="display: flex;align-items: center;justify-content: center;">
      <view class="realBtn" @click="submit">发布</view>
   </view>
  </view>
</template>

JS代码：

<script>
   import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
  export default {
    components:{
        htzImageUpload
      },
    data() {
      return {
         ceshiData: [],
				 id:'',
				 info:'',
				 remark:'',
         text:'',
				 
      }
    },
		onLoad: function(e) {
			if(e.id) this.id = e.id;
			this.getList();
		},
    methods: {
			ceshiUploadSuccess(res){
					var _res =JSON.parse(res.data)
					 if (_res.code == 1) {
							 this.ceshiData.push(_res.data.src);
					 }
			},
      uploadImg(item,index) {
        var that = this;
        var arr = this.info;
        console.log("item",item)
        console.log("index",index)
        uni.chooseImage({
          count:3,
          success:(res)=>{
            console.log(res)
            const tempFilePaths = res.tempFilePaths;
            uni.uploadFile({
              url:'上传接口地址',		//post请求的地址
              filePath:tempFilePaths[0],
              name:'file',	
              fileType: 'image',
              formData: { },
              success: (res) => {
                console.log(res)
                var _res =JSON.parse(res.data)
                if (_res.code == 1) {
                  that.info[index].imgs.push(_res.data.src);
                }
              }
            })
          },
          })
      },
       deleteImg(parentindex,index) {
           this.info[parentindex].imgs.splice(index,1);
          // arr.splice(index,1);
      },
			submit(){
				let that = this;
				// if(that.remark==''){
				// 	uni.showToast({
				// 	    title: '请输入评价',
				// 	    icon:'none'
				// 	});
				// 	return false;
				// }
        let goodsArr = [];
        this.info.forEach((item,i) => {
          let good = {
            comment: item.text,
            goods_id: item.goods_id,
            evalu_img: item.imgs,
            order_detail_id: item.order_detail_id
          }
          goodsArr.push(good)
        })
				that.request({
						url: 'v1/shop/evaluationSubmit',
						data: {
								id: that.id,
								goods: goodsArr
						},
						method:'post',
						success: (res) => {
								if(res.data.code==1){
									uni.showToast({
									    title: res.data.msg,
											duration:1000
									});
									setTimeout(function() {
									    uni.navigateTo({
									        url: '/pages/mine/orderDetails?id='+that.id
									        })
									}, 1000);
								} else {
									uni.showToast({
									    title: res.data.msg,
											icon:'none'
									});
								}
						}
				});
			},
			bindTextAreaBlur(e){
				console.error(e)
				this.remark = e.detail.value;
			},
      getList(){
				let that = this;
				that.request({
						url: 'v1/shop/orderEvaluation',
						data: {
								id:that.id,
						},
						success: (res) => {
								if(res.data.code==1){
									that.info = res.data.data;
                  that.info.forEach((item,index) => {
                    that.$set(item,"text","");
                    that.$set(item,"imgs",[]);
                  })
                  console.log(that.info)
								}
						}
				});
			}
    }
  }
</script>

css代码：

<style lang="scss" scoped>
page {
  background-color: #F3F3F3;
}
.Box{
  padding: 30rpx;
  border-radius: 10rpx;
}
#orderPj {
  margin: 30rpx;
  
  // background-color: #fff;
  border-radius: 10rpx;
  .goodsBox {
    display: flex;
    flex-direction: row;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #F3F3F3;
     image {
       width: 180rpx;
       height: 180rpx;
       margin-right: 20rpx;
       border-radius: 10rpx;
     }
     .name {
       width: 288rpx;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 24rpx;
       color: #333;
       margin-right: 44rpx;
     }
     .goodsRight-t {
       display: flex;
       flex-direction: row;
     }
     .info {
       display: flex;
       flex-direction: column;
       .jf {
         font-size: 26rpx;
         color: #333;
       }
       .num {
         font-size: 22rpx;
         color: #999;
         margin-left: auto;
       }
     }
     .color {
       margin-top: 23rpx;
       font-size: 22rpx;
       color: #999;
     }
  }
  
  .beizhu {
  	display: flex;
    margin-top: 20rpx;
    image{
      vertical-align: middle;
    	width: 20rpx;
    	height: 20rpx;
      margin-right: 15rpx;
      margin-top: 10rpx;
    }
    textarea {
      font-size: 20rpx;
      color: #999;
    }
  }
   .realBtn{
     width:582rpx;
     text-align: center;
     background: linear-gradient(-90deg, #16C380, #43CF9F);
     color: #FFFFFF;
     line-height: 88rpx;
     border-radius: 44rpx; 
     margin: 20rpx 0;
   }
   
}
.upload {
  
   .img{
     width: 198rpx;
     height: 198rpx;
     margin-right: 18rpx;
     margin-bottom: 10rpx;
   }
   .img1{
     width: 198rpx;
     height: 198rpx;
   }
   .xl{
     position: relative;
     display: inline-block;
     margin-right: 18rpx;
     margin-bottom: 10rpx;
     &:last-of-type{
       margin-right: 0;
     }
   }
  
   .closeImg{
     position: absolute;
     right: -4rpx;
     top: -10rpx;
     width: 20rpx;
     height: 20rpx;
   }
      
  }
</style>

可以自行复制，试运行。