|
|
@@ -2,45 +2,138 @@
|
|
|
<app-view>
|
|
|
<template #header>
|
|
|
<app-navbar :title="$t('position.title')">
|
|
|
- <template #right v-if="selectedComponent.detail">
|
|
|
- <div class="button-more" @click="openComponent(selectedComponent.name)">
|
|
|
- <span>{{ $t('position.holddetail') }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <!-- <template #footer>
|
|
|
+ <Tabs>
|
|
|
+ <Tab title="全款订单" :name="1" />
|
|
|
+ <Tab title="预付款订单" :name="2" />
|
|
|
+ </Tabs>
|
|
|
+ </template> -->
|
|
|
</app-navbar>
|
|
|
</template>
|
|
|
- <Tabs class="van-tabs--list" v-model:active="active" :swipe-threshold="4">
|
|
|
- <template v-for="(item, index) in components" :key="index">
|
|
|
- <Tab :title="item.title" :name="index">
|
|
|
- <component :is="item.component" />
|
|
|
- </Tab>
|
|
|
- </template>
|
|
|
- </Tabs>
|
|
|
- <component ref="componentRef" :is="selectedComponent.detail" @closed="closeComponent" v-bind="{ onlyDelivery }"
|
|
|
- v-if="componentId && selectedComponent.detail" />
|
|
|
+ <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error"
|
|
|
+ @refresh="getSBYJMyOrders">
|
|
|
+ <div class="order-list">
|
|
|
+ <div class="order-list__box" v-for="(item, index) in orderComputedList" :key="index">
|
|
|
+ <div class="order-list__titlebar">
|
|
|
+ <div class="left">
|
|
|
+ <b>订单号：{{ item.tHDetailEx.tradeID }}</b>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <b :class="!item.tHDetailEx.buyOrSell ? 'g-price-up' : 'g-price-down'">
|
|
|
+ {{ getBuyOrSellName(item.tHDetailEx.buyOrSell) }}
|
|
|
+ </b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="order-list__content">
|
|
|
+ <div class="left">
|
|
|
+ <Image width="100" height="100" radius="4" :src="getImageUrl(item.thumurls)" />
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>商品代码：</span>
|
|
|
+ <span>{{ item.goodsCode }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.holderqty') }}：</span>
|
|
|
+ <span>{{ enableqty(item) + getGoodsUnitName(item.goodsUnitID) }}</span>
|
|
|
+ </li>
|
|
|
+ <!-- <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.freezeqty') }}</span>
|
|
|
+ <span>{{ item.tHDetailEx.freezeQty }}</span>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.holderprice') }}：</span>
|
|
|
+ <span>{{ formatDecimal(item.tHDetailEx.holderPrice, item.decimalPlace) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.holderamount') }}：</span>
|
|
|
+ <span>{{ formatDecimal(item.tHDetailEx.holderAmount, item.decimalPlace) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.usedMargin') }}：</span>
|
|
|
+ <span>{{ formatDecimal(item.tHDetailEx.payedDeposit +
|
|
|
+ item.tHDetailEx.restockDeposit,
|
|
|
+ item.decimalPlace) }}</span>
|
|
|
+ </li>
|
|
|
+ <!-- <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.profitLoss') }}</span>
|
|
|
+ <span :class="handlePriceColor(item.tHDetailEx.floatPL)">
|
|
|
+ {{ formatDecimal(item.tHDetailEx.floatPL) }}
|
|
|
+ </span>
|
|
|
+ </li> -->
|
|
|
+ <!-- <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.riskRate') }}</span>
|
|
|
+ <span :class="item.tHDetailEx.depositRate >= item.tHDetailEx.promptDepositRate ? 'g-price-up' : ''">
|
|
|
+ {{ parsePercent(item.tHDetailEx.riskRate) }}
|
|
|
+ </span>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <span>{{ $t('position.goods.holddetail.tradetime') }}：</span>
|
|
|
+ <span>{{ formatDate(item.tHDetailEx.tradeTime) }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="order-list__btnbar" v-if="item.tHDetailEx.holderQty">
|
|
|
+ <Button size="small" v-if="enableqty(item)" @click="showComponent('close', item)" round>
|
|
|
+ {{ $t('operation.close') }}
|
|
|
+ </Button>
|
|
|
+ <Button size="small" @click="showComponent('delivery', item)" round>
|
|
|
+ {{ $t('operation.delivery') }}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </app-pull-refresh>
|
|
|
+ <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
</app-view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, computed, defineAsyncComponent } from 'vue'
|
|
|
-import { Tab, Tabs } from 'vant'
|
|
|
+import { shallowRef, defineAsyncComponent } from 'vue'
|
|
|
+import { Tabs, Tab, Button, Image } from 'vant'
|
|
|
+import { getFileUrl } from '@/filters'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
|
-import { i18n } from '@/stores'
|
|
|
+import { getBuyOrSellName } from '@/constants/order'
|
|
|
+import { formatDecimal, formatDate } from '@/filters'
|
|
|
+import { getGoodsUnitName } from '@/constants/unit'
|
|
|
+import { useSBYJOrderStore } from '@/stores'
|
|
|
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
|
|
|
+
|
|
|
+const { getSBYJMyOrders, $toRefs } = useSBYJOrderStore()
|
|
|
+const { orderComputedList, loading, error } = $toRefs()
|
|
|
+
|
|
|
+const componentMap = new Map<string, unknown>([
|
|
|
+ ['close', defineAsyncComponent(() => import('@mobile/views/order/position/components/pricing/detail2/components/transfer/Index.vue'))],
|
|
|
+ ['delivery', defineAsyncComponent(() => import('@mobile/views/order/position/components/pricing/detail2/components/delivery/Index.vue'))],
|
|
|
+])
|
|
|
+
|
|
|
+const selectedRow = shallowRef<Model.SBYJMyOrderRsp>()
|
|
|
+const pullRefreshRef = shallowRef()
|
|
|
+
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
|
|
|
+ pullRefreshRef.value?.refresh()
|
|
|
+})
|
|
|
|
|
|
-const { global: { t } } = i18n
|
|
|
+const showComponent = (componentName: string, row: Model.SBYJMyOrderRsp) => {
|
|
|
+ selectedRow.value = row
|
|
|
+ openComponent(componentName)
|
|
|
+}
|
|
|
|
|
|
-const onlyDelivery = shallowRef(false)
|
|
|
+// 可用重量
|
|
|
+const enableqty = (item: Model.SBYJMyOrderRsp) => {
|
|
|
+ const { tHDetailEx, agreeUnit } = item
|
|
|
+ return (tHDetailEx.holderQty - tHDetailEx.freezeQty) * agreeUnit
|
|
|
+}
|
|
|
|
|
|
-const components = [
|
|
|
- {
|
|
|
- name: 'pricing',
|
|
|
- title: t('position.pricing.title'),
|
|
|
- component: defineAsyncComponent(() => import('@mobile/views/order/position/components/pricing/list/Index.vue')),
|
|
|
- detail: defineAsyncComponent(() => import('@mobile/views/order/position/components/pricing/detail2/Index.vue')),
|
|
|
- },
|
|
|
-]
|
|
|
+const getImageUrl = (url: string) => {
|
|
|
+ const [firstImg] = url.split(',')
|
|
|
+ return firstImg ? getFileUrl(firstImg) : ''
|
|
|
+}
|
|
|
+</script>
|
|
|
|
|
|
-const active = shallowRef(0)
|
|
|
-const selectedComponent = computed(() => components[active.value])
|
|
|
-const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
-</script>
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|
