124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
Vue
<template>
|
||
<view class="comment-item">
|
||
<view class="user">
|
||
<u-avatar :src="content.member_avatar" class="avatar" size="60"></u-avatar>
|
||
<text class="name">{{ content.member_nickname }}</text>
|
||
<u-rate v-if="reply" :disabled='true' :count="count" v-model="rate" size="23" active-color="#FF780F" inactive-color="#F0EDF1" gutter="10"></u-rate>
|
||
</view>
|
||
<view class="content">
|
||
<view class="text">{{ content.geval_content }}</view>
|
||
</view>
|
||
<view class="image-container">
|
||
<image :src="src" v-for="(src, index) in content.geval_image" :key="index" @click="previewImage(content.geval_image, index)" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="reply" v-if="reply && content.geval_explain">
|
||
<view class="title">掌柜回复：</view>
|
||
<view class="content u-line-4">{{ content.geval_explain }}</view>
|
||
</view>
|
||
<view class="time" v-if="reply">
|
||
<image src="/static/image/common/20.png"></image>
|
||
<view class="value">{{ content.geval_addtime }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/*
|
||
* @description 显示评价
|
||
* @property {Boolean} reply 是否显示回复/时间/评分
|
||
**/
|
||
export default {
|
||
data() {
|
||
return {
|
||
count: 5,
|
||
rate: 0,
|
||
}
|
||
},
|
||
props: {
|
||
content: Object,
|
||
reply: Boolean,
|
||
},
|
||
created() {
|
||
if(this.content.hasOwnProperty('scores_two')) this.rate = this.content.scores_two;
|
||
},
|
||
methods: {
|
||
previewImage(urls, index) {
|
||
// console.log(urls);
|
||
uni.previewImage({
|
||
urls: urls,
|
||
current: urls[index]
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.comment-item {
|
||
background-color: #ffffff;
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
.name {
|
||
margin: 0 20rpx;
|
||
font-size: 26rpx;
|
||
color: rgba(153,153,153,1);
|
||
}
|
||
}
|
||
.content {
|
||
margin-bottom: 20rpx;
|
||
.text {
|
||
font-size: 26rpx;
|
||
color: rgba(51,51,51,1);
|
||
line-height: 40rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
> image {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
border-radius: 10px;
|
||
&:not(:nth-child(3n)) {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.image-container {
|
||
margin: 20rpx 0;
|
||
> image {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
&:not(:nth-child(3n)) {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.reply {
|
||
padding: 30rpx;
|
||
background: rgba(240,238,238,1);
|
||
border-radius: 10rpx;
|
||
font-size: 24rpx;
|
||
color: rgba(102,102,102,1);
|
||
margin-bottom: 20rpx;
|
||
.title {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.content {
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
> image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
.value {
|
||
font-size: 24rpx;
|
||
color: rgba(153,153,153,1);
|
||
}
|
||
}
|
||
}
|
||
</style> |