kxmall-ui/kxmall-app-ui/pages/order/appraise.vue

<template>
  <view class="page">
    <view v-for="(item, index) in orderDetail.productList" :key="index">
      <view class="goods-box-single">
        <image class="goods-img" :src="JSON.parse(item.img)[0].url" mode="aspectFill"></image>
        <view class="right">
          <text class="title clamp">{{item.productTitle}}</text>
          <text class="attr-box">{{item.productTitle}} x {{item.num}}</text>
          <text class="price">{{item.price}}</text>
        </view>
      </view>
      <view class='appraise-title appraise-star-view'>
        <text>宝贝评分</text>
        <view class="appraise-star-view">
          <text class="appraise-star" v-for="(value,key) in stars" :key="key" :class="key < orderDetail.productList[index].score ? 'active' : ''"
                @tap="chooseStar(value,index)"></text>
        </view>
      </view>
      <view class="appraise-body">
        <textarea placeholder="请输入评价(可空)..." v-model="item.content" class="appraise-textare" />
      </view>
      <view class="appraise-body appraise-uploader">
        <view class="uni-uploader">
          <view class="uni-uploader-head">
            <view class="uni-uploader-title" style="color: #6f6f74;">晒一晒</view>
            <view class="uni-uploader-info">{{item.imgs.length}}/8</view>
          </view>
          <view class="uni-uploader-body">
            <view class="uni-uploader__files">
              <block v-for="(image,imgIndex) in item.imgs" :key="imgIndex">
                <view class="uni-uploader__file" style="position: relative;">
                  <image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
                  <view class="close-view" @click="close(item, index, imgIndex)">x</view>
                </view>
              </block>
              <!--							<view class="uni-uploader__input-box" v-show="imageList.length < 8">-->
              <!--								<view class="uni-uploader__input" @tap="chooseImg(item,index)"></view>-->
              <!--							</view>-->
            </view>
          </view>
        </view>
      </view>
    </view>


    <button type="primary" class="appraise-submit" @tap="send">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stars: [1, 2, 3, 4, 5],
      imageList: [],
      sendDate: {
        score: 0,
        content: "",
        contact: ""
      },
      orderDetail: {
        productList: []
      },
      appraiseRequest: {
        appraiseDTOList: []
      }
    }
  },
  onLoad(option) {
    const that = this
    uni.showLoading({
      title: '正在加载'
    })

    that.$api.request('get', 'order/app/getOrderDetail', {
      orderId : option.orderid
    }, failres => {
      uni.hideLoading()
      that.$api.msg(failres.msg)
    }).then(res => {
      uni.hideLoading()
      that.orderDetail = res.data
      that.orderDetail.productList.forEach(item => {
        item.score = 0
        item.content = ''
        item.imgs = []
      })
    })

  },
  methods: {
    close(item, index, imgIndex){
      item.imgs.splice(imgIndex,1);
      this.orderDetail.productList.splice(index, item)
    },

    chooseImg(item,index) { //选择图片
      const that = this
      that.$api.uploadImg(4,(res => {
        item.imgs.push(res)
        that.orderDetail.productList.splice(index, that.orderDetail.productList[index])
      }))
    },
    chooseStar(e,index) { //点击评星
      const that = this
      that.orderDetail.productList[index].score = e
      that.orderDetail.productList.splice(index, that.orderDetail.productList[index])
    },
    previewImage() { //预览图片
      uni.previewImage({
        urls: this.imageList
      });
    },
    send() { //发送反馈
      const that = this
      let msg = ''
      let requestItems = []
      that.orderDetail.productList.forEach(item => {
        if (item.content && item.score <= 0) {
          msg = '有评论内容的商品，请为宝贝点上星星！';
          return
        }
        if (item.score <= 0) {
          return
        }

        requestItems.push({
          productAttrId: item.productAttrId,
          productId: item.productId,
          score: item.score,
          content: item.content,
          imgUrl: item.imgs.length > 0 ? item.imgs.join(',') : ''
        })

      })
      if(msg){
        that.$api.msg('有评论内容的商品，请为宝贝点上星星！');
        return;
      }
      that.appraiseRequest.orderId = that.orderDetail.id
      that.appraiseRequest.storageId = that.orderDetail.storeId
      that.appraiseRequest.appraiseDTOList = requestItems

      that.$api.request('post', 'appraise/app/addAppraise', JSON.stringify(that.appraiseRequest)).then(res => {
        that.$api.msg('评价成功！')
        that.$api.prePage().loadData('refresh')
        uni.navigateBack()
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #FFFFFF;
}
@font-face {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
view{
  font-size: 28upx;
}
.input-view {
  font-size: 28upx;
}
.close-view{
  text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
}
/* 上传 */
.uni-uploader {
  flex: 1;
  flex-direction: column;
}
.uni-uploader-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.uni-uploader-info {
  color: #B2B2B2;
}
.uni-uploader-body {
  margin-top: 16upx;
}
.uni-uploader__files {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.uni-uploader__file {
  margin: 10upx;
  width: 210upx;
  height: 210upx;
}
.uni-uploader__img {
  display: block;
  width: 210upx;
  height: 210upx;
}
.uni-uploader__input-box {
  position: relative;
  margin:10upx;
  width: 208upx;
  height: 208upx;
  border: 2upx solid #D9D9D9;
}
.uni-uploader__input-box:before,
.uni-uploader__input-box:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #D9D9D9;
}
.uni-uploader__input-box:before {
  width: 4upx;
  height: 79upx;
}
.uni-uploader__input-box:after {
  width: 79upx;
  height: 4upx;
}
.uni-uploader__input-box:active {
  border-color: #999999;
}
.uni-uploader__input-box:active:before,
.uni-uploader__input-box:active:after {
  background-color: #999999;
}
.uni-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/*问题反馈*/
.appraise-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20upx;
  color: #6f6f74;
  background-color: #FFFFFF;
  font-size: 28upx;
}
.appraise-star-view.appraise-title {
  justify-content: flex-start;
  margin: 0;
}
.appraise-quick {
  position: relative;
  padding-right: 40upx;
}
.appraise-quick:after {
  font-family: uniicons;
  font-size: 40upx;
  content: '\e581';
  position: absolute;
  right: 0;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.appraise-body {
  background: #fff;
}
.appraise-textare {
  height: 200upx;
  font-size: 28upx;
  line-height: 34upx;
  width: 100%;
  box-sizing: border-box;
  padding: 20upx 30upx 0;
}
.appraise-input {
  font-size: 34upx;
  height: 50upx;
  min-height: 50upx;
  padding: 15upx 20upx;
  line-height: 50upx;
}
.appraise-uploader {
  padding: 22upx 20upx;
}
.appraise-star-view {
  margin-left: 20upx;
}
.appraise-star.active {
  color: #FFB400;
}
.appraise-star {
  font-size: 40upx;
  margin-left: 6upx;
  color: #ccc;
}
.appraise-star:after {
  content: '☆'; /* 空心星 */
}
.appraise-star.active:after {
  content: '★'; /* 实心星 */
  color: #FFB400;
}

.appraise-submit {
  background: #007AFF;
  color: #FFFFFF;
  margin: 20upx;
}
/* 单条商品 */
.goods-box-single {
  display: flex;
  padding: 20upx;

  .goods-img {
    display: block;
    width: 120upx;
    height: 120upx;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 30upx 0 24upx;
    overflow: hidden;

    .title {
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      line-height: 1;
    }

    .attr-box {
      font-size: $font-sm + 2upx;
      color: $font-color-light;
      padding: 10upx 12upx;
    }

    .price {
      font-size: $font-base + 2upx;
      color: $font-color-dark;

      &:before {
        content: '￥';
        font-size: $font-sm;
        margin: 0 2upx 0 8upx;
      }
    }
  }
}
</style>