sports-miniapp/src/pages/mine/mineComments/index.vue

<template>
	<zzx-navbar :scrollable="false" :back="true" bgColor="linear-gradient( 180deg, #E8FF9B 0%, #F6F6F6 100%)"
		title="评价详情"></zzx-navbar>
	<view style="height:170rpx;"></view>
	<view class="content">
		<view class="m-comments-card" v-for="item in commentsList" :key="item.id">
			<view class="m-comments-name">
				<zzx-icon name="venue-icon4" size="14"></zzx-icon>
				<view class="name">{{item.address}}</view>
				<zzx-icon name="ashRight" size="12"></zzx-icon>
			</view>
			<view class="line"></view>
			<view class="m-user-info">
				<view class="user-info">
					<view class="user-header">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="user-name">{{item.username}}</view>
				</view>
				<view class="user-time">{{item.createTime}}</view>
			</view>
			<view class="m-star">
				<view class="star">{{item.score.toFixed(1)}}</view>
				<uni-rate :readonly="true" size="16" :value="item.score" />
			</view>
			<view class="m-comments">
				{{item.evaluateContent}}
			</view>
			<view class="user-picture">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(iamge,index) in item.imageList" :key="index">
						<image @click="_previewImage(item.imageList,iamge)" :src="iamge" mode=""></image>
					</view>
				</scroll-view>
			</view>
			<view class="f-merchants-reply" v-if="item.replyContent">
				<view class="merchants">商家回复</view>
				<view class="reply">
					<text :class="[switchOpen?'':'textHidden']">{{item.replyContent}}</text>
					<text class="open-colse" @click="switchOpen=!switchOpen">{{switchOpen?'收起':'展开'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { RouterUtils, TipsUtils,_previewImage } from '@/utils/util';
	import { http } from '@/utils/http'
	import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
	const commentsList=ref()
	const switchOpen=ref(false)
	onMounted(()=>{
		get_findByPage()
	})
	const get_findByPage=()=>{
		http.get('/my/evaluate/findByPage',{data:{pageNo:1,pageSize:10}}).then((res)=>{
			commentsList.value=res.result.records
		})
	}
</script>

<style lang="less" scoped>
	.m-comments-card {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin-top: 20rpx;

		.m-comments-name {
			display: flex;
			align-items: center;
			gap: 16rpx;
			margin-bottom: 20rpx;

			.name {
				font-size: 28rpx;
				color: #222222;
			}
		}
		.m-user-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-info{
				display: flex;
				align-items: center;
				gap: 16rpx;
				.user-header{
					&>image{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}
				.user-name{
					font-weight: bold;
					font-size: 24rpx;
					color: #222222;
				}
			}
			.user-time{
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
		.m-star{
			display: flex;
			align-items: center;
			gap: 20rpx;
			font-size: 24rpx;
			color: #AAAAAA;
		}
		.m-comments{
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #222222;
		}
		.user-picture{
			margin-top: 20rpx;
			.scroll-view_H{
				.scroll-view-item_H{
					&>image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
		.f-merchants-reply{
			display: flex;
			gap: 12rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			transition: all .3s;
			.merchants{
				width: 100rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
			.reply{
				width: 520rpx;
				font-size: 24rpx;
				color: #222222;
				display: flex;
				.open-colse{
					color: #AAAAAA;
					width:120rpx;
				}
			}
		}
	}
</style>