mrr.sj.front/pages/evaluate/components/evaluationDetail.nvue

<template>
	<view class="evaluation-detail" @click="goDetail">
		<!-- 用户信息区域：显式水平排列 -->
		<view class="user-section">
			<view class="user-info">
				<image class="avatar" :src="evaluatorPhoto" mode="aspectFill" />
				<text class="username">{{ evaluatorName }}</text>
			</view>
			<text class="time">{{formattedCreateTime}}</text>
		</view>

		<view class="user-contant">
			<!-- 评分标题：显式水平排列 -->
			<view class="rating-header">
				<image :src="getComposite" class="tag" mode="heightFix" />
				<view class="stars">
					<image v-for="n in 5" :key="n" :src="getStar(n)" class="star-icon" mode="aspectFill" />
				</view>
				<text class="score">{{evaluateObj.composite}}分</text>
			</view>

			<!-- 评论内容：nvue不支持span，全部替换为text -->
			<view class="comment">
				<text class="comment-text">
					{{evaluateObj.describe.length > 60 ? evaluateObj.describe.slice(0, 59) : evaluateObj.describe}}
					<text v-if="evaluateObj.describe.length > 60">
						{{hasShowMore ? evaluateObj.describe.slice(59) : '...'}}
						<text class="foot-btn" @click.stop="showMore">
							{{hasShowMore ? '收起' : '全文'}}
							<image 
								src="/static/images/evaluate/open.png" 
								mode="widthFix" 
								class="foot-btn-img"
								:class="{btnImg2:hasShowMore}" 
							/>
						</text>
					</text>
				</text>
			</view>

			<!-- 图片展示：显式水平排列+兼容间距 -->
			<view class="photos" v-if="isAllImg">
				<image 
					v-for="(photo, index) in photos" 
					:key="index" 
					:src="photo" 
					class="photo" 
					:class="{ 'photo-third': (index + 1) % 3 === 0 }"
					mode="aspectFill"
					@tap.stop="imgPreview(index)" 
				/>
			</view>
			<view class="photos" v-else>
				<image 
					v-for="(photo, index) in photos.slice(0, 3)" 
					:key="index" 
					:src="photo" 
					class="photo" 
					:class="{ 'photo-third': (index + 1) % 3 === 0 }"
					mode="aspectFill"
					@tap.stop="imgPreview(index)" 
				/>
				<view class="more" v-if="photos.length>3">
					<image src="/static/images/evaluate/more.png" class="more-img" mode="aspectFill" />
					<text class="more-text">{{photos.length}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasShowMore: false,
				compositeStraList: []
			};
		},
		computed: {
			evaluatorPhoto() {
				if (!this.evaluateObj.evaluator_head_photo) return "";
				return this.evaluateObj.anonymity == 1 
					? "/static/images/evaluate/photo.jpg" 
					: this.evaluateObj.evaluator_head_photo;
			},
			evaluatorName() {
				if (!this.evaluateObj.evaluator_name) return "";
				return this.evaluateObj.anonymity == 1 
					? "匿名用户" 
					: this.evaluateObj.evaluator_name;
			},
			photos() {
				if (!this.evaluateObj.images) return [];
				return this.evaluateObj.images.split(",");
			},
			formattedCreateTime() {
				if (!this.evaluateObj?.create_time) return '';
				const datePart = this.evaluateObj.create_time.split(' ')[0];
				if (!datePart) return '';
				const compatibleDateStr = datePart.replace(/-/g, '/');
				const date = new Date(compatibleDateStr);
				if (isNaN(date.getTime())) return '';
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}年${month}月${day}日`;
			},
			getComposite() {
				if (!this.evaluateObj.composite) return "";
				return `/static/images/evaluate/score${Math.floor(this.evaluateObj.composite)}.png`;
			}
		},
		props: {
			evaluateObj: {
				type: Object,
				default: () => ({})
			},
			isAllImg: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			showMore() {
				this.hasShowMore = !this.hasShowMore;
			},
			imgPreview(index) {
				uni.previewImage({
					current: index,
					urls: this.photos
				});
			},
			getStar(value) {
				if (!this.evaluateObj.composite) return "";
				const composite = this.evaluateObj.composite;
				if (composite >= value) {
					return "/static/images/evaluate/star_red.png";
				} else if (composite < value && composite > value - 1) {
					return "/static/images/evaluate/star2.png";
				} else {
					return "/static/images/evaluate/star_ash2.png";
				}
			},
			handleDecimal(num) {
				const integerPart = Math.sign(num) === -1 ? Math.ceil(num) : Math.floor(num);
				const decimalPart = num - integerPart;
				return decimalPart > 0.5 ? integerPart + 0.5 : integerPart;
			},
			goDetail() {
				this.$emit("goDetail", this.evaluateObj);
			}
		}
	};
</script>

<style>
	/* 基础容器：仅保留布局样式，字体样式全部下移到text */
	.evaluation-detail {
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #FAFAFA;
		flex: 1;
	}

	/* 用户信息区域：显式水平排列（覆盖nvue默认column） */
	.user-section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.user-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.avatar {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
	/* 文字样式：直接写在text的class上，不继承 */
	.username {
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		line-height: 33rpx;
	}
	.time {
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}

	/* 内容区域：左侧内边距保留 */
	.user-contant {
		padding-left: 70rpx;
	}

	/* 评分头部：显式水平排列 */
	.rating-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}
	.tag {
		height: 40rpx;
		margin-right: 10rpx;
	}
	.stars {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 10rpx;
	}
	.star-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 2rpx;
	}
	/* 评分文字：样式写在text上 */
	.score {
		font-weight: 400;
		font-size: 26rpx;
		color: #FF4767;
		line-height: 37rpx;
	}

	/* 评论内容：容器仅控制间距，文字样式在text上 */
	.comment {
		margin-top: 12rpx;
	}
	.comment-text {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 46rpx;
	}

	/* 图片区域：显式水平排列+兼容间距（nvue不支持column-gap/row-gap） */
	.photos {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20rpx;
		position: relative;
	}
	.photo {
		width: 194rpx;
		height: 194rpx;
		border-radius: 6rpx;
		/* nvue不支持object-fit，靠mode="aspectFill"实现 */
		margin-right: 1.1%;
		margin-bottom: 6rpx;
	}
	/* 清除第3个图片的右间距，模拟column-gap */
	/* .photo:nth-child(3n) {
		margin-right: 0;
	} */
	/* 第3n个元素的特殊样式，用动态类名实现 */
	.photo-third {
	  margin-right: 0;  /* 原本放在nth-child里的样式 */
	  /* 其他特殊样式... */
	}

	/* 更多图片提示：显式水平排列 */
	.more {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 59rpx;
		height: 28rpx;
		background: rgba(51, 51, 51, 0.4);
		border-radius: 14rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}
	.more-img {
		width: 23rpx;
		height: 17rpx;
		margin-right: 5rpx;
	}
	.more-text {
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	/* 全文/收起按钮：文字样式写在text上 */
	.foot-btn {
		font-weight: 500;
		font-size: 24rpx;
		color: #0751ff;
		line-height: 33rpx;
	}
	.foot-btn-img {
		width: 18rpx;
		height: 18rpx;
		margin-left: 10rpx;
	}
	.btnImg2 {
		transform: rotate(180deg);
	}
</style>