update

src/packages/mobile/router/index.ts

@@ -160,6 +160,17 @@ const routes: Array<RouteRecordRaw> = [
     ],
   },
   {
+    path: '/goods',
+    component: Page,
+    children: [
+      {
+        path: 'list',
+        name: 'goods-list',
+        component: () => import('../views/goods/list/Index.vue'),
+      },
+    ],
+  },
+  {
     path: '/presale',
     component: Page,
     children: [

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

@@ -9,16 +9,19 @@
             <Tab title="线下交收单">
             </Tab>
             <Tab title="现货提货单">
-                <Spot />
+                <component :is="componentMap.get('spot')" />
             </Tab>
         </Tabs>
     </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs } from 'vant'
-import Spot from './components/spot/list/Index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['spot', defineAsyncComponent(() => import('./components/spot/list/Index.vue'))], // 现货提货单
+])
 
 const active = shallowRef(0)
 </script>

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

@@ -11,17 +11,19 @@
         </template>
         <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
             <Tab title="预售认购">
-                <Presale />
+                <component :is="componentMap.get('presale')" />
             </Tab>
             <Tab title="转让委托">
+                <component :is="componentMap.get('transferorder')" />
             </Tab>
             <Tab title="转让成交">
+                <component :is="componentMap.get('transfertrade')" />
             </Tab>
             <Tab title="掉期委托">
-                <SwapOrder />
+                <component :is="componentMap.get('swaporder')" />
             </Tab>
             <Tab title="掉期成交">
-                <SwapTrade />
+                <component :is="componentMap.get('swaptrade')" />
             </Tab>
             <Tab title="订单委托">
             </Tab>
@@ -37,19 +39,21 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, defineAsyncComponent, onUnmounted} from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs } from 'vant'
 import { useComponent } from '@/hooks/component'
-import Presale from './components/presale/list/Index.vue'
-import SwapOrder from './components/swaporder/list/Index.vue'
-import SwapTrade from './components/swaptrade/list/Index.vue'
 
 const active = shallowRef(0)
 const { componentRef, componentId, openComponent, closeComponent } = useComponent()
 
 const componentMap = new Map<string, unknown>([
-    ['hisswaporder', defineAsyncComponent(() => import('./components/hisswaporder/list/Index.vue'))],
-    ['hisswaptrade', defineAsyncComponent(() => import('./components/hisswaptrade/list/Index.vue'))],
+    ['presale', defineAsyncComponent(() => import('./components/presale/list/Index.vue'))], // 预售认购
+    ['swaporder', defineAsyncComponent(() => import('./components/swaporder/list/Index.vue'))], // 掉期委托
+    ['swaptrade', defineAsyncComponent(() => import('./components/swaptrade/list/Index.vue'))], // 掉期成交
+    ['transferorder', defineAsyncComponent(() => import('./components/transferorder/list/Index.vue'))], // 转让委托
+    ['transfertrade', defineAsyncComponent(() => import('./components/transfertrade/list/Index.vue'))], // 转让成交
+    ['hisswaporder', defineAsyncComponent(() => import('./components/hisswaporder/list/Index.vue'))], // 历史掉期委托
+    ['hisswaptrade', defineAsyncComponent(() => import('./components/hisswaptrade/list/Index.vue'))], // 历史掉期成交
 ])
 
 const onMoreClick = () => {

src/packages/mobile/views/order/list/components/transferorder/detail/Index.vue

@@ -0,0 +1,47 @@
+<!-- 我的订单-转让委托-详情 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="转让委托单" @back="closed" />
+            </template>
+            <div class="g-form__container">
+                <CellGroup title="预售认购信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.goodsname" />
+                    <Cell title="转让数量" :value="selectedRow.orderqty" />
+                    <Cell title="转让价" :value="selectedRow.orderprice" />
+                    <Cell title="订货价" :value="selectedRow.presaleprice" />
+                    <Cell title="摘牌数量" :value="selectedRow.tradeqty" />
+                    <Cell title="委托状态" :value="selectedRow.orderstatus" />
+                    <Cell title="委托时间" :value="selectedRow.ordertime" />
+                    <Cell title="委托单号" :value="selectedRow.orderid" />
+                </CellGroup>
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { CellGroup, Cell } from 'vant'
+import AppModal from '@/components/base/modal/index.vue'
+
+defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.MineTradeOrdersRsp>,
+        required: true,
+    }
+})
+
+const showModal = shallowRef(true)
+
+// 关闭弹窗
+const closed = () => {
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/transfer/list/Index.vue → src/packages/mobile/views/order/list/components/transferorder/list/Index.vue

@@ -1,4 +1,4 @@
-<!-- 我的持仓-转让委托 -->
+<!-- 我的订单-转让委托 -->
 <template>
     <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
         :page-count="pageCount" @refresh="run">
@@ -7,52 +7,35 @@
                 <div class="g-order-list__titlebar">
                     <div class="left">
                         <h4>{{ item.goodsname }}</h4>
+                        <span>{{ item.orderid }}</span>
                     </div>
                     <div class="right">
-                        <span>{{ item.paystatus }}</span>
+                        <span>{{ item.orderstatus }}</span>
                     </div>
                 </div>
                 <div class="g-order-list__content">
                     <ul>
                         <li>
-                            <span>持仓数量</span>
-                            <span>{{ item.buycurpositionqty }}</span>
+                            <span>转让数量</span>
+                            <span>{{ item.orderqty }}</span>
                         </li>
                         <li>
-                            <span>订货价</span>
-                            <span>{{ item.presaleprice }}</span>
-                        </li>
-                        <li>
-                            <span>持仓金额</span>
-                            <span>{{ item.buycurholderamount }}</span>
-                        </li>
-                        <li>
-                            <span>转让定金比例</span>
-                            <span>{{ item.transferdepositratio }}</span>
+                            <span>转让价</span>
+                            <span>{{ item.orderprice }}</span>
                         </li>
                         <li>
-                            <span>转让定金</span>
-                            <span>{{ item.transferdeposit }}</span>
+                            <span>摘牌数量</span>
+                            <span>{{ item.tradeqty }}</span>
                         </li>
                         <li>
-                            <span>未付定金</span>
-                            <span>{{ item.depositremain }}</span>
-                        </li>
-                        <li>
-                            <span>最后交易日</span>
-                            <span>{{ item.lasttradedate }}</span>
-                        </li>
-                        <li>
-                            <span>可用数量</span>
-                            <span>{{ item.buycurpositionqty - item.buyfrozenqty }}</span>
+                            <span>订货价</span>
+                            <span>{{ item.presaleprice }}</span>
                         </li>
                     </ul>
                 </div>
                 <div class="g-order-list__btnbar">
                     <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
-                    <Button size="small" @click="showComponent('detail', item)" round>追加定金</Button>
-                    <Button size="small" @click="showComponent('detail', item)" round>转让</Button>
-                    <Button size="small" @click="showComponent('detail', item)" round>交收</Button>
+                    <Button size="small" @click="showComponent('cancel', item)" round>撤销</Button>
                 </div>
             </div>
         </div>
@@ -66,15 +49,15 @@ import { shallowRef, defineAsyncComponent } from 'vue'
 import { Button } from 'vant'
 import { useComponent } from '@/hooks/component'
 import { useRequest } from '@/hooks/request'
-import { queryMineTradePositionExs } from '@/services/api/transfer'
+import { queryMineTradeOrders } 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.MineTradePositionExsRsp[]>([])
-const selectedRow = shallowRef<Model.MineTradePositionExsRsp>()
+const dataList = shallowRef<Model.MineTradeOrdersRsp[]>([])
+const selectedRow = shallowRef<Model.MineTradeOrdersRsp>()
 const error = shallowRef(false)
 const pullRefreshRef = shallowRef()
 
@@ -82,7 +65,7 @@ const { componentRef, componentId, openComponent, closeComponent } = useComponen
     pullRefreshRef.value?.refresh()
 })
 
-const { loading, pageIndex, pageCount, run } = useRequest(queryMineTradePositionExs, {
+const { loading, pageIndex, pageCount, run } = useRequest(queryMineTradeOrders, {
     params: {
         pagesize: 20,
     },
@@ -97,7 +80,7 @@ const { loading, pageIndex, pageCount, run } = useRequest(queryMineTradePosition
     }
 })
 
-const showComponent = (componentName: string, row: Model.MineTradePositionExsRsp) => {
+const showComponent = (componentName: string, row: Model.MineTradeOrdersRsp) => {
     selectedRow.value = row
     openComponent(componentName)
 }

src/packages/mobile/views/order/list/components/transfertrade/detail/Index.vue

@@ -0,0 +1,48 @@
+<!-- 我的订单-转让成交-详情 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="转让成交单" @back="closed" />
+            </template>
+            <div class="g-form__container">
+                <CellGroup title="预售认购信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.goodsname" />
+                    <Cell title="方向" :value="selectedRow.buyorsell" />
+                    <Cell title="转让数量" :value="selectedRow.tradeqty" />
+                    <Cell title="转让价" :value="selectedRow.tradeprice" />
+                    <Cell title="订货价" :value="selectedRow.presaleprice" />
+                    <Cell title="损益" :value="selectedRow.premium" />
+                    <Cell title="对手方" :value="selectedRow.accountname" />
+                    <Cell title="成交时间" :value="selectedRow.tradedate" />
+                    <Cell title="成交单号" :value="selectedRow.orderid" />
+                </CellGroup>
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { CellGroup, Cell } from 'vant'
+import AppModal from '@/components/base/modal/index.vue'
+
+defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.MineTradeTradeDetailsRsp>,
+        required: true,
+    }
+})
+
+const showModal = shallowRef(true)
+
+// 关闭弹窗
+const closed = () => {
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -0,0 +1,90 @@
+<!-- 我的订单-转让成交 -->
+<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.goodsname }}</h4>
+                        <span>{{ item.orderid }}</span>
+                    </div>
+                    <div class="right">
+                        <span>{{ item.buyorsell }}</span>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>转让数量</span>
+                            <span>{{ item.tradeqty }}</span>
+                        </li>
+                        <li>
+                            <span>转让价</span>
+                            <span>{{ item.tradeprice }}</span>
+                        </li>
+                        <li>
+                            <span>订货价</span>
+                            <span>{{ item.presaleprice }}</span>
+                        </li>
+                        <li>
+                            <span>损益</span>
+                            <span>{{ item.premium }}</span>
+                        </li>
+                        <li>
+                            <span>时间</span>
+                            <span>{{ item.tradedate }}</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 { useComponent } from '@/hooks/component'
+import { useRequest } from '@/hooks/request'
+import { queryMineTradeTradeDetails } 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.MineTradeTradeDetailsRsp[]>([])
+const selectedRow = shallowRef<Model.MineTradeTradeDetailsRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryMineTradeTradeDetails, {
+    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.MineTradeTradeDetailsRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

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

@@ -5,30 +5,33 @@
         </template>
         <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
             <Tab title="预售持仓">
-                <Presale />
+                <component :is="componentMap.get('presale')" />
             </Tab>
             <Tab title="转让持仓">
-                <Transfer />
+                <component :is="componentMap.get('transfer')" />
             </Tab>
             <Tab title="掉期持仓">
-                <Swap />
+                <component :is="componentMap.get('swap')" />
             </Tab>
             <Tab title="订单持仓">
             </Tab>
             <Tab title="现货持仓">
-                <Spot />
+                <component :is="componentMap.get('spot')" />
             </Tab>
         </Tabs>
     </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs } from 'vant'
-import Presale from './components/presale/list/Index.vue'
-import Transfer from './components/transfer/list/Index.vue'
-import Spot from './components/spot/list/Index.vue'
-import Swap from './components/swap/list/Index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['presale', defineAsyncComponent(() => import('./components/presale/list/Index.vue'))], // 预售持仓
+    ['transfer', defineAsyncComponent(() => import('./components/transfer/list/Index.vue'))], // 转让持仓
+    ['spot', defineAsyncComponent(() => import('./components/spot/list/Index.vue'))], // 现货持仓
+    ['swap', defineAsyncComponent(() => import('./components/swap/list/Index.vue'))], // 掉期持仓
+])
 
 const active = shallowRef(0)
 </script>

src/packages/mobile/views/order/list/components/transfer/detail/Index.vue → src/packages/mobile/views/order/position/components/transfer/delivery/Index.vue

@@ -1,4 +1,4 @@
-<!-- 我的持仓-转让持仓-详情 -->
+<!-- 我的持仓-转让持仓-交收 -->
 <template>
     <app-modal direction="right" height="100%" v-model:show="showModal">
         <app-view class="g-form">

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

@@ -49,10 +49,12 @@
                     </ul>
                 </div>
                 <div class="g-order-list__btnbar">
+                    <Button size="small" @click="showComponent('detail', item)" round
+                        v-if="item.paystatus === 1">追加定金</Button>
+                    <Button size="small" @click="showComponent('sell', item)" round v-if="item.paystatus === 2">转让</Button>
+                    <Button size="small" @click="showComponent('delivery', item)" round
+                        v-if="item.paystatus === 2">交收</Button>
                     <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
-                    <Button size="small" @click="showComponent('detail', item)" round>追加定金</Button>
-                    <Button size="small" @click="showComponent('detail', item)" round>转让</Button>
-                    <Button size="small" @click="showComponent('detail', item)" round>交收</Button>
                 </div>
             </div>
         </div>
@@ -70,7 +72,9 @@ import { queryMineTradePositionExs } 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'))],
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))], // 详情
+    ['sell', defineAsyncComponent(() => import('../sell/Index.vue'))], // 转让
+    ['delivery', defineAsyncComponent(() => import('../delivery/Index.vue'))], // 交收
 ])
 
 const dataList = shallowRef<Model.MineTradePositionExsRsp[]>([])

src/packages/mobile/views/order/position/components/transfer/sell/Index.vue

@@ -0,0 +1,111 @@
+<!-- 我的持仓-转让持仓-转让 -->
+<template>
+    <app-modal direction="right" height="100%" v-model:show="showModal">
+        <app-view class="g-form">
+            <template #header>
+                <app-navbar title="转让" @back="closed" />
+            </template>
+            <Form ref="formRef" class="g-form__container" @submit="onSubmit">
+                <CellGroup title="转让信息" inset>
+                    <Field label="预售价">
+                        <template #input>
+                            <span>{{ selectedRow.presaleprice }}</span>
+                        </template>
+                    </Field>
+                    <Field label="可用量">
+                        <template #input>
+                            <span>{{ selectedRow.buycurpositionqty }}</span>
+                        </template>
+                    </Field>
+                    <Field name="OrderPrice" :rules="formRules.OrderPrice" label="转让价">
+                        <template #input>
+                            <Stepper v-model="formData.OrderPrice" theme="round" :decimal-length="2" :auto-fixed="false"
+                                button-size="22" />
+                        </template>
+                    </Field>
+                    <Field name="OrderQty" :rules="formRules.OrderQty" label="转让数量">
+                        <template #input>
+                            <Stepper v-model="formData.OrderQty" theme="round" :max="selectedRow.buycurpositionqty"
+                                button-size="22" :auto-fixed="false" integer />
+                        </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, Form, Field, Stepper, Button, FieldRule, FormInstance } from 'vant'
+import { fullloading, dialog } from '@/utils/vant'
+import { useOrder } from '@/business/trade'
+import AppModal from '@/components/base/modal/index.vue'
+import { BuyOrSell } from '@/constants/order'
+import { EPriceMode, EValidType, EListingSelectType, EBuildType } from '@/constants/client'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.MineTradePositionExsRsp>,
+        required: true
+    },
+})
+
+const { formData, formSubmit } = useOrder()
+const formRef = shallowRef<FormInstance>()
+const refresh = shallowRef(false) // 是否刷新父组件数据
+const showModal = shallowRef(true)
+
+// 表单验证规则
+const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
+    OrderPrice: [{
+        message: '请输入价格',
+        validator: () => {
+            return !!formData.OrderPrice
+        }
+    }],
+    OrderQty: [{
+        message: '请输入数量',
+        validator: () => {
+            return !!formData.OrderQty
+        }
+    }],
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 提交挂牌
+const onSubmit = () => {
+    const { goodsid } = props.selectedRow
+    formData.GoodsID = goodsid
+    formData.MarketID = 49201
+    formData.BuyOrSell = BuyOrSell.Sell
+    formData.ValidType = EValidType.VALIDTYPE_YZ
+    formData.PriceMode = EPriceMode.PRICEMODE_LIMIT
+    formData.ListingSelectType = EListingSelectType.LISTINGSELECTTYPE_LISTING
+    formData.BuildType = EBuildType.BUILDTYPE_CLOSE
+
+    fullloading((hideLoading) => {
+        formSubmit().then(() => {
+            hideLoading()
+            dialog('提交成功').then(() => closed(true))
+        }).catch((err) => {
+            hideLoading(err, 'fail')
+        })
+    })
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -5,7 +5,7 @@
         </template>
         <Swipe :autoplay="5000" indicator-color="white" lazy-render>
             <SwipeItem v-for="(item, index) in bannerList" :key="index">
-                <img :src="getFileUrl(item.attachmenturl)" />
+                <img :src="getFileUrl(item.bannerpicurl)" />
             </SwipeItem>
         </Swipe>
         <div>正在抢购</div>

src/packages/mobile/views/transfer/detail/Index.vue

@@ -11,12 +11,12 @@
         <div class="g-detail__info" v-if="detail">
             <div class="pricebar">
                 <div class="pricebar-left">
-                    <span class="tag">订货价</span>
+                    <span class="tag">最新价</span>
                     <span class="unit">￥</span>
-                    <span class="price">{{ detail.presaleprice.toFixed(2) }}</span>
+                    <span class="price">{{ getQuotePrice(detail.goodscode) }}</span>
                 </div>
                 <div class="pricebar-right">
-                    <span>最新价：{{ detail.goodsid }}</span>
+                    <span>订货价：{{ detail.presaleprice.toFixed(2) }}</span>
                 </div>
             </div>
             <div class="titlebar">
@@ -24,6 +24,8 @@
                 <span>{{ detail.goodsname }}</span>
             </div>
         </div>
+        <Cell title="转让列表" />
+        <app-list :columns="columns" :data-list="sellList" />
         <div class="g-detail__desc">
             <template v-for="(url, index) in detailImages" :key="index">
                 <img :src="url" alt="" />
@@ -31,7 +33,7 @@
         </div>
         <template #footer>
             <div class="g-detail__footer">
-                <Button type="primary" block round @click="openComponent('delisting')">我要转让</Button>
+                <Button type="primary" block round @click="openComponent('listing')">我要转让</Button>
             </div>
             <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ detail }" @closed="closeComponent"
                 v-if="componentId" />
@@ -41,31 +43,48 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from 'vue'
-import { Swipe, SwipeItem, Button, Tag } from 'vant'
-import { getFileUrl, parsePercent } from '@/filters'
+import { Swipe, SwipeItem, Button, Cell } from 'vant'
+import { getFileUrl } from '@/filters'
 import { useRequest } from '@/hooks/request'
+import { BuyOrSell } from '@/constants/order'
 import { queryPresaleDefault } from '@/services/api/transfer'
+import { queryTjmdTradeOrderDetail } from '@/services/api/swap'
 import { useComponent } from '@/hooks/component'
 import { useNavigation } from '@/hooks/navigation'
 import { useFuturesStore } from '@/stores'
+import AppList from '@mobile/components/base/list/index.vue'
 
 const componentMap = new Map<string, unknown>([
+    ['listing', defineAsyncComponent(() => import('./components/listing/index.vue'))], // 挂牌
     ['delisting', defineAsyncComponent(() => import('./components/delisting/index.vue'))], // 摘牌
 ])
 
 const { getQueryStringToNumber } = useNavigation()
 const { componentRef, componentId, openComponent, closeComponent } = useComponent()
-const futuresStore = useFuturesStore()
+const { getQuotePrice } = useFuturesStore()
+const goodsid = getQueryStringToNumber('goodsid')
 
 const { data: detail } = useRequest(queryPresaleDefault, {
     params: {
-        goodsid: getQueryStringToNumber('goodsid'),
-    },
-    onSuccess: (res) => {
-        futuresStore.getQuotePrice(res.data.goodscode)
+        goodsid,
     }
 })
 
+const { dataList: sellList } = useRequest(queryTjmdTradeOrderDetail, {
+    params: {
+        pagesize: 3,
+        goodsid,
+        buyorsell: BuyOrSell.Sell,
+    }
+})
+
+const columns: Model.TableColumn[] = [
+    { prop: 'username', label: '挂牌方' },
+    { prop: 'orderqty', label: '数量' },
+    { prop: 'orderprice', label: '价格' },
+    { prop: 'operate', label: '操作' },
+]
+
 // 商品banner
 const detailBanners = computed(() => {
     const bannerpicurl = detail.value?.bannerpicurl ?? ''

src/packages/mobile/views/transfer/detail/components/listing/index.less

@@ -0,0 +1,13 @@
+.supply-demand-listing {
+    &__form {
+        .van-stepper {
+            display: flex;
+            align-items: center;
+            width: 100%;
+
+            &__input {
+                flex: 1;
+            }
+        }
+    }
+}

src/packages/mobile/views/transfer/detail/components/listing/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <app-popup title="转让" v-model:show="showModal" :refresh="refresh">
+        <Form ref="formRef" @submit="onSubmit">
+            <Field label="预售价">
+                <template #input>
+                    <span>{{ detail.presaleprice }}</span>
+                </template>
+            </Field>
+            <Field label="可用量">
+                <template #input>
+                    <span>{{ 0 }}</span>
+                </template>
+            </Field>
+            <Field name="OrderPrice" :rules="formRules.OrderPrice" label="转让价">
+                <template #input>
+                    <Stepper v-model="formData.OrderPrice" theme="round" :min="detail.presaleprice" :decimal-length="2"
+                        :auto-fixed="false" button-size="22" />
+                </template>
+            </Field>
+            <Field name="OrderQty" :rules="formRules.OrderQty" label="转让数量">
+                <template #input>
+                    <Stepper v-model="formData.OrderQty" theme="round" :max="0" button-size="22" :auto-fixed="false"
+                        integer />
+                </template>
+            </Field>
+        </Form>
+        <template #footer>
+            <Button type="primary" block round @click="formRef?.submit">确定</Button>
+        </template>
+    </app-popup>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType, onMounted, computed } from 'vue'
+import { Form, Field, Stepper, Button, FieldRule, FormInstance } from 'vant'
+import { fullloading, dialog } from '@/utils/vant'
+import { useAccountStore } from '@/stores'
+import { useOrder } from '@/business/trade'
+import AppPopup from '@mobile/components/base/popup/index.vue'
+import { BuyOrSell } from '@/constants/order'
+import { EPriceMode, EValidType } from '@/constants/client'
+//import AppSelect from '@mobile/components/base/select/index.vue'
+
+const props = defineProps({
+    detail: {
+        type: Object as PropType<Model.PresaleDefaultRsp>,
+        required: true
+    },
+})
+
+const { formData, formSubmit } = useOrder()
+const formRef = shallowRef<FormInstance>()
+const refresh = shallowRef(false) // 是否刷新父组件数据
+const showModal = shallowRef(true)
+
+// 表单验证规则
+const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
+    OrderPrice: [{
+        message: '请输入价格',
+        validator: () => {
+            return !!formData.OrderPrice
+        }
+    }],
+    OrderQty: [{
+        message: '请输入数量',
+        validator: () => {
+            return !!formData.OrderQty
+        }
+    }],
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 提交挂牌
+const onSubmit = () => {
+    // const { applyid, goodsid, marketid } = props.detail
+    // formData.GoodsID = goodsid
+    // formData.MarketID = marketid
+    // formData.BuyOrSell = BuyOrSell.Buy
+    // formData.RelatedID = applyid
+    // formData.ValidType = EValidType.VALIDTYPE_YZ
+    // formData.PriceMode = EPriceMode.PRICEMODE_LIMIT
+
+    fullloading((hideLoading) => {
+        formSubmit().then(() => {
+            hideLoading()
+            dialog('提交成功').then(() => closed(true))
+        }).catch((err) => {
+            hideLoading(err, 'fail')
+        })
+    })
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>