增加我的订单-掉期模块

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/list/Index.vue

@@ -0,0 +1,136 @@
+<!-- 我的订单- 掉期订单 - 委托 -->
+<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">
+                                <h4>({{ item.goodscode }}/{{ item.goodsname }} {{ formatDate(item.ordertime) }})</h4>
+                            </div>
+                            <div class="right">
+                                <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                            </div>
+                        </div>
+                        <div class="g-order-list__content">
+                            <ul>
+                                <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>{{ getTHJOrderStatusName(item.orderstatus) }}</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="g-order-list__btnbar">
+                            <span>{{ item.orderid }}</span>
+                            <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, getTHJOrderStatusName } 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/list/Index.vue

@@ -0,0 +1,136 @@
+<!-- 我的订单- 掉期订单 - 成交 -->
+<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">
+                                <h4>({{ item.goodscode }}/{{ item.goodsname }} {{ formatDate(item.tradetime) }})</h4>
+                            </div>
+                            <div class="right">
+                                <span>{{ getBuildTypeName(item.buildtype) }} {{ getBuyOrSellName(item.buyorsell) }}</span>
+                            </div>
+                        </div>
+                        <div class="g-order-list__content">
+                            <ul>
+                                <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">
+                            <span>{{ item.tradeid }}</span>
+                            <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.HisTradeOrderDetailReq>({
+    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/list/Index.vue

@@ -0,0 +1,91 @@
+<!-- 我的订单-掉期委托 -->
+<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 }} {{ formatDate(item.ordertime) }})</h4>
+                    </div>
+                    <div class="right">
+                        <span>{{ getBuyOrSellName(item.buyorsell) }}</span>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <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>{{ getTHJOrderStatusName(item.orderstatus) }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="g-order-list__btnbar">
+                    <span>{{ item.orderid }}</span>
+                    <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                    <Button size="small" @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, getTHJOrderStatusName } from '@/constants/order'
+import { formatDate } 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/list/Index.vue

@@ -0,0 +1,89 @@
+<!-- 我的订单-掉期成交 -->
+<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 }} {{ formatDate(item.tradetime) }})</h4>
+                    </div>
+                    <div class="right">
+                        <span>{{ getBuildTypeName(item.buildtype) }} {{ getBuyOrSellName(item.buyorsell) }}</span>
+                    </div>
+                </div>
+                <div class="g-order-list__content">
+                    <ul>
+                        <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">
+                    <span>{{ item.tradeid }}</span>
+                    <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 } 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/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/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
@@ -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
         /// 委托单号