update

src/packages/sbyj/views/delivery/components/processing/list/index.vue

@@ -1,94 +0,0 @@
-<!-- 水贝亿爵-我的交收-待审核 -->
-<template>
-    <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
-        :page-count="pageCount" @refresh="run">
-        <div class="g-order-list">
-            <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
-                <div class="g-order-list__titlebar">
-                    <div class="left">
-                        <h4>{{ item.goodsnamedisplay }}</h4>
-                    </div>
-                    <div class="right">
-                        <span>{{ item.orderstatusdisplay }}</span>
-                    </div>
-                </div>
-                <div class="g-order-list__content">
-                    <ul>
-                        <li>
-                            <span>交收方向</span>
-                            <span>{{ item.buyorselldisplay }}</span>
-                        </li>
-                        <li>
-                            <span>交收数量</span>
-                            <span>{{ item.deliveryqty }}</span>
-                        </li>
-                        <li>
-                            <span>交收价格</span>
-                            <span>{{ item.orderstatus === 1 ? '--' : item.deliveryprice }}</span>
-                        </li>
-                        <li>
-                            <span>交收货款</span>
-                            <span>{{ item.orderstatus === 1 ? '--' : item.deliveryamount }}</span>
-                        </li>
-                        <li>
-                            <span>交收信息</span>
-                            <span>{{ item.deliveryinfo }}</span>
-                        </li>
-                        <li>
-                            <span>申请日期</span>
-                            <span>{{ formatDate(item.reqtime, 'YYYY-MM-DD') }}</span>
-                        </li>
-                    </ul>
-                </div>
-                <div class="g-order-list__btnbar">
-                    <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
-                </div>
-            </div>
-        </div>
-        <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
-            v-if="componentId" />
-    </app-pull-refresh>
-</template>
-
-<script lang="ts" setup>
-import { shallowRef, defineAsyncComponent } from 'vue'
-import { Button } from 'vant'
-import { formatDate } from '@/filters'
-import { useComponent } from '@/hooks/component'
-import { useRequest } from '@/hooks/request'
-import { queryMineTradeGoodsDeliveryOfflines } from '@/services/api/transfer'
-import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
-
-const componentMap = new Map<string, unknown>([
-    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
-])
-
-const dataList = shallowRef<Model.MineTradeGoodsDeliveryOfflinesRsp[]>([])
-const selectedRow = shallowRef<Model.MineTradeGoodsDeliveryOfflinesRsp>()
-const error = shallowRef(false)
-const pullRefreshRef = shallowRef()
-
-const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
-    pullRefreshRef.value?.refresh()
-})
-
-const { loading, pageIndex, pageCount, run } = useRequest(queryMineTradeGoodsDeliveryOfflines, {
-    params: {
-        pagesize: 20,
-    },
-    onSuccess: (res) => {
-        if (pageIndex.value === 1) {
-            dataList.value = []
-        }
-        dataList.value.push(...res.data)
-    },
-    onError: () => {
-        error.value = true
-    }
-})
-
-const showComponent = (componentName: string, row: Model.MineTradeGoodsDeliveryOfflinesRsp) => {
-    selectedRow.value = row
-    openComponent(componentName)
-}
-</script>

src/packages/sbyj/views/delivery/list/index.vue

@@ -3,17 +3,54 @@
         <template #header>
             <app-navbar title="我的交收" />
         </template>
-        <Tabs class="van-tabs--list" v-model:active="active">
-            <Tab title="待审核" />
-            <Tab title="进行中" />
-            <Tab title="已完成" />
+        <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
+            <Tab title="待审核">
+                <component :is="componentMap.get('pending')" />
+            </Tab>
+            <Tab title="进行中">
+                <component :is="componentMap.get('processing')" />
+            </Tab>
+            <Tab title="已完成">
+                <component :is="componentMap.get('completed')" />
+            </Tab>
         </Tabs>
+        <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
     </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs } from 'vant'
+import { useComponent } from '@/hooks/component'
 
 const active = shallowRef(0)
+const { componentRef, componentId, openComponent, closeComponent } = useComponent()
+
+const componentMap = new Map<string, unknown>([
+    ['pending', defineAsyncComponent(() => import('../components/pending/list/index.vue'))], // 待审核
+    ['processing', defineAsyncComponent(() => import('../components/processing/list/index.vue'))], // 进行中
+    ['completed', defineAsyncComponent(() => import('../components/completed/list/index.vue'))], // 已完成
+])
+
+const onMoreClick = () => {
+    switch (active.value) {
+        case 0: {
+            showComponent('pending')
+            break
+        }
+        case 1: {
+            showComponent('processing')
+            break
+        }
+        case 2: {
+            showComponent('completed')
+            break
+        }
+    }
+}
+
+const showComponent = (componentName: string) => {
+    openComponent(componentName)
+}
+
 </script>