Browse Source
feat(订单): 实现再来一单功能并优化伴宠师选择流程
新增再来一单功能，支持从历史订单重新下单并保留原订单数据。重构伴宠师选择组件为独立组件，优化多选交互体验。添加10元再来一单费用计算逻辑，完善订单修改流程。 主要变更： 1. 新增CompanionItem组件统一伴宠师展示样式 2. 实现订单数据保留和定位信息处理 3. 添加再来一单费用计算和显示 4. 优化伴宠师多选交互和默认选中逻辑 5. 完善订单状态判断和服务记录查看条件master
13 changed files with 1017 additions and 608 deletions
Split View
Diff Options
-
+1 -0.trae/rules/project_rules.md
-
+13 -1api/order/order.js
-
+176 -0components/CompanionItem/CompanionItem.vue
-
+1 -1pages.json
-
+18 -4pages/newOrder/confirmOrder.vue
-
+94 -2pages/newOrder/serviceNew2.vue
-
+18 -156pages_order/companionPetList/companionPetList.vue
-
+275 -10pages_order/components/order/CompanionSelectPopup.vue
-
+408 -426pages_order/order/companionSelect.vue
-
+3 -3pages_order/order/orderDetail.vue
-
+6 -5pages_order/order/orderList.vue
-
+2 -0pages_order/order/orderModify.vue
-
+2 -0store/index.js
+ 1
- 0
.trae/rules/project_rules.md
View File
| @ -0,0 +1 @@ | |||
| 当前项目是uniapp开发微信小程序，请你写出来的代码要符合微信小程序的规范，并且需要后期能够方便的进行维护扩展，方便uniapp转其他平台的开发 | |||
+ 13
- 1
api/order/order.js
View File
+ 176
- 0
components/CompanionItem/CompanionItem.vue
View File
| @ -0,0 +1,176 @@ | |||
| <template> | |||
| <uni-row :span="12"> | |||
| <uni-card :is-shadow="false" padding=0 margin="6rpx 20rpx" @click="handleClick"> | |||
| <view class="personal-list-item"> | |||
| <view class="personal-info"> | |||
| <view> | |||
| <image class="people-img" slot='cover' :src="item.userImage"></image> | |||
| </view> | |||
| <view class="personal-info-1"> | |||
| <view class="personal-info-2"> | |||
| <view class="personal-info-title"> | |||
| <view class="personal-name"> | |||
| {{ item.userName || '匿名' }} | |||
| </view> | |||
| <view class="personal-sex"> | |||
| <img :src="item.appletUsersTeacher.sex == 0?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png': | |||
| 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex" | |||
| style="width: 20px;height: 20px;" /> | |||
| </view> | |||
| </view> | |||
| <view class="personal-star" @click.stop="handleLikeClick"> | |||
| <text style="color: #FFB13F;">点赞数{{ item.appletUsersTeacher.thumbsUp || 0 }}</text> | |||
| <uni-icons v-if="isLike" type="hand-up-filled" size="20" color="#FFB13F"></uni-icons> | |||
| <uni-icons v-else type="hand-up" size="20" color="#FFB13F"></uni-icons> | |||
| </view> | |||
| </view> | |||
| <view class="personal-info-3" style="width: 100%;"> | |||
| <view class="ellipsis" v-if="item.distanceText"> | |||
| 距离{{ item.distanceText }}km | |||
| </view> | |||
| <view class="ellipsis" v-else> | |||
| {{ '<' }}1km | |||
| </view> | |||
| </view> | |||
| <view class="personal-info-4" style="width: 100%;"> | |||
| <view class="ellipsis" style="max-width: 225px;"> | |||
| 简介：{{ item.appletUsersTeacher.userBrief || '暂无' }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view> | |||
| <view class="personal-item-bottom"> | |||
| <text class="personal-item-bottom-text">养宠{{ item.experience || 0 }}年 | 评价{{ item.commentNum || 0 }}条 | 服务小结{{ item.serviceSummaryNum || 0 }}份</text> | |||
| </view> | |||
| </view> | |||
| </uni-card> | |||
| </uni-row> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: 'CompanionItem', | |||
| props: { | |||
| item: { | |||
| type: Object, | |||
| required: true | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| isLike: false | |||
| } | |||
| }, | |||
| methods: { | |||
| // 处理点击事件 | |||
| handleClick() { | |||
| this.$emit('click', this.item) | |||
| }, | |||
| // 处理点赞点击事件 | |||
| handleLikeClick() { | |||
| this.isLike = !this.isLike | |||
| this.$emit('like', this.item) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .personal-list-item { | |||
| padding: 10px 0px 0px 0; | |||
| .personal-info { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: flex-start; | |||
| .people-img { | |||
| width: 168rpx; | |||
| height: 168rpx; | |||
| border: #FEA714 5rpx solid; | |||
| border-radius: 20rpx; | |||
| } | |||
| .personal-info-1 { | |||
| margin-left: 10px; | |||
| width: 100%; | |||
| .personal-info-2 { | |||
| display: flex; | |||
| .personal-info-title { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| width: 60%; | |||
| } | |||
| .personal-name { | |||
| color: #333; | |||
| font-size: 28rpx; | |||
| margin-right: 10rpx; | |||
| font-weight: 900; | |||
| font-style: normal; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| white-space: nowrap; | |||
| max-width: 200rpx; | |||
| } | |||
| .personal-star { | |||
| color: #FFAA48; | |||
| font-size: 24rpx; | |||
| font-weight: 400; | |||
| line-height: 32rpx; | |||
| flex-shrink: 0; | |||
| margin-left: auto; | |||
| } | |||
| } | |||
| .personal-info-3 { | |||
| display: flex; | |||
| align-items: baseline; | |||
| font-size: 28rpx; | |||
| line-height: 32rpx; | |||
| margin-top: 5px; | |||
| color: #FFAA48; | |||
| font-weight: 900; | |||
| } | |||
| .personal-info-4 { | |||
| display: flex; | |||
| align-items: baseline; | |||
| font-size: 24rpx; | |||
| margin-top: 10px; | |||
| color: #7D8196; | |||
| font-weight: 400; | |||
| line-height: 32rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .personal-item-bottom { | |||
| height: 60rpx; | |||
| background-color: #FFF4E5; | |||
| margin: 20rpx 0 20rpx 0; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| border-radius: 8rpx; | |||
| .personal-item-bottom-text { | |||
| color: #A94F20; | |||
| margin: 14rpx; | |||
| font-size: 24rpx; | |||
| font-weight: 400; | |||
| } | |||
| } | |||
| .ellipsis { | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| white-space: nowrap; | |||
| } | |||
| </style> | |||
+ 1
- 1
pages.json
View File
+ 18
- 4
pages/newOrder/confirmOrder.vue
View File
+ 94
- 2
pages/newOrder/serviceNew2.vue
View File
+ 18
- 156
pages_order/companionPetList/companionPetList.vue
View File
+ 275
- 10
pages_order/components/order/CompanionSelectPopup.vue
View File
+ 408
- 426
pages_order/order/companionSelect.vue
View File
| @ -1,434 +1,416 @@ | |||
| <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> | |||
| <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 v-for="(item, index) in companionList" :key="index" class="companion-wrapper" | |||
| :class="{ 'selected': selectedCompanionIds.includes(item.userId) }"> | |||
| <!-- 左侧选中标记 --> | |||
| <view class="select-icon" @click="selectCompanion(item)"> | |||
| <view class="checkbox-circle" :class="{ 'checked': selectedCompanionIds.includes(item.userId) }"> | |||
| <view class="checkbox-inner" v-if="selectedCompanionIds.includes(item.userId)"></view> | |||
| </view> | |||
| </view> | |||
| <!-- 使用CompanionItem组件 --> | |||
| <view class="companion-item-wrapper"> | |||
| <companion-item :item="item" @click="handleItemClick" @like="handleItemLike"> | |||
| </companion-item> | |||
| </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>确定{{ selectedCompanionIds.length > 0 ? `(${selectedCompanionIds.length})` : '' }}</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_order/companionPetList/companionPetInfo?id=${companionId}` | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| import CompanionItem from '@/components/CompanionItem/CompanionItem.vue' | |||
| import { getTecByUser, getOrderDetail, getTeacherDetail } from '@/api/order/order.js' | |||
| import { getOpenIdKey } from '@/utils/auth' | |||
| import { getAddressDetails } from '@/api/system/address.js' | |||
| import { mapState } from 'vuex' | |||
| import positionMixin from '@/mixins/position' | |||
| export default { | |||
| mixins: [positionMixin], | |||
| components: { | |||
| CompanionItem | |||
| }, | |||
| data() { | |||
| return { | |||
| companionList: [], | |||
| selectedCompanionIds: [], | |||
| defaultTeacherId: null, // 默认选中的技师ID（用于再来一单） | |||
| originalOrderData: null, // 原始订单数据 | |||
| orderId: null, // 订单ID | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState(['teacherLevelList']), | |||
| // 获取当前选中的伴宠师列表 | |||
| selectedCompanions() { | |||
| if (this.selectedCompanionIds.length === 0) return []; | |||
| return this.companionList.filter(item => this.selectedCompanionIds.includes(item.userId)); | |||
| } | |||
| }, | |||
| onLoad(options) { | |||
| // 获取传递的技师ID（用于再来一单时默认选中） | |||
| if (options.teacherId) { | |||
| this.defaultTeacherId = options.teacherId; | |||
| } | |||
| // 获取订单ID（用于再来一单时获取订单详情） | |||
| if (options.orderId) { | |||
| this.orderId = options.orderId; | |||
| this.loadOrderData(); | |||
| } | |||
| // 获取选择过的伴宠师列表 | |||
| this.getServicedCompanions(); | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.getServicedCompanions() | |||
| }, | |||
| methods: { | |||
| // 获取服务过的伴宠师 | |||
| getServicedCompanions() { | |||
| console.log(getOpenIdKey()) | |||
| getTecByUser({ | |||
| openId: getOpenIdKey() | |||
| }).then(res => { | |||
| uni.stopPullDownRefresh() | |||
| if (res && res.code == 200) { | |||
| this.companionList = res.data || []; | |||
| // 如果有默认技师ID，自动选中该技师 | |||
| if (this.defaultTeacherId) { | |||
| const defaultCompanion = this.companionList.find(item => item.userId == this.defaultTeacherId); | |||
| if (defaultCompanion && !this.selectedCompanionIds.includes(this.defaultTeacherId)) { | |||
| this.selectedCompanionIds.push(this.defaultTeacherId); | |||
| } | |||
| } | |||
| } | |||
| }).catch(err => { | |||
| uni.stopPullDownRefresh() | |||
| console.error('获取服务过的伴宠师失败', err); | |||
| }); | |||
| }, | |||
| // 加载订单数据 | |||
| async loadOrderData() { | |||
| if (!this.orderId) return; | |||
| const params = { | |||
| openId: getOpenIdKey(), | |||
| orderId: this.orderId | |||
| }; | |||
| try { | |||
| const res = await getOrderDetail(params); | |||
| if (res) { | |||
| this.originalOrderData = res; | |||
| } else { | |||
| console.error('获取订单详情失败'); | |||
| } | |||
| } catch (error) { | |||
| console.error('获取订单数据失败', error); | |||
| } | |||
| }, | |||
| // 选择伴宠师（多选） | |||
| selectCompanion(companion) { | |||
| const userId = companion.userId; | |||
| const index = this.selectedCompanionIds.indexOf(userId); | |||
| if (index > -1) { | |||
| // 如果已选中，则取消选中 | |||
| this.selectedCompanionIds.splice(index, 1); | |||
| } else { | |||
| // 如果未选中，则添加到选中列表 | |||
| this.selectedCompanionIds.push(userId); | |||
| } | |||
| }, | |||
| // 处理伴宠师列表项点击事件 | |||
| handleItemClick(item) { | |||
| // 点击伴宠师项时选中该伴宠师 | |||
| this.selectCompanion(item); | |||
| }, | |||
| // 处理伴宠师列表项点赞事件 | |||
| handleItemLike(item) { | |||
| // 这里可以添加点赞的业务逻辑 | |||
| console.log('点赞伴宠师:', item); | |||
| }, | |||
| // 取消选择 | |||
| cancel() { | |||
| uni.navigateBack(); | |||
| }, | |||
| // 确认选择 | |||
| confirm() { | |||
| if (this.selectedCompanionIds.length === 0) { | |||
| uni.showToast({ | |||
| title: '请至少选择一个伴宠师', | |||
| icon: 'none' | |||
| }); | |||
| return; | |||
| } | |||
| this.submit() | |||
| }, | |||
| async submit() { | |||
| let order = this.originalOrderData | |||
| this.$globalData.newOrderData.originalOrderData = order | |||
| this.$globalData.newOrderData.moreOrderPrice = 10 | |||
| // 验证地址是否存在 | |||
| if (order.addressId) { | |||
| try { | |||
| const addressRes = await getAddressDetails(order.addressId); | |||
| if (addressRes && addressRes.id) { | |||
| // 地址存在，设置地址信息 | |||
| this.$globalData.newOrderData.currentAddress = { | |||
| id: order.addressId, | |||
| name: order.receiverName, | |||
| phone: order.receiverPhone, | |||
| province: order.receiverProvince, | |||
| city: order.receiverCity, | |||
| district: order.receiverDistrict, | |||
| detailAddress: order.receiverDetailAddress, | |||
| latitude: order.latitude, | |||
| longitude: order.longitude, | |||
| } | |||
| } else { | |||
| // 地址不存在，不设置地址信息 | |||
| console.log('地址不存在，addressId:', order.addressId); | |||
| this.$globalData.newOrderData.currentAddress = {}; | |||
| } | |||
| } catch (error) { | |||
| console.error('验证地址失败:', error); | |||
| // 验证失败时也不设置地址信息 | |||
| this.$globalData.newOrderData.currentAddress = {}; | |||
| } | |||
| } else { | |||
| // 没有地址ID，不设置地址信息 | |||
| this.$globalData.newOrderData.currentAddress = {}; | |||
| } | |||
| if (order.teacherId) { | |||
| getTeacherDetail({ | |||
| userId: order.teacherId | |||
| }).then(response => { | |||
| if (response) { | |||
| let companionInfo = response | |||
| companionInfo.distanceText = this.calculateDistanceAddress(response.appletAddresseList) | |||
| this.buyInfo.teacher = companionInfo | |||
| } | |||
| }) | |||
| } | |||
| if (order.companionLevel) { | |||
| this.$globalData.newOrderData.companionLevel = | |||
| this.teacherLevelList.find(item => item.paramValueNum == order.companionLevel); | |||
| } | |||
| // 处理提前熟悉相关数据 | |||
| if (order.needPreFamiliarize) { | |||
| this.$globalData.newOrderData.needPreFamiliarize = ['是否提前熟悉'] | |||
| } | |||
| // 组装宠物数据 | |||
| if (order.petVOList && order.petVOList.length > 0) { | |||
| this.$globalData.newOrderData.currentPets = order.petVOList.map(pet => { | |||
| // 获取该宠物的服务日期 | |||
| const petServices = order.orderServiceList.filter(service => service.petId === pet.id); | |||
| const selectedDate = petServices.map(service => ({ | |||
| date: service.serviceDate, | |||
| info: "预定" | |||
| })); | |||
| return { | |||
| ...pet, | |||
| checked: ['checked'], // 默认选中 | |||
| selectedDate, | |||
| }; | |||
| }); | |||
| } | |||
| uni.navigateTo({ | |||
| url: `/pages/newOrder/serviceNew` | |||
| }); | |||
| }, | |||
| // 查看伴宠师详情 | |||
| viewCompanionDetail(companionId) { | |||
| // 跳转到伴宠师详情页面 | |||
| uni.navigateTo({ | |||
| url: `/pages_order/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); | |||
| } | |||
| } | |||
| .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: 10rpx; | |||
| padding-right: 0; | |||
| } | |||
| .companion-wrapper { | |||
| display: flex; | |||
| align-items: flex-start; | |||
| margin-bottom: 20rpx; | |||
| border-radius: 16rpx; | |||
| padding: 10rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| .select-icon { | |||
| margin-right: 10rpx; | |||
| .checkbox-circle { | |||
| width: 45rpx; | |||
| height: 45rpx; | |||
| border: 2rpx solid #DDDDDD; | |||
| background-color: #fff; | |||
| border-radius: 50%; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| &.checked { | |||
| border-color: #FFAA48; | |||
| background-color: #FFAA48; | |||
| } | |||
| .checkbox-inner { | |||
| width: 16rpx; | |||
| height: 10rpx; | |||
| border: 2rpx solid #FFFFFF; | |||
| border-top: none; | |||
| border-right: none; | |||
| transform: rotate(-45deg); | |||
| margin-top: -4rpx; | |||
| } | |||
| } | |||
| } | |||
| .companion-item-wrapper { | |||
| flex: 1; | |||
| } | |||
| } | |||
| .no-data { | |||
| text-align: center; | |||
| 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> | |||