xdd-uniapp-new/pages/shop/GoodsEvaluate/index.vue

<template>
  <view class="evaluate-con">
    <view
      v-if="orderCon.productInfo"
      class="goodsStyle acea-row row-between"
    >
      <view class="pictrue">
        <image :src="orderCon.productInfo.image" class="image"/>
      </view>
      <view class="text acea-row row-between">
        <view class="name line2">{{ orderCon.productInfo.storeName }}</view>
        <view class="money">
          <view>￥{{ orderCon.productInfo.price }}</view>
          <view class="num">x{{ orderCon.cartNum }}</view>
        </view>
      </view>
    </view>
    <view class="score">
      <view
        v-for="(item, scoreListIndexw) in scoreList"
        :key="scoreListIndexw"
        class="item acea-row row-middle"
      >
        <view>{{ item.name }}</view>
        <view class="starsList">
          <text
            v-for="(itemn, starsIndexn) in item.stars"
            :key="starsIndexn"
            :class="item.index >= starsIndexn ? 'icon-shitixing font-color-red' : 'icon-kongxinxing'"
            class="iconfont"
            @click="stars(starsIndexn, scoreListIndexw)"
          />
        </view>
        <text class="evaluate">{{ item.index === -1 ? "" : item.index + 1 + "分" }}</text>
      </view>
      <view class="textarea">
        <textarea
          v-model="expect"
          placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
        />
        <view class="upload-title">
          添加视频/图片
          <text class="txt">
            ({{ videoArr.length + picArr.length }}/9)
          </text>
        </view>
        <view class="upload-wrapper">
          <tm-upload
            :dataList="videoArr"
            :upload_img_wh="uploadImgWH"
            :upload_max="1"
            :upload_count="1"
            :url="uploadUrl"
            :header="uploadHeader"
            type='video'
            @change="uploadedVideoChange"
          />
          <tm-upload
            :dataList="picArr"
            :upload_img_wh="uploadImgWH"
            :upload_max="9 - videoArr.length"
            :upload_count="9 - videoArr.length"
            :url="uploadUrl"
            :header="uploadHeader"
            type='image'
            @change="uploadedPicChange"
          />
        </view>
      </view>
      <view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
    </view>
  </view>
</template>
<script>
import { postOrderComment, postOrderProduct } from '@/api/store'
import { trim } from '@/utils'
import { required } from '@/utils/validate'
import { validatorDefaultCatch } from '@/utils/dialog'
import tmUpload from '@/components/tm-upload/tm-upload.vue'
import {
  VUE_APP_API_URL
} from '@/config'

export default {
  name: 'GoodsEvaluate',
  components: {
    tmUpload
  },
  props: {},
  data: function () {
    return {
      uploadUrl: VUE_APP_API_URL + '/api/upload',
      uploadImgWH: (750 - 3 * 16 - 2 * 32 - 16) / 3.0,
      uploadHeader: {
        Authorization: "Bearer " + this.$store.getters.token
      },
      orderCon: {
        cartProduct: {
          productInfo: {}
        }
      },
      scoreList: [
        {
          name: '商品质量',
          stars: ['', '', '', '', ''],
          index: -1
        },
        {
          name: '服务态度',
          stars: ['', '', '', '', ''],
          index: -1
        }
      ],
      uploadPictures: [],
      expect: '',
      unique: '',
      picArr: [],
      videoArr: []
    }
  },
  mounted() {
    this.unique = this.$yroute.query.id
    this.getOrderProduct()
  },
  methods: {
    getOrderProduct() {
      postOrderProduct(this.unique).then(res => {
        this.orderCon = res.data
      })
    },
    stars: function (indexn, indexw) {
      this.scoreList[indexw].index = indexn
    },
    uploadedVideoChange(uploadList) {
      this.videoArr = uploadList
    },
    uploadedPicChange(uploadList) {
      this.picArr = uploadList
    },
    async submit() {
      const expect = trim(this.expect)
      const product_score = this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1
      const service_score = this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1
      try {
        await this.$validator({
          product_score: [
            required('请选择商品质量分数', {
              type: 'number'
            })
          ],
          service_score: [
            required('请选择服务态度分数', {
              type: 'number'
            })
          ]
        }).validate({
          product_score,
          service_score
        })
      } catch (e) {
        return validatorDefaultCatch(e)
      }
      postOrderComment({
        productScore: product_score,
        serviceScore: service_score,
        unique: this.unique,
        pics: this.picArr.join(','),
        comment: expect,
        video: this.videoArr.join(',')
      }).then(() => {
        uni.showToast({
          title: '评价成功',
          icon: 'success',
          duration: 2000
        })
        this.$yrouter.back()
      }).catch(err => {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: 'none',
          duration: 2000
        })
      })
    }
  }
};
</script>
<style scoped lang="less">
.upload-title {
  padding: 0 0 20rpx 16rpx;
  .txt {
    color: #999;
    font-size: 22rpx;
  }
}
.upload-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 0 16rpx;
}
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
  border: 1px solid #ddd;
}
</style>