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

<template>
	<view class="companion-select-page">
		<!-- 顶部警告提示 -->
		<view class="warning-tip">
			<view class="warning-icon">
				<uni-icons type="info" size="16" color="#A94F20"></uni-icons>
			</view>
			<view class="warning-text">
				<text>相距距离仅供参考！伴宠师位置可能不是实时位置，请提前10天下单！</text>
			</view>
		</view>
		
		<!-- 伴宠师列表 -->
		<scroll-view scroll-y class="companion-scroll">
			<view class="companion-list">
				<view 
					class="companion-item" 
					v-for="(item, index) in companionList" 
					:key="index" 
					@click="selectCompanion(item)"
					:class="{'selected': selectedCompanionId === item.id}"
				>
					<!-- 左侧选中标记 -->
					<view class="select-icon">
						<view class="radio-circle" :class="{'checked': selectedCompanionId === item.id}">
							<view class="radio-inner" v-if="selectedCompanionId === item.id"></view>
						</view>
					</view>
					
					<!-- 伴宠师卡片内容 -->
					<view class="companion-card">
						<!-- 头像和基本信息 -->
						<view class="card-header">
							<view class="companion-avatar">
								<image :src="item.avatar" mode="aspectFill"></image>
								<image v-if="item.verified" class="verified-icon" src="/static/images/details/verified.svg"></image>
							</view>
							<view class="companion-basic-info">
								<view class="companion-name-row">
									<text class="companion-name">{{item.name}}</text>
									<image :src="item.gender === '男生' ? '/static/images/details/boy.svg' : '/static/images/details/girl.svg'" class="gender-icon"></image>
								</view>
								<view class="companion-rating">
									<text class="client-rating">客户点赞: {{item.likes}}</text>
									<image src="/static/images/details/like.svg" class="like-icon"></image>
								</view>
								<view class="companion-distance">
									<text>距离您: {{item.distance}} km</text>
								</view>
							</view>
						</view>
						
						<!-- 描述信息 -->
						<view class="companion-desc">
							<text>{{item.description || '简介：有一只3岁金猫-忽悠，热爱小宠物...'}}</text>
						</view>
						
						<!-- 伴宠师经验描述 -->
						<view class="companion-experience">
							<text>{{item.experience}}</text>
						</view>
						
						<!-- 查看详情按钮 -->
						<view class="view-detail-btn" @click.stop="viewCompanionDetail(item.id)">
							<text>查看详情</text>
						</view>
					</view>
				</view>
				
				<!-- 无数据提示 -->
				<view class="no-data" v-if="companionList.length === 0">
					<image src="/static/images/personal/no-data.png" mode="aspectFit"></image>
					<text>暂无伴宠师数据</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮 -->
		<view class="footer-buttons">
			<view class="cancel-btn" @click="cancel">
				<text>取消</text>
			</view>
			<view class="confirm-btn" @click="confirm">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				companionList: [
					{
						id: '1',
						name: '宠物宝贝',
						gender: '男生',
						avatar: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/QR_Code.png',
						verified: true,
						rating: 5.0,
						likes: 5601,
						distance: 10.8,
						description: '简介：有一只3岁金猫-忽悠，热爱小宠物...',
						experience: '养宠4年 | 评价11条 | 服务小结13份'
					},
					{
						id: '2',
						name: '宠物宝贝',
						gender: '女生',
						avatar: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/details/QR_Code.png',
						verified: true,
						rating: 5.0,
						likes: 5601,
						distance: 10.8,
						description: '简介：有一只3岁金猫-忽悠，热爱小宠物...',
						experience: '养宠4年 | 评价11条 | 服务小结13份'
					}
				],
				selectedCompanionId: '',
			};
		},
		computed: {
			// 获取当前选中的伴宠师
			selectedCompanion() {
				if (!this.selectedCompanionId) return null;
				return this.companionList.find(item => item.id === this.selectedCompanionId);
			}
		},
		onLoad(options) {
			// 获取选择过的伴宠师列表
			this.getServicedCompanions();
		},
		methods: {
			// 获取服务过的伴宠师
			getServicedCompanions() {
				// 实际项目中应调用API获取服务过的伴宠师列表
				// 示例代码：
				/*
				getServicedCompanions().then(res => {
					if (res && res.code === 200) {
						this.companionList = res.data || [];
					}
				}).catch(err => {
					console.error('获取服务过的伴宠师失败', err);
				});
				*/
				
				// 使用模拟数据
				console.log('获取服务过的伴宠师列表');
			},
			
			// 选择伴宠师
			selectCompanion(companion) {
				this.selectedCompanionId = companion.id;
			},
			
			// 取消选择
			cancel() {
				uni.navigateBack();
			},
			
			// 确认选择
			confirm() {
				if (!this.selectedCompanionId) {
					uni.showToast({
						title: '请选择伴宠师',
						icon: 'none'
					});
					return;
				}
				
				// 将选择的伴宠师信息返回给上一页
				// 实际项目中应根据需求处理
				// 示例代码：
				/*
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				prevPage.$vm.setSelectedCompanion(this.selectedCompanion);
				*/
				
				uni.navigateBack();
			},
			
			// 查看伴宠师详情
			viewCompanionDetail(companionId) {
				// 跳转到伴宠师详情页面
				uni.navigateTo({
					url: `/pages/companionPetList/companionPetInfo?id=${companionId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.companion-select-page {
		background-color: #F5F5F5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx;
	}
	
	
	.warning-tip {
		background-color: #FFF4E5;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
        margin: 20rpx;
		
		.warning-icon {
			margin-right: 10rpx;
		}
		
		.warning-text {
			flex: 1;
			font-size: 24rpx;
			color: #A94F20;
			line-height: 1.4;
		}
	}
	
	.companion-scroll {
		flex: 1;
		height: calc(100vh - 250rpx);
	}
	
	.companion-list {
		padding: 20rpx;
	}
	
	.companion-item {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        border: 2rpx solid #fff;
		
		.select-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.radio-circle {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #DDDDDD;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.checked {
					border-color: #FFAA48;
				}
				
				.radio-inner {
					width: 18rpx;
					height: 18rpx;
					background-color: #FFAA48;
					border-radius: 50%;
				}
			}
		}
		
		&.selected {
			border: 2rpx solid #FFAA48;
		}
		
		.companion-card {
			flex: 1;
		}
		
		.card-header {
			display: flex;
			margin-bottom: 16rpx;
		}
		
		.companion-avatar {
			position: relative;
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			
			.verified-icon {
				position: absolute;
				right: -10rpx;
				bottom: -10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.companion-basic-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		
		.companion-name-row {
			display: flex;
			align-items: center;
			margin-bottom: 6rpx;
			
			.companion-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-right: 10rpx;
			}
			
			.gender-icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
		
		.companion-rating {
			display: flex;
			align-items: center;
			margin-bottom: 6rpx;
			
			.client-rating {
				font-size: 24rpx;
				color: #666;
				margin-right: 6rpx;
			}
			
			.like-icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
		
		.companion-distance {
			font-size: 24rpx;
			color: #999;
		}
		
		.companion-desc {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 16rpx;
			line-height: 1.4;
		}
		
		.companion-experience {
			font-size: 24rpx;
			color: #999;
			background-color: #FFF9E6;
			padding: 16rpx;
			border-radius: 8rpx;
			margin-bottom: 16rpx;
			color: #be721b;
            text-align: center;
		}
		
		.view-detail-btn {
			align-self: flex-end;
			background-color: #FFAA48;
			color: #FFFFFF;
			font-size: 26rpx;
			padding: 12rpx 30rpx;
			border-radius: 30rpx;
			text-align: center;
            width: fit-content;
            margin-left: auto;
		}
	}
	
	.no-data {
		text-align: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.footer-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.cancel-btn, .confirm-btn {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			font-size: 30rpx;
		}
		
		.cancel-btn {
			background-color: #FFFFFF;
			color: #666;
			border: 1px solid #DDDDDD;
			margin-right: 20rpx;
		}
		
		.confirm-btn {
			background-color: #FFAA48;
			color: #FFFFFF;
			box-shadow: 0 4rpx 8rpx rgba(255, 170, 72, 0.3);
		}
	}
</style>