guzijian / garbage-removal · Commits

Commit fe819ede0b13ec55a957058a1681b37cb56883b3

Authored by lichao
1 parent 5b1f0e15
build: skipped

需求调整

Inline Side-by-side
Showing 8 changed files with 347 additions and 190 deletions
garbage-removal/src/pages/home-info/clean/index.vue
  View file @fe819ed
... ... @@ -108,10 +108,10 @@
108 108 </view>
109 109 </view>
110 110  
111   - <!-- 添加是否需要跟车选项 -->
  111 + <!-- 添加是否需要搬运上车选项 -->
112 112 <view class="company-clean-container-car-main-content-type">
113 113 <view class="company-clean-container-car-main-content-type-price-area">
114   - <text style="color: red;">*</text>是否需要跟车:
  114 + <text style="color: red;">*</text>是否需要搬运上车:
115 115 </view>
116 116 <view
117 117 style="width:100%;display: flex;justify-content: flex-start;align-items: center; ">
... ...
garbage-removal/src/pages/order-info/order-disposal/scan-detail/index.vue
  View file @fe819ed
... ... @@ -55,6 +55,7 @@
55 55 <view class="scan-car-num-content">
56 56 <up-input :disabled="!isDeletable" placeholder="请输入数字,单位吨" border="surround"
57 57 v-model="details.garCarryingWeight" @change="handlerInputChange"></up-input>
  58 + <text>吨</text>
58 59 </view>
59 60 </view>
60 61  
... ...
garbage-removal/src/pages/order-info/order-disposal/transport-detail/index.vue
  View file @fe819ed
... ... @@ -57,7 +57,7 @@
57 57 <view style="margin-right: 4rpx;">
58 58 载重:
59 59 </view>
60   - <view>{{ item.garCarryingWeight }}t</view>
  60 + <view>{{ item.garCarryingWeight }}吨</view>
61 61 </view>
62 62 </view>
63 63 <view style="display: flex;align-items: center;width: 50%;justify-content: center; font-size: 25rpx;">
... ...
garbage-removal/src/pages/order-info/order-driver/detail/index.vue
  View file @fe819ed
... ... @@ -128,7 +128,7 @@
128 128 </view>
129 129  
130 130 <view v-if="dataGram.needFollowCar" class="follow-car-notice">
131   - <text style="color: red;">该订单需要跟车</text>
  131 + <text style="color: red;">该订单需要搬运上车</text>
132 132 </view>
133 133 </view>
134 134 <!-- 处理信息 -->
... ... @@ -149,7 +149,7 @@
149 149  
150 150 <view class="order-detail-container-header-content" style="flex-direction: column;">
151 151 <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
152   - <view class="image-group-title">第 {{ group.index }} 次上传</view>
  152 + <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
153 153 <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
154 154 :previewFullImage="true" :isReadOnly="true"></u-upload>
155 155 </view>
... ... @@ -300,9 +300,21 @@ const handleOrderDetail = (orderId) =&gt; {
300 300 });
301 301  
302 302 putOnImages.value = res.data.data.putOnImages.map(item => {
303   - const newItem = item.substring(0, item.length - 6);
304   - const newIndex = item.substring(item.length - 6);
305   - return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex };
  303 + let processedItem = item;
  304 + let carName = '';
  305 +
  306 + // 提取name后面的字符串作为carName并从item中移除
  307 + if (item.includes('name')) {
  308 + const nameIndex = item.indexOf('name');
  309 + carName = item.substring(nameIndex + 4);
  310 +
  311 + processedItem = item.substring(0, nameIndex);
  312 + }
  313 +
  314 + // 保持原有逻辑不变，但添加carName到返回对象
  315 + const newItem = processedItem.substring(0, processedItem.length - 6);
  316 + const newIndex = processedItem.substring(processedItem.length - 6);
  317 + return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName };
306 318 });
307 319  
308 320  
... ... @@ -330,9 +342,9 @@ const handleOrderDetail = (orderId) =&gt; {
330 342 // 转换为数组形式，方便在模板中遍历
331 343 putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
332 344 index: key,
333   - images: newGroupedImages[key]
  345 + images: newGroupedImages[key],
  346 + carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : ''
334 347 }));
335   - console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
336 348 putDownImages.value = res.data.data.putDownImages.map(item => {
337 349 return { url: import.meta.env.VITE_BASE_URL + item };
338 350 });
... ...
garbage-removal/src/pages/order-info/order-other/detail/index.vue
  View file @fe819ed
... ... @@ -169,7 +169,6 @@
169 169 <view class="order-detail-container-header-item">
170 170 <text class="order-detail-container-header-title">备注：</text>
171 171 <view class="order-detail-container-header-content">
172   - {{ dataGram.g }}
173 172 {{ dataGram.garRemark }}
174 173 </view>
175 174 </view>
... ... @@ -185,7 +184,7 @@
185 184 <text class=" order-detail-container-header-title">装车照片：</text>
186 185 <view class="order-detail-container-header-content" style="flex-direction: column">
187 186 <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
188   - <view class="image-group-title">第 {{ group.index }} 次上传</view>
  187 + <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
189 188 <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
190 189 :previewFullImage="true" :isReadOnly="true"></u-upload>
191 190 </view>
... ... @@ -383,15 +382,20 @@
383 382 }
384 383  
385 384 const handleOrderDispatchClick = (orderId) => {
  385 + // 获取订单车辆数量
  386 + const orderCarCount = dataGram.value?.garCarInfoList?.length || 0;
  387 +
386 388 // 获取驾驶员人员
387 389 queryOrderDispatch(orderId).then(res => {
388 390 console.log(res.data.data);
389 391 if (res.data.success) {
390 392 // 过滤车辆 非用户选择的车辆无法选中
391   - driverPersonnelList.value = res.data.data
392   - clashDriverDispatchRef.value.open(res.data.data)
  393 + driverPersonnelList.value = res.data.data;
  394 +
  395 + // 恢复原始的open调用方式，只传递dataList
  396 + clashDriverDispatchRef.value.open(res.data.data);
393 397 } else {
394   - uni.$u.toast("驾驶员分配成功！")
  398 + uni.$u.toast("驾驶员分配成功！");
395 399 }
396 400 })
397 401 }
... ... @@ -429,10 +433,23 @@
429 433 url: import.meta.env.VITE_BASE_URL + item
430 434 };
431 435 });
  436 +
432 437 putOnImages.value = res.data.data.putOnImages.map(item => {
433   - const newItem = item.substring(0, item.length - 6);
434   - const newIndex = item.substring(item.length - 6);
435   - return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex };
  438 + let processedItem = item;
  439 + let carName = '';
  440 +
  441 + // 提取name后面的字符串作为carName并从item中移除
  442 + if (item.includes('name')) {
  443 + const nameIndex = item.indexOf('name');
  444 + carName = item.substring(nameIndex + 4);
  445 +
  446 + processedItem = item.substring(0, nameIndex);
  447 + }
  448 +
  449 + // 保持原有逻辑不变，但添加carName到返回对象
  450 + const newItem = processedItem.substring(0, processedItem.length - 6);
  451 + const newIndex = processedItem.substring(processedItem.length - 6);
  452 + return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName };
436 453 });
437 454  
438 455 // 按照newIndex升序排序
... ... @@ -459,7 +476,8 @@
459 476 // 转换为数组形式，方便在模板中遍历
460 477 putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
461 478 index: key,
462   - images: newGroupedImages[key]
  479 + images: newGroupedImages[key],
  480 + carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : ''
463 481 }));
464 482 console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
465 483 putDownImages.value = res.data.data.putDownImages.map(item => {
... ... @@ -663,11 +681,24 @@
663 681 })
664 682 }
665 683 // 指定人员
666   - const handleDriverDispatchConfirm = (val) => {
  684 +const handleDriverDispatchConfirm = (val) => {
667 685 console.log(val);
668 686 if (!val) {
669   - return
  687 + return;
  688 + }
  689 +
  690 + // 获取订单车辆数量
  691 + const orderCarCount = dataGram.value?.garCarInfoList?.length || 0;
  692 +
  693 + // 计算选择的驾驶员数量
  694 + const selectedDriverCount = Object.keys(val).length;
  695 +
  696 + // 检查驾驶员数量是否超过订单车辆数量
  697 + if (selectedDriverCount > orderCarCount) {
  698 + jumpPrompt(`选择的驾驶员数量不能超过${orderCarCount}个`);
  699 + return;
670 700 }
  701 +
671 702 let data = {
672 703 garOrderId: orderId.value,
673 704 dispatchList: []
... ... @@ -680,11 +711,11 @@
680 711 console.log(data);
681 712 dispatchOrders(data).then(res => {
682 713 if (res.data.success) {
683   - uni.$u.toast(res.data.msg)
  714 + uni.$u.toast(res.data.msg);
684 715 } else {
685   - uni.$u.toast("指定人员失败，请重试")
  716 + uni.$u.toast("指定人员失败，请重试");
686 717 }
687   - clashDriverDispatchRef.value.close()
  718 + clashDriverDispatchRef.value.close();
688 719 })
689 720 }
690 721  
... ...
garbage-removal/src/pages/order/order-disposal/index.vue
  View file @fe819ed
... ... @@ -21,7 +21,7 @@
21 21 </view>
22 22 <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
23 23 :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }"
24   - :inactiveStyle="{ color: '#ffffff' }" ref="uTabsElement" :list="list" :current="current"
  24 + :inactiveStyle="{ color: '#ffffff' }" ref="uTabsElement" :list="displayList" :current="current"
25 25 @change="tabsChange" :scrollable="false"></u-tabs>
26 26 </template>
27 27 <swiper class="swiper" :current="swiperCurrent" @translation="translation"
... ... @@ -48,173 +48,198 @@
48 48 </template>
49 49  
50 50 <script setup>
51   - import QrScannerVue from '../../../components/QrScanner/QrScanner.vue';
52   - import {
53   - checkCode
54   - } from '@/apis/order.js';
55   - import {
56   - nextTick,
57   - onMounted,
58   - ref
59   - } from 'vue';
60   - import swiperListItem from './swiper-list-item/index.vue';
61   - import {
62   - useMainStore
63   - } from '@/stores';
64   - const list = ref([{
65   - name: '处理中'
66   - }, {
67   - name: '已完成'
68   - }])
69   - const current = ref(0);
70   - const swiperCurrent = ref(0);
71   - const uTabsElement = ref();
72   - const title = ref('处置场所');
73   - const topMargin = ref();
74   - const lightHeight = ref();
75   - const store = useMainStore();
76   - const showScan = ref(false);
  51 +import QrScannerVue from '../../../components/QrScanner/QrScanner.vue';
  52 +import { checkCode, queryOrderList } from '@/apis/order.js';
  53 +import { nextTick, onMounted, ref, computed } from 'vue';
  54 +import swiperListItem from './swiper-list-item/index.vue';
  55 +import { useMainStore } from '@/stores';
  56 +const list = ref([{
  57 + name: '处理中',
  58 + count: 0
  59 +}, {
  60 + name: '已完成',
  61 + count: 0
  62 +}])
  63 +const current = ref(0);
  64 +const swiperCurrent = ref(0);
  65 +const uTabsElement = ref();
  66 +const title = ref('处置场所');
  67 +const topMargin = ref();
  68 +const lightHeight = ref();
  69 +const store = useMainStore();
  70 +const showScan = ref(false);
77 71  
78   - const tabsChange = (el) => {
79   - console.log("tabsChange", el);
80   - swiperCurrent.value = Number(el.index)
81   - }
  72 +// 创建计算属性用于显示带数量的标题
  73 +const displayList = computed(() => {
  74 + return list.value.map(item => {
  75 + return {
  76 + ...item,
  77 + name: `${item.name}(${item.count || 0})`
  78 + }
  79 + })
  80 +})
82 81  
83   - const animationfinish = (e) => {
84   - current.value = e.detail.current
85   - swiperCurrent.value = e.detail.current
86   - }
  82 +const tabsChange = (el) => {
  83 + console.log("tabsChange", el);
  84 + swiperCurrent.value = Number(el.index);
  85 + // 切换标签时可以再次请求该标签的订单数量
  86 + getOrderCountByType(Number(el.index));
  87 +}
87 88  
88   - const translation = (e) => {
89   - uTabsElement.value.setDx(e.detail.dx)
90   - }
  89 +const animationfinish = (e) => {
  90 + current.value = e.detail.current
  91 + swiperCurrent.value = e.detail.current
  92 +}
91 93  
92   - const handleScan = () => {
  94 +const translation = (e) => {
  95 + uTabsElement.value.setDx(e.detail.dx)
  96 +}
93 97  
  98 +const handleScan = () => {
94 99  
95   - uni.scanCode({
96   - success: function(res) {
97   - console.log('条码类型：' + res.scanType);
98   - console.log('条码内容：' + res.result);
99   - try {
100   - if (res.scanType == "QR_CODE") {
101   - checkCode(res.result).then(res => {
102   - console.log(res);
103   - if (res.data.code == 200) {
104   - uni.$u.route({
105   - url: `pages/order-info/order-disposal/scan-detail/index`,
106   - params: {
107   - data: encodeURIComponent(JSON.stringify(res.data
108   - .data))
109   - }
110   - })
111   - return
112   - }
113   - uni.$u.toast(res.data.msg);
114   - })
115   - }
116   - } catch (error) {
117   - uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
118   - console.log("===================>weixin");
119   - }
120   - },
121   - fail: function(res) {
122   - uni.$u.toast("图片扫码失败，请检查二维码图片");
123   - console.log("===================>weixin");
124   - }
125   - });
126   - }
127 100  
128   - const handleScanH5 = () => {
129   - showScan.value = true;
130   - // uni.chooseImage({
131   - // count: 1,
132   - // sizeType: ['original', 'compressed'],
133   - // sourceType: ['camera', 'album'],
134   - // success: (res) => {
135   - // console.log(res.tempFilePaths[0]);
136   - // uni.uploadFile({
137   - // url: import.meta.env.VITE_BASE_URL + "/QRCode/ocr/pric",
138   - // header: {
139   - // "Authorization": store.token
140   - // },
141   - // fileType: 'image',
142   - // filePath: res.tempFilePaths[0],
143   - // name: 'file',
144   - // success: (uploadRes) => {
145   - // if (uploadRes.statusCode == 200) {
146   - // if ("" == uploadRes.data || undefined == uploadRes.data || null ==
147   - // uploadRes.data) {
148   - // uni.$u.toast("二维码图片识别失败，请检查二维码图片");
149   - // return;
150   - // } else {
151   - // checkCode(uploadRes.data).then(res => {
152   - // if (res.data && res.data.code == 200) {
153   - // uni.$u.route({
154   - // url: `pages/order-info/order-disposal/scan-detail/index`,
155   - // params: {
156   - // data: encodeURIComponent(JSON
157   - // .stringify(res.data
158   - // .data))
159   - // }
160   - // })
161   - // return
162   - // }
163   - // uni.$u.toast(res.data.msg);
164   - // })
165   - // }
166   - // } else {
167   - // uni.$u.toast("二维码图片识别失败，请检查二维码图片");
168   - // }
  101 + uni.scanCode({
  102 + success: function(res) {
  103 + console.log('条码类型：' + res.scanType);
  104 + console.log('条码内容：' + res.result);
  105 + try {
  106 + if (res.scanType == "QR_CODE") {
  107 + checkCode(res.result).then(res => {
  108 + console.log(res);
  109 + if (res.data.code == 200) {
  110 + uni.$u.route({
  111 + url: `pages/order-info/order-disposal/scan-detail/index`,
  112 + params: {
  113 + data: encodeURIComponent(JSON.stringify(res.data
  114 + .data))
  115 + }
  116 + })
  117 + return
  118 + }
  119 + uni.$u.toast(res.data.msg);
  120 + })
  121 + }
  122 + } catch (error) {
  123 + uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
  124 + console.log("===================>weixin");
  125 + }
  126 + },
  127 + fail: function(res) {
  128 + uni.$u.toast("图片扫码失败，请检查二维码图片");
  129 + console.log("===================>weixin");
  130 + }
  131 + });
  132 +}
169 133  
170   - // }
171   - // })
  134 +const handleScanH5 = () => {
  135 + showScan.value = true;
  136 + // uni.chooseImage({
  137 + // count: 1,
  138 + // sizeType: ['original', 'compressed'],
  139 + // sourceType: ['camera', 'album'],
  140 + // success: (res) => {
  141 + // console.log(res.tempFilePaths[0]);
  142 + // uni.uploadFile({
  143 + // url: import.meta.env.VITE_BASE_URL + "/QRCode/ocr/pric",
  144 + // header: {
  145 + // "Authorization": store.token
  146 + // },
  147 + // fileType: 'image',
  148 + // filePath: res.tempFilePaths[0],
  149 + // name: 'file',
  150 + // success: (uploadRes) => {
  151 + // if (uploadRes.statusCode == 200) {
  152 + // if ("" == uploadRes.data || undefined == uploadRes.data || null ==
  153 + // uploadRes.data) {
  154 + // uni.$u.toast("二维码图片识别失败，请检查二维码图片");
  155 + // return;
  156 + // } else {
  157 + // checkCode(uploadRes.data).then(res => {
  158 + // if (res.data && res.data.code == 200) {
  159 + // uni.$u.route({
  160 + // url: `pages/order-info/order-disposal/scan-detail/index`,
  161 + // params: {
  162 + // data: encodeURIComponent(JSON
  163 + // .stringify(res.data
  164 + // .data))
  165 + // }
  166 + // })
  167 + // return
  168 + // }
  169 + // uni.$u.toast(res.data.msg);
  170 + // })
  171 + // }
  172 + // } else {
  173 + // uni.$u.toast("二维码图片识别失败，请检查二维码图片");
  174 + // }
172 175  
173   - // }
174   - // })
175   - }
  176 + // }
  177 + // })
176 178  
177   - const onDecodeHandler = (data) => {
178   - showScan.value = false
179   - try {
180   - checkCode(data).then(res => {
181   - console.log(res);
182   - if (res.data.code == 200) {
183   - uni.$u.route({
184   - url: `pages/order-info/order-disposal/scan-detail/index`,
185   - params: {
186   - data: encodeURIComponent(JSON.stringify(res.data
187   - .data))
188   - }
189   - })
190   - return
191   - }
192   - alert(res.data.msg);
193   - })
194   - } catch (error) {
195   - alert("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
196   - }
197   - }
198   - const qrReaderClose = () => {
199   - showScan.value = false
200   - }
201   - onMounted(() => {
202   - console.log("处理场所");
203   - nextTick(() => {
204   - try {
205   - const {
206   - height,
207   - top
208   - } = uni.getMenuButtonBoundingClientRect();
209   - topMargin.value = top + 'px';
210   - lightHeight.value = height + 'px';
211   - } catch (error) {
212   - topMargin.value = '60rpx';
213   - lightHeight.value = '60rpx';
214   - console.log('There is no menu because the current app is not a small program');
215   - }
216   - })
217   - })
  179 + // }
  180 + // })
  181 +}
  182 +
  183 +const onDecodeHandler = (data) => {
  184 + showScan.value = false
  185 + try {
  186 + checkCode(data).then(res => {
  187 + console.log(res);
  188 + if (res.data.code == 200) {
  189 + uni.$u.route({
  190 + url: `pages/order-info/order-disposal/scan-detail/index`,
  191 + params: {
  192 + data: encodeURIComponent(JSON.stringify(res.data
  193 + .data))
  194 + }
  195 + })
  196 + return
  197 + }
  198 + alert(res.data.msg);
  199 + })
  200 + } catch (error) {
  201 + alert("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
  202 + }
  203 +}
  204 +const qrReaderClose = () => {
  205 + showScan.value = false
  206 +}
  207 +// 获取指定类型的订单数量
  208 +const getOrderCountByType = (tabIndex) => {
  209 + const type = tabIndex === 0 ? 1 : 3;
  210 + queryOrderList({ type, pageNo: 1, pageSize: 1 }).then((res) => {
  211 + if (res.data && res.data.data) {
  212 + // 这里假设接口返回的total是订单总数
  213 + list.value[tabIndex].count = res.data.data.total || 0;
  214 + }
  215 + }).catch(() => {
  216 + console.log('获取订单数量失败');
  217 + })
  218 +}
  219 +
  220 +// 获取所有类型的订单数量
  221 +const getAllOrderCounts = () => {
  222 + list.value.forEach((_, index) => {
  223 + getOrderCountByType(index);
  224 + })
  225 +}
  226 +
  227 +onMounted(() => {
  228 + console.log("处理场所");
  229 + nextTick(() => {
  230 + try {
  231 + const { height, top } = uni.getMenuButtonBoundingClientRect();
  232 + topMargin.value = top + 'px';
  233 + lightHeight.value = height + 'px';
  234 + } catch (error) {
  235 + topMargin.value = '60rpx';
  236 + lightHeight.value = '60rpx';
  237 + console.log('There is no menu because the current app is not a small program');
  238 + }
  239 + // 初始化获取所有订单数量
  240 + getAllOrderCounts();
  241 + })
  242 +})
218 243 </script>
219 244 <style lang="scss" scoped>
220 245 .scanCode {
... ... @@ -306,4 +331,4 @@
306 331 }
307 332 }
308 333 }
309   -</style>
310 334 \ No newline at end of file
  335 +</style>
... ...
garbage-removal/src/pages/order/order-driver/index.vue
  View file @fe819ed
... ... @@ -21,7 +21,7 @@
21 21 </view>
22 22 <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
23 23 :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
24   - ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
  24 + ref="uTabsElement" :list="displayList" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
25 25 </template>
26 26 <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
27 27 <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
... ... @@ -32,26 +32,68 @@
32 32 </view>
33 33 </template>
34 34 <script setup>
35   -import { nextTick, onMounted, ref } from 'vue';
  35 +import { nextTick, onMounted, ref, computed } from 'vue';
36 36 import swiperListItem from './swiper-list-item/index.vue';
37   -const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
  37 +import { queryOrderList } from "@/apis/order.js";
  38 +
  39 +// 初始化订单类型列表，添加count属性
  40 +const list = ref([{ name: '待清运', count: 0 }, { name: '清运中', count: 0 }, { name: '全部', count: 0 }, { name: '已完成', count: 0 }])
38 41 const current = ref(0);
39 42 const swiperCurrent = ref(0)
40 43 const uTabsElement = ref()
41 44 const topMargin = ref()
42 45 const lightHeight = ref()
43 46 const title = ref('订单列表')
  47 +
  48 +// 创建一个计算属性用于显示带数量的标签
  49 +const displayList = computed(() => {
  50 + return list.value.map(item => ({
  51 + ...item,
  52 + name: `${item.name}(${item.count})`
  53 + }))
  54 +})
  55 +
  56 +// 从tabsChange函数中获取订单统计信息
44 57 const tabsChange = (el) => {
45 58 console.log("tabsChange", el);
46 59 swiperCurrent.value = Number(el.index)
  60 +
  61 + // 当切换标签时，获取该状态下的订单总数
  62 + getOrderCountByType(Number(el.index))
47 63 }
  64 +
48 65 const animationfinish = (e) => {
49 66 current.value = e.detail.current
50 67 swiperCurrent.value = e.detail.current
51 68 }
  69 +
52 70 const translation = (e) => {
53 71 uTabsElement.value.setDx(e.detail.dx)
54 72 }
  73 +
  74 +// 根据订单类型获取订单总数
  75 +const getOrderCountByType = async (type) => {
  76 + try {
  77 + const res = await queryOrderList({
  78 + type: type,
  79 + pageNo: 1,
  80 + pageSize: 1
  81 + });
  82 + if (res.data && res.data.data && res.data.data.total !== undefined) {
  83 + list.value[type].count = res.data.data.total; // 存储该状态的订单总数
  84 + }
  85 + } catch (error) {
  86 + console.error(`获取${list.value[type]?.name || '订单'}总数失败:`, error);
  87 + }
  88 +}
  89 +
  90 +// 初始化时获取所有状态的订单总数
  91 +const getAllOrderCounts = async () => {
  92 + for (let i = 0; i < list.value.length; i++) {
  93 + await getOrderCountByType(i);
  94 + }
  95 +}
  96 +
55 97 onMounted(() => {
56 98 console.log("驾驶员");
57 99 nextTick(() => {
... ... @@ -64,6 +106,8 @@ onMounted(() =&gt; {
64 106 lightHeight.value = '80rpx'
65 107 console.log('There is no menu because the current app is not a small program');
66 108 }
  109 + // 页面加载后获取所有订单总数
  110 + getAllOrderCounts();
67 111 })
68 112 })
69 113 </script>
... ...
garbage-removal/src/pages/order/order-other/index.vue
  View file @fe819ed
... ... @@ -25,7 +25,7 @@
25 25 </view>
26 26 <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
27 27 :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
28   - ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
  28 + ref="uTabsElement" :list="displayList" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
29 29 </template>
30 30 <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
31 31 <swiper-item class="swiper-item" v-for="( item, index ) in list " :key="index">
... ... @@ -37,12 +37,13 @@
37 37  
38 38 </template>
39 39 <script setup>
40   -import { queryOrderMessageCount } from '@/apis/order.js';
  40 +import { queryOrderMessageCount, queryOrderList } from '@/apis/order.js';
41 41 import { useMainStore } from '@/stores/index.js';
42 42 import { computed, nextTick, onMounted, ref } from 'vue';
43 43 import swiperListItem from './swiper-list-item/index.vue';
44 44 const store = useMainStore();
45   -const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
  45 +// 初始化订单类型列表，添加count属性
  46 +const list = ref([{ name: '待清运', count: 0 }, { name: '清运中', count: 0 }, { name: '全部', count: 0 }, { name: '已完成', count: 0 }])
46 47 const current = ref(0);
47 48 const userType = computed(() => store.userType)
48 49 const swiperCurrent = ref(0)
... ... @@ -51,28 +52,68 @@ const topMargin = ref()
51 52 const lightHeight = ref()
52 53 const messageCount = ref(0)
53 54 const title = ref("订单列表")
  55 +const type = ref('error')
  56 +
  57 +// 创建一个计算属性用于显示带数量的标签
  58 +const displayList = computed(() => {
  59 + return list.value.map(item => ({
  60 + ...item,
  61 + name: `${item.name}(${item.count})`
  62 + }))
  63 +})
  64 +
54 65 const tabsChange = (el) => {
55 66 console.log("tabsChange:", el);
56 67 swiperCurrent.value = Number(el.index)
  68 +
  69 + // 当切换标签时，获取该状态下的订单总数
  70 + getOrderCountByType(Number(el.index))
57 71 }
  72 +
58 73 const animationfinish = (e) => {
59 74 current.value = e.detail.current
60 75 swiperCurrent.value = e.detail.current
61 76 }
  77 +
62 78 const translation = (e) => {
63 79 console.log("uTabs:", e.detail.dx);
64 80 uTabsElement.value.setDx(e.detail.dx)
65 81 }
  82 +
66 83 const handlerMessageClick = () => {
67 84 uni.$u.route("pages/order-info/order-other/user-message/index")
68 85 }
69   -onMounted(() => {
70 86  
  87 +// 根据订单类型获取订单总数
  88 +const getOrderCountByType = async (type) => {
  89 + try {
  90 + const res = await queryOrderList({
  91 + type: type,
  92 + pageNo: 1,
  93 + pageSize: 1
  94 + });
  95 + if (res.data && res.data.data && res.data.data.total !== undefined) {
  96 + list.value[type].count = res.data.data.total; // 存储该状态的订单总数
  97 + }
  98 + } catch (error) {
  99 + console.error(`获取${list.value[type]?.name || '订单'}总数失败:`, error);
  100 + }
  101 +}
  102 +
  103 +// 初始化时获取所有状态的订单总数
  104 +const getAllOrderCounts = async () => {
  105 + for (let i = 0; i < list.value.length; i++) {
  106 + await getOrderCountByType(i);
  107 + }
  108 +}
  109 +
  110 +onMounted(() => {
71 111 if (userType.value == '用户') {
72 112 queryOrderMessageCount().then(res => {
73 113 messageCount.value = res.data.data
74 114 })
75 115 }
  116 +
76 117 nextTick(() => {
77 118 try {
78 119 const { height, top } = uni.getMenuButtonBoundingClientRect();
... ... @@ -83,6 +124,9 @@ onMounted(() =&gt; {
83 124 lightHeight.value = "60rpx"
84 125 console.log("There is no menu because the current app is not a small program");
85 126 }
  127 +
  128 + // 页面加载后获取所有订单总数
  129 + getAllOrderCounts();
86 130 })
87 131 })
88 132 </script>
... ...