|
|
|
@ -9,13 +9,13 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 订单列表 --> |
|
|
|
<scroll-view scroll-y class="order-list-scroll" @scrolltolower="loadMore" @refresherrefresh="refresh" |
|
|
|
:refresher-enabled="true" :refresher-triggered="refreshing"> |
|
|
|
<!-- <scroll-view scroll-y class="order-list-scroll" @scrolltolower="loadMore" @refresherrefresh="refresh" |
|
|
|
:refresher-enabled="true" :refresher-triggered="refreshing"> --> |
|
|
|
<view class="order-list"> |
|
|
|
<!-- 订单卡片 --> |
|
|
|
<view class="order-card" v-for="(order, index) in orderList" :key="index"> |
|
|
|
<view class="order-header"> |
|
|
|
<text>{{ tabs[order.status + 1].name }}</text> |
|
|
|
<text>{{ getOrderStatusText(order.status) }}</text> |
|
|
|
<view class="order-status"> |
|
|
|
<text v-if="order.teacherId">指定伴宠师下单</text> |
|
|
|
<text v-else>系统下单</text> |
|
|
|
@ -45,7 +45,8 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<text class="pet-service"> |
|
|
|
{{ handleText(pet.productNameText) }} | 共{{ pet.orderServiceText.length }}天 {{ handleText(pet.orderServiceText) }}</text> |
|
|
|
{{ handleText(pet.productNameText) }} | 共{{ pet.orderServiceText.length }}天 |
|
|
|
{{ handleText(pet.orderServiceText) }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -100,15 +101,15 @@ |
|
|
|
<image src="/static/images/personal/no-data.png" mode="aspectFit" class="no-data-image"></image> |
|
|
|
<text>暂无订单</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 首次加载状态 --> |
|
|
|
<view class="initial-loading" v-if="orderList.length === 0 && loading"> |
|
|
|
<view class="loading-spinner large"></view> |
|
|
|
<text>正在加载订单...</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<!-- </scroll-view> --> |
|
|
|
|
|
|
|
<!-- 全屏加载遮罩 (仅首次加载显示) --> |
|
|
|
<!-- <view class="loading-overlay" v-if="loading && page === 1 && orderList.length === 0 && isFirstLoad"> |
|
|
|
<view class="loading-content"> |
|
|
|
@ -125,7 +126,7 @@ |
|
|
|
|
|
|
|
<!-- 伴宠师选择弹窗 --> |
|
|
|
<companion-select-popup ref="companionSelectPopup" /> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 支付加载遮罩 --> |
|
|
|
<view class="loading-overlay" v-if="isPaying"> |
|
|
|
<view class="loading-content"> |
|
|
|
@ -150,7 +151,10 @@ |
|
|
|
} from '@/utils/auth' |
|
|
|
import CancelOrderPopup from '@/pages_order/components/order/CancelOrderPopup.vue' |
|
|
|
import CompanionSelectPopup from '@/pages_order/components/order/CompanionSelectPopup.vue' |
|
|
|
import { getOrderServiceText, getProductNameText } from '@/utils/serviceTime.js' |
|
|
|
import { |
|
|
|
getOrderServiceText, |
|
|
|
getProductNameText |
|
|
|
} from '@/utils/serviceTime.js' |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
Kefu, |
|
|
|
@ -168,13 +172,17 @@ |
|
|
|
value: 0 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '已接单', |
|
|
|
name: '待接单', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '服务中', |
|
|
|
name: '已接单', |
|
|
|
value: 2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '服务中', |
|
|
|
value: 3 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '已完成', |
|
|
|
value: 3 |
|
|
|
@ -188,60 +196,75 @@ |
|
|
|
loading: false, |
|
|
|
refreshing: false, |
|
|
|
currentOrder: null, |
|
|
|
isPaying : false, |
|
|
|
isPaying: false, |
|
|
|
requestId: 0, // 请求标识，确保只处理最后一个请求 |
|
|
|
switchTabTimer: null, // 切换标签防抖定时器 |
|
|
|
loadMoreTimer: null, // 加载更多防抖定时器 |
|
|
|
isFirstLoad: true, // 是否首次加载 |
|
|
|
// 示例数据，实际应从API获取 |
|
|
|
exampleData: [{ |
|
|
|
id: '1', |
|
|
|
status: '0', |
|
|
|
statusText: '待付款', |
|
|
|
amount: '264', |
|
|
|
pets: [{ |
|
|
|
name: '小咪', |
|
|
|
avatar: '/static/images/personal/pet.png', |
|
|
|
tag: '猫', |
|
|
|
gender: '女生', |
|
|
|
serviceTime: '专业喂养2天: 03-20,03-22' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '小汪', |
|
|
|
avatar: '/static/images/personal/pet.png', |
|
|
|
tag: '狗', |
|
|
|
gender: '男生', |
|
|
|
serviceTime: '专业喂养2天: 03-20,03-22' |
|
|
|
} |
|
|
|
], |
|
|
|
orderTime: '2025-12-14 18:23:06', |
|
|
|
companionName: '张三', |
|
|
|
companionNote: '伴宠师名称暂不可见' |
|
|
|
}] |
|
|
|
}; |
|
|
|
} |
|
|
|
}, |
|
|
|
onPullDownRefresh() { |
|
|
|
this.refreshing() |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
this.loadMore() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 切换标签 |
|
|
|
switchTab(tabValue) { |
|
|
|
if (this.currentTab === tabValue) return; // 如果是相同标签，不重复请求 |
|
|
|
|
|
|
|
|
|
|
|
this.currentTab = tabValue; |
|
|
|
this.orderList = []; |
|
|
|
this.page = 1; |
|
|
|
this.hasMore = true; |
|
|
|
this.isFirstLoad = false; // 标记为非首次加载 |
|
|
|
|
|
|
|
|
|
|
|
// 清除之前的定时器 |
|
|
|
if (this.switchTabTimer) { |
|
|
|
clearTimeout(this.switchTabTimer); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 添加防抖，避免快速点击 |
|
|
|
this.switchTabTimer = setTimeout(() => { |
|
|
|
this.getOrderList(); |
|
|
|
}, 100); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getOrderStatusText(status) { |
|
|
|
// switch (status) { |
|
|
|
// case 0: |
|
|
|
// return '待付款'; |
|
|
|
// case 1: |
|
|
|
// return '待派单'; |
|
|
|
// case 2: |
|
|
|
// return '已派单'; |
|
|
|
// case 3: |
|
|
|
// return '已完成'; |
|
|
|
// case 4: |
|
|
|
// return '已关闭'; |
|
|
|
// case 5: |
|
|
|
// return '无效订单'; |
|
|
|
// } |
|
|
|
switch (status) { |
|
|
|
case 0: |
|
|
|
return '待付款'; |
|
|
|
case 1: |
|
|
|
return '待接单'; |
|
|
|
case 2: |
|
|
|
return '已接单'; |
|
|
|
case 3: |
|
|
|
return '已完成'; |
|
|
|
case 4: |
|
|
|
return '已关闭'; |
|
|
|
case 5: |
|
|
|
return '无效订单'; |
|
|
|
case 11: |
|
|
|
return '服务中'; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 下拉刷新 |
|
|
|
refresh() { |
|
|
|
this.refreshing = true; |
|
|
|
@ -257,18 +280,18 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
handleCancelOrder() { |
|
|
|
this.refresh() |
|
|
|
this.refresh() |
|
|
|
}, |
|
|
|
|
|
|
|
// 加载更多 |
|
|
|
loadMore() { |
|
|
|
if (this.loading || !this.hasMore) return; |
|
|
|
|
|
|
|
|
|
|
|
// 添加防抖，避免快速滚动触发多次加载 |
|
|
|
if (this.loadMoreTimer) { |
|
|
|
clearTimeout(this.loadMoreTimer); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.loadMoreTimer = setTimeout(() => { |
|
|
|
this.page++; |
|
|
|
this.getOrderList(); |
|
|
|
@ -321,7 +344,10 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
// 去评价 |
|
|
|
goToReview({teacherId, orderId}) { |
|
|
|
goToReview({ |
|
|
|
teacherId, |
|
|
|
orderId |
|
|
|
}) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages_order/order/orderReview?id=${teacherId}&orderId=${orderId}` |
|
|
|
}); |
|
|
|
@ -331,7 +357,7 @@ |
|
|
|
getOrderList() { |
|
|
|
if (this.loading) return Promise.reject(); |
|
|
|
this.loading = true; |
|
|
|
|
|
|
|
|
|
|
|
// 生成新的请求ID，确保只处理最后一个请求 |
|
|
|
const currentRequestId = ++this.requestId; |
|
|
|
|
|
|
|
@ -339,32 +365,11 @@ |
|
|
|
const params = { |
|
|
|
status: this.currentTab, |
|
|
|
openId: getOpenIdKey(), |
|
|
|
pageNumber: this.page,//pageNumber |
|
|
|
pageNumber: this.page, //pageNumber |
|
|
|
pageSize: this.size |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 实际API调用 |
|
|
|
// return new Promise((resolve, reject) => { |
|
|
|
// // 模拟API调用，实际项目中应使用真实API |
|
|
|
// setTimeout(() => { |
|
|
|
// try { |
|
|
|
// // 模拟数据，实际应调用API |
|
|
|
// if (this.page === 1) { |
|
|
|
// this.orderList = [...this.exampleData]; |
|
|
|
// } else if (this.page < 3) { |
|
|
|
// this.orderList = [...this.orderList, ...this.exampleData]; |
|
|
|
// } else { |
|
|
|
// this.hasMore = false; |
|
|
|
// } |
|
|
|
// this.loading = false; |
|
|
|
// resolve(); |
|
|
|
// } catch (err) { |
|
|
|
// this.loading = false; |
|
|
|
// reject(err); |
|
|
|
// } |
|
|
|
// }, 500); |
|
|
|
// }); |
|
|
|
|
|
|
|
// 实际API调用应该是这样： |
|
|
|
return getOrderList(params).then(res => { |
|
|
|
// 检查是否是最后一个请求，如果不是则忽略结果 |
|
|
|
@ -372,7 +377,7 @@ |
|
|
|
console.log('忽略过期的请求结果'); |
|
|
|
return Promise.reject('过期的请求'); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (res.content) { |
|
|
|
const newList = res.content || []; |
|
|
|
if (this.page === 1) { |
|
|
|
@ -381,19 +386,22 @@ |
|
|
|
this.orderList = [...this.orderList, ...newList]; |
|
|
|
} |
|
|
|
this.hasMore = newList.length === this.size; |
|
|
|
|
|
|
|
|
|
|
|
this.orderList.forEach(item => { |
|
|
|
|
|
|
|
|
|
|
|
item.petVOList.forEach(pet => { |
|
|
|
|
|
|
|
|
|
|
|
pet.orderServiceText = getOrderServiceText(pet.id, item.orderServiceList || []) || [] |
|
|
|
pet.productNameText = getProductNameText(pet.id, item.orderItemList, item.orderServiceList || []) || [] |
|
|
|
|
|
|
|
|
|
|
|
pet.orderServiceText = getOrderServiceText(pet.id, item |
|
|
|
.orderServiceList || []) || [] |
|
|
|
pet.productNameText = getProductNameText(pet.id, item |
|
|
|
.orderItemList, item.orderServiceList || []) || [] |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
this.hasMore = false; |
|
|
|
} |
|
|
|
@ -407,8 +415,8 @@ |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
handleText(list){ |
|
|
|
|
|
|
|
handleText(list) { |
|
|
|
return list && (list.length > 2 ? `${list[0]}...${list[list.length - 1]}` : list.join(',')) |
|
|
|
}, |
|
|
|
|
|
|
|
@ -417,12 +425,12 @@ |
|
|
|
this.currentOrder = order; |
|
|
|
this.$refs.companionSelectPopup.open(); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 修改订单 |
|
|
|
modifyOrder(order) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages_order/order/orderModify?orderId=${order.orderId}` |
|
|
|
}); |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages_order/order/orderModify?orderId=${order.orderId}` |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
@ -430,7 +438,7 @@ |
|
|
|
// 页面加载时获取订单列表 |
|
|
|
this.getOrderList(); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onUnload() { |
|
|
|
// 页面销毁时清理所有定时器 |
|
|
|
if (this.switchTabTimer) { |
|
|
|
@ -581,9 +589,9 @@ |
|
|
|
font-size: 24rpx; |
|
|
|
color: #666; |
|
|
|
margin-top: 4rpx; |
|
|
|
overflow:hidden; //超出的文本隐藏 |
|
|
|
text-overflow:ellipsis; //溢出用省略号显示 |
|
|
|
white-space:nowrap; //溢出不换行 |
|
|
|
overflow: hidden; //超出的文本隐藏 |
|
|
|
text-overflow: ellipsis; //溢出用省略号显示 |
|
|
|
white-space: nowrap; //溢出不换行 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -646,7 +654,7 @@ |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.initial-loading { |
|
|
|
text-align: center; |
|
|
|
padding: 100rpx 0; |
|
|
|
@ -657,7 +665,7 @@ |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.loading-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
@ -670,7 +678,7 @@ |
|
|
|
justify-content: center; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.loading-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -681,13 +689,13 @@ |
|
|
|
border-radius: 20rpx; |
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.loading-text { |
|
|
|
color: #666; |
|
|
|
font-size: 28rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.loading-spinner { |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
@ -696,17 +704,22 @@ |
|
|
|
border-radius: 50%; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
|
|
|
|
|
|
|
|
&.large { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
border-width: 6rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
0% { transform: rotate(0deg); } |
|
|
|
100% { transform: rotate(360deg); } |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.no-order { |
|
|
|
|
