pet-front-order/pages_order/order/orderReview.vue

<template>
	<view class="order-review-page">
		<!-- 伴宠师信息区域 -->
		<view class="companion-info-card">
			<view class="profile-header">
				<view class="companion-avatar">
					<image :src="companion.avatar" mode="aspectFill"></image>
				</view>
				<view class="companion-detail">
					<view class="companion-name">
						<text>{{companion.name}}</text>
						<image v-if="companion.gender" :src="companion.gender === '男生' ? '/static/images/details/boy.svg' : '/static/images/details/girl.svg'" class="gender-icon"></image>
						<view class="companion-tag" v-if="companion.isOfficial">
							<text>初级伴宠师</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 评价内容区域 -->
		<view class="review-content">
			<!-- 评分 -->
			<view class="review-item">
				<text class="review-label">评价星级</text>
				<view class="review-stars">
					<uni-rate 
						v-model="rating" 
						:size="24" 
						:value="rating"
						:max="5"
						:margin="5"
						:is-fill="true"
						:touchable="true"
						@change="ratingChange"
					></uni-rate>
				</view>
			</view>
			
			<!-- 评价内容 -->
			<view class="review-item">
				<text class="review-label">评价内容</text>
				<view class="review-textarea-box">
					<textarea 
						class="review-textarea" 
						v-model="reviewContent" 
						placeholder="服务态度，态度满意，环境满意" 
						maxlength="500"
					></textarea>
					<view class="word-count">
						<text>{{reviewContent.length}}/500</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="review-footer">
			<view class="submit-btn" @click="submitReview">
				<text>提交评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getOpenIdKey } from '@/utils/auth'
	
	export default {
		data() {
			return {
				orderId: null,
				rating: 5,
				reviewContent: '',
				companion: {
					name: '宠小二',
					avatar: '/static/images/personal/pet.png',
					isOfficial: true,
					gender: '女生'
				}
			};
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.getOrderInfo();
			}
		},
		methods: {
			// 获取订单信息
			getOrderInfo() {
				// 实际项目中应调用API获取订单详情和伴宠师信息
				// 示例代码：
				/*
				const params = {
					openId: getOpenIdKey(),
					orderId: this.orderId
				};
				
				getOrderDetail(params).then(res => {
					if (res && res.code === 200) {
						this.companion = res.data.companion;
					}
				}).catch(err => {
					console.error('获取订单详情失败', err);
				});
				*/
				
				// 这里使用模拟数据
				console.log('获取订单详情，ID:', this.orderId);
			},
			
			// 评分变化
			ratingChange(e) {
				this.rating = e.value;
			},
			
			// 提交评价
			submitReview() {
				if (this.rating === 0) {
					uni.showToast({
						title: '请选择评分',
						icon: 'none'
					});
					return;
				}
				
				if (!this.reviewContent.trim()) {
					uni.showToast({
						title: '请输入评价内容',
						icon: 'none'
					});
					return;
				}
				
				// 实际项目中应调用API提交评价
				// 示例代码：
				/*
				const params = {
					openId: getOpenIdKey(),
					orderId: this.orderId,
					rating: this.rating,
					content: this.reviewContent
				};
				
				submitOrderReview(params).then(res => {
					if (res && res.code === 200) {
						uni.showToast({
							title: '评价成功',
							icon: 'success'
						});
						
						// 评价成功后返回订单列表页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				}).catch(err => {
					console.error('提交评价失败', err);
				});
				*/
				
				// 这里使用模拟数据，显示评价成功提示
				uni.showToast({
					title: '评价成功',
					icon: 'success'
				});
				
				// 1.5秒后返回订单列表页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-review-page {
		background: linear-gradient(180deg, #FFBF60 0%, #FFF5E6 20%, #FFFFFF 50%);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx;
	}
	
	.companion-info-card {
		padding: 30rpx;
		margin-bottom: 20rpx;
		background-color: transparent;
		
		.profile-header {
			display: flex;
			align-items: center;
		}
		
		.companion-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
			border: 2rpx solid #FFFFFF;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.companion-detail {
			flex: 1;
			
			.companion-name {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				
				.gender-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
				
				.companion-tag {
					background-color: #FF9500;
					color: #FFFFFF;
					font-size: 20rpx;
					padding: 4rpx 10rpx;
					border-radius: 20rpx;
					margin-left: 16rpx;
				}
			}
		}
	}
	
	.review-content {
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 16rpx 16rpx 0 0;
		margin-top: 20rpx;
		
		.review-item {
			margin-bottom: 40rpx;
			
			.review-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
				font-weight: bold;
			}
			
			.review-stars {
				display: flex;
				align-items: center;
			}
			
			.review-textarea-box {
				position: relative;
				
				.review-textarea {
					width: 100%;
					height: 200rpx;
					background-color: #F7F7F7;
					border-radius: 12rpx;
					padding: 20rpx;
					font-size: 28rpx;
					color: #666;
					box-sizing: border-box;
				}
				
				.word-count {
					position: absolute;
					bottom: 10rpx;
					right: 20rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.review-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.submit-btn {
			background-color: #FFAA48;
			color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			box-shadow: 0 4rpx 8rpx rgba(255, 170, 72, 0.3);
		}
	}
</style>