需求调整

lichao
1 parent 5b1f0e15
Showing 8 changed files with 347 additions and 190 deletions
garbage-removal/src/pages/home-info/clean/index.vue
garbage-removal/src/pages/order-info/order-disposal/scan-detail/index.vue
garbage-removal/src/pages/order-info/order-disposal/transport-detail/index.vue
garbage-removal/src/pages/order-info/order-driver/detail/index.vue
garbage-removal/src/pages/order-info/order-other/detail/index.vue
garbage-removal/src/pages/order/order-disposal/index.vue
garbage-removal/src/pages/order/order-driver/index.vue
garbage-removal/src/pages/order/order-other/index.vue
@@ -108,10 +108,10 @@
 								</view>
 							</view>
-							<!-- 添加是否需要跟车选项 -->
+							<!-- 添加是否需要搬运上车选项 -->
 							<view class="company-clean-container-car-main-content-type">
 								<view class="company-clean-container-car-main-content-type-price-area">
-									<text style="color: red;">*</text>是否需要跟车:
+									<text style="color: red;">*</text>是否需要搬运上车:
 								</view>
 								<view
 									style="width:100%;display: flex;justify-content: flex-start;align-items: center; ">
@@ -55,6 +55,7 @@
 				<view class="scan-car-num-content">
 					<up-input :disabled="!isDeletable" placeholder="请输入数字,单位吨" border="surround"
 						v-model="details.garCarryingWeight" @change="handlerInputChange"></up-input>
+						<text>吨</text>
 				</view>
 			</view>
@@ -57,7 +57,7 @@
                   <view style="margin-right: 4rpx;">
                     载重:
                   </view>
-                  <view>{{ item.garCarryingWeight }}t</view>
+                  <view>{{ item.garCarryingWeight }}吨</view>
                 </view>
               </view>
               <view style="display: flex;align-items: center;width: 50%;justify-content: center; font-size: 25rpx;">
@@ -128,7 +128,7 @@
         </view>
         <view v-if="dataGram.needFollowCar" class="follow-car-notice">
-          <text style="color: red;">该订单需要跟车</text>
+          <text style="color: red;">该订单需要搬运上车</text>
         </view>
       </view>
       <!-- 处理信息 -->
@@ -149,7 +149,7 @@
             <view class="order-detail-container-header-content" style="flex-direction: column;">
               <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
-                <view class="image-group-title">第 {{ group.index }} 次上传</view>
+                <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
                 <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
                   :previewFullImage="true" :isReadOnly="true"></u-upload>
               </view>
@@ -300,9 +300,21 @@ const handleOrderDetail = (orderId) =&gt; {
     });
     putOnImages.value = res.data.data.putOnImages.map(item => {
-      const newItem = item.substring(0, item.length - 6);
-      const newIndex = item.substring(item.length - 6);
-      return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex };
+      let processedItem = item;
+      let carName = '';
+      
+      // 提取name后面的字符串作为carName并从item中移除
+      if (item.includes('name')) {
+        const nameIndex = item.indexOf('name');
+        carName = item.substring(nameIndex + 4);
+
+        processedItem = item.substring(0, nameIndex);
+      }
+      
+      // 保持原有逻辑不变，但添加carName到返回对象
+      const newItem = processedItem.substring(0, processedItem.length - 6);
+      const newIndex = processedItem.substring(processedItem.length - 6);
+      return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName };
     });
@@ -330,9 +342,9 @@ const handleOrderDetail = (orderId) =&gt; {
     // 转换为数组形式，方便在模板中遍历
     putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
       index: key,
-      images: newGroupedImages[key]
+      images: newGroupedImages[key],
+      carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : ''
     }));
-    console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
     putDownImages.value = res.data.data.putDownImages.map(item => {
       return { url: import.meta.env.VITE_BASE_URL + item };
     });
@@ -169,7 +169,6 @@
 				<view class="order-detail-container-header-item">
 					<text class="order-detail-container-header-title">备注：</text>
 					<view class="order-detail-container-header-content">
-						{{ dataGram.g }}
 						{{ dataGram.garRemark }}
 					</view>
 				</view>
@@ -185,7 +184,7 @@
 						<text class=" order-detail-container-header-title">装车照片：</text>
 						<view class="order-detail-container-header-content" style="flex-direction: column">
 							<view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
-								<view class="image-group-title">第 {{ group.index }} 次上传</view>
+								<view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
 								<u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
 								:previewFullImage="true" :isReadOnly="true"></u-upload>
 							</view>
@@ -383,15 +382,20 @@
 	}
 	const handleOrderDispatchClick = (orderId) => {
+		// 获取订单车辆数量
+		const orderCarCount = dataGram.value?.garCarInfoList?.length || 0;
+		
 		// 获取驾驶员人员
 		queryOrderDispatch(orderId).then(res => {
 			console.log(res.data.data);
 			if (res.data.success) {
 				// 过滤车辆  非用户选择的车辆无法选中
-				driverPersonnelList.value = res.data.data
-				clashDriverDispatchRef.value.open(res.data.data)
+				driverPersonnelList.value = res.data.data;
+				
+				// 恢复原始的open调用方式，只传递dataList
+				clashDriverDispatchRef.value.open(res.data.data);
 			} else {
-				uni.$u.toast("驾驶员分配成功！")
+				uni.$u.toast("驾驶员分配成功！");
 			}
 		})
 	}
@@ -429,10 +433,23 @@
 					url: import.meta.env.VITE_BASE_URL + item
 				};
 			});
+			
 			putOnImages.value = res.data.data.putOnImages.map(item => {
-				const newItem = item.substring(0, item.length - 6);
-				const newIndex = item.substring(item.length - 6);
-				return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex };
+			let processedItem = item;
+			let carName = '';
+			
+			// 提取name后面的字符串作为carName并从item中移除
+			if (item.includes('name')) {
+				const nameIndex = item.indexOf('name');
+				carName = item.substring(nameIndex + 4);
+
+				processedItem = item.substring(0, nameIndex);
+			}
+			
+			// 保持原有逻辑不变，但添加carName到返回对象
+			const newItem = processedItem.substring(0, processedItem.length - 6);
+			const newIndex = processedItem.substring(processedItem.length - 6);
+			return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName };
 			});
 			// 按照newIndex升序排序
@@ -459,7 +476,8 @@
 			// 转换为数组形式，方便在模板中遍历
 			putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
 				index: key,
-				images: newGroupedImages[key]
+				images: newGroupedImages[key],
+      			carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : ''
 			}));
    			console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
 			putDownImages.value = res.data.data.putDownImages.map(item => {
@@ -663,11 +681,24 @@
 		})
 	}
 	// 指定人员
-	const handleDriverDispatchConfirm = (val) => {
+const handleDriverDispatchConfirm = (val) => {
 		console.log(val);
 		if (!val) {
-			return
+			return;
+		}
+		
+		// 获取订单车辆数量
+		const orderCarCount = dataGram.value?.garCarInfoList?.length || 0;
+		
+		// 计算选择的驾驶员数量
+		const selectedDriverCount = Object.keys(val).length;
+		
+		// 检查驾驶员数量是否超过订单车辆数量
+		if (selectedDriverCount > orderCarCount) {
+			jumpPrompt(`选择的驾驶员数量不能超过${orderCarCount}个`);
+			return;
 		}
+		
 		let data = {
 			garOrderId: orderId.value,
 			dispatchList: []
@@ -680,11 +711,11 @@
 		console.log(data);
 		dispatchOrders(data).then(res => {
 			if (res.data.success) {
-				uni.$u.toast(res.data.msg)
+				uni.$u.toast(res.data.msg);
 			} else {
-				uni.$u.toast("指定人员失败，请重试")
+				uni.$u.toast("指定人员失败，请重试");
 			}
-			clashDriverDispatchRef.value.close()
+			clashDriverDispatchRef.value.close();
 		})
 	}
@@ -21,7 +21,7 @@
 					</view>
 					<u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
 						:activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }"
-						:inactiveStyle="{ color: '#ffffff' }" ref="uTabsElement" :list="list" :current="current"
+						:inactiveStyle="{ color: '#ffffff' }" ref="uTabsElement" :list="displayList" :current="current"
 						@change="tabsChange" :scrollable="false"></u-tabs>
 				</template>
 				<swiper class="swiper" :current="swiperCurrent" @translation="translation"
@@ -48,173 +48,198 @@
 </template>
 <script setup>
-	import QrScannerVue from '../../../components/QrScanner/QrScanner.vue';
-	import {
-		checkCode
-	} from '@/apis/order.js';
-	import {
-		nextTick,
-		onMounted,
-		ref
-	} from 'vue';
-	import swiperListItem from './swiper-list-item/index.vue';
-	import {
-		useMainStore
-	} from '@/stores';
-	const list = ref([{
-		name: '处理中'
-	}, {
-		name: '已完成'
-	}])
-	const current = ref(0);
-	const swiperCurrent = ref(0);
-	const uTabsElement = ref();
-	const title = ref('处置场所');
-	const topMargin = ref();
-	const lightHeight = ref();
-	const store = useMainStore();
-	const showScan = ref(false);
+import QrScannerVue from '../../../components/QrScanner/QrScanner.vue';
+import { checkCode, queryOrderList } from '@/apis/order.js';
+import { nextTick, onMounted, ref, computed } from 'vue';
+import swiperListItem from './swiper-list-item/index.vue';
+import { useMainStore } from '@/stores';
+const list = ref([{
+  name: '处理中',
+  count: 0
+}, {
+  name: '已完成',
+  count: 0
+}])
+const current = ref(0);
+const swiperCurrent = ref(0);
+const uTabsElement = ref();
+const title = ref('处置场所');
+const topMargin = ref();
+const lightHeight = ref();
+const store = useMainStore();
+const showScan = ref(false);
-	const tabsChange = (el) => {
-		console.log("tabsChange", el);
-		swiperCurrent.value = Number(el.index)
-	}
+// 创建计算属性用于显示带数量的标题
+const displayList = computed(() => {
+  return list.value.map(item => {
+    return {
+      ...item,
+      name: `${item.name}(${item.count || 0})`
+    }
+  })
+})
-	const animationfinish = (e) => {
-		current.value = e.detail.current
-		swiperCurrent.value = e.detail.current
-	}
+const tabsChange = (el) => {
+  console.log("tabsChange", el);
+  swiperCurrent.value = Number(el.index);
+  // 切换标签时可以再次请求该标签的订单数量
+  getOrderCountByType(Number(el.index));
+}
-	const translation = (e) => {
-		uTabsElement.value.setDx(e.detail.dx)
-	}
+const animationfinish = (e) => {
+  current.value = e.detail.current
+  swiperCurrent.value = e.detail.current
+}
-	const handleScan = () => {
+const translation = (e) => {
+  uTabsElement.value.setDx(e.detail.dx)
+}
+const handleScan = () => {
-		uni.scanCode({
-			success: function(res) {
-				console.log('条码类型：' + res.scanType);
-				console.log('条码内容：' + res.result);
-				try {
-					if (res.scanType == "QR_CODE") {
-						checkCode(res.result).then(res => {
-							console.log(res);
-							if (res.data.code == 200) {
-								uni.$u.route({
-									url: `pages/order-info/order-disposal/scan-detail/index`,
-									params: {
-										data: encodeURIComponent(JSON.stringify(res.data
-											.data))
-									}
-								})
-								return
-							}
-							uni.$u.toast(res.data.msg);
-						})
-					}
-				} catch (error) {
-					uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
-					console.log("===================>weixin");
-				}
-			},
-			fail: function(res) {
-				uni.$u.toast("图片扫码失败，请检查二维码图片");
-				console.log("===================>weixin");
-			}
-		});
-	}
-	const handleScanH5 = () => {
-		showScan.value = true;
-		// uni.chooseImage({
-		// 	count: 1,
-		// 	sizeType: ['original', 'compressed'],
-		// 	sourceType: ['camera', 'album'],
-		// 	success: (res) => {
-		// 		console.log(res.tempFilePaths[0]);
-		// 		uni.uploadFile({
-		// 			url: import.meta.env.VITE_BASE_URL + "/QRCode/ocr/pric",
-		// 			header: {
-		// 				"Authorization": store.token
-		// 			},
-		// 			fileType: 'image',
-		// 			filePath: res.tempFilePaths[0],
-		// 			name: 'file',
-		// 			success: (uploadRes) => {
-		// 				if (uploadRes.statusCode == 200) {
-		// 					if ("" == uploadRes.data || undefined == uploadRes.data || null ==
-		// 						uploadRes.data) {
-		// 						uni.$u.toast("二维码图片识别失败，请检查二维码图片");
-		// 						return;
-		// 					} else {
-		// 						checkCode(uploadRes.data).then(res => {
-		// 							if (res.data && res.data.code == 200) {
-		// 								uni.$u.route({
-		// 									url: `pages/order-info/order-disposal/scan-detail/index`,
-		// 									params: {
-		// 										data: encodeURIComponent(JSON
-		// 											.stringify(res.data
-		// 												.data))
-		// 									}
-		// 								})
-		// 								return
-		// 							}
-		// 							uni.$u.toast(res.data.msg);
-		// 						})
-		// 					}
-		// 				} else {
-		// 					uni.$u.toast("二维码图片识别失败，请检查二维码图片");
-		// 				}
+  uni.scanCode({
+    success: function(res) {
+      console.log('条码类型：' + res.scanType);
+      console.log('条码内容：' + res.result);
+      try {
+        if (res.scanType == "QR_CODE") {
+          checkCode(res.result).then(res => {
+            console.log(res);
+            if (res.data.code == 200) {
+              uni.$u.route({
+                url: `pages/order-info/order-disposal/scan-detail/index`,
+                params: {
+                  data: encodeURIComponent(JSON.stringify(res.data
+                    .data))
+                }
+              })
+              return
+            }
+            uni.$u.toast(res.data.msg);
+          })
+        }
+      } catch (error) {
+        uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
+        console.log("===================>weixin");
+      }
+    },
+    fail: function(res) {
+      uni.$u.toast("图片扫码失败，请检查二维码图片");
+      console.log("===================>weixin");
+    }
+  });
+}
-		// 			}
-		// 		})
+const handleScanH5 = () => {
+  showScan.value = true;
+  // uni.chooseImage({
+  // 	count: 1,
+  // 	sizeType: ['original', 'compressed'],
+  // 	sourceType: ['camera', 'album'],
+  // 	success: (res) => {
+  // 		console.log(res.tempFilePaths[0]);
+  // 		uni.uploadFile({
+  // 			url: import.meta.env.VITE_BASE_URL + "/QRCode/ocr/pric",
+  // 			header: {
+  // 				"Authorization": store.token
+  // 			},
+  // 			fileType: 'image',
+  // 			filePath: res.tempFilePaths[0],
+  // 			name: 'file',
+  // 			success: (uploadRes) => {
+  // 				if (uploadRes.statusCode == 200) {
+  // 					if ("" == uploadRes.data || undefined == uploadRes.data || null ==
+  // 						uploadRes.data) {
+  // 						uni.$u.toast("二维码图片识别失败，请检查二维码图片");
+  // 						return;
+  // 					} else {
+  // 						checkCode(uploadRes.data).then(res => {
+  // 							if (res.data && res.data.code == 200) {
+  // 								uni.$u.route({
+  // 									url: `pages/order-info/order-disposal/scan-detail/index`,
+  // 									params: {
+  // 										data: encodeURIComponent(JSON
+  // 											.stringify(res.data
+  // 												.data))
+  // 									}
+  // 								})
+  // 								return
+  // 							}
+  // 							uni.$u.toast(res.data.msg);
+  // 						})
+  // 					}
+  // 				} else {
+  // 					uni.$u.toast("二维码图片识别失败，请检查二维码图片");
+  // 				}
-		// 	}
-		// })
-	}
+  // 			}
+  // 		})
-	const onDecodeHandler = (data) => {
-		showScan.value = false
-		try {
-				checkCode(data).then(res => {
-					console.log(res);
-					if (res.data.code == 200) {
-						uni.$u.route({
-							url: `pages/order-info/order-disposal/scan-detail/index`,
-							params: {
-								data: encodeURIComponent(JSON.stringify(res.data
-									.data))
-							}
-						})
-						return
-					}
-					alert(res.data.msg);
-				})
-		} catch (error) {
-			alert("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
-		}
-	}
-	const qrReaderClose = () => {
-		showScan.value = false
-	}
-	onMounted(() => {
-		console.log("处理场所");
-		nextTick(() => {
-			try {
-				const {
-					height,
-					top
-				} = uni.getMenuButtonBoundingClientRect();
-				topMargin.value = top + 'px';
-				lightHeight.value = height + 'px';
-			} catch (error) {
-				topMargin.value = '60rpx';
-				lightHeight.value = '60rpx';
-				console.log('There is no menu because the current app is not a small program');
-			}
-		})
-	})
+  // 	}
+  // })
+}
+
+const onDecodeHandler = (data) => {
+  showScan.value = false
+  try {
+          checkCode(data).then(res => {
+            console.log(res);
+            if (res.data.code == 200) {
+              uni.$u.route({
+                url: `pages/order-info/order-disposal/scan-detail/index`,
+                params: {
+                  data: encodeURIComponent(JSON.stringify(res.data
+                    .data))
+                }
+              })
+              return
+            }
+            alert(res.data.msg);
+          })
+  } catch (error) {
+    alert("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
+  }
+}
+const qrReaderClose = () => {
+  showScan.value = false
+}
+// 获取指定类型的订单数量
+const getOrderCountByType = (tabIndex) => {
+  const type = tabIndex === 0 ? 1 : 3;
+  queryOrderList({ type, pageNo: 1, pageSize: 1 }).then((res) => {
+    if (res.data && res.data.data) {
+      // 这里假设接口返回的total是订单总数
+      list.value[tabIndex].count = res.data.data.total || 0;
+    }
+  }).catch(() => {
+    console.log('获取订单数量失败');
+  })
+}
+
+// 获取所有类型的订单数量
+const getAllOrderCounts = () => {
+  list.value.forEach((_, index) => {
+    getOrderCountByType(index);
+  })
+}
+
+onMounted(() => {
+  console.log("处理场所");
+  nextTick(() => {
+    try {
+      const { height, top } = uni.getMenuButtonBoundingClientRect();
+      topMargin.value = top + 'px';
+      lightHeight.value = height + 'px';
+    } catch (error) {
+      topMargin.value = '60rpx';
+      lightHeight.value = '60rpx';
+      console.log('There is no menu because the current app is not a small program');
+    }
+    // 初始化获取所有订单数量
+    getAllOrderCounts();
+  })
+})
 </script>
 <style lang="scss" scoped>
 	.scanCode {
@@ -306,4 +331,4 @@
 			}
 		}
 	}
-</style>
 \ No newline at end of file
+</style>
@@ -21,7 +21,7 @@
           </view>
           <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
             :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
-            ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
+            ref="uTabsElement" :list="displayList" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
         </template>
         <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
           <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
@@ -32,26 +32,68 @@
   </view>
 </template>
 <script setup>
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, computed } from 'vue';
 import swiperListItem from './swiper-list-item/index.vue';
-const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
+import { queryOrderList } from "@/apis/order.js";
+
+// 初始化订单类型列表，添加count属性
+const list = ref([{ name: '待清运', count: 0 }, { name: '清运中', count: 0 }, { name: '全部', count: 0 }, { name: '已完成', count: 0 }])
 const current = ref(0);
 const swiperCurrent = ref(0)
 const uTabsElement = ref()
 const topMargin = ref()
 const lightHeight = ref()
 const title = ref('订单列表')
+
+// 创建一个计算属性用于显示带数量的标签
+const displayList = computed(() => {
+  return list.value.map(item => ({
+    ...item,
+    name: `${item.name}(${item.count})`
+  }))
+})
+
+// 从tabsChange函数中获取订单统计信息
 const tabsChange = (el) => {
   console.log("tabsChange", el);
   swiperCurrent.value = Number(el.index)
+  
+  // 当切换标签时，获取该状态下的订单总数
+  getOrderCountByType(Number(el.index))
 }
+
 const animationfinish = (e) => {
   current.value = e.detail.current
   swiperCurrent.value = e.detail.current
 }
+
 const translation = (e) => {
   uTabsElement.value.setDx(e.detail.dx)
 }
+
+// 根据订单类型获取订单总数
+const getOrderCountByType = async (type) => {
+  try {
+    const res = await queryOrderList({
+      type: type,
+      pageNo: 1,
+      pageSize: 1
+    });
+    if (res.data && res.data.data && res.data.data.total !== undefined) {
+      list.value[type].count = res.data.data.total; // 存储该状态的订单总数
+    }
+  } catch (error) {
+    console.error(`获取${list.value[type]?.name || '订单'}总数失败:`, error);
+  }
+}
+
+// 初始化时获取所有状态的订单总数
+const getAllOrderCounts = async () => {
+  for (let i = 0; i < list.value.length; i++) {
+    await getOrderCountByType(i);
+  }
+}
+
 onMounted(() => {
   console.log("驾驶员");
   nextTick(() => {
@@ -64,6 +106,8 @@ onMounted(() =&gt; {
       lightHeight.value = '80rpx'
       console.log('There is no menu because the current app is not a small program');
     }
+    // 页面加载后获取所有订单总数
+    getAllOrderCounts();
   })
 })
 </script>
@@ -25,7 +25,7 @@
           </view>
           <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
             :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
-            ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
+            ref="uTabsElement" :list="displayList" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
         </template>
         <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
           <swiper-item class="swiper-item" v-for="( item, index ) in  list " :key="index">
@@ -37,12 +37,13 @@
 </template>
 <script setup>
-import { queryOrderMessageCount } from '@/apis/order.js';
+import { queryOrderMessageCount, queryOrderList } from '@/apis/order.js';
 import { useMainStore } from '@/stores/index.js';
 import { computed, nextTick, onMounted, ref } from 'vue';
 import swiperListItem from './swiper-list-item/index.vue';
 const store = useMainStore();
-const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
+// 初始化订单类型列表，添加count属性
+const list = ref([{ name: '待清运', count: 0 }, { name: '清运中', count: 0 }, { name: '全部', count: 0 }, { name: '已完成', count: 0 }])
 const current = ref(0);
 const userType = computed(() => store.userType)
 const swiperCurrent = ref(0)
@@ -51,28 +52,68 @@ const topMargin = ref()
 const lightHeight = ref()
 const messageCount = ref(0)
 const title = ref("订单列表")
+const type = ref('error')
+
+// 创建一个计算属性用于显示带数量的标签
+const displayList = computed(() => {
+  return list.value.map(item => ({
+    ...item,
+    name: `${item.name}(${item.count})`
+  }))
+})
+
 const tabsChange = (el) => {
   console.log("tabsChange:", el);
   swiperCurrent.value = Number(el.index)
+  
+  // 当切换标签时，获取该状态下的订单总数
+  getOrderCountByType(Number(el.index))
 }
+
 const animationfinish = (e) => {
   current.value = e.detail.current
   swiperCurrent.value = e.detail.current
 }
+
 const translation = (e) => {
   console.log("uTabs:", e.detail.dx);
   uTabsElement.value.setDx(e.detail.dx)
 }
+
 const handlerMessageClick = () => {
   uni.$u.route("pages/order-info/order-other/user-message/index")
 }
-onMounted(() => {
+// 根据订单类型获取订单总数
+const getOrderCountByType = async (type) => {
+  try {
+    const res = await queryOrderList({
+      type: type,
+      pageNo: 1,
+      pageSize: 1
+    });
+    if (res.data && res.data.data && res.data.data.total !== undefined) {
+      list.value[type].count = res.data.data.total; // 存储该状态的订单总数
+    }
+  } catch (error) {
+    console.error(`获取${list.value[type]?.name || '订单'}总数失败:`, error);
+  }
+}
+
+// 初始化时获取所有状态的订单总数
+const getAllOrderCounts = async () => {
+  for (let i = 0; i < list.value.length; i++) {
+    await getOrderCountByType(i);
+  }
+}
+
+onMounted(() => {
   if (userType.value == '用户') {
     queryOrderMessageCount().then(res => {
       messageCount.value = res.data.data
     })
   }
+  
   nextTick(() => {
     try {
       const { height, top } = uni.getMenuButtonBoundingClientRect();
@@ -83,6 +124,9 @@ onMounted(() =&gt; {
       lightHeight.value = "60rpx"
       console.log("There is no menu because the current app is not a small program");
     }
+    
+    // 页面加载后获取所有订单总数
+    getAllOrderCounts();
   })
 })
 </script>