xiaokuaisong-shangjia/p-BluPrint_1.0.288888/pages/evaluate/evaluate.vue

<template>
	<view class="container">
		 <view class="history-list">
			<view class="history-item" v-for="(item, index) in historyList" :key="index">
				<view class="history-info">
					<image class="history-img" :src="item.imgUrl"></image>
					<view class="nameTime">
						<text class="history-title">{{ item.title }}</text>
						<text class="time">{{ item.time.substr(0, 19).replace('T', ' ') }}</text>
					</view>
					<view class="star">
						<text class="history-sale">{{ item.sale }}</text>
						<uni-rate :readonly="true" :value="item.star" active-color="#13c2c2" :is-fill="false"
							color="#13c2c2" :size="16"/>
					</view>
				</view>
				<view class="extend">
					<text @click="reviewUser(item)" class="messageDetail">{{ item.message }}</text>
					<template v-if="item.businessReview && item.businessReview.trim() !== ''">
						<view class="business-reply-container">
							<text class="businessReviewTitle">商家回复</text>
							<text class="businessReview">{{ item.businessReview }}</text>
						</view>
					</template>
				</view>
			</view>
		</view> 
	</view>
</template>


<script>
	import { onMounted } from "vue";
import {
		apiImageUrl
	} from '../../API/api';

	export default {
		name: 'HistoryList',
		data() {
			return {
				historyList: []
			};
		},
		onLoad() {
			this.review();
		},
		mounted() {
			this.review();
		},
		methods: {
			review() {
				uni.request({
					url: `${apiImageUrl}/api/level/list/business`,
					method: 'POST',
					data:{
						id:uni.getStorageSync("businessId")
					},
					header: {
					  'Content-Type': 'application/json',
					  'cookie': uni.getStorageSync("cookie") || ''
					},
					success: (res) => {
						console.log(res);
						console.log("成功");
						this.historyList = res.data.data.map(item => ({
							id: item.id,
							businessId: item.businessId,
							userId: item.userId,
							orderId: item.orderId,
							star: item.rating,
							review: item.review,
							businessReview: item.businessReview,
							createTime: item.createTime,
							imgUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.B32YODeRecLlETs7eOvyXwHaHa?pid=ImgDet&w=474&h=474&rs=1',
							title: '大表哥',
							sale: item.rating,
							time: item.createTime,
							message: item.review
						}));
					},
					fail: () => {
						console.log("失败");
					}
				});
			},
			reviewUser(item){
				console.log(item.id);
				const replyId=item.id
				uni.showModal({
				  title: '请完成数据填写',
				  content: '',
				  editable:true,
				  placeholderText:'请输入回复信息',
				  confirmText: '确认',
				  cancelText: '取消',
				  success: (res) => {
				    if (res.confirm) {
				      console.log('输入的内容：', res.content);
					  const content=res.content
					   uni.request({
					  		url:apiImageUrl+'/api/level/business/reply',
					  		method:'POST',
							header: {
							  'Content-Type': 'application/json', 
							  'cookie': uni.getStorageSync("cookie") || ''
							},
					  		data:{
					           businessReview:content,
					           id:replyId
					        },
							success(response) {
								console.log("成功");
								console.log(response);
								onMounted(review())
							},
							fail(){
								console.log("失败");
							}
					 })
				    }
				  } 
				});
			}
		}
	};
</script>

<style>
	.container {
		align-items: center;
		padding: 20rpx;
	}

	.history-list {
		width: 100%;
	}

	

	.history-item {
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
			padding: 15px;
			margin-bottom: 20rpx;
		}
	
	
		.extend .business-reply-container {
			background-color: #f4f4f4;
			border-radius: 8px;
			padding: 10px;
			margin: 5px 0;
			display: block;
			color: #666;
			font-size: 14px;
		}
	
		.extend .business-reply-container .businessReviewTitle {
			color: #666;
			font-size: 14px; 
			font-weight: normal;
			margin-bottom: 5px;
			display: block;
		}
	
		.extend .business-reply-container .businessReview {
			display: block;
		}
    .messageDetail {
		color: #000;
		font-size: 14px; 
	}
.history-info {
  display: flex;
  flex-direction: row;
  align-items: center; 
}

.history-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 10px; 
}

.nameTime {
  display: flex;
  flex-direction: row;
  align-items: flex-start; 
  margin-right: 10px; 
}

.history-title,
.time {
  margin: 0;
  font-size: 12px;
  margin-right: 10px; 
}

.star {
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
}
	
	.history-sale {
	  font-size: 30rpx;
	  color: #000;
	  margin-top: 0;
	  margin-right: 5px;
	}

	.example-body {
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}


	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.card {
		width: 100%;
		height: 100px;
		border-radius: 15px;
		background-image: -webkit-linear-gradient(top, #fff, #B0D3F4);
	}

	.containerShow {
		padding: 7px;
		position: relative;
	}

	.img {
		width: 60px;
		height: 40px;
		display: inline-block;
		margin-top: 30px;
	}

	.imageItem {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		margin: auto 0;
	}
	
	
</style>