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

src/constants/order.ts

@@ -11,6 +11,15 @@ export enum BuyOrSell {
 }
 
 /**
+ * 委托单据类型
+ */
+export enum BuildType {
+    Open = 1,      // 建仓
+    Close = 2,     // 平仓
+    CloseOpen = 3, // 先平后建
+}
+
+/**
  * 获取买卖方向列表
  * @returns 
  */
@@ -22,6 +31,18 @@ export function getBuyOrSellList() {
 }
 
 /**
+ * 获取	委托单据类型列表
+ * @returns 
+ */
+export function getBuildTypeList() {
+    return [
+        { label: '建仓', value: BuildType.Open },
+        { label: '平仓', value: BuildType.Close },
+        { label: '先平后建', value: BuildType.CloseOpen },
+    ]
+}
+
+/**
  * 获取买卖方向名称
  * @returns 
  */
@@ -30,6 +51,14 @@ export function getBuyOrSellName(value: number) {
 }
 
 /**
+ * 获取买卖方向名称
+ * @returns 
+ */
+export function getBuildTypeName(value: number) {
+    return getEnumTypeName(getBuildTypeList(), value)
+}
+
+/**
  * 获取交割方式类型列表
  * @returns 
  */

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

@@ -51,7 +51,7 @@ const tabList: Tabbar[] = [
   },
   {
     name: 'home-swap',
-    label: '掉漆',
+    label: '掉期',
     icon: 'icon-purchase',
     activeIcon: 'icon-purchase-active',
   },

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

@@ -1,7 +1,13 @@
 <template>
     <app-view>
         <template #header>
-            <app-navbar title="我的订单" />
+            <app-navbar title="我的订单" >
+                <template #right>
+                    <div class="button-more" @click="onMoreClick">
+                        <span>更多</span>
+                    </div>
+                </template>
+            </app-navbar>
         </template>
         <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
             <Tab title="预售认购">
@@ -11,8 +17,10 @@
             <Tab title="转让成交">
             </Tab>
             <Tab title="掉期委托">
+                <SwapOrder />
             </Tab>
             <Tab title="掉期成交">
+                <SwapTrade />
             </Tab>
             <Tab title="订单委托">
             </Tab>
@@ -23,12 +31,48 @@
             <Tab title="挂牌成交">
             </Tab>
         </Tabs>
+        <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent"
+            v-if="componentId" />
     </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs } from 'vant'
+import { useComponent } from '@/hooks/component'
+
+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'))],
+])
+
+const onMoreClick = () => {
+    switch (active.value) {
+        case 0: {
+            break
+        }
+        case 1: {
+            break
+        }
+        case 3: {
+            showComponent('hisswaporder')
+            break
+        }
+        case 4: {
+            showComponent('hisswaptrade')
+            break
+        }
+    }
+}
+
+const showComponent = (componentName: string) => {
+    openComponent(componentName)
+}
+
 </script>

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

@@ -0,0 +1,28 @@
+<!-- 我的订单- 历史掉期订单 - 详情 -->
+<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>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/hisswaporder/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: '46',
+})
+
+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/hisswaptrade/detail/Index.vue

@@ -0,0 +1,28 @@
+<!-- 我的持仓- 历史掉期成交 - 平仓 -->
+<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>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/hisswaptrade/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: '46'
+})
+
+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/list/components/swaporder/detail/Index.vue

@@ -0,0 +1,28 @@
+<!-- 我的订单- 掉期委托 - 详情 -->
+<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>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -0,0 +1,98 @@
+<!-- 我的订单-掉期委托 -->
+<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="showComponent('cancel', 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 AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+import { getBuyOrSellName, getWRTradeOrderStatusName } from '@/constants/order'
+import { formatDate, formatDecimal } from '@/filters'
+
+const componentMap = new Map<string, unknown>([
+    ['detail', defineAsyncComponent(() => import('../detail/Index.vue'))],
+    ['cancel', defineAsyncComponent(() => import('../detail/Index.vue'))],
+])
+
+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: '46'
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
+
+const showComponent = (componentName: string, row: Model.TradeOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
+</script>

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

@@ -0,0 +1,28 @@
+<!-- 我的订单- 掉期成交 - 详情 -->
+<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>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

src/packages/mobile/views/order/list/components/swaptrade/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: '46'
+    },
+    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/position/components/swap/close/Index.vue

@@ -0,0 +1,28 @@
+<!-- 我的持仓- 掉期持仓 - 平仓 -->
+<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>
+        </app-view>
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+
+const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
+
+// 关闭弹窗
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
+    showModal.value = false
+}
+
+// 暴露组件属性给父组件调用
+defineExpose({
+    closed,
+})
+</script>

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

@@ -6,7 +6,10 @@
             <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>
+                        <h5>{{ item.goodscode }}/{{ item.goodsname }}</h5>
+                    </div>
+                    <div class="center">
+                        <h5>--</h5>
                     </div>
                     <div class="right">
                         <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
@@ -16,23 +19,23 @@
                     <ul>
                         <li>
                             <span>持有数量：</span>
-                            <span>{{ item.curpositionqty }}</span>
+                            <span>{{ formatDecimal(item.curpositionqty) }}</span>
                         </li>
                         <li>
                             <span>持仓均价：</span>
-                            <span>{{ item.averageprice === 0.0 ? '--' : item.averageprice}}</span>
+                            <span>{{ item.averageprice === 0.0 ? '--' : formatDecimal(item.averageprice) }}</span>
                         </li>
                         <li>
                             <span>冻结数量：</span>
-                            <span>{{ item.frozenqty }}</span>
+                            <span>{{ formatDecimal(item.frozenqty) }}</span>
                         </li>
                         <li>
                             <span>持仓金额：</span>
-                            <span>{{ item.curholderamount }}</span>
+                            <span>{{ formatDecimal(item.curholderamount) }}</span>
                         </li>
                         <li>
                             <span>可用数量：</span>
-                            <span>{{ item.enableqty }}</span>
+                            <span>{{ formatDecimal(item.enableqty) }}</span>
                         </li>
                         <li>
                             <span>参考损益：</span>
@@ -58,6 +61,7 @@ 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'
 
 const componentMap = new Map<string, unknown>([
     ['close', defineAsyncComponent(() => import('../close/Index.vue'))],

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

@@ -9,8 +9,16 @@
             <Tab title="买大厅">
             </Tab>
         </Tabs>
-        <app-list :columns="columns" :data-list="[]" />
-        <component ref="componentRef" :is="components.trade" v-bind="{ selectedRow }" @closed="closeComponent"
+        <div class="trade">
+                <div class="trade-section sell" v-if="dataList.length">
+                    <app-list :columns="columns" :data-list="dataList">
+                        <template #operate="{ row }">
+                            <Button size="small" round @click="delisting(row)">摘牌</Button>
+                        </template>
+                    </app-list>
+                </div>
+            </div>
+        <component ref="componentRef" :is="components.delisting" v-bind="{ selectedRow }" @closed="closeComponent"
             v-if="componentId" />
     </app-view>
 </template>
@@ -18,32 +26,55 @@
 <script lang="ts" setup>
 import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs, Button } 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 { queryTjmdTradeOrderDetail } from '@/services/api/swap'
 
 const components = {
-    trade: defineAsyncComponent(() => import('./components/trade/Index.vue')),
+    delisting: defineAsyncComponent(() => import('./components/delisting/Index.vue')),
+    listing: defineAsyncComponent(() => import('./components/listing/Index.vue')),
 }
 
 const { getQueryStringToNumber } = useNavigation()
 const { componentRef, componentId, openComponent, closeComponent } = useComponent()
 const goodsId = getQueryStringToNumber('id')
 const tabIndex = shallowRef(0)
-const selectedRow = shallowRef()
+const selectedRow = shallowRef<Model.TjmdTradeOrderDetailRsp>()
+const error = shallowRef(false)
+const showModal = shallowRef(true)
+
+const dataList = shallowRef<Model.TjmdTradeOrderDetailRsp[]>([])
+
+const { pageIndex } = useRequest(queryTjmdTradeOrderDetail, {
+    params: {
+        goodsid: goodsId,
+        buyorsell: tabIndex.value
+    },
+    onSuccess: (res) => {
+        if (pageIndex.value === 1) {
+            dataList.value = []
+        }
+        dataList.value.push(...res.data)
+    },
+    onError: () => {
+        error.value = true
+    }
+})
 
 const columns: Model.TableColumn[] = [
-    { prop: 'undefined', label: '价格' },
-    { prop: 'undefined', label: '数量' },
-    { prop: 'undefined', label: '挂牌方' },
+    { prop: 'fixedprice', label: '价格' },
+    { prop: 'orderqty', label: '数量' },
+    { prop: 'username', label: '挂牌方' },
 ]
 
 const tabChange = (index: number) => {
     console.log('切换列表', index)
 }
 
-const openTrade = (item) => {
-    selectedRow.value = item
-    openComponent('trade')
+const delisting = (row: Model.TjmdTradeOrderDetailRsp) => {
+    selectedRow.value = row
+    openComponent('delisting')
 }
 </script>

src/services/api/order/index.ts

@@ -125,7 +125,10 @@ export function queryTHJPurchaseTransferOrderDetail(config: RequestConfig<Model.
 export function queryHisTradeDetail(config: RequestConfig<Model.HisTradeDetailReq> = {}) {
     return http.commonRequest<Model.HisTradeDetailRsp[]>({
         url: '/Order/QueryHisTradeDetail',
-        params: config.data,
+        params: {
+            accountID: accountStore.accountId,
+            ...config.data
+        },
     })
 }
 
@@ -135,7 +138,10 @@ export function queryHisTradeDetail(config: RequestConfig<Model.HisTradeDetailRe
 export function queryHisTradeOrderDetail(config: RequestConfig<Model.HisTradeOrderDetailReq> = {}) {
     return http.commonRequest<Model.HisTradeOrderDetailRsp[]>({
         url: '/Order/QueryHisTradeOrderDetail',
-        params: config.data,
+        params: {
+            accountID: accountStore.accountId,
+            ...config.data
+        },
     })
 }
 
@@ -145,7 +151,10 @@ export function queryHisTradeOrderDetail(config: RequestConfig<Model.HisTradeOrd
 export function queryTradeDetail(config: RequestConfig<Model.TradeDetailReq> = {}) {
     return http.commonRequest<Model.TradeDetailRsp[]>({
         url: '/Order/QueryTradeDetail',
-        params: config.data,
+        params: {
+            accountID: accountStore.accountId,
+            ...config.data
+        },
     })
 }
 
@@ -165,7 +174,10 @@ export function queryTradeHolderDetail(config: RequestConfig<Model.TradeHolderDe
 export function queryTradeOrderDetail(config: RequestConfig<Model.TradeOrderDetailReq> = {}) {
     return http.commonRequest<Model.TradeOrderDetailRsp[]>({
         url: '/Order/QueryTradeOrderDetail',
-        params: config.data,
+        params: {
+            accountID: accountStore.accountId,
+            ...config.data
+        },
     })
 }
 

src/services/api/swap/index.ts

@@ -1,6 +1,10 @@
+import { useLoginStore, useAccountStore, useUserStore } from '@/stores'
 import http from '@/services/http'
 import { RequestConfig } from '@/services/http/types'
 
+const loginStore = useLoginStore()
+const accountStore = useAccountStore()
+const userStore = useUserStore()
 
 /**
  * 查询掉期报价列表
@@ -48,7 +52,11 @@ export function queryTjmdTodayAccountMargin(config: RequestConfig<Model.TjmdToda
 export function queryTjmdTradeOrderDetail(config: RequestConfig<Model.TjmdTradeOrderDetailReq> = {}) {
     return http.commonRequest<Model.TjmdTradeOrderDetailRsp[]>({
         url: '/Tjmd/QueryTjmdTradeOrderDetail',
-        params: config.data,
+        params: {
+            userid: loginStore.userId,
+            usertype: userStore.userType,
+            ...config.data
+        },
     })
 }
 

src/stores/modules/user.ts

@@ -32,6 +32,12 @@ export const useUserStore = defineStore(() => {
         return userAccount?.accountname
     })
 
+    // 账户类型
+    const userType = computed(() => {
+        const { userAccount } = state.userData
+        return userAccount?.usertype
+    })
+
     // 用户头像
     const userAvatar = computed(() => {
         const file = userInfo.value?.headurl
@@ -79,6 +85,7 @@ export const useUserStore = defineStore(() => {
         ...toRefs(state),
         userInfo,
         accountName,
+        userType,
         userAvatar,
         hasAuth,
         getUserData,

src/types/model/order.d.ts

@@ -800,7 +800,7 @@ declare namespace Model {
      /*   查询我的订单/掉期委托 请求*/
     interface TradeOrderDetailReq {
         /// 资金账户 - 格式：1,2,3
-        accountID: string
+        accountID?: string
         /// 交易模式 - 格式：1,2,3
         tradeMode?: string
         /// 委托状态 - 格式：1,2,3
@@ -994,7 +994,7 @@ declare namespace Model {
     /* 查询我的订单/历史成交 请求 */
     interface HisTradeDetailReq {
          /// 资金账户 - 格式：1,2,3
-        accountID: string
+        accountID?: string
         /// 成交单号
         tradeID?: number
         /// 委托单号
@@ -1136,7 +1136,7 @@ declare namespace Model {
     /* 查询我的订单/历史订单 请求 */
     interface HisTradeOrderDetailReq {
         /// 资金账户 - 格式：1,2,3
-        accountID: string
+        accountID?: string
         /// 交易模式 - 格式：1,2,3
         tradeMode?: string
         /// 委托状态 - 格式：1,2,3
@@ -1300,7 +1300,7 @@ declare namespace Model {
     /* 查询我的订单/订单成交 请求 */
     interface TradeDetailReq {
         /// 资金账户 - 格式：1,2,3
-        accountID: string
+        accountID?: string
         /// 成交单号
         tradeID?: number
         /// 委托单号

src/types/model/swap.d.ts

@@ -248,15 +248,15 @@ declare namespace Model {
         /// 每页条数
         pagesize?: number
         /// 用户id
-        userid: number
+        userid?: number
         /// 用户类型
-        usertype: number
+        usertype?: number
         /// 市场id, 格式 1,2,3
         marketids?: string
         /// 商品id
         goodsid: number
         /// 买卖方向 0-买 1-卖
-        buyorsell: number
+        buyorsell?: number
         
     }