CommunityApp/pagesM/pages/order_appraise.vue

<template>
  <view class="dt-page">
    <view class="appraise-list">
      <view v-for="(item,idx) in goodsList" :key="idx" class="appraise-item">
        <view class="hd-wrap">
          <image class="goods-pic" :src="item.thumbnail" mode="aspectFit"></image>
          <view class="goods-name dt-text-row-one">{{item.name}}</view>
          <view class="price">￥{{ item.price | moneyEx}}</view>
        </view>
        <view class="mn-wrap">
          <textarea :value="feedbacks[idx]" @input="onInput($event,idx)" maxlength="-1" rows="10" placeholder="对该商品进行评价..."></textarea>
          <DtUpload :ref="'imgsUploader'+idx" title="上传照片" :max="4" :files="fileList[idx]" @error="onError" @complete="onComplete" />
        </view>
        <view class="ft-wrap">
          <view class="title">商品评分</view>
          <view class="star-list">
            <image v-for="(items,idxs) in 5" :key="idxs" :src="curStar[idx]>=idxs+1?'http://139.9.103.171:1888/img/image/appraise_stared.png':'http://139.9.103.171:1888/img/image/appraise_star.png'" class="star" mode="aspectFit" @tap="tapAppraise(idx,idxs)"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="btn-wrap-fix"></view>
    <view class="btn-wrap">
      <button class="btn-primary" @tap="tapSubmit">提交</button>
    </view>
  </view>
</template>
<script>
import DtUpload from '../comps/dt_upload.vue'
export default {
  components: {
    DtUpload
  },
  data() {
    return {
      dataDetail:{},
      goodsList: [],
      feedbacks: [],
      fileList: [],
      curStar: [],
      lastPageRoute:''
    }
  },
  methods: {
    onInput(ev, idx) {
      let feedbacks = this.feedbacks.slice(0)
      feedbacks[idx] = ev.detail.value
      this.$set(this, 'feedbacks', feedbacks)
    },
    tapAppraise(idx, idxs) {
      let curStar = this.curStar.slice(0)
      curStar[idx] = idxs + 1
      this.$set(this, 'curStar', curStar)
    },
    onError(err) {
      console.log('onError',err)
    },
    onComplete(files) {
      console.log('onComplete', files)
    },
    tapSubmit() {
      let feedbacks = this.feedbacks.slice(0)
      let isOk = true
      feedbacks.forEach((feed)=>{
        if(!feed || !feed.trim()){
          isOk = false
        }
      })
      if(!isOk){
        this.$dialog.toast('请填写评价内容')
        return
      }
      let promiseList = []
      let idx = 0
      while (this.$refs['imgsUploader' + idx]) {
        // console.log(76,this.$refs)
        let promise = this.$refs['imgsUploader' + idx][0].upload()
        console.log(78,promise)
        promiseList.push(promise)
        idx++
      }
      console.log(82,promiseList)
      Promise.all(promiseList).then(resList => {
        console.log('success',resList)
        this.reviewOrder(resList)
      }).catch(err => {
        console.warn(err)
      })
    },
    async reviewOrder(resList){
      let reviews = []
      let goodsList = this.goodsList.slice(0)
      goodsList.forEach((item,idx)=>{
        let reviewItem = {
          orderItemId:item.orderItemId || item.id,
          content: this.feedbacks[idx],
          score: this.curStar[idx] || 5
        }
        if(resList[idx] && resList[idx].length>0){
          let imageUrls = []
          resList[idx].forEach((resItem)=>{
            imageUrls.push(resItem.path)
          })
          reviewItem.imageUrls = JSON.stringify(imageUrls)
        }else{
          reviewItem.imageUrls = ''
        }
        reviews.push(reviewItem)
      })

      let resp = await this.$api.reviewOrder({
        orderId: this.dataDetail.id,
        memberId: this.memberId,
        reviews: reviews
      })
      let paths = ['pages/mine','pages/mine_order_list']
      if(this.lastPageRoute === 'pages/order_detail'){
        paths.push('pages/order_detail')
      }
      this.$util.refreshPage(paths)
      this.$dialog.success('评价成功',()=>{
        uni.navigateBack()
      })
    },
    onLoadPage(options){
	  wx.hideShareMenu();
      this.memberId = this.$auth.getMemberId()
      let lastPage = this.$util.getPageCtx(1).$vm
      let lastPageRoute = lastPage.__route__
      this.lastPageRoute = lastPageRoute
      console.log(130,lastPageRoute)
      if(lastPageRoute === 'pages/mine_order_list'){
        let dataList = lastPage.dataList.slice(0)
        let item = dataList[options.idx]
        this.dataDetail = item
        this.goodsList = item.products
      }else{
        let item = lastPage.orders
        this.dataDetail = item
        this.goodsList = item.orderItems
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.dt-page {
  min-height: 100vh;
  background-color: #f2f2f2;
  .appraise-list {
    padding-bottom: 1upx;
  }
  .appraise-item {
    margin-bottom: 20upx;
    background-color: #fff;

    .hd-wrap {
      display: flex;
      align-items: center;
      height: 90upx;
      padding: 0 30upx;
      font-size: 30upx;
      font-weight: 500;
      .goods-pic {
        margin-right: 20upx;
        width: 70upx;
        height: 70upx;
      }
      .goods-name {
        flex: 1;
        height: 36upx;
        line-height: 36upx;
      }
      .goods-price {
        margin-left: 20upx;
      }
    }
    .mn-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 30upx 30upx 10upx;
      border-top: 1upx solid #e5e5e5;
      border-bottom: 1upx solid #e5e5e5;
      textarea {
        width: 100%;
        height: 200upx;
        padding-bottom: 10upx;
        line-height: 1.5;
      }
    }
    .ft-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30upx;

      .title {
        padding-top: 30upx;
        width: 100%;
        font-size: 30upx;
        font-weight: 500;
      }
      .star-list {
        display: flex;
        align-items: center;
        width: 100%;

        .star {
          width: 44upx;
          height: 44upx;
          padding: 30upx 25upx;
        }
        .star:first-child {
          padding-left: 0;
        }
      }
    }
  }

  .btn-wrap-fix {
    width: 100%;
    height: 110upx;
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 110upx;
    background-color: #fff;
    .btn-primary {
      width: 690upx;
      height: 80upx;
      line-height: 80upx;
      color: #fff;
      background-color: $dt-color-primary;
      font-size: 30upx;
    }
  }
}
</style>