135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<template>
|
||
<view class="evaluateWtapper">
|
||
<view
|
||
v-for="(item, evaluateWtapperIndex) in reply"
|
||
:key="evaluateWtapperIndex"
|
||
class="evaluateItem"
|
||
>
|
||
<view class="pic-text acea-row row-middle">
|
||
<view class="pictrue">
|
||
<image :src="item.avatar" class="image" />
|
||
</view>
|
||
<view class="acea-row row-middle">
|
||
<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 v12-font-24">{{ item.comment }}</view>
|
||
<view class="imgList acea-row">
|
||
<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 pic-img"
|
||
@click="pauseOtherVideo('video' + evaluateWtapperIndex)"
|
||
>
|
||
|
||
</image>
|
||
<video
|
||
v-else
|
||
:src="item.video"
|
||
:poster="item.video + '?vframe/jpg/offset/1'"
|
||
controls
|
||
autoplay
|
||
play-btn-position="center"
|
||
:id="'video' + evaluateWtapperIndex"
|
||
class="image"
|
||
@play="pauseOtherVideo('video' + evaluateWtapperIndex)"
|
||
/>
|
||
</view>
|
||
<view
|
||
v-for="(itemn, eq) in item.picturesArr"
|
||
:key="eq"
|
||
class="pictrue"
|
||
>
|
||
<image :src="itemn" class="image" @click="previewImage(item.picturesArr, eq)" />
|
||
</view>
|
||
</view>
|
||
<view class="reply" v-if="item.merchantReplyContent">
|
||
<span class="font-color-red">店小二</span>
|
||
：{{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>
|
||
|
||
.attr-bg{
|
||
background: rgba(197,39,51,0.1);
|
||
padding: 7rpx 5px;
|
||
width: fit-content;
|
||
border-radius: 12rpx;
|
||
}
|
||
.time{
|
||
padding: 0 !important;
|
||
}
|
||
.evaluateWtapper .evaluateItem .imgList .pictrue{
|
||
position: relative;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
.play-icon {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
</style>
|