|
|
@@ -1,72 +1,85 @@
|
|
|
<!-- 合约 - 商品交易 - 持仓单 -->
|
|
|
<template>
|
|
|
- <div class="g-detail-table">
|
|
|
- <table cellspacing="0" cellpadding="0" v-for="(item, index) in orderComputedList" :key="index">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <th colspan="2">
|
|
|
- <span>{{ item.goodsCode }}/ {{ item.goodsName }}</span>
|
|
|
- <time class="text-small">{{ formatDate(item.tHDetailEx.tradeTime) }}</time>
|
|
|
- </th>
|
|
|
- <th>
|
|
|
- <span :class="!item.buyorsell ? 'g-price-up' : 'g-price-down'">
|
|
|
- {{ getBuyOrSellName(item.tHDetailEx.buyOrSell) }}
|
|
|
- </span>
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td colspan="2">
|
|
|
- <span class="text-small">浮动盈亏( {{ getCurrencyName(item.currencyid) }})</span>
|
|
|
- <span :class="item.closeplColor">
|
|
|
- {{ formatDecimal(item.tHDetailEx.floatPL, item.decimalPlace) }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">回报率(%)</span>
|
|
|
- <span>{{ parsePercent(calReturnRate(item)) }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <span class="text-small">持仓量({{ item.goodsCode }})</span>
|
|
|
- <span>{{ item.tHDetailEx.holderQty }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">保证金( {{ getCurrencyName(item.currencyid) }} )</span>
|
|
|
- <span>{{ formatAmount(calUseMargin(item)) }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">风险率(%)</span>
|
|
|
- <span>{{ parsePercent(calRiskRate(item)) }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <span class="text-small">冻结量({{ item.goodsCode }})</span>
|
|
|
- <span>{{ item.tHDetailEx.freezeQty }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">持仓价格( {{ getCurrencyName(item.currencyid) }})</span>
|
|
|
- <span>{{ formatDecimal(item.tHDetailEx.holderPrice, item.decimalPlace) }}</span>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <span class="text-small">持金额( {{ getCurrencyName(item.currencyid) }} )</span>
|
|
|
- <span>{{ formatAmount(item.tHDetailEx.holderAmount) }}</span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- <tfoot>
|
|
|
- <tr>
|
|
|
- <td colspan="3">
|
|
|
- <Button size="small" @click="closePosition(item)">平仓</Button>
|
|
|
- <Button size="small" @click="closePositionAtMarket(item)">市价平仓</Button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tfoot>
|
|
|
- </table>
|
|
|
- <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
|
|
|
- @closed="closeComponent" v-if="componentId" />
|
|
|
- </div>
|
|
|
+ <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" @refresh="getSBYJMyOrders">
|
|
|
+ <div class="g-detail-table">
|
|
|
+ <table cellspacing="0" cellpadding="0" v-if="!goodsId">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <app-select v-model="dateType" :options="options" />
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <table cellspacing="0" cellpadding="0" v-for="(item, index) in orderComputedList" :key="index">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th colspan="2">
|
|
|
+ <span>{{ item.goodsCode }}/ {{ item.goodsName }}</span>
|
|
|
+ <time class="text-small">{{ formatDate(item.tHDetailEx.tradeTime) }}</time>
|
|
|
+ </th>
|
|
|
+ <th>
|
|
|
+ <span :class="!item.buyorsell ? 'g-price-up' : 'g-price-down'">
|
|
|
+ {{ getBuyOrSellName(item.tHDetailEx.buyOrSell) }}
|
|
|
+ </span>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2">
|
|
|
+ <span class="text-small">浮动盈亏( {{ getCurrencyName(item.currencyid) }})</span>
|
|
|
+ <span :class="item.closeplColor">
|
|
|
+ {{ formatDecimal(item.tHDetailEx.floatPL, item.decimalPlace) }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">回报率(%)</span>
|
|
|
+ <span>{{ parsePercent(calReturnRate(item)) }}</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">持仓量({{ item.goodsCode }})</span>
|
|
|
+ <span>{{ item.tHDetailEx.holderQty }}</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">保证金( {{ getCurrencyName(item.currencyid) }} )</span>
|
|
|
+ <span>{{ formatAmount(calUseMargin(item)) }}</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">风险率(%)</span>
|
|
|
+ <span>{{ parsePercent(calRiskRate(item)) }}</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">冻结量({{ item.goodsCode }})</span>
|
|
|
+ <span>{{ item.tHDetailEx.freezeQty }}</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">持仓价格( {{ getCurrencyName(item.currencyid) }})</span>
|
|
|
+ <span>{{ formatDecimal(item.tHDetailEx.holderPrice, item.decimalPlace) }}</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span class="text-small">持金额( {{ getCurrencyName(item.currencyid) }} )</span>
|
|
|
+ <span>{{ formatAmount(item.tHDetailEx.holderAmount) }}</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ <tfoot>
|
|
|
+ <tr>
|
|
|
+ <td colspan="3">
|
|
|
+ <Button size="small" @click="closePosition(item)">平仓</Button>
|
|
|
+ <Button size="small" @click="closePositionAtMarket(item)">市价平仓</Button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tfoot>
|
|
|
+ </table>
|
|
|
+ <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
+ </div>
|
|
|
+ <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
|
|
|
+ v-if="componentId" />
|
|
|
+ </app-pull-refresh>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
@@ -77,19 +90,30 @@ import { useComponent } from '@/hooks/component'
|
|
|
import { useSBYJOrderStore } from '@/stores'
|
|
|
import { formatDate, formatDecimal, formatAmount, parsePercent } from '@/filters'
|
|
|
import { getCurrencyName } from '@/constants/order'
|
|
|
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
+import AppSelect from '@mobile/components/base/select/index.vue'
|
|
|
|
|
|
defineProps({
|
|
|
goodsId: Number
|
|
|
})
|
|
|
|
|
|
+const dateType = shallowRef(0)
|
|
|
+
|
|
|
+const options = shallowRef([
|
|
|
+ { label: '当前', value: 0 },
|
|
|
+ { label: '历史', value: 1 }
|
|
|
+])
|
|
|
+
|
|
|
const componentMap = new Map<string, unknown>([
|
|
|
['Close', defineAsyncComponent(() => import('./close/index.vue'))], // 平仓
|
|
|
['MarketClose', defineAsyncComponent(() => import('./market-close/index.vue'))], // 市价平仓
|
|
|
])
|
|
|
|
|
|
const selectedRow = shallowRef<Model.SBYJMyOrderRsp>()
|
|
|
+const pullRefreshRef = shallowRef()
|
|
|
+
|
|
|
const { getSBYJMyOrders, $toRefs, calRiskRate, calReturnRate, calUseMargin } = useSBYJOrderStore()
|
|
|
-const { orderComputedList } = $toRefs()
|
|
|
+const { orderComputedList, loading, error } = $toRefs()
|
|
|
|
|
|
const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => getSBYJMyOrders())
|
|
|
|