xdd-uniapp-new/components/UserEvaluation.vue

<template>
  <view class="evaluateWtapper">
    <view
      v-for="(item, evaluateWtapperIndex) in reply"
      :key="evaluateWtapperIndex"
      class="evaluateItem v12-pt-3"
    >
      <!-- 用户信息头部 -->
      <view class="user-header v12-px-4">
        <view class="avatar-box">
          <image :src="item.avatar" class="avatar" mode="aspectFill" />
        </view>
        <view class="user-info">
          <view class="name line1">{{ item.nickname }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
      <view class="v12-px-4">
        <view class="v12-secondary-dark-text v12-font-24 attr-bg"> {{ item.sku }}</view>
        <view class="start" :class="'star' + item.star"></view>
      </view>

      <!-- 评论内容 -->
      <view class="evaluate-infor">{{ item.comment || '此用户没有填写评价'}}</view>

      <!-- 图片/视频列表 -->
      <view class="imgList">
        <!-- 视频 -->
        <view v-if="item.video" class="pictrue">
          <view 
            @click="pauseOtherVideo('video' + evaluateWtapperIndex)"  
            v-if="activeVideo !== 'video' + evaluateWtapperIndex" 
            class="play-icon"
          >
            <u-icon name="play-right-fill" color="#fff" size="48"></u-icon>
          </view>
          <image
            v-if="activeVideo !== 'video' + evaluateWtapperIndex"
            :src="item.video + '?vframe/jpg/offset/1'"
            class="image"
            mode="aspectFill"
            @click="pauseOtherVideo('video' + evaluateWtapperIndex)"
          />
          <video
            v-else
            :src="item.video"
            :poster="item.video + '?vframe/jpg/offset/1'"
            controls
            autoplay
            class="image"
            :id="'video' + evaluateWtapperIndex"
            @play="pauseOtherVideo('video' + evaluateWtapperIndex)"
          />
        </view>
        <!-- 图片 -->
        <view
          v-for="(pic, idx) in item.picturesArr"
          :key="idx"
          class="pictrue"
        >
          <image :src="pic" class="image" mode="aspectFill" @click="previewImage(item.picturesArr, idx)" />
        </view>
      </view>

      <!-- 商家回复 -->
      <view class="reply" v-if="item.merchantReplyContent">
        <text class="font-color-red">店小二</text>
        ：{{item.merchantReplyContent}}
      </view>
    </view>
  </view>
</template>

<script>
import { dataFormat } from "@/utils";

export default {
  name: "UserEvaluation",
  props: {
    reply: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {
      videoPlayers: [],
      activeVideo: null,
    };
  },
  mounted: function() {},
  methods: {
    dataFormat,
    previewImage(imgs,index){
      uni.previewImage({
        current:imgs[index],
        urls:imgs
      })
    },
    // 播放视频时暂停其他视频
    pauseOtherVideo(video) {
      this.activeVideo = video;
      if(this.videoPlayers.includes(video)) {
        this.videoPlayers.forEach((item) => {
          if(item !== video) {
            uni.createVideoContext(item, this).pause();
          }
        })
      } else {
        this.videoPlayers.push(video);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.evaluateWtapper {
  .evaluateItem {
    margin-bottom: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 30rpx;
    &:last-child {
      border-bottom: none;
    }
  }
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  
  .avatar-box {
    margin-right: 20rpx;
    .avatar {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
    }
  }
  
  .user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    .name {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 4rpx;
    }
    
    .time {
      font-size: 22rpx;
      color: #999;
    }
  }
}

.tag-row {
  margin-bottom: 12rpx;
  .default-tag {
    display: inline-block;
    background: #FFF0F1;
    color: #FE5261;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
  }
}

.star-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .star-icon {
    margin-right: 4rpx;
  }
}

.evaluate-infor {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20rpx;
  text-align: justify;
}

.imgList {
  display: flex;
  flex-wrap: wrap;
  
  .pictrue {
    width: 220rpx;
    height: 220rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    
    &:nth-child(3n) {
      margin-right: 0;
    }
    
    .image {
      width: 100%;
      height: 100%;
    }
    
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }
  }
}

.reply {
  background: #F5F5F5;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}
.attr-bg{
  background: rgba(197,39,51,0.1);
  padding: 7rpx 5px;
  width: fit-content;
  border-radius: 12rpx;
}
</style>