|
|
@@ -0,0 +1,119 @@
|
|
|
+<template>
|
|
|
+ <app-view class="transfer-detail g-form g-detail">
|
|
|
+ <template #header>
|
|
|
+ <app-navbar title="转让详情" />
|
|
|
+ </template>
|
|
|
+ <component :is="Price" v-bind="{ goodsCode }" />
|
|
|
+ <component :is="Chart" v-bind="{ goodsCode }" />
|
|
|
+ <div class="transfer-detail__forex">
|
|
|
+ <dl>
|
|
|
+ <dt>
|
|
|
+ <span>转让挂牌</span>
|
|
|
+ <span @click="navigateTo">更多
|
|
|
+ <Icon name="arrow" />
|
|
|
+ </span>
|
|
|
+ </dt>
|
|
|
+ <dd>
|
|
|
+ <span>卖一</span>
|
|
|
+ <span :class="quote?.askColor">{{ handleNumberValue(quote?.ask) }}</span>
|
|
|
+ <span>{{ handleNumberValue(quote?.askvolume) }}</span>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <span>卖二</span>
|
|
|
+ <span :class="quote?.ask2Color">{{ handleNumberValue(quote?.ask2) }}</span>
|
|
|
+ <span>{{ handleNumberValue(quote?.askvolume2) }}</span>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <span>卖三</span>
|
|
|
+ <span :class="quote?.ask3Color">{{ handleNumberValue(quote?.ask3) }}</span>
|
|
|
+ <span>{{ handleNumberValue(quote?.askvolume3) }}</span>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <span>卖四</span>
|
|
|
+ <span :class="quote?.ask4Color">{{ handleNumberValue(quote?.ask4) }}</span>
|
|
|
+ <span>{{ handleNumberValue(quote?.askvolume4) }}</span>
|
|
|
+ </dd>
|
|
|
+ <dd>
|
|
|
+ <span>卖五</span>
|
|
|
+ <span :class="quote?.ask5Color">{{ handleNumberValue(quote?.ask5) }}</span>
|
|
|
+ <span>{{ handleNumberValue(quote?.askvolume5) }}</span>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ <div class="g-detail__desc">
|
|
|
+ <template v-for="(url, index) in detailImages" :key="index">
|
|
|
+ <img :src="url" alt="" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="g-form__footer">
|
|
|
+ <Button block type="danger" square @click="navigateTo">买入</Button>
|
|
|
+ <Button block type="primary" square @click="openComponent('listing')" v-if="dataList.length">转让</Button>
|
|
|
+ </div>
|
|
|
+ <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ selectedRow: dataList[0] }"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
+ </template>
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, defineAsyncComponent } from 'vue'
|
|
|
+import { Button, Icon } from 'vant'
|
|
|
+import { getFileUrl, handleNumberValue } from '@/filters'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { queryPresaleDefault, queryMineTradePositionExs } from '@/services/api/transfer'
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
+import { useNavigation } from '@/hooks/navigation'
|
|
|
+import { useFuturesStore } from '@/stores'
|
|
|
+
|
|
|
+const Price = defineAsyncComponent(() => import('@mobile/components/modules/quote/price/index.vue'))
|
|
|
+const Chart = defineAsyncComponent(() => import('@mobile/components/modules/quote/chart/index.vue'))
|
|
|
+
|
|
|
+const componentMap = new Map<string, unknown>([
|
|
|
+ ['listing', defineAsyncComponent(() => import('@mobile/views/order/position/components/transfer/listing/Index.vue'))], // 挂牌
|
|
|
+])
|
|
|
+
|
|
|
+const { router, getQueryStringToNumber } = useNavigation()
|
|
|
+const { getQuoteInfo } = useFuturesStore()
|
|
|
+const goodsid = getQueryStringToNumber('goodsid')
|
|
|
+const quote = getQuoteInfo(goodsid)
|
|
|
+const goodsCode = computed(() => quote.value?.goodscode ?? '')
|
|
|
+
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
|
|
|
+ getPresaleDefault()
|
|
|
+ getMineTradePositionExs()
|
|
|
+})
|
|
|
+
|
|
|
+// 获取转让详情
|
|
|
+const { data: detail, run: getPresaleDefault } = useRequest(queryPresaleDefault, {
|
|
|
+ params: {
|
|
|
+ goodsid,
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 获取转让持仓
|
|
|
+const { dataList, run: getMineTradePositionExs } = useRequest(queryMineTradePositionExs, {
|
|
|
+ params: {
|
|
|
+ goodsid,
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 商品图片列表
|
|
|
+const detailImages = computed(() => {
|
|
|
+ const pictureurls = detail.value?.pictureurls ?? ''
|
|
|
+ return pictureurls.split(',').map((path) => getFileUrl(path))
|
|
|
+})
|
|
|
+
|
|
|
+const navigateTo = () => {
|
|
|
+ router.push({
|
|
|
+ name: 'transfer-delisting',
|
|
|
+ query: {
|
|
|
+ goodsid,
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|