|
|
@@ -22,13 +22,8 @@
|
|
|
|
|
|
<!-- 标签页(全宽,无圆角,紧贴屏幕宽度) -->
|
|
|
<view class="tab-bar">
|
|
|
- <view
|
|
|
- class="tab-item"
|
|
|
- v-for="(tab, idx) in tabs"
|
|
|
- :key="idx"
|
|
|
- :class="{ active: activeTab === idx }"
|
|
|
- @click="switchTab(idx)"
|
|
|
- >
|
|
|
+ <view class="tab-item" v-for="(tab, idx) in tabs" :key="idx" :class="{ active: activeTab === idx }"
|
|
|
+ @click="switchTab(idx)">
|
|
|
<text>{{ tab }}</text>
|
|
|
<view class="tab-line" v-if="activeTab === idx"></view>
|
|
|
</view>
|
|
|
@@ -38,11 +33,7 @@
|
|
|
<scroll-view scroll-y class="order-scroll" @scrolltolower="onReachBottom">
|
|
|
<view style="height: 16rpx;"></view>
|
|
|
|
|
|
- <view
|
|
|
- class="order-card"
|
|
|
- v-for="(order, idx) in filteredOrders"
|
|
|
- :key="idx"
|
|
|
- >
|
|
|
+ <view class="order-card" v-for="(order, idx) in filteredOrders" :key="idx">
|
|
|
<!-- 卡片头部:类型图标 + 类型名 | 状态 + 时间 -->
|
|
|
<view class="card-header">
|
|
|
<view class="type-badge">
|
|
|
@@ -107,7 +98,7 @@
|
|
|
<view class="empty-state" v-if="filteredOrders.length === 0 && !loading">
|
|
|
<text class="empty-text">暂无相关订单</text>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="loading-more" v-if="loading">
|
|
|
<text>加载中...</text>
|
|
|
</view>
|
|
|
@@ -210,7 +201,7 @@ export default {
|
|
|
const service = this.serviceList.find(s => s.id === order.service);
|
|
|
const mode = service?.mode || 0;
|
|
|
const isRoundTrip = mode === 1;
|
|
|
-
|
|
|
+
|
|
|
// 状态枚举映射
|
|
|
const statusMap = {
|
|
|
0: { label: '待派单', color: '#f56c6c' },
|
|
|
@@ -218,7 +209,9 @@ export default {
|
|
|
2: { label: '待服务', color: '#49a3ff' },
|
|
|
3: { label: '服务中', color: '#49a3ff' },
|
|
|
4: { label: '已完成', color: '#67c23a' },
|
|
|
- 5: { label: '已取消', color: '#909399' }
|
|
|
+ 5: { label: '已取消', color: '#909399' },
|
|
|
+ 6: { label: '已拒绝', color: '#f56c6c' },
|
|
|
+ 7: { label: '已关闭', color: '#909399' }
|
|
|
};
|
|
|
const statusInfo = statusMap[order.status] || { label: '未知', color: '#999' };
|
|
|
|
|
|
@@ -257,8 +250,17 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-page { background-color: #F7F8FA; }
|
|
|
-.container { min-height: 100vh; background-color: #F7F8FA; padding: 20rpx 0 0; display: flex; flex-direction: column; }
|
|
|
+page {
|
|
|
+ background-color: #F7F8FA;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F7F8FA;
|
|
|
+ padding: 20rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
|
|
|
/* ===== 统计banner:圆角浮动卡,左右30rpx边距 ===== */
|
|
|
.stats-banner {
|
|
|
@@ -272,10 +274,28 @@ page { background-color: #F7F8FA; }
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-.banner-item { display: flex; flex-direction: column; align-items: center; }
|
|
|
-.banner-num { font-size: 34rpx; font-weight: bold; color: #fff; margin-bottom: 4rpx; }
|
|
|
-.banner-unit { font-size: 22rpx; font-weight: normal; }
|
|
|
-.banner-label { font-size: 20rpx; color: rgba(255,255,255,0.85); }
|
|
|
+.banner-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-num {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-unit {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-label {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
+}
|
|
|
|
|
|
/* ===== 标签页:全宽平铺,无圆角,无side margin ===== */
|
|
|
.tab-bar {
|
|
|
@@ -297,7 +317,10 @@ page { background-color: #F7F8FA; }
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.tab-item.active { color: #FF9800; font-weight: bold; }
|
|
|
+.tab-item.active {
|
|
|
+ color: #FF9800;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
|
|
|
.tab-line {
|
|
|
position: absolute;
|
|
|
@@ -311,7 +334,11 @@ page { background-color: #F7F8FA; }
|
|
|
}
|
|
|
|
|
|
/* ===== 订单列表:scroll-view 全宽,每张card用margin左右30rpx ===== */
|
|
|
-.order-scroll { flex: 1; height: 0; width: 100%; }
|
|
|
+.order-scroll {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
|
|
|
.order-card {
|
|
|
background-color: #fff;
|
|
|
@@ -329,7 +356,10 @@ page { background-color: #F7F8FA; }
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
-.type-badge { display: flex; align-items: center; }
|
|
|
+.type-badge {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
|
|
|
.type-icon {
|
|
|
width: 44rpx;
|
|
|
@@ -337,11 +367,23 @@ page { background-color: #F7F8FA; }
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.type-text { font-size: 30rpx; font-weight: bold; color: #333; }
|
|
|
+.type-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
|
|
|
-.status-text { font-size: 24rpx; }
|
|
|
-.status-text.green { color: #4CAF50; }
|
|
|
-.status-text.red { color: #F44336; }
|
|
|
+.status-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.status-text.green {
|
|
|
+ color: #4CAF50;
|
|
|
+}
|
|
|
+
|
|
|
+.status-text.red {
|
|
|
+ color: #F44336;
|
|
|
+}
|
|
|
|
|
|
/* 服务时间 */
|
|
|
.service-time {
|
|
|
@@ -361,17 +403,45 @@ page { background-color: #F7F8FA; }
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
-.pet-avatar { width: 70rpx; height: 70rpx; border-radius: 50%; margin-right: 16rpx; flex-shrink: 0; }
|
|
|
+.pet-avatar {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
|
|
|
-.pet-info { flex: 1; display: flex; flex-direction: column; }
|
|
|
-.pet-name { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 4rpx; }
|
|
|
-.pet-breed { font-size: 24rpx; color: #999; }
|
|
|
+.pet-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.pet-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.pet-breed {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
|
|
|
/* 价格在宠物卡右侧 */
|
|
|
-.pet-price { font-size: 34rpx; font-weight: bold; color: #FF5722; flex-shrink: 0; }
|
|
|
+.pet-price {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF5722;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
|
|
|
/* 路线信息 */
|
|
|
-.route-info { display: flex; flex-direction: column; }
|
|
|
+.route-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
|
|
|
.route-item {
|
|
|
display: flex;
|
|
|
@@ -395,9 +465,17 @@ page { background-color: #F7F8FA; }
|
|
|
margin-top: 2rpx;
|
|
|
}
|
|
|
|
|
|
-.icon-circle.pickup { background: linear-gradient(135deg, #FF9800, #FF6D00); }
|
|
|
-.icon-circle.deliver { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
|
|
|
-.icon-circle.service { background: linear-gradient(135deg, #4CAF50, #1B5E20); }
|
|
|
+.icon-circle.pickup {
|
|
|
+ background: linear-gradient(135deg, #FF9800, #FF6D00);
|
|
|
+}
|
|
|
+
|
|
|
+.icon-circle.deliver {
|
|
|
+ background: linear-gradient(135deg, #4CAF50, #2E7D32);
|
|
|
+}
|
|
|
+
|
|
|
+.icon-circle.service {
|
|
|
+ background: linear-gradient(135deg, #4CAF50, #1B5E20);
|
|
|
+}
|
|
|
|
|
|
/* 取→送之间的虚线连接 */
|
|
|
.route-connector {
|
|
|
@@ -409,17 +487,49 @@ page { background-color: #F7F8FA; }
|
|
|
background-color: #e0e0e0;
|
|
|
}
|
|
|
|
|
|
-.address-box { flex: 1; padding-bottom: 14rpx; }
|
|
|
-.addr-title { font-size: 26rpx; color: #333; display: block; margin-bottom: 4rpx; }
|
|
|
-.addr-desc { font-size: 24rpx; color: #999; display: block; }
|
|
|
+.address-box {
|
|
|
+ flex: 1;
|
|
|
+ padding-bottom: 14rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.addr-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
|
|
|
/* 服务内容说明(喂遛/洗护) */
|
|
|
-.service-note-row { padding: 4rpx 0 0 60rpx; }
|
|
|
-.service-note-text { font-size: 24rpx; color: #999; }
|
|
|
+.service-note-row {
|
|
|
+ padding: 4rpx 0 0 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.service-note-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
|
|
|
/* 空状态 */
|
|
|
-.empty-state { text-align: center; padding: 80rpx 0; }
|
|
|
-.empty-text { font-size: 28rpx; color: #ccc; }
|
|
|
+.empty-state {
|
|
|
+ text-align: center;
|
|
|
+ padding: 80rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
|
|
|
-.loading-more { text-align: center; padding: 20rpx; font-size: 24rpx; color: #999; }
|
|
|
+.loading-more {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
</style>
|