zhishifufei_uniapp/pages/my/order_reply.vue

<template>
  
  <BaseContainer class="goods-evaluate">
    <NavBar title="商品评价" />
    <template v-if="cart_info.id">
      <view class="goods-section">
        <view>
          <image mode="aspectFit" :src="cart_info.productInfo.image" alt="" />
        </view>
        <view>{{ cart_info.productInfo.store_name }}</view>
        <view>
          <view>￥{{ cart_info.truePrice }}</view>
          <view>x{{ cart_info.cart_num }}</view>
        </view>
      </view>
      <!-- 评价 -->
      <view class="evaluate-section">
        <view class="ul" v-if="rateList.length">
          <view class="li" v-for="(item, index) in rateList" :key="index">
            <view>{{ item.name }}</view>
            <view>
              <text
                v-for="star in 5"
                :key="star"
                :class="{ on: star <= item.value }"
                class="iconfont iconxing"
                @click="rateChange(star, index)"
              ></text>
            </view>
            <view>{{ item.value | toDesc }}</view>
          </view>
        </view>
        <view class="sub-box">
          <textarea
            v-model="textValue"
            ref="textarea"
            :style="{ minHeight: '3em' }"
            maxlength="500"
            auto-height
            placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
          ></textarea>
          <view class="img-box">
            <view v-if="imageList.length">
              <view
                class="img-item"
                v-for="(item, index) in imageList"
                :key="item"
              >
                <image :src="item" :alt="item" />
                <view @click="imageDelete(index)"></view>
              </view>
            </view>
            <view
              class="label"
              v-if="imageList.length < 6"
              @click="imageUpload"
            >
              <view class="span">上传图片</view>
            </view>
          </view>
        </view>
        <view class="button flex flex-center" @click="evaluateSubmit"
          >立即评价</view
        >
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getOrderReplyData, saveProductComment } from "@/api/user";

export default {
  filters: {
    // 转换评分
    toDesc(value) {
      return ["非常差", "差", "一般", "好", "非常好"][value - 1];
    },
  },
  data() {
    return {
      cart_info: {},
      textValue: "",
      imageList: [],
      rateList: [
        {
          name: "商品质量",
          value: 5,
        },
        {
          name: "服务态度",
          value: 5,
        },
        {
          name: "物流服务",
          value: 5,
        },
      ],
    };
  },
  onLoad({ unique }) {
    this.unique = unique;
    this.getData();
  },
  methods: {
    async getData() {
      uni.showLoading({ mask: true });
      try {
        const { data } = await getOrderReplyData(this.unique);
        uni.hideLoading();
        this.cart_info = data.cartInfo.cart_info;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
    // 上传图片
    imageUpload() {
      this.$util.pickerOneImg().then((path) => {
        path && this.imageList.push(path);
      });
    },
    // 删除图片
    imageDelete(index) {
      this.imageList.splice(index, 1);
    },
    // 评分
    rateChange(value, index) {
      this.rateList[index].value = value;
    },
    // 提交评价
    async evaluateSubmit() {
      uni.showLoading({ mask: true });

      const data = {
        product_score: this.rateList[0].value,
        service_score: this.rateList[1].value,
        delivery_score: this.rateList[2].value,
        comment: this.textValue.trim(),
        pics: this.imageList,
      };

      try {
        const { msg, code } = await saveProductComment(this.unique, data);
        uni.hideLoading();
        this.$util.showMsg(msg);
        if (code === 200) {
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/special/order_store_list",
            });
          }, 500);
        }
      } catch (err) {
        uni.hideLoading();
      }
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
.goods-evaluate .goods-section {
  display: -webkit-box;
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  font-size: 28rpx;
  color: #282828;
}

.goods-evaluate .goods-section image {
  display: block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 6rpx;
  background-color: #868686;
  object-fit: cover;
  pointer-events: none;
}

.goods-evaluate .goods-section > view:nth-child(2) {
  -webkit-box-flex: 1;
  flex: 1;
  margin-right: 25rpx;
  margin-left: 25rpx;
}

.goods-evaluate .goods-section > view:last-child {
  text-align: right;
  color: #999999;
}

.goods-evaluate .evaluate-section {
  padding: 35rpx 30rpx 80rpx;
  margin-top: 12rpx;
  background-color: #ffffff;
}

.goods-evaluate .evaluate-section > .ul .li {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 28rpx;
  color: #282828;
}

.goods-evaluate .evaluate-section > .ul .li ~ .li {
  margin-top: 35rpx;
}

.goods-evaluate .evaluate-section .li view:nth-child(2) {
  margin-right: 30rpx;
  margin-left: 40rpx;
  font-size: 0;
}

.goods-evaluate .evaluate-section .li view:last-child {
  font-size: 24rpx;
  color: #aaa;
}

.goods-evaluate .iconxing {
  font-size: 36rpx;
  color: #ccc;
  cursor: pointer;
}

.goods-evaluate .iconxing ~ .iconxing {
  margin-left: 16rpx;
}

.goods-evaluate .iconxing.on {
  color: #ff6b00;
}

.sub-box {
  padding: 30rpx;
  border-radius: 10rpx;
  margin-top: 55rpx;
  background-color: #fafafa;
}

.goods-evaluate textarea {
  width: 100%;
  resize: none;
  font-size: 28rpx;
}

.goods-evaluate textarea::-webkit-input-placeholder,
.goods-evaluate textarea::placeholder {
  color: #bbb;
}

.img-box {
  margin-top: 60rpx;
  margin-right: -32rpx;
  margin-bottom: -32rpx;

  &::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

.img-item {
  position: relative;
  float: left;
  width: 140rpx;
  height: 140rpx;
  margin-right: 32rpx;
  margin-bottom: 32rpx;
}

.img-item image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3rpx;
  background-color: #e93323;
  object-fit: cover;
  pointer-events: none;
}

.goods-evaluate .evaluate-section .img-item view {
  position: absolute;
  top: 0;
  right: 0;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  margin-top: -12rpx;
  margin-right: -12rpx;
  background: #2c8eff
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVQ4T63TLVJDUQyG4edUlBkQrQYcawGDKCuAVbCE7gBThwAUi4BKNCyBH4nChknnlCnl3jt0bmPPyZvkS74SETs4wjs+SymhIyKiYBf7eCsRcYApnnGXoDZITR7hBBNcJSBpp7jAHDdNkLXkczzgOgHZ0pKaD38gnX9y3K4PVY7WAll9ES2QW3zhGI3d/QBaIE91OylYoz6/ACuQcVX5EgPcY4bX9Q1tF9Cgw/9H6CVirzX2PqQep/y4POV0VZrpZUMzneVq0wvDauePDey8h8O08zdMV6S1c4zvwQAAAABJRU5ErkJggg==")
    center/16rpx no-repeat;
}

.goods-evaluate .evaluate-section .label {
  float: left;
  width: 140rpx;
  height: 140rpx;
  border: 1px solid #ddd;
  border-radius: 3rpx;
  margin-right: 32rpx;
  margin-bottom: 32rpx;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0;
  line-height: 140rpx;
  text-align: center;
}

.goods-evaluate .evaluate-section .label .span {
  display: inline-block;
  padding-top: 50rpx;
  background: url("@/static/icon/camera.png") center top/46rpx no-repeat;
  vertical-align: middle;
  font-size: 22rpx;
  line-height: 1.5;
  color: #bbb;
}

.goods-evaluate .button {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  margin-top: 55rpx;
  background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
  font-family: inherit;
  font-weight: normal;
  font-size: 30rpx;
  color: #ffffff;
}
</style>