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> |