feat: 物流详情

src/store/modules/sales/order.js

@@ -79,6 +79,13 @@ const actions = {
         }
         return res;
     },
+    track: async (context, id) => {
+        let res = await api.logistics(id);
+        if (!res) {
+            ElMessage.error('加载物流失败');
+        }
+        return res;
+    },
     close: async ({ dispatch }, data) => {
         let res = await api.close(data);
         if (res) {

src/views/sales/order/index.vue

@@ -53,12 +53,14 @@
             </template>
         </TableList>
         <CloseOrder ref="refsCloseOrder" />
+        <OrderTrack ref="refsOrderTrack" />
     </div>
 </template>
 
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
     import CloseOrder from './close.vue';
+    import OrderTrack from './track.vue';
     const { proxy } = getCurrentInstance();
     const router = useRouter();
     const store = useStore();
@@ -140,18 +142,6 @@
         console.info('export');
     };
 
-    /* 批量发货 */
-    const handleSend = (selection) => {
-        if (selection.length) {
-            store.commit('orderShip/setCondition', {
-                orderIs: selection.map((item) => item.orderId),
-            });
-            router.push({ name: 'OrderShip' });
-        } else {
-            proxy.$message.warning('请选择要发货的订单');
-        }
-    };
-
     /* 查看详情 */
     const handleDetail = (row) => {
         router.push({
@@ -168,6 +158,24 @@
         unref(refsCloseOrder).show(row.orderId);
     };
 
+    /* 订单发货 */
+    const handleSend = (selection) => {
+        if (selection.length) {
+            store.commit('orderShip/setCondition', {
+                orderIs: selection.map((item) => item.orderId),
+            });
+            router.push({ name: 'OrderShip' });
+        } else {
+            proxy.$message.warning('请选择要发货的订单');
+        }
+    };
+
+    /* 订单跟踪 */
+    const refsOrderTrack = ref(null);
+    const handleTrack = (row) => {
+        unref(refsOrderTrack).show(row.orderId);
+    };
+
     /* 列表配置 */
     const config = reactive({
         columns: [
@@ -237,6 +245,13 @@
                             ) : (
                                 ''
                             )}
+                            {row.orderStatus === 4 ? (
+                                <ElButton type="text" onClick={() => handleTrack(row)}>
+                                    订单跟踪
+                                </ElButton>
+                            ) : (
+                                ''
+                            )}
                         </div>
                     ),
                 },

src/views/sales/order/track.vue

@@ -0,0 +1,69 @@
+<template>
+    <el-dialog v-model="state.visible" title="物流跟踪">
+        <div v-loading="state.loading" class="track-container">
+            <h3>
+                <span class="name">{{ state.info.companyName }}</span>
+                <span class="no">{{ state.info.trackingNo }}</span>
+                <el-button type="text" @click="$copy(`${state.info.companyName} ${state.info.trackingNo}`)">
+                    复制
+                </el-button>
+            </h3>
+            <el-scrollbar max-height="50vh">
+                <el-timeline>
+                    <el-timeline-item
+                        v-for="(item, index) in state.info.logisticsDataList"
+                        :key="index"
+                        placement="top"
+                        :timestamp="item.time"
+                    >
+                        {{ item.context }}
+                    </el-timeline-item>
+                </el-timeline>
+            </el-scrollbar>
+        </div>
+        <template #footer>
+            <el-button @click="close">关闭</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="jsx">
+    const store = useStore();
+    const opts = computed(() => store.state.order.opts);
+    if (!unref(opts).init) {
+        store.dispatch('order/load');
+    }
+    const state = reactive({
+        loading: false,
+        visible: false,
+        info: {
+            logisticsDataList: [],
+        },
+    });
+
+    const show = async (orderId) => {
+        state.visible = true;
+        state.loading = true;
+        let res = await store.dispatch('order/track', orderId);
+        Object.assign(state.info, res || {});
+        state.loading = false;
+    };
+    const close = () => {
+        state.visible = false;
+    };
+    defineExpose({
+        show,
+        close,
+    });
+</script>
+
+<style lang="less" scoped>
+    .track-container {
+        h3 {
+            margin-bottom: @layout-space;
+            .no {
+                margin: 0 @layout-space;
+            }
+        }
+    }
+</style>