161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<template>
|
||
<view class="evaluateWtapper">
|
||
<view class="evaluateItem" v-for="(item, indexw) in reply" :key="indexw">
|
||
<view class="pic-text acea-row row-middle">
|
||
<view class="pictrue">
|
||
<image :src="item.avatar ? item.avatar : '/static/images/f.png'"></image>
|
||
</view>
|
||
<view class="acea-row row-middle">
|
||
<view class="name line1">{{ item.nickname }}</view>
|
||
<view class="start" :style="'width:'+(item.rate/5)*124+'rpx;background-image: url('+domain+'/static/diy/score2'+keyColor+'.png)'"></view>
|
||
</view>
|
||
</view>
|
||
<view class="time">{{ item.create_time }} {{ item.sku ? item.sku : '' }}</view>
|
||
<view class="evaluate-infor">{{ item.comment }}</view>
|
||
<view class="imgList acea-row">
|
||
<view class="pictrue" v-for="(itemn, indexn) in item.pics" :key="indexn" v-if="indexn<=3" @click='getpreviewImage(indexw, indexn)'>
|
||
<easy-loadimage :image-src="itemn"></easy-loadimage>
|
||
<!-- <image :src="itemn" class="image" @click='getpreviewImage(indexw, indexn)'></image> -->
|
||
<!-- <view v-else class="image loadfail-img"></view> -->
|
||
<text v-if="item.pics.length>4 && indexn == 3" class="morePic">+{{item.pics.length-4}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="reply" v-if="item.merchant_reply_content">
|
||
<text>店小二</text>：{{item.merchant_reply_content}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
|
||
import { mapGetters } from "vuex";
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
|
||
export default {
|
||
props: {
|
||
reply: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
computed: mapGetters(['keyColor']),
|
||
components: {
|
||
easyLoadimage
|
||
},
|
||
data: function() {
|
||
return {
|
||
domain: HTTP_REQUEST_URL
|
||
};
|
||
},
|
||
methods: {
|
||
getpreviewImage: function(indexw, indexn) {
|
||
console.log(this.reply)
|
||
uni.previewImage({
|
||
urls: this.reply[indexw].pics,
|
||
current: this.reply[indexw].pics[indexn]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.evaluateWtapper .evaluateItem {
|
||
background-color: #fff;
|
||
padding-bottom: 25rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem~.evaluateItem {
|
||
border-top: 1px solid #f5f5f5;
|
||
}
|
||
.evaluateWtapper .evaluateItem .pic-text {
|
||
font-size: 26rpx;
|
||
color: #282828;
|
||
height: 95rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem .pic-text .pictrue {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem .pic-text .pictrue image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
.evaluateWtapper .evaluateItem .pic-text .name {
|
||
max-width: 450rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem .time {
|
||
font-size: 24rpx;
|
||
color: #82848f;
|
||
padding: 0 30rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem .evaluate-infor {
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
margin-top: 19rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem .imgList {
|
||
padding: 0 30rpx 0 15rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
.evaluateWtapper .evaluateItem .imgList .pictrue {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 0 0 15rpx 15rpx;
|
||
position: relative;
|
||
/deep/.easy-loadimage,/deep/uni-image,/deep/image{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
}
|
||
|
||
.evaluateWtapper .evaluateItem .imgList .morePic{
|
||
position: absolute;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
color: #ffffff;
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(0,0,0,.5);
|
||
padding-top: 50rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.evaluateWtapper .evaluateItem .reply {
|
||
font-size: 26rpx;
|
||
color: #454545;
|
||
background-color: #f7f7f7;
|
||
border-radius: 5rpx;
|
||
margin: 20rpx 30rpx 0 30rpx;
|
||
padding: 30rpx;
|
||
position: relative;
|
||
text{
|
||
color: var(--view-theme);
|
||
}
|
||
}
|
||
.evaluateWtapper .evaluateItem .reply::before {
|
||
content: "";
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 20rpx solid transparent;
|
||
border-right: 20rpx solid transparent;
|
||
border-bottom: 30rpx solid #f7f7f7;
|
||
position: absolute;
|
||
top: -30rpx;
|
||
left: 40rpx;
|
||
}
|
||
.start{
|
||
position: relative;
|
||
top: 4rpx;
|
||
}
|
||
.star_purple{
|
||
background: url(../../pages/columnGoods/images/star_active_purple.png) left top/111rpx 19rpx no-repeat;
|
||
}
|
||
|
||
</style>
|