Merge branch 'master' of http://47.101.159.18:3000/Muchinfo/MTP20_WEB_GLOBAL

src/constants/order.ts

@@ -20,6 +20,14 @@ export enum BuildType {
 }
 
 /**
+ * 取价方式
+ */
+export enum PriceMode {
+    Market = 1, // 市价
+    Limit = 2, // 限价
+}
+
+/**
  * 获取买卖方向列表
  * @returns 
  */
@@ -166,4 +174,21 @@ export function getOrderStatusList() {
 export function getOrderStatusName(value: number) {
     const enums = getOrderStatusList()
     return getEnumTypeName(enums, value)
+}
+
+/**
+ * 获取取价方式列表
+ * @returns 
+ */
+export function getPricemode2List() {
+    return getEnumTypeList('Pricemode2')
+}
+
+/**
+ * 获取取价方式名称
+ * @returns 
+ */
+export function getPricemode2Name(value: number) {
+    const enums = getPricemode2List()
+    return getEnumTypeName(enums, value)
 }

src/packages/mobile/router/index.ts

@@ -168,6 +168,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'goods-list',
         component: () => import('../views/goods/list/Index.vue'),
       },
+      {
+        path: 'detail',
+        name: 'goods-detail',
+        component: () => import('../views/goods/detail/Index.vue'),
+      },
     ],
   },
   {

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

@@ -0,0 +1,108 @@
+<template>
+    <app-view>
+        <template #header>
+            <app-navbar title="订单挂牌大厅" >
+                <template #right>
+                    <div class="button-more" @click="onListing">
+                        <span>挂牌</span>
+                    </div>
+                </template>
+            </app-navbar>
+            <div>
+                <span>{{ item.goodsname }}/{{ item.goodscode }}</span>
+                <span>--</span>
+            </div>
+        </template>
+        <Tabs v-model:active="tabIndex" @click="onTabChange">
+            <Tab title="买大厅" />
+            <Tab title="卖大厅" />
+        </Tabs>
+        <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
+        :page-count="pageCount" @refresh="onTabChange">
+            <div class="trade-section sell" v-if="dataList.length">
+                <app-list :columns="columns" :data-list="dataList">
+                    <template #username="{ row }">
+                        <span >{{ row.userid }}/{{ row.username }}</span>
+                    </template>
+                    <template #operate="{ row }">
+                        <Button size="small" type="primary" round @click="onDelisting(row)">{{ tabIndex === 0 ? '卖出' : '买入' }}</Button>
+                    </template>
+                </app-list>
+            </div>
+        </app-pull-refresh>
+        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ selectedRow, tabIndex, item }" @closed="closeComponent"
+            v-if="componentId" />
+    </app-view>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, defineAsyncComponent } from 'vue'
+import { Tab, Tabs, Button, showToast } from 'vant'
+import { useRequest } from '@/hooks/request'
+import { useNavigation } from '@/hooks/navigation'
+import { useComponent } from '@/hooks/component'
+import AppList from '@mobile/components/base/list/index.vue'
+import { queryWrTradeOrderDetail } from '@/services/api/transfer'
+import { useLoginStore } from '@/stores'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['delisting', defineAsyncComponent(() => import('./components/delisting/Index.vue'))],
+    ['listing', defineAsyncComponent(() => import('./components/listing/Index.vue'))],
+])
+
+const loginStore = useLoginStore()
+
+const { getParamString } = useNavigation()
+const { componentRef, componentId, openComponent, closeComponent } = useComponent()
+const item: Model.QuoteGoodsListRsp = JSON.parse(getParamString('item')?.toString() || '{}')
+const tabIndex = shallowRef(0)
+const selectedRow = shallowRef<Model.WrTradeOrderDetailRsp>()
+const error = shallowRef(false)
+const dataList = shallowRef<Model.WrTradeOrderDetailRsp[]>([])
+
+const { pageIndex, loading, run, pageCount } = useRequest(queryWrTradeOrderDetail, {
+    params: {
+        pagesize: 20,
+        goodsid: item.goodsid,
+        buyorsell: tabIndex.value
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const onTabChange = () => {
+    run({
+        buyorsell: tabIndex.value
+    })
+}
+
+const columns: Model.TableColumn[] = [
+    { prop: 'orderprice', label: '价格' },
+    { prop: 'orderqty', label: '数量' },
+    { prop: 'username', label: '挂牌方' },
+    { prop: 'operate', label: '摘牌' },
+]
+
+const onDelisting = (row: Model.WrTradeOrderDetailRsp) => {
+    selectedRow.value = row
+    /// 不能与自己成交
+    if (row.userid === loginStore.userId) {
+        showToast('不能与自己成交')
+        return
+    }
+    openComponent('delisting')
+}
+
+const onListing = () => {
+    openComponent('listing')
+}
+
+</script>

src/packages/mobile/views/goods/detail/components/delisting/Index.less

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

src/packages/mobile/views/goods/detail/components/delisting/Index.vue

@@ -0,0 +1,139 @@
+<template>
+    <app-popup :title="'摘牌'" v-model:show="showModal" :refresh="refresh">
+        <Form class="goods-delisting__form" ref="formRef" @submit="onSubmit" v-if="props">
+            <Field label="交易账户">
+                <template #input>
+                    <span>{{ accountStore.accountId }}</span>
+                </template>
+            </Field>
+            <Field label="订单商品">
+                <template #input>
+                    <span>{{ item.goodscode }}/{{ item.goodsname }}</span>
+                </template>
+            </Field>
+            <Field label="挂牌方">
+                <template #input>
+                    <span>{{ selectedRow.username }}</span>
+                </template>
+            </Field>
+            <Field label="挂牌价格">
+                <template #input>
+                    <span>{{ selectedRow.orderprice }}</span>
+                </template>
+            </Field>
+            <Field label="剩余数量">
+                <template #input>
+                    <span>{{ selectedRow.orderqty }}</span>
+                </template>
+            </Field>
+            <Field label="摘牌方向">
+                <template #input>
+                    <span>{{ getBuyOrSellName(selectedRow.buyorsell) }}</span>
+                </template>
+            </Field>
+            <Field label="挂牌类型">
+                <template #input>
+                    <RadioGroup v-model="buildType" direction='horizontal'>
+                        <Radio :name="1">订立</Radio>
+                        <Radio :name="2">转让</Radio>
+                    </RadioGroup>
+                </template>
+            </Field>
+            <Field name="OrderQty" :rules="formRules.OrderQty" label="摘牌数量">
+                <template #input>
+                    <Stepper v-model="formData.OrderQty" input-width="100" theme="round" button-size="22" :min="0" :step="0.01" :max="selectedRow.orderqty" :auto-fixed="false" />
+                </template>
+            </Field>
+        </Form>
+        <template #footer>
+            <Button type="primary" block round @click="formRef?.submit">{{ tabIndex === 0 ? '卖出' : '买入' }}</Button>
+        </template>
+    </app-popup>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { Form, FormInstance, Button, Field, RadioGroup, Radio, FieldRule, Stepper} from 'vant'
+import { useAccountStore, useFuturesStore } from '@/stores'
+import { EBuildType, EDelistingType, EListingSelectType, EOrderOperateType, EPriceMode, EValidType } from '@/constants/client'
+import { useOrder } from '@/business/trade'
+import { fullloading, dialog } from '@/utils/vant'
+
+import AppPopup from '@mobile/components/base/popup/index.vue'
+import { getBuyOrSellName } from '@/constants/order'
+
+const accountStore = useAccountStore()
+const { formData, formSubmit} = useOrder()
+
+/// 挂牌类型
+const buildType = shallowRef(EBuildType.BUILDTYPE_OPEN)
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.WrTradeOrderDetailRsp>,
+        required: true
+    },
+    item: {
+        type: Object as PropType<Model.QuoteGoodsListRsp>,
+        required: true
+    },
+    tabIndex: {
+        type: Number,
+        required: true
+    }
+})
+
+const formRef = shallowRef<FormInstance>()
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 表单验证规则
+const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
+    OrderQty: [{
+        message: '请输入摘牌数量',
+        validator: () => {
+            return !!formData.OrderQty
+        }
+    }],
+}
+
+// 提交挂牌
+const onSubmit = () => {
+    const { goodsid, orderid } = props.selectedRow
+    /// 获取对应的市场ID
+    formData.MarketID = useFuturesStore().getGoods(goodsid).value?.marketid ?? 0
+    formData.PriceMode = EPriceMode.PRICEMODE_MARKET
+    formData.RelatedID = orderid
+    formData.BuyOrSell = props.selectedRow.buyorsell,
+    formData.GoodsID = goodsid
+    formData.ListingSelectType = EListingSelectType.LISTINGSELECTTYPE_DELISTING
+    formData.DelistingType = EDelistingType.DELISTINGTYPE_SELECTED
+    formData.BuildType = EBuildType.BUILDTYPE_OPEN
+    formData.ValidType = EValidType.VALIDTYPE_DR
+    formData.OperateType = EOrderOperateType.ORDEROPERATETYPE_NORMAL
+    formData.TriggerType = 0
+    formData.ServiceTime = ""
+    formData.ValidTime = ""
+    formData.BuildType = buildType.value
+
+    fullloading((hideLoading) => {
+        formSubmit().then(() => {
+            hideLoading()
+            dialog('挂牌提交成功。').then(() => closed(true))
+        }).catch((err) => {
+            hideLoading(err, 'fail')
+        })
+    })
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/goods/detail/components/listing/Index.less

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

src/packages/mobile/views/goods/detail/components/listing/Index.vue

@@ -0,0 +1,133 @@
+<template>
+    <app-popup class="goods-listing" :title="'挂牌'" v-model:show="showModal" :refresh="refresh">
+        <Form class="goods-listing__form" ref="formRef" @submit="onSubmit">
+            <Tabs class="van-tabs--list" v-model:active="buyOrSell" :swipe-threshold="2">
+                <Tab title="挂牌买入" />
+                <Tab title="挂牌卖出" />
+            </Tabs>
+            <Field label="交易账户">
+                <template #input>
+                    <span>{{ accountStore.accountId }}</span>
+                </template>
+            </Field>
+            <Field label="订单商品">
+                <template #input>
+                    <span>{{ item.goodscode }}/{{ item.goodsname }}</span>
+                </template>
+            </Field>
+            <Field label="挂牌类型">
+                <template #input>
+                    <RadioGroup v-model="buildType" direction='horizontal'>
+                        <Radio :name="1">订立</Radio>
+                        <Radio :name="2">转让</Radio>
+                    </RadioGroup>
+                </template>
+            </Field>
+            <Field name="OrderPrice" :rules="formRules.OrderPrice" label="价格">
+                <template #input>
+                    <Stepper v-model="formData.OrderPrice" input-width="100" theme="round" button-size="22" :auto-fixed="false" :step="0.01" />
+                </template>
+            </Field>
+            <Field name="OrderQty" :rules="formRules.OrderQty" label="数量">
+                <template #input>
+                    <Stepper v-model="formData.OrderQty" input-width="100" theme="round" 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 } from 'vue'
+import { Form, FormInstance, Button, FieldRule, Field, Tab, Tabs, Stepper, Radio, RadioGroup } from 'vant'
+import { useOrder } from '@/business/trade'
+import { fullloading, dialog } from '@/utils/vant'
+import { useAccountStore, useFuturesStore } from '@/stores'
+import { EPriceMode, EListingSelectType, EDelistingType, EBuildType, EValidType, EOrderOperateType } from '@/constants/client'
+
+import AppPopup from '@mobile/components/base/popup/index.vue'
+
+const accountStore = useAccountStore()
+
+const formRef = shallowRef<FormInstance>()
+const showModal = shallowRef(true)
+const refresh = shallowRef(true) // 是否刷新父组件数据
+/// 挂牌类型
+const buildType = shallowRef(EBuildType.BUILDTYPE_OPEN)
+const { formData, formSubmit } = useOrder()
+
+
+const props = defineProps({
+    item: {
+        type: Object as PropType<Model.QuoteGoodsListRsp>,
+        required: true
+    },
+    tabIndex: {
+        type: Number,
+        required: true
+    }
+})
+
+/// 买卖方向
+const buyOrSell = shallowRef(props.tabIndex)
+
+// 提交挂牌
+const onSubmit = () => {
+    /// 买卖方向
+    const { goodsid } = props.item ?? {}
+    /// 获取对应的市场ID
+    formData.MarketID = useFuturesStore().getGoods(goodsid).value?.marketid ?? 0
+    formData.BuyOrSell = buyOrSell.value,
+    formData.PriceMode = EPriceMode.PRICEMODE_LIMIT
+    formData.MarketMaxSub = 0.0 
+    formData.GoodsID = goodsid
+    formData.ListingSelectType = EListingSelectType.LISTINGSELECTTYPE_LISTING
+    formData.DelistingType = EDelistingType.DELISTINGTYPE_SELECTED
+    formData.BuildType = EBuildType.BUILDTYPE_OPEN
+    formData.ValidType = EValidType.VALIDTYPE_DR
+    formData.OperateType = EOrderOperateType.ORDEROPERATETYPE_NORMAL
+    formData.TriggerType = 0
+    formData.ServiceTime = ""
+    formData.ValidTime = ""
+    formData.BuildType = buildType.value
+
+    fullloading((hideLoading) => {
+        formSubmit().then(() => {
+            hideLoading()
+            dialog('挂牌提交成功。').then(() => closed(true))
+        }).catch((err) => {
+            hideLoading(err, 'fail')
+        })
+    })
+}
+
+// 表单验证规则
+const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
+    OrderPrice: [{
+        message: '请输入价格',
+        validator: () => {
+            return !!formData.OrderPrice
+        }
+    }],
+    OrderQty: [{
+        message: '请输入挂牌数量',
+        validator: () => {
+            return !!formData.OrderQty
+        }
+    }],
+}
+
+// 关闭弹窗
+const closed = (isRefresh = true) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -3,24 +3,57 @@
         <template #header>
             <app-navbar title="订单挂牌" />
         </template>
+        <app-list :columns="columns" :data-list="tableList">
+            <template #goodsname="{ row }">
+                <span @click="$router.push({ name: 'goods-detail', params: { item: JSON.stringify(row) } })">{{ row.goodsname }}</span>
+            </template>
+            <!-- 当前价 -->
+            <template #last="{ row }">
+                <span :class="row.lastColor">{{ row.last }}</span>
+            </template>
+            <!-- 涨跌 -->
+            <template #rise="{ row }">
+                <span :class="row.lastColor">{{ row.rise }}</span>
+            </template>
+            <!-- 幅度 -->
+            <template #change="{ row }">
+                <span :class="row.lastColor">{{ row.change }}</span>
+            </template>
+            <!-- 今开 -->
+            <template #opened="{ row }">
+                <span :class="row.openedColor">{{ row.opened }}</span>
+            </template>
+            <!-- 最低 -->
+            <template #lowest="{ row }">
+                <span :class="row.lowestColor">{{ row.lowest }}</span>
+            </template>
+            <!-- 最高 -->
+            <template #highest="{ row }">
+                <span :class="row.highestColor">{{ row.highest }}</span>
+            </template>
+        </app-list>
     </app-view>
 </template>
 
 <script lang="ts" setup>
 
+import { computed } from 'vue'
 import { v4 } from 'uuid'
+import { parsePercent, handleNumberValue } from '@/filters'
+import { useRequest } from '@/hooks/request'
 import { queryQuoteGoodsList } from '@/services/api/swap'
 import { useFuturesStore, useUserStore } from '@/stores'
-import { useRequest } from '@/hooks/request'
 import quoteSocket from '@/services/websocket/quote'
+import AppList from '@mobile/components/base/list/index.vue'
 
+const futuresStore = useFuturesStore()
 const userStore = useUserStore()
 const subscribeId = v4()
 
 const { dataList } = useRequest(queryQuoteGoodsList, {
     params: {
         usertype: userStore.userType ?? 0,
-        marketids: userStore.getMarketId('TRADEMODE_TJMD').toString()
+        marketids: '50101'
     },
     onSuccess: (res) => {
         const goodsCodes = res.data.map((e) => e.refgoodscode)
@@ -29,4 +62,39 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
     }
 })
 
+const tableList = computed(() => {
+    return dataList.value.map((item) => {
+        const quote = futuresStore.getQuoteInfo(item.goodscode)
+        const { goodsname, lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened } = quote.value ?? {}
+        return {
+            ...item,
+            goodsname,
+            lastColor,
+            openedColor,
+            lowestColor,
+            highestColor,
+            last: handleNumberValue(last),
+            rise: handleNumberValue(rise?.toFixed(item.decimalplace)),
+            change: parsePercent(change),
+            opened: handleNumberValue(opened),
+            presettle: handleNumberValue(presettle),
+            lowest: handleNumberValue(lowest),
+            highest: handleNumberValue(highest),
+            amplitude: parsePercent(amplitude),
+        }
+    })
+})
+
+const columns: Model.TableColumn[] = [
+    { prop: 'goodsname', label: '商品/标的' },
+    { prop: 'last', label: '当前价' },
+    { prop: 'rise', label: '涨跌' },
+    { prop: 'change', label: '幅度' },
+    { prop: 'opened', label: '今开' },
+    { prop: 'presettle', label: '昨结' },
+    { prop: 'lowest', label: '最低' },
+    { prop: 'highest', label: '最高' },
+    { prop: 'amplitude', label: '振幅' },
+]
+
 </script>

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

@@ -26,8 +26,10 @@
                 <component :is="componentMap.get('swaptrade')" />
             </Tab>
             <Tab title="订单委托">
+                <component :is="componentMap.get('goodsorder')" />
             </Tab>
             <Tab title="订单成交">
+                <component :is="componentMap.get('goodstrade')" />
             </Tab>
             <Tab title="挂牌委托">
             </Tab>
@@ -50,10 +52,14 @@ const componentMap = new Map<string, unknown>([
     ['presale', defineAsyncComponent(() => import('./components/presale/list/Index.vue'))], // 预售认购
     ['swaporder', defineAsyncComponent(() => import('./components/swaporder/list/Index.vue'))], // 掉期委托
     ['swaptrade', defineAsyncComponent(() => import('./components/swaptrade/list/Index.vue'))], // 掉期成交
+    ['goodsorder', defineAsyncComponent(() => import('./components/goodsorder/list/Index.vue'))], // 订单委托
+    ['goodstrade', defineAsyncComponent(() => import('./components/goodstrade/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'))], // 历史掉期成交
+    ['hisgoodsorder', defineAsyncComponent(() => import('./components/hisgoodsorder/list/Index.vue'))], // 历史订单委托
+    ['hisgoodstrade', defineAsyncComponent(() => import('./components/hisgoodstrade/list/Index.vue'))], // 历史订单成交
 ])
 
 const onMoreClick = () => {
@@ -72,6 +78,14 @@ const onMoreClick = () => {
             showComponent('hisswaptrade')
             break
         }
+        case 5: {
+            showComponent('hisgoodsorder')
+            break
+        }
+        case 6: {
+            showComponent('hisgoodstrade')
+            break
+        }
     }
 }
 

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

@@ -0,0 +1,79 @@
+<!-- 我的订单- 订单委托 - 详情 -->
+<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>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="订单委托信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.goodscode + '/' + selectedRow.goodsname" />
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="委托数量" :value="formatDecimal(selectedRow.orderqty)" />
+                    <Cell title="委托价格" :value="formatDecimal(selectedRow.orderprice)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="委托状态" :value="getWRTradeOrderStatusName(selectedRow.orderstatus)" />
+                    <Cell title="委托时间" :value="formatDate(selectedRow.ordertime)" />
+                    <Cell title="委托单号" :value="selectedRow.orderid" />
+                </CellGroup>
+            </div>
+            <template #footer v-if="selectedRow.orderstatus === 3 || selectedRow.orderstatus === 7">
+                <Button type="primary" block round @click="onCancelSumit">撤销</Button>
+            </template>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import AppModal from '@/components/base/modal/index.vue'
+import { CellGroup, Cell, Button } from 'vant'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+import { useCancelOrder } from '@/business/trade'
+import { dialog, fullloading } from '@/utils/vant'
+
+const showModal = shallowRef(true)
+// 是否刷新父组件数据
+const refresh = shallowRef(false)
+const { cancelSubmit, formData } = useCancelOrder()
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.TradeOrderDetailRsp>,
+        required: true,
+    }
+})
+
+const onCancelSumit = () => {
+    dialog({
+        message: '确认要撤销吗？',
+        showCancelButton: true,
+    }).then(() => {
+        /// 市场ID
+        formData.Header = { MarketID: props.selectedRow.marketid }
+        formData.OldOrderId = props.selectedRow.orderid
+
+        /// loding....
+        fullloading((hideLoading) => {
+            cancelSubmit().then(() => {
+                hideLoading('撤销成功')
+                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/list/components/goodsorder/list/Index.vue

@@ -0,0 +1,122 @@
+<!-- 我的订单-订单委托 -->
+<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">
+                        <h5>{{ item.goodscode }}/{{ item.goodsname }}</h5>
+                    </div>
+                    <div class="right">
+                        <span>{{ item.orderid }}</span>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>时间：</span>
+                            <span>{{ formatDate(item.ordertime, 'HH:mm:ss') }}</span>
+                        </li>
+                        <li>
+                            <span>方向：</span>
+                            <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                        </li>
+                        <li>
+                            <span>委托数量：</span>
+                            <span>{{ formatDecimal(item.orderqty) }}</span>
+                        </li>
+                        <li>
+                            <span>委托价格：</span>
+                            <span>{{ formatDecimal(item.orderprice) }}</span>
+                        </li>
+                        <li>
+                            <span>成交数量：</span>
+                            <span>{{ formatDecimal(item.tradeqty) }}</span>
+                        </li>
+                        <li>
+                            <span>委托状态：</span>
+                            <span>{{ getWRTradeOrderStatusName(item.orderstatus) }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="g-order-list__btnbar">
+                    <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                    <Button size="small" v-if="(item.orderstatus === 3 || item.orderstatus === 7)"
+                        @click="onCancelSumit(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 { queryTradeOrderDetail } from '@/services/api/order'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+import { useCancelOrder } from '@/business/trade'
+import { dialog } from '@/utils/vant'
+import { fullloading } from '@/utils/vant'
+
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))]
+])
+
+const { cancelSubmit, formData } = useCancelOrder()
+const dataList = shallowRef<Model.TradeOrderDetailRsp[]>([])
+const selectedRow = shallowRef<Model.TradeOrderDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryTradeOrderDetail, {
+    params: {
+        pagesize: 20,
+        tradeMode: '50'
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const onCancelSumit = (item: Model.TradeOrderDetailRsp) => {
+    dialog({
+        message: '确认要撤销吗？',
+        showCancelButton: true,
+    }).then(() => {
+        formData.Header = { MarketID: item.marketid }
+        formData.OldOrderId = item.orderid
+
+        /// loding....
+        fullloading((hideLoading) => {
+            cancelSubmit().then(() => {
+                hideLoading('撤销成功')
+            }).catch((err) => {
+                hideLoading(err, 'fail')
+            })
+        })
+    })
+}
+
+const showComponent = (componentName: string, row: Model.TradeOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

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

@@ -0,0 +1,56 @@
+<!-- 我的订单- 掉期成交 - 详情 -->
+<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>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="掉期成交信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.goodscode+'/'+selectedRow.goodsname"/>
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="类型" :value="getBuildTypeName(selectedRow.buildtype)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="成交价格" :value="formatDecimal(selectedRow.tradeprice)" />
+                    <Cell title="手续费" :value="formatDecimal(selectedRow.charge)" />
+                    <Cell title="平仓损益" :value="formatDecimal(selectedRow.closepl)" />
+                    <Cell title="对手方" :value="selectedRow.matchaccountid" />
+                    <Cell title="成交时间" :value="formatDate(selectedRow.tradetime)" />
+                    <Cell title="成交单号" :value="selectedRow.tradeid" />
+                </CellGroup>
+            </div>
+            <div v-else>
+                <Empty />
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import { CellGroup, Cell } from 'vant'
+import { formatDate, formatDecimal } from '@/filters'
+import AppModal from '@/components/base/modal/index.vue'
+import { getBuyOrSellName, getBuildTypeName } from '@/constants/order'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.TradeDetailRsp>,
+        required: true,
+    }
+})
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -0,0 +1,96 @@
+<!-- 我的订单-订单成交 -->
+<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">
+                        <h5>{{ item.goodscode }}/{{ item.goodsname }}</h5>
+                    </div>
+                    <div class="right">
+                        <span>{{ item.tradeid }}</span>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>时间：</span>
+                            <span>{{ formatDate(item.tradetime, 'HH:mm:ss') }}</span>
+                        </li>
+                        <li>
+                            <span>类型：</span>
+                            <span>{{ getBuildTypeName(item.buildtype) }}{{ getBuyOrSellName(item.buyorsell) }}</span>
+                        </li>
+                        <li>
+                            <span>成交价格：</span>
+                            <span>{{ formatDecimal(item.tradeprice) }}</span>
+                        </li>
+                        <li>
+                            <span>手续费：</span>
+                            <span>{{ formatDecimal(item.charge)}}</span>
+                        </li>
+                        <li>
+                            <span>成交数量：</span>
+                            <span>{{ formatDecimal(item.tradeqty) }}</span>
+                        </li>
+                        <li>
+                            <span>平仓盈亏：</span>
+                            <span>{{ formatDecimal(item.closepl) }}</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 { queryTradeDetail } from '@/services/api/order'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+import { getBuyOrSellName, getBuildTypeName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+const dataList = shallowRef<Model.TradeDetailRsp[]>([])
+const selectedRow = shallowRef<Model.TradeDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryTradeDetail, {
+    params: {
+        pagesize: 20,
+        tradeMode: '50'
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.TradeDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

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

@@ -0,0 +1,54 @@
+<!-- 我的订单- 历史订单订单 - 详情 -->
+<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>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="掉期订单信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.goodscode+'/'+selectedRow.goodsname"/>
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="委托数量" :value="formatDecimal(selectedRow.orderqty)" />
+                    <Cell title="委托价格" :value="formatDecimal(selectedRow.orderprice)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="委托状态" :value="getWRTradeOrderStatusName(selectedRow.orderstatus)" />
+                    <Cell title="委托时间" :value="formatDate(selectedRow.ordertime)" />
+                    <Cell title="委托单号" :value="selectedRow.orderid" />
+                </CellGroup>
+            </div>
+            <div v-else>
+                <Empty />
+            </div>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType } from 'vue'
+import AppModal from '@/components/base/modal/index.vue'
+import { CellGroup, Cell } from 'vant'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.TradeOrderDetailRsp>,
+        required: true,
+    }
+})
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -0,0 +1,143 @@
+<!-- 我的订单- 订单订单 - 委托 -->
+<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>
+            <Cell title="查询日期" :value="date" @click="show = true" is-link></Cell>
+            <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">
+                                <h5>{{ item.goodscode }}/{{ item.goodsname }}</h5>
+                            </div>
+                            <div class="right">
+                                <span>{{ item.orderid }}</span>
+                            </div>
+                        </div>
+                        <div class="g-order-list__content">
+                            <ul>
+                                <li>
+                                    <span>时间：</span>
+                                    <span>{{ formatDate(item.ordertime, 'YY/MM/DD HH:mm:ss') }}</span>
+                                </li>
+                                <li>
+                                    <span>方向：</span>
+                                    <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                                </li>
+                                <li>
+                                    <span>委托数量：</span>
+                                    <span>{{ item.orderqty }}</span>
+                                </li>
+                                <li>
+                                    <span>委托价格：</span>
+                                    <span>{{ item.orderprice}}</span>
+                                </li>
+                                <li>
+                                    <span>成交数量：</span>
+                                    <span>{{ item.tradeqty }}</span>
+                                </li>
+                                <li>
+                                    <span>委托状态：</span>
+                                    <span>{{ getWRTradeOrderStatusName(item.orderstatus) }}</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>
+            <Calendar :show="show" type="range" :max-date="new Date()" :min-date="moment().subtract(1, 'years').toDate()"
+            @close="onClose" @confirm="onConfirm" />
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, ref, reactive, defineAsyncComponent } from 'vue'
+import { useRequest } from '@/hooks/request'
+import { queryHisTradeOrderDetail } from '@/services/api/order'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate } from '@/filters'
+import { useComponent } from '@/hooks/component'
+import { Button, Calendar, Cell } from 'vant'
+import moment from 'moment'
+import AppModal from '@/components/base/modal/index.vue'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const dataList = shallowRef<Model.HisTradeOrderDetailRsp[]>([])
+const showModal = shallowRef(true)
+/// 是否显示日历
+const show = shallowRef(false)
+/// 显示日期
+const date = ref('')
+const selectedRow = shallowRef<Model.HisTradeOrderDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+const formData = reactive<Model.HisTradeOrderDetailReq>({
+    tradeMode: '50',
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryHisTradeOrderDetail, {
+    manual: true,
+    params: {
+        ...formData
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.HisTradeOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+
+const onClose = () => {
+    show.value = false
+}
+
+const onConfirm = (values: Date[]) => {
+    const [start, end] = values;
+    show.value = false
+    formData.startDate = formatDate(start.toString(), 'YYYYMMDD')
+    formData.endDate = formatDate(end.toString(), 'YYYYMMDD')
+    date.value = formData.startDate + '-' + formData.endDate
+    /// 查询
+    pullRefreshRef.value?.refresh()
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -0,0 +1,56 @@
+<!-- 我的持仓- 历史订单成交 - 平仓 -->
+<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>
+            <div v-if="props" class="order-detail__container g-form__container">
+                <CellGroup title="掉期订单信息">
+                    <Cell title="商品代码/名称" :value="selectedRow.goodscode+'/'+selectedRow.goodsname"/>
+                    <Cell title="方向" :value="getBuyOrSellName(selectedRow.buyorsell)" />
+                    <Cell title="类型" :value="getBuildTypeName(selectedRow.buildtype)" />
+                    <Cell title="成交数量" :value="formatDecimal(selectedRow.tradeqty)" />
+                    <Cell title="成交价格" :value="formatDecimal(selectedRow.tradeprice)" />
+                    <Cell title="手续费" :value="formatDecimal(selectedRow.charge)" />
+                    <Cell title="平仓损益" :value="formatDecimal(selectedRow.closepl)" />
+                    <Cell title="对手方" :value="selectedRow.matchaccountid" />
+                    <Cell title="成交时间" :value="formatDate(selectedRow.tradetime)" />
+                    <Cell title="成交单号" :value="selectedRow.tradeid" />
+                </CellGroup>
+            </div>
+            <div v-else>
+                <Empty />
+            </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'
+import { formatDate, formatDecimal } from '@/filters'
+import { getBuyOrSellName, getBuildTypeName } from '@/constants/order'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.HisTradeDetailRsp>,
+        required: true,
+    }
+})
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -0,0 +1,143 @@
+<!-- 我的订单- 订单订单 - 成交 -->
+<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>
+            <Cell title="查询日期" :value="date" @click="show = true" is-link></Cell>
+            <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">
+                                <h5>{{ item.goodscode }}/{{ item.goodsname }}</h5>
+                            </div>
+                            <div class="right">
+                                <span>{{ item.tradeid }}</span>
+                            </div>
+                        </div>
+                        <div class="g-order-list__content">
+                            <ul>
+                                <li>
+                                    <span>时间：</span>
+                                    <span>{{ formatDate(item.tradetime, 'YY/MM/DD HH:mm:ss') }}</span>
+                                </li>
+                                <li>
+                                    <span>类型：</span>
+                                    <span>{{ getBuildTypeName(item.buildtype) }}{{ getBuyOrSellName(item.buyorsell) }}</span>
+                                </li>
+                                <li>
+                                    <span>成交价格：</span>
+                                    <span>{{ item.tradeprice }}</span>
+                                </li>
+                                <li>
+                                    <span>手续费：</span>
+                                    <span>{{ item.charge}}</span>
+                                </li>
+                                <li>
+                                    <span>成交数量：</span>
+                                    <span>{{ item.tradeqty }}</span>
+                                </li>
+                                <li>
+                                    <span>平仓盈亏：</span>
+                                    <span>{{ item.closepl }}</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>
+            <Calendar :show="show" type="range" :max-date="new Date()" :min-date="moment().subtract(1, 'years').toDate()"
+            @close="onClose" @confirm="onConfirm" />
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, ref, reactive, defineAsyncComponent } from 'vue'
+import { useRequest } from '@/hooks/request'
+import { queryHisTradeDetail } from '@/services/api/order'
+import { getBuyOrSellName, getBuildTypeName } from '@/constants/order'
+import { formatDate } from '@/filters'
+import { useComponent } from '@/hooks/component'
+import { Button, Calendar, Cell } from 'vant'
+import moment from 'moment'
+import AppModal from '@/components/base/modal/index.vue'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const dataList = shallowRef<Model.HisTradeDetailRsp[]>([])
+const showModal = shallowRef(true)
+/// 是否显示日历
+const show = shallowRef(false)
+/// 显示日期
+const date = ref('')
+const selectedRow = shallowRef<Model.HisTradeDetailRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+const formData = reactive<Model.HisTradeDetailReq>({
+    tradeMode: '50'
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryHisTradeDetail, {
+    manual: true,
+    params: {
+        ...formData
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.HisTradeDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+
+const onClose = () => {
+    show.value = false
+}
+
+const onConfirm = (values: Date[]) => {
+    const [start, end] = values;
+    show.value = false
+    formData.startDate = formatDate(start.toString(), 'YYYYMMDD')
+    formData.endDate = formatDate(end.toString(), 'YYYYMMDD')
+    date.value = formData.startDate + '-' + formData.endDate
+    /// 查询
+    pullRefreshRef.value?.refresh()
+}
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -14,6 +14,7 @@
                 <component :is="componentMap.get('swap')" />
             </Tab>
             <Tab title="订单持仓">
+                <component :is="componentMap.get('goods')" />
             </Tab>
             <Tab title="现货持仓">
                 <component :is="componentMap.get('spot')" />
@@ -31,6 +32,7 @@ const componentMap = new Map<string, unknown>([
     ['transfer', defineAsyncComponent(() => import('./components/transfer/list/Index.vue'))], // 转让持仓
     ['spot', defineAsyncComponent(() => import('./components/spot/list/Index.vue'))], // 现货持仓
     ['swap', defineAsyncComponent(() => import('./components/swap/list/Index.vue'))], // 掉期持仓
+    ['goods', defineAsyncComponent(() => import('./components/goods/list/Index.vue'))], // 订单持仓
 ])
 
 const active = shallowRef(0)

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

@@ -0,0 +1,101 @@
+<!-- 我的持仓-掉期持仓 -->
+<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.goodscode }}/{{ item.goodsname }}</h4>
+                        <span>--</span>
+                    </div>
+                    <div class="right">
+                        <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <li>
+                            <span>持有数量：</span>
+                            <span>{{ formatDecimal(item.curpositionqty) }}</span>
+                        </li>
+                        <li>
+                            <span>持仓均价：</span>
+                            <span>{{ item.averageprice === 0.0 ? '--' : formatDecimal(item.averageprice) }}</span>
+                        </li>
+                        <li>
+                            <span>冻结数量：</span>
+                            <span>{{ formatDecimal(item.frozenqty) }}</span>
+                        </li>
+                        <li>
+                            <span>持仓金额：</span>
+                            <span>{{ formatDecimal(item.curholderamount) }}</span>
+                        </li>
+                        <li>
+                            <span>可用数量：</span>
+                            <span>{{ formatDecimal(item.enableqty) }}</span>
+                        </li>
+                        <li>
+                            <span>参考损益：</span>
+                            <span>--</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="g-order-list__btnbar">
+                    <Button size="small" @click="showComponent('close', item)" round>平仓</Button>
+                    <Button size="small" v-if="userStore.userType === 5" @click="showComponent('delivery', 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 { queryTradePosition } from '@/services/api/order'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+import { getBuyOrSellName } from '@/constants/order'
+import { formatDecimal } from '@/filters'
+import { useUserStore } from '@/stores'
+
+const componentMap = new Map<string, unknown>([
+    ['close', defineAsyncComponent(() => import('../close/Index.vue'))],
+    ['delivery', defineAsyncComponent(() => import('../delivery/Index.vue'))]
+])
+
+const userStore = useUserStore()
+const dataList = shallowRef<Model.TradePositionRsp[]>([])
+const selectedRow = shallowRef<Model.TradePositionRsp>()
+const error = shallowRef(false)
+const pullRefreshRef = shallowRef()
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    pullRefreshRef.value?.refresh()
+})
+
+const { loading, pageIndex, pageCount, run } = useRequest(queryTradePosition, {
+    params: {
+        pagesize: 20,
+        tradeMode: '50'
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.TradePositionRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

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

@@ -3,8 +3,171 @@
         <template #header>
             <app-navbar title="点价详情" />
         </template>
+        <div v-if="quote">
+            <!-- 商品代码、现价 -->
+            <div style="padding: .3rem;">
+                <span>商品代码/名称</span>
+                <span style="margin-left: .3rem; color: blue;">{{ quote.goodscode }}/{{ quote.goodsname }}</span>
+                <span :class="quote.lastColor" style="margin-left: .5rem;">{{ handleNumberValue(quote.last) }}</span>
+            </div>
+            <!-- 盘面 -->
+            <div style="padding: .3rem; background-color: white;">
+                <table cellspacing="10" cellpadding="0" style="width: 100%;">
+                    <tr>
+                        <td style="width: calc(`100% / 3`);">
+                            <span>幅度</span>
+                            <span :class="quote.lastColor" style="margin-left: .2rem;">{{ handleNumberValue(quote.amplitude)
+                            }}</span>
+                        </td>
+                        <td style="width: calc(`100% / 3`);">
+                            <span>涨跌</span>
+                            <span :class="quote.lastColor" style="margin-left: .2rem;">{{ handleNumberValue(quote.change)
+                            }}</span>
+                        </td>
+                        <td style="width: calc(`100% / 3`);" rowspan="3">
+                            <div>
+                                <span style="background-color: green; color: white; padding: 0.05rem;">卖</span>
+                                <span :class="quote.bidColor" style="margin-left: .2rem;">{{ handleNumberValue(quote.bid)
+                                }}</span>
+                            </div>
+                            <div style="margin-top: .2rem;">
+                                <span style="background-color: red; color: white; padding: .05rem;">买</span>
+                                <span :class="quote.askColor" style="margin-left: .2rem;">{{ handleNumberValue(quote.ask)
+                                }}</span>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="width: calc(`100% / 3`);">
+                            <span>今开</span>
+                            <span :class="quote.openedColor" style="margin-left: .2rem;">{{ handleNumberValue(quote.opened)
+                            }}</span>
+                        </td>
+                        <td style="width: calc(`100% / 3`);">
+                            <span>昨结</span>
+                            <span style="margin-left: .2rem;">{{ handleNumberValue(quote.presettle) }}</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="width: calc(`100% / 3`);">
+                            <span>最高</span>
+                            <span :class="quote.highestColor" style="margin-left: .2rem;">{{
+                                handleNumberValue(quote.highest) }}</span>
+                        </td>
+                        <td style="width: calc(`100% / 3`);">
+                            <span>最低</span>
+                            <span :class="quote.lowestColor" style="margin-left: .2rem;">{{ handleNumberValue(quote.lowest)
+                            }}</span>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <!-- 下单 -->
+            <Form ref="formRef" style="padding: 0.2rem; background-color: white;" @submit="onSubmit">
+                <Field label="方向">
+                    <template #input>
+                        <RadioGroup v-model="formData.BuyOrSell" direction="horizontal">
+                            <Radio v-for="(item, index) in getBuyOrSellList()" :key="index" :name="item.value">{{ item.label
+                            }}</Radio>
+                        </RadioGroup>
+                    </template>
+                </Field>
+                <Field label="类型">
+                    <template #input>
+                        <RadioGroup v-model="formData.BuildType" direction="horizontal">
+                            <Radio :name="BuildType.Open">{{ getBuildTypeName(BuildType.Open) }}</Radio>
+                            <Radio :name="BuildType.Close">{{ getBuildTypeName(BuildType.Close) }}</Radio>
+                        </RadioGroup>
+                    </template>
+                </Field>
+                <Field label="价格方式">
+                    <template #input>
+                        <RadioGroup v-model="formData.PriceMode" direction="horizontal">
+                            <Radio v-for="(item, index) in getPricemode2List()" :key="index" :name="item.value">{{
+                                item.label
+                            }}</Radio>
+                        </RadioGroup>
+                    </template>
+                </Field>
+                <Field name="OrderQty" label="挂牌数量">
+                    <template #input>
+                        <Stepper v-model="formData.OrderQty" theme="round" button-size="22" :auto-fixed="false" integer />
+                    </template>
+                </Field>
+                <!-- 市价 -->
+                <Field label="价格" v-if="formData.PriceMode === PriceMode.Market">
+                    <template #input>
+                        <span>{{ handleNumberValue(marketPrice) }}</span>
+                    </template>
+                </Field>
+                <Field name="MarketMaxSub" label="允许成交范围" v-if="formData.PriceMode === PriceMode.Market">
+                    <template #input>
+                        <Stepper v-model="formData.MarketMaxSub" theme="round" button-size="22" :auto-fixed="false" integer />
+                    </template>
+                </Field>
+                <!-- 限价 -->
+                
+            </Form>
+        </div>
+        <template #footer>
+            <Button type="primary" block round @click="formRef?.submit">确定</Button>
+        </template>
     </app-view>
 </template>
 
 <script lang="ts" setup>
+import { useFuturesStore } from '@/stores'
+import { useNavigation } from '@/hooks/navigation'
+import { handleNumberValue } from '@/filters'
+import quoteSocket from '@/services/websocket/quote'
+import { shallowRef, onMounted, onUnmounted, computed } from 'vue'
+import { Form, Field, Stepper, Button, FieldRule, FormInstance, Radio, RadioGroup } from 'vant'
+import { useOrder } from '@/business/trade'
+import { BuyOrSell, getBuyOrSellList, BuildType, getBuildTypeName, getPricemode2List, PriceMode } from '@/constants/order'
+import { fullloading, dialog } from '@/utils/vant'
+
+const futuresStore = useFuturesStore()
+const { getQueryString, getQueryStringToNumber } = useNavigation()
+
+const goodscode = getQueryString('goodscode')
+const buyOrSell = getQueryStringToNumber('buyOrSell')
+const buildType = getQueryStringToNumber('buildType')
+const quote = futuresStore.getQuoteInfo(goodscode)
+const subscribe = quoteSocket.addSubscribe([goodscode])
+const formRef = shallowRef<FormInstance>()
+const { formData, formSubmit } = useOrder()
+const marketPrice = computed(() => {
+    const { ask = 0, bid = 0 } = quote.value ?? {}
+    return formData.BuyOrSell === BuyOrSell.Buy ? ask : bid
+})
+
+onMounted(() => {
+    subscribe.start()
+
+    formData.BuyOrSell = buyOrSell
+    formData.BuildType = buildType
+    formData.PriceMode = PriceMode.Market
+    formData.MarketMaxSub = 100.0
+})
+
+onUnmounted(() => {
+    subscribe.stop()
+})
+
+// 委托下单
+const onSubmit = () => {
+    const { goodsid, marketid } = quote.value ?? {}
+    formData.GoodsID = goodsid
+    formData.MarketID = marketid
+
+    fullloading((hideLoading) => {
+        formSubmit().then(() => {
+            hideLoading()
+            dialog('委托成功。')
+        }).catch((err) => {
+            hideLoading(err, 'fail')
+        })
+    })
+}
+
 </script>

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

@@ -1,10 +1,114 @@
 <template>
     <app-view>
         <template #header>
-            <app-navbar title="挂牌点价" />
+            <app-navbar title="订单点价" />
         </template>
+        <app-list :columns="columns" :data-list="tableList">
+            <template #goodsname="{ row }">
+                <span @click="$router.push({ name: 'pricing-detail', query: { goodscode: row.goodscode, buyOrSell: BuyOrSell.Buy, buildType: BuildType.Open } })">{{ row.goodsname }}</span>
+            </template>
+            <!-- 当前价 -->
+            <template #last="{ row }">
+                <span :class="row.lastColor">{{ row.last }}</span>
+            </template>
+            <!-- 涨跌 -->
+            <template #rise="{ row }">
+                <span :class="row.lastColor">{{ row.rise }}</span>
+            </template>
+            <!-- 幅度 -->
+            <template #change="{ row }">
+                <span :class="row.lastColor">{{ row.change }}</span>
+            </template>
+            <!-- 今开 -->
+            <template #opened="{ row }">
+                <span :class="row.openedColor">{{ row.opened }}</span>
+            </template>
+            <!-- 最低 -->
+            <template #lowest="{ row }">
+                <span :class="row.lowestColor">{{ row.lowest }}</span>
+            </template>
+            <!-- 最高 -->
+            <template #highest="{ row }">
+                <span :class="row.highestColor">{{ row.highest }}</span>
+            </template>
+            <!-- 买价 -->
+            <template #ask="{ row }">
+                <span :class="row.askColor">{{ row.ask }}</span>
+            </template>
+            <!-- 卖价 -->
+            <template #bid="{ row }">
+                <span :class="row.bidColor">{{ row.bid }}</span>
+            </template>
+        </app-list>
     </app-view>
 </template>
 
 <script lang="ts" setup>
+
+import { computed } from 'vue'
+import { v4 } from 'uuid'
+import { parsePercent, handleNumberValue } from '@/filters'
+import { useRequest } from '@/hooks/request'
+import { queryQuoteGoodsList } from '@/services/api/swap'
+import { useFuturesStore, useUserStore } from '@/stores'
+import quoteSocket from '@/services/websocket/quote'
+import AppList from '@mobile/components/base/list/index.vue'
+import { BuyOrSell, BuildType } from '@/constants/order'
+
+const futuresStore = useFuturesStore()
+const userStore = useUserStore()
+const subscribeId = v4()
+
+const { dataList } = useRequest(queryQuoteGoodsList, {
+    params: {
+        usertype: userStore.userType ?? 0,
+        marketids: '10101'
+    },
+    onSuccess: (res) => {
+        const goodsCodes = res.data.map((e) => e.refgoodscode)
+        const subscribe = quoteSocket.addSubscribe(goodsCodes,  subscribeId)
+        subscribe.start()
+    }
+})
+
+const tableList = computed(() => {
+    return dataList.value.map((item) => {
+        const quote = futuresStore.getQuoteInfo(item.goodscode)
+        const { lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened, ask, bid, bidColor, askColor } = quote.value ?? {}
+        return {
+            ...item,
+            lastColor,
+            openedColor,
+            lowestColor,
+            highestColor,
+            last: handleNumberValue(last),
+            rise: handleNumberValue(rise?.toFixed(item.decimalplace)),
+            change: parsePercent(change),
+            opened: handleNumberValue(opened),
+            presettle: handleNumberValue(presettle),
+            lowest: handleNumberValue(lowest),
+            highest: handleNumberValue(highest),
+            amplitude: parsePercent(amplitude),
+            ask: handleNumberValue(ask),
+            bid: handleNumberValue(bid),
+            bidColor,
+            askColor
+        }
+    })
+})
+
+const columns: Model.TableColumn[] = [
+    { prop: 'goodsname', label: '商品/标的' },
+    { prop: 'last', label: '当前价' },
+    { prop: 'ask', label: '买价' },
+    { prop: 'bid', label: '卖价' },
+    { prop: 'rise', label: '涨跌' },
+    { prop: 'change', label: '幅度' },
+    { prop: 'opened', label: '今开' },
+    { prop: 'presettle', label: '昨结' },
+    { prop: 'lowest', label: '最低' },
+    { prop: 'highest', label: '最高' },
+    { prop: 'amplitude', label: '振幅' },
+]
+
 </script>

src/packages/mobile/views/swap/detail/components/delisting/Index.vue

@@ -36,12 +36,12 @@
             </Field>
             <Field name="OrderQty" :rules="formRules.OrderQty" label="挂牌数量">
                 <template #input>
-                    <Stepper v-model="formData.OrderQty" theme="round" button-size="22" :min="0" :step="0.01" :max="selectedRow.orderqty" :auto-fixed="false" />
+                    <Stepper v-model="formData.OrderQty" input-width="100" theme="round" button-size="22" :min="0" :step="0.01" :max="selectedRow.orderqty" :auto-fixed="false" />
                 </template>
             </Field>
             <Field name="OrderPrice" v-if="priceMove === 2" :rules="formRules.OrderPrice" label="摘牌价格">
                 <template #input>
-                    <Stepper v-model="formData.OrderPrice" theme="round" button-size="22" :min="0" :auto-fixed="false" />
+                    <Stepper v-model="formData.OrderPrice" input-width="100" theme="round" button-size="22" :min="0" :auto-fixed="false" />
                 </template>
             </Field>
             <Field label="估算金额" v-if="priceMove === 3">

src/packages/mobile/views/swap/detail/components/listing/Index.vue

@@ -20,12 +20,12 @@
             </Field>
             <Field name="OrderPrice" :rules="formRules.OrderPrice" label="挂牌价格" v-if="priceMove === 2">
                 <template #input>
-                    <Stepper v-model="formData.OrderPrice" theme="round" button-size="22" :auto-fixed="false" :step="0.01" />
+                    <Stepper v-model="formData.OrderPrice" input-width="100" theme="round" button-size="22" :auto-fixed="false" :step="0.01" />
                 </template>
             </Field>
             <Field name="MarketMaxSub" :rules="formRules.MarketMaxSub" label="点差" v-if="priceMove === 3">
                 <template #input>
-                    <Stepper v-model="formData.MarketMaxSub" theme="round" button-size="22" :auto-fixed="false" :step="0.01" />
+                    <Stepper v-model="formData.MarketMaxSub" input-width="100" theme="round" button-size="22" :auto-fixed="false" :step="0.01" />
                 </template>
             </Field>
             <Field label="估算价格" v-if="priceMove === 3">
@@ -40,7 +40,7 @@
             </Field>
             <Field name="OrderQty" :rules="formRules.OrderQty" label="挂牌数量">
                 <template #input>
-                    <Stepper v-model="formData.OrderQty" theme="round" button-size="22" :auto-fixed="false" integer />
+                    <Stepper v-model="formData.OrderQty" input-width="100" theme="round" button-size="22" :auto-fixed="false" integer />
                 </template>
             </Field>
             <Field label="挂牌金额" v-if="priceMove === 2">

src/stores/modules/enum.ts

@@ -12,7 +12,7 @@ export interface EnumType {
     disabled?: boolean;
 }
 
-const enumKeys = ['clientType', 'scoreConfigType', 'accountBusinessCode', 'certificatetype', 'signstatus', 'thjOrderStatus', 'THJDeliveryMode', 'goodsunit', 'WROutInApplyStatus2', 'THJTransferStatus', 'WRTradeOrderStatus', 'THJMarket', 'THJProfitRoleType', 'appointmentModelOut', 'orderstatus'] as const
+const enumKeys = ['clientType', 'scoreConfigType', 'accountBusinessCode', 'certificatetype', 'signstatus', 'thjOrderStatus', 'THJDeliveryMode', 'goodsunit', 'WROutInApplyStatus2', 'THJTransferStatus', 'WRTradeOrderStatus', 'THJMarket', 'THJProfitRoleType', 'appointmentModelOut', 'orderstatus', 'Pricemode2'] as const
 
 const enumMap = new Map<typeof enumKeys[number], ShallowRef<Model.EnumRsp[]>>()