comment 7.2

components/comment/index.vue

@@ -0,0 +1,100 @@
+<template>
+	<view class="comment-item">
+		<view class="user">
+			<u-avatar :src="content.member_avatar" class="avatar" size="60"></u-avatar>
+			<text class="name">{{ content.geval_frommembername }}</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="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: 2,
+		}
+	},
+	props: {
+		content: Object,
+		reply: Boolean,
+	},
+	created() {
+		if(this.content.hasOwnProperty('scores_two')) this.rate = this.content.scores_two;
+	}
+};
+</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;
+			}
+		}
+	}
+	.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>