You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
9.4 KiB
434 lines
9.4 KiB
<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>
|