Browse Source

feat(companion-select): 将伴宠师选择从多选改为单选并优化交互

- 修改伴宠师选择逻辑为单选模式
- 添加查看详情按钮及对应交互
- 移除不再使用的宠物数据组装代码
- 更新相关提示文案
master
前端-胡立永 3 weeks ago
parent
commit
b478a4d866
3 changed files with 73 additions and 57 deletions
  1. +13
    -2
      components/CompanionItem/CompanionItem.vue
  2. +15
    -15
      pages_order/components/order/CompanionSelectPopup.vue
  3. +45
    -40
      pages_order/order/companionSelect.vue

+ 13
- 2
components/CompanionItem/CompanionItem.vue View File

@ -41,9 +41,12 @@
</view> </view>
</view> </view>
<view> <view>
<view class="personal-item-bottom">
<view class="personal-item-bottom" v-if="showNumerBtn">
<text class="personal-item-bottom-text">养宠{{ item.experience || 0 }} | 评价{{ item.commentNum || 0 }} | 服务小结{{ item.serviceSummaryNum || 0 }}</text> <text class="personal-item-bottom-text">养宠{{ item.experience || 0 }} | 评价{{ item.commentNum || 0 }} | 服务小结{{ item.serviceSummaryNum || 0 }}</text>
</view> </view>
<view class="personal-item-bottom" v-else-if="showDetailBtn">
<text class="personal-item-bottom-text">点击查看详情</text>
</view>
</view> </view>
</uni-card> </uni-card>
</uni-row> </uni-row>
@ -56,7 +59,15 @@ export default {
item: { item: {
type: Object, type: Object,
required: true required: true
}
},
showDetailBtn: {
type: Boolean,
default: false
},
showNumerBtn: {
type: Boolean,
default: true
},
}, },
data() { data() {
return { return {


+ 15
- 15
pages_order/components/order/CompanionSelectPopup.vue View File

@ -209,22 +209,22 @@ export default {
} }
// //
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: "预定"
}));
// 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,
};
});
}
// return {
// ...pet,
// checked: ['checked'], //
// selectedDate,
// };
// });
// }
uni.hideLoading(); uni.hideLoading();
}, },


+ 45
- 40
pages_order/order/companionSelect.vue View File

@ -6,7 +6,7 @@
<uni-icons type="info" size="16" color="#A94F20"></uni-icons> <uni-icons type="info" size="16" color="#A94F20"></uni-icons>
</view> </view>
<view class="warning-text"> <view class="warning-text">
<text>指定之前服务过的伴宠师需要额外收10元哦可多最终由系统根据伴宠师的接单时间安排为您安排您喜欢的伴宠师</text>
<text>指定之前服务过的伴宠师需要额外收10元哦最终由系统根据伴宠师的接单时间安排为您安排您喜欢的伴宠师</text>
</view> </view>
</view> </view>
@ -14,17 +14,22 @@
<scroll-view scroll-y class="companion-scroll"> <scroll-view scroll-y class="companion-scroll">
<view class="companion-list"> <view class="companion-list">
<view v-for="(item, index) in companionList" :key="index" class="companion-wrapper" <view v-for="(item, index) in companionList" :key="index" class="companion-wrapper"
:class="{ 'selected': selectedCompanionIds.includes(item.userId) }">
:class="{ 'selected': selectedCompanionId === item.userId }">
<!-- 左侧选中标记 --> <!-- 左侧选中标记 -->
<view class="select-icon" @click="selectCompanion(item)"> <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 class="checkbox-circle" :class="{ 'checked': selectedCompanionId === item.userId }">
<view class="checkbox-inner" v-if="selectedCompanionId === item.userId"></view>
</view> </view>
</view> </view>
<!-- 使用CompanionItem组件 --> <!-- 使用CompanionItem组件 -->
<view class="companion-item-wrapper"> <view class="companion-item-wrapper">
<companion-item :item="item" @click="handleItemClick" @like="handleItemLike">
<companion-item
:item="item"
@click="handleItemClick"
:showDetailBtn="true"
:showNumerBtn="false"
@like="handleItemLike">
</companion-item> </companion-item>
</view> </view>
</view> </view>
@ -43,7 +48,7 @@
<text>取消</text> <text>取消</text>
</view> </view>
<view class="confirm-btn" @click="confirm"> <view class="confirm-btn" @click="confirm">
<text>确定{{ selectedCompanionIds.length > 0 ? `(${selectedCompanionIds.length})` : '' }}</text>
<text>确定{{ selectedCompanionId ? '(1)' : '' }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -66,7 +71,7 @@ export default {
data() { data() {
return { return {
companionList: [], companionList: [],
selectedCompanionIds: [],
selectedCompanionId: null, //
defaultTeacherId: null, // ID defaultTeacherId: null, // ID
originalOrderData: null, // originalOrderData: null, //
orderId: null, // ID orderId: null, // ID
@ -74,10 +79,10 @@ export default {
}, },
computed: { computed: {
...mapState(['teacherLevelList']), ...mapState(['teacherLevelList']),
//
selectedCompanions() {
if (this.selectedCompanionIds.length === 0) return [];
return this.companionList.filter(item => this.selectedCompanionIds.includes(item.userId));
//
selectedCompanion() {
if (!this.selectedCompanionId) return null;
return this.companionList.find(item => item.userId === this.selectedCompanionId);
} }
}, },
onLoad(options) { onLoad(options) {
@ -110,8 +115,8 @@ export default {
// ID // ID
if (this.defaultTeacherId) { if (this.defaultTeacherId) {
const defaultCompanion = this.companionList.find(item => item.userId == this.defaultTeacherId); const defaultCompanion = this.companionList.find(item => item.userId == this.defaultTeacherId);
if (defaultCompanion && !this.selectedCompanionIds.includes(this.defaultTeacherId)) {
this.selectedCompanionIds.push(this.defaultTeacherId);
if (defaultCompanion) {
this.selectedCompanionId = this.defaultTeacherId;
} }
} }
} }
@ -143,24 +148,24 @@ export default {
} }
}, },
//
//
selectCompanion(companion) { selectCompanion(companion) {
const userId = companion.userId; const userId = companion.userId;
const index = this.selectedCompanionIds.indexOf(userId);
if (index > -1) {
if (this.selectedCompanionId === userId) {
// //
this.selectedCompanionIds.splice(index, 1);
this.selectedCompanionId = null;
} else { } else {
//
this.selectedCompanionIds.push(userId);
//
this.selectedCompanionId = userId;
} }
}, },
// //
handleItemClick(item) { handleItemClick(item) {
//
this.selectCompanion(item);
uni.navigateTo({
url: '/pages_order/companionPetList/companionPetInfo?id=' + item.userId
})
}, },
// //
@ -176,9 +181,9 @@ export default {
// //
confirm() { confirm() {
if (this.selectedCompanionIds.length === 0) {
if (!this.selectedCompanionId) {
uni.showToast({ uni.showToast({
title: '请至少选择一个伴宠师',
title: '请选择一个伴宠师',
icon: 'none' icon: 'none'
}); });
return; return;
@ -249,22 +254,22 @@ export default {
} }
// //
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,
};
});
}
// 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({ uni.navigateTo({
url: `/pages/newOrder/serviceNew` url: `/pages/newOrder/serviceNew`


Loading…
Cancel
Save