update

src/packages/mobile/assets/themes/global/global.less

@@ -93,6 +93,75 @@
     }
 }
 
+/* 订单列表 */
+.g-order-list {
+    padding: .2rem;
+    padding-bottom: 0;
+
+    &__box {
+        background-color: #fff;
+        border-radius: .16rem;
+        padding: .24rem;
+    }
+
+    &:not(:first-child) {
+        margin-top: .2rem;
+    }
+
+    &__titlebar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: .2rem;
+
+        .left {
+            h4 {
+                font-weight: bold;
+            }
+        }
+
+        .right {
+            font-size: .24rem;
+            color: #999;
+        }
+    }
+
+    &__content {
+        font-size: .24rem;
+
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+
+            li {
+                display: flex;
+                justify-content: space-between;
+                width: calc(~"50% - .24rem");
+
+                span {
+                    &:first-child {
+                        color: #999;
+                        padding-right: .24rem;
+                    }
+                }
+            }
+        }
+    }
+
+    &__btnbar {
+        display: flex;
+        justify-content: flex-end;
+        gap: .16rem;
+        margin-top: .2rem;
+
+        .van-button {
+            width: 1.6rem;
+            border-width: 1px;
+        }
+    }
+}
+
 .van {
     &-dialog {
         &__message {
@@ -100,4 +169,21 @@
             line-height: .44rem;
         }
     }
+
+    &-tabs {
+        &--list {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        &--list &__content {
+            flex: 1;
+            overflow-y: auto;
+
+            .van-tab__panel {
+                height: 100%;
+            }
+        }
+    }
 }

src/packages/mobile/router/index.ts

@@ -193,18 +193,18 @@ const routes: Array<RouteRecordRaw> = [
     ],
   },
   {
-    path: '/actuals',
+    path: '/spot',
     component: Page,
     children: [
       {
         path: 'list',
-        name: 'actuals-list',
-        component: () => import('../views/actuals/list/Index.vue'),
+        name: 'spot-list',
+        component: () => import('../views/spot/list/Index.vue'),
       },
       {
         path: 'detail',
-        name: 'actuals-detail',
-        component: () => import('../views/actuals/detail/Index.vue'),
+        name: 'spot-detail',
+        component: () => import('../views/spot/detail/Index.vue'),
       },
     ],
   },
@@ -249,9 +249,9 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('../views/order/position/Index.vue'),
       },
       {
-        path: 'settlement',
-        name: 'order-settlement',
-        component: () => import('../views/order/settlement/Index.vue'),
+        path: 'delivery',
+        name: 'order-delivery',
+        component: () => import('../views/order/delivery/Index.vue'),
       },
       {
         path: 'performance',

src/packages/mobile/views/home/main/Index.vue

@@ -33,7 +33,7 @@
             <img src="@mobile/assets/icons/wdrw.svg" />
             <span>订单挂牌</span>
           </li>
-          <li @click="routerTo('actuals-list')">
+          <li @click="routerTo('spot-list')">
             <img src="@mobile/assets/icons/htzr.svg" />
             <span>现货贸易</span>
           </li>

src/packages/mobile/views/mine/Index.vue

@@ -58,7 +58,7 @@
                     <img src="@mobile/assets/icons/order.svg" />
                     <span>我的订单</span>
                 </li>
-                <li @click="routerTo('order-settlement')">
+                <li @click="routerTo('order-delivery')">
                     <img src="@mobile/assets/icons/wddj.svg" />
                     <span>交货提货</span>
                 </li>

src/packages/mobile/views/order/delivery/Index.vue

@@ -0,0 +1,22 @@
+<template>
+    <app-view>
+        <template #header>
+            <app-navbar title="交收提货" />
+        </template>
+        <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
+            <Tab title="线上交收单">
+            </Tab>
+            <Tab title="线下交收单">
+            </Tab>
+            <Tab title="现货提货单">
+            </Tab>
+        </Tabs>
+    </app-view>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { Tab, Tabs } from 'vant'
+
+const active = shallowRef(0)
+</script>

src/packages/mobile/views/order/list/Index.vue

@@ -3,8 +3,32 @@
         <template #header>
             <app-navbar title="我的订单" />
         </template>
+        <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
+            <Tab title="预售认购">
+            </Tab>
+            <Tab title="转让委托">
+            </Tab>
+            <Tab title="转让成交">
+            </Tab>
+            <Tab title="掉期委托">
+            </Tab>
+            <Tab title="掉期成交">
+            </Tab>
+            <Tab title="订单委托">
+            </Tab>
+            <Tab title="订单成交">
+            </Tab>
+            <Tab title="挂牌委托">
+            </Tab>
+            <Tab title="挂牌成交">
+            </Tab>
+        </Tabs>
     </app-view>
 </template>
 
 <script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { Tab, Tabs } from 'vant'
+
+const active = shallowRef(0)
 </script>

src/packages/mobile/views/order/performance/Index.vue

@@ -3,8 +3,18 @@
         <template #header>
             <app-navbar title="履约信息" />
         </template>
+        <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
+            <Tab title="买履约">
+            </Tab>
+            <Tab title="卖履约">
+            </Tab>
+        </Tabs>
     </app-view>
 </template>
 
 <script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { Tab, Tabs } from 'vant'
+
+const active = shallowRef(0)
 </script>

src/packages/mobile/views/order/position/Index.vue

@@ -3,8 +3,28 @@
         <template #header>
             <app-navbar title="我的持仓" />
         </template>
+        <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
+            <Tab title="预售持仓">
+                <Presale />
+            </Tab>
+            <Tab title="转让持仓">
+            </Tab>
+            <Tab title="掉期持仓">
+            </Tab>
+            <Tab title="订单持仓">
+            </Tab>
+            <Tab title="现货持仓">
+                <Spot />
+            </Tab>
+        </Tabs>
     </app-view>
 </template>
 
 <script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { Tab, Tabs } from 'vant'
+import Presale from './components/presale/list/Index.vue'
+import Spot from './components/spot/list/Index.vue'
+
+const active = shallowRef(0)
 </script>

src/packages/mobile/views/order/position/components/presale/detail/Index.vue

@@ -0,0 +1,7 @@
+<!-- 我的持仓-预售持仓-详情 -->
+<template>
+    详情
+</template>
+
+<script lang="ts" setup>
+</script>

src/packages/mobile/views/order/position/components/presale/list/Index.vue

@@ -0,0 +1,7 @@
+<!-- 我的持仓-预售持仓 -->
+<template>
+    预售
+</template>
+
+<script lang="ts" setup>
+</script>

src/packages/mobile/views/order/position/components/spot/list/Index.vue

@@ -0,0 +1,84 @@
+<!-- 我的持仓-现货持仓 -->
+<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.wrstandardname }}</h4>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>库存量</span>
+                            <span>{{ item.qty }}</span>
+                        </li>
+                        <li>
+                            <span>冻结量</span>
+                            <span>{{ item.freezerqty }}</span>
+                        </li>
+                        <li>
+                            <span>可用量</span>
+                            <span>{{ item.enableqty }}</span>
+                        </li>
+                        <li>
+                            <span>仓库</span>
+                            <span>{{ item.warehousename }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="g-order-list__btnbar">
+                    <Button size="small" @click="showComponent('listing', item)" round>挂牌</Button>
+                    <Button size="small" @click="showComponent('pickup', 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 { useComponent } from '@/hooks/component'
+import { useRequest } from '@/hooks/request'
+import { queryHoldLB } from '@/services/api/order'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['listing', defineAsyncComponent(() => import('../listing/Index.vue'))],
+    ['pickup', defineAsyncComponent(() => import('../pickup/Index.vue'))],
+])
+
+const dataList = shallowRef<Model.HoldLBRsp[]>([])
+const selectedRow = shallowRef<Model.HoldLBRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryHoldLB, {
+    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.HoldLBRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

src/packages/mobile/views/order/position/components/spot/listing/Index.vue

@@ -0,0 +1,102 @@
+<!-- 我的持仓-现货持仓-挂牌 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="挂牌" @back="closed" />
+            </template>
+            <Form ref="formRef" class="g-form__container" @submit="onSubmit">
+                <CellGroup title="现货持仓信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.wrstandardname" />
+                    <Cell title="仓库" :value="selectedRow.warehousename" />
+                    <Cell title="库存量" :value="selectedRow.qty" />
+                    <Cell title="冻结量" :value="selectedRow.freezerqty" />
+                    <Cell title="可用量" :value="selectedRow.enableqty" />
+                </CellGroup>
+                <CellGroup title="挂牌信息">
+                    <Field name="OrderQty" :rules="formRules.OrderQty" label="挂牌数量">
+                        <template #input>
+                            <Stepper v-model="formData.OrderQty" theme="round" button-size="22" :auto-fixed="false"
+                                integer />
+                        </template>
+                    </Field>
+                    <Field name="FixedPrice" :rules="formRules.FixedPrice" label="挂牌价格">
+                        <template #input>
+                            <Stepper v-model="formData.FixedPrice" :default-value="selectedRow.spotgoodsprice" theme="round"
+                                :decimal-length="2" :auto-fixed="false" button-size="22" />
+                        </template>
+                    </Field>
+                </CellGroup>
+            </Form>
+            <template #footer>
+                <div class="g-form__footer">
+                    <Button block round type="primary" @click="formRef?.submit">卖出</Button>
+                </div>
+            </template>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { CellGroup, Cell, Button, Stepper, Field, Form, FormInstance, FieldRule } from 'vant'
+import { fullloading } from '@/utils/vant'
+import { useHdWROrder } from '@/business/trade'
+import AppModal from '@/components/base/modal/index.vue'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.HoldLBRsp>,
+        required: true,
+    }
+})
+
+const { formData, listingSubmit } = useHdWROrder()
+const formRef = shallowRef<FormInstance>()
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 表单验证规则
+const formRules: { [key in keyof Proto.HdWROrderReq]?: FieldRule[] } = {
+    FixedPrice: [{
+        message: '请输入价格',
+        validator: () => {
+            return !!formData.FixedPrice
+        }
+    }],
+    OrderQty: [{
+        message: '请输入数量',
+        validator: (val) => {
+            if (val) {
+                if (val > props.selectedRow.enableqty) {
+                    return '可用数量不足'
+                }
+                return true
+            }
+            return false
+        }
+    }],
+}
+
+const onSubmit = () => {
+    fullloading((hideLoading) => {
+        listingSubmit().then(() => {
+            hideLoading('下单成功', 'success')
+            closed(true)
+        }).catch((err) => {
+            hideLoading(err, 'fail')
+        })
+    })
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/position/components/spot/pickup/Index.vue

@@ -0,0 +1,7 @@
+<!-- 我的持仓-现货持仓-提货 -->
+<template>
+    提货
+</template>
+
+<script lang="ts" setup>
+</script>

src/packages/mobile/views/order/settlement/Index.vue

@@ -1,10 +0,0 @@
-<template>
-    <app-view>
-        <template #header>
-            <app-navbar title="交收提货" />
-        </template>
-    </app-view>
-</template>
-
-<script lang="ts" setup>
-</script>

src/packages/mobile/views/actuals/detail/Index.vue → src/packages/mobile/views/spot/detail/Index.vue

@@ -1,9 +1,9 @@
 <template>
-    <app-view class="actuals-details g-form">
+    <app-view class="spot-details g-form">
         <template #header>
             <app-navbar title="挂牌详情" />
         </template>
-        <div v-if="quoteItem" class="actuals-details__content">
+        <div v-if="quoteItem" class="spot-details__content">
             <Swipe class="banner" :autoplay="5000" indicator-color="white" lazy-render>
                 <SwipeItem v-for="(url, index) in topBanners" :key="index">
                     <img :src="url" />

src/packages/mobile/views/actuals/detail/index.less → src/packages/mobile/views/spot/detail/index.less

@@ -1,4 +1,4 @@
-.actuals-details {
+.spot-details {
     .g-form__footer {
         background-color: #fff;
     }

src/packages/mobile/views/actuals/list/Index.vue → src/packages/mobile/views/spot/list/Index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-view class="actuals-list">
+    <app-view class="spot-list">
         <template #header>
             <app-navbar title="现货挂牌" />
         </template>
@@ -8,7 +8,7 @@
             <div class="waterfall">
                 <div class="waterfall-item" v-for="(item, index) in dataList" :key="index">
                     <div class="goods"
-                        @click="$router.push({ name: 'actuals-detail', query: { wrfactortypeid: item.wrfactortypeid } })">
+                        @click="$router.push({ name: 'spot-detail', query: { wrfactortypeid: item.wrfactortypeid } })">
                         <div class="goods-image">
                             <img :src="getFirstImage(item.thumurls)" />
                         </div>

src/packages/mobile/views/actuals/list/index.less → src/packages/mobile/views/spot/list/index.less

@@ -1,4 +1,4 @@
-.actuals-list {
+.spot-list {
     .waterfall {
         display: flex;
         flex-wrap: wrap;