lilishop-uniapp/pages/order/evaluate/evaluateDetail.vue

<template>
  <view>
    <view class="exaluate-member-view">
      <view class="member-view">
        <view class="member-img">
          <u-image width="82rpx" style="border: 1px solid #ededed" height="82rpx" shape="circle" :src="comment.memberProfile || userImage"></u-image>
        </view>
        <view class="member-info">
          <view class="memName">{{ comment.memberName }}</view>
          <view class="creName">{{ comment.createTime }}</view>
        </view>
      </view>
      <view class="goods-view">
        <view class="goods-title">商品评价: {{ gradeList[comment.grade] }}</view>
        <view class="goods-subtitle">
          {{ comment.content }}
        </view>
        <!-- 如果有图片则会循环显示评价的图片 -->
        <view class="goods-imgs-view" v-if="comment.images != null && comment.images.length != 0">
          <view class="img-view" v-for="(img, imgIndex) in comment.images.split(',')" :key="imgIndex">
            <u-image @click="preview(comment.images.split(','),imgIndex)" width="160rpx" height="160rpx" :src="img"></u-image>
          </view>
        </view>
        <view class="goods-name">
          {{ comment.goodsName }}
        </view>
        <view class="goods-subtitle"></view>
        <view class="commentStyle" v-if="comment.reply">
          商家回复：
          <span class="addCommentSpan">{{ comment.reply }}</span>
          <view class="img">
            <!-- 循环出商家回复评价的图片 -->
            <u-image width="140rpx" height="140rpx" v-if="comment.replyImage" v-for="(replyImg, replyIndex) in splitImg(comment.replyImage)" :src="replyImg" :key="replyIndex"
              @click="preview(splitImg(comment.replyImage), replyIndex)">
            </u-image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import configs from '@/config/config'

const userImage = configs.defaultUserPhoto

const comment = ref<Record<string, any>>({})
const gradeList: Record<string, string> = {
  GOOD: '好评',
  MODERATE: '中评',
  WORSE: '差评',
  haveImage: '有图',
}

onLoad((options) => {
  comment.value = JSON.parse(decodeURIComponent(options.comment))
})

function splitImg(val: string) {
  if (val && val.split(',')) {
    return val.split(',')
  } else if (val) {
    return val
  }
  return false
}

function preview(urls: string[] | false, index: number) {
  if (!urls) return
  uni.previewImage({
    current: index,
    urls: Array.isArray(urls) ? urls : [urls],
    longPressActions: {
      itemList: ['保存图片'],
      success: () => {},
      fail: () => {},
    },
  })
}
</script>

<style lang="scss" scoped>
.commentStyle {
  margin-top: 16rpx;
  padding: 14rpx 26rpx;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 22rpx;
  font-weight: 700;
  text-align: left;
  line-height: 40rpx;
}
.img {
  display: flex;
  flex-wrap: wrap;
  /* height: 140rpx; */
  overflow: hidden;
  margin: 10rpx 0;

  image {
    width: 166rpx;
    height: 166rpx;
    margin: 0 15rpx 15rpx 0;

    &:nth-of-type(3n + 0) {
      margin: 0 0 15rpx 0;
    }
  }
}

.addCommentSpan {
  color: $u-tips-color !important;
  padding-left: 20rpx;
}
.memName {
  font-size: 28rpx;
}

.goods-name {
  border-bottom: 1px solid #ededed;
  padding-bottom: 30rpx;
}
.creName,
.goods-name {
  font-size: 24rpx;
  color: $u-tips-color;
}
page,
.content {
  background: $page-color-base;
  height: 100%;
}

.exaluate-member-view {
  background-color: #fff;
  margin-top: 12rpx;
  padding: 20rpx;
  .member-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    .member-img {
      width: 100rpx;
      margin: 20rpx;
    }
    .member-info {
      margin-left: 15rpx;
    }
  }
  .goods-view {
    margin-left: 15rpx;
  }
}
.border-bottom {
  padding-bottom: 20rpx;
  border-bottom: 1px solid #ededed;
}
.goods-title {
  margin-bottom: 10rpx;
}
.goods-subtitle {
  margin-bottom: 20rpx;
  color: #909399;
}
.goods-imgs-view {
  margin: 20rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  .img-view {
    margin-right: 15rpx;
  }
}
</style>