xdd-uniapp-new/components/UserEvaluation.vue

<template>
  <view class="evaluateWtapper">
    <view
      v-for="(item, evaluateWtapperIndex) in reply"
      :key="evaluateWtapperIndex"
      class="evaluateItem"
    >
      <!-- 用户信息头部 -->
      <view class="user-header">
        <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="tag-row" v-if="item.sku">
        <view class="default-tag">{{ item.sku }}</view>
      </view>

      <!-- 评分星星 -->
      <view class="star-row">
        <u-icon 
          v-for="n in 5" 
          :key="n" 
          :name="n <= item.star ? 'star-fill' : 'star'" 
          color="#FE5261" 
          size="28"
          class="star-icon"
        ></u-icon>
      </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;
}
</style>