|
@@ -2,90 +2,83 @@
|
|
|
<template>
|
|
<template>
|
|
|
<app-view class="pricing-trade">
|
|
<app-view class="pricing-trade">
|
|
|
<template #header>
|
|
<template #header>
|
|
|
- <app-navbar :title="collectionName" />
|
|
|
|
|
|
|
+ <app-navbar :title="collection?.collectionname" />
|
|
|
</template>
|
|
</template>
|
|
|
<Banner :data-list="topBanners" />
|
|
<Banner :data-list="topBanners" />
|
|
|
- <div class="pricing-trade__form" v-if="collection">
|
|
|
|
|
- <span>{{ collectionName }}</span>
|
|
|
|
|
- <span v-if="orderType === 1">
|
|
|
|
|
- 销售价格
|
|
|
|
|
- {{ handleNumberValue(formatDecimal(marketPrice, decimalplace)) }}
|
|
|
|
|
- </span>
|
|
|
|
|
- <span v-else-if="orderType === 2">
|
|
|
|
|
- 销售价格
|
|
|
|
|
- {{ handleNumberValue(formatDecimal(marketPrice, decimalplace)) }}
|
|
|
|
|
- 预付款
|
|
|
|
|
- {{ handleNumberValue(formatDecimal(usedMargin.deposit, decimalplace)) }}
|
|
|
|
|
- </span>
|
|
|
|
|
- <span v-else>
|
|
|
|
|
- 回购价格
|
|
|
|
|
- {{ handleNumberValue(formatDecimal(marketPrice, decimalplace)) }}
|
|
|
|
|
- 预付款
|
|
|
|
|
- {{ handleNumberValue(formatDecimal(usedMargin.deposit, decimalplace)) }}
|
|
|
|
|
- </span>
|
|
|
|
|
|
|
+ <div class="pricing-trade__header" v-if="collection">
|
|
|
|
|
+ <h1 class="pricing-trade__header-title">{{ collection.collectionname }}</h1>
|
|
|
|
|
+ <div class="pricing-trade__header-price">
|
|
|
|
|
+ <dl>
|
|
|
|
|
+ <dt v-if="[1, 2].includes(orderType)">销售价格</dt>
|
|
|
|
|
+ <dt v-else>回购价格</dt>
|
|
|
|
|
+ <dd>{{ handleNumberValue(formatDecimal(marketPrice, decimalplace)) }}</dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ <dl v-if="orderType !== 1">
|
|
|
|
|
+ <dt>预付款</dt>
|
|
|
|
|
+ <dd>{{ handleNumberValue(formatDecimal(usedMargin.deposit, decimalplace)) }}</dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- 下单选择区域 -->
|
|
|
|
|
- <Form ref="formRef" class="g-form__container" @submit="onSubmit">
|
|
|
|
|
- <Field name="OrderType" label="订单类型">
|
|
|
|
|
|
|
+ <!-- 下单选择区域 -->
|
|
|
|
|
+ <Form ref="formRef" class="pricing-trade__form" @submit="onSubmit">
|
|
|
|
|
+ <Field name="OrderType" label="订单类型" label-align="top">
|
|
|
<template #input>
|
|
<template #input>
|
|
|
<div class="g-qty-group">
|
|
<div class="g-qty-group">
|
|
|
<RadioGroup v-model="orderType" direction="horizontal" @change="onOrderTypeRadioChange">
|
|
<RadioGroup v-model="orderType" direction="horizontal" @change="onOrderTypeRadioChange">
|
|
|
- <Radio v-for="(item, index) in orderTypeStepList" :key="index" :name="item.value">{{ item.label }}</Radio>
|
|
|
|
|
|
|
+ <Radio v-for="(item, index) in orderTypeStepList" :key="index" :name="item.value">{{
|
|
|
|
|
+ item.label }}</Radio>
|
|
|
</RadioGroup>
|
|
</RadioGroup>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
- <Field name="OrderGoods" label="商品规格">
|
|
|
|
|
|
|
+ <Field name="OrderGoods" label="商品规格" label-align="top">
|
|
|
<template #input>
|
|
<template #input>
|
|
|
<div class="g-qty-group">
|
|
<div class="g-qty-group">
|
|
|
<RadioGroup v-model="goodsid" direction="horizontal" @change="onGoodsRadioChange">
|
|
<RadioGroup v-model="goodsid" direction="horizontal" @change="onGoodsRadioChange">
|
|
|
- <Radio v-for="(item, index) in goodsList" :key="index" :name="item.goodsid">{{ item.agreeunit+getGoodsUnitName(item.goodunitid) }}</Radio>
|
|
|
|
|
|
|
+ <Radio v-for="(item, index) in goodsList" :key="index" :name="item.goodsid">{{
|
|
|
|
|
+ item.agreeunit + getGoodsUnitName(item.goodunitid) }}</Radio>
|
|
|
</RadioGroup>
|
|
</RadioGroup>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
- <Field name="OrderQty" label="批量购买">
|
|
|
|
|
|
|
+ <Field name="OrderQty" label="批量购买" label-align="top">
|
|
|
<template #input>
|
|
<template #input>
|
|
|
<div class="g-qty-group">
|
|
<div class="g-qty-group">
|
|
|
<RadioGroup v-model="qtyStep" direction="horizontal" @change="onQtyRadioChange">
|
|
<RadioGroup v-model="qtyStep" direction="horizontal" @change="onQtyRadioChange">
|
|
|
<Radio v-for="(value, index) in qtyStepList" :key="index" :name="value">{{ value }}
|
|
<Radio v-for="(value, index) in qtyStepList" :key="index" :name="value">{{ value }}
|
|
|
</Radio>
|
|
</Radio>
|
|
|
</RadioGroup>
|
|
</RadioGroup>
|
|
|
- </div>
|
|
|
|
|
- </template>
|
|
|
|
|
- </Field>
|
|
|
|
|
- <Field name="OrderQty" label="自定义">
|
|
|
|
|
- <template #input>
|
|
|
|
|
- <div class="g-qty-group__stepper">
|
|
|
|
|
- <Stepper v-model="orderQty" theme="round" button-size="22" :min="1" :step="qtyStep" integer />
|
|
|
|
|
|
|
+ <div class="g-qty-group__stepper">
|
|
|
|
|
+ <Stepper v-model="orderQty" :min="1" :step="qtyStep" integer />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
</Form>
|
|
</Form>
|
|
|
- <Tabs v-model:active="active">
|
|
|
|
|
|
|
+ <Tabs class="van-tabs--list" v-model:active="active" style="display: block;">
|
|
|
<template v-for="(item, index) in components.filter(e => e.show === true)" :key="index">
|
|
<template v-for="(item, index) in components.filter(e => e.show === true)" :key="index">
|
|
|
<Tab :title="item.title" :name="item.name">
|
|
<Tab :title="item.title" :name="item.name">
|
|
|
- <span>{{ collectionDesc }}</span>
|
|
|
|
|
- <component :is="item.component" v-bind="{ pictureurl }" />
|
|
|
|
|
|
|
+ <component :is="item.component" v-bind="{ record: collection }" />
|
|
|
</Tab>
|
|
</Tab>
|
|
|
</template>
|
|
</template>
|
|
|
- </Tabs>
|
|
|
|
|
|
|
+ </Tabs>
|
|
|
<template #footer v-if="collection">
|
|
<template #footer v-if="collection">
|
|
|
<div class="g-form__footer inset">
|
|
<div class="g-form__footer inset">
|
|
|
- <Button type="danger" block round :disabled="orderQty === 0" @click="onSubmit">
|
|
|
|
|
- {{ orderType === 1 ? $t('operation.buynow') : orderTypeStepList.find(e => e.value === orderType)?.label }}
|
|
|
|
|
|
|
+ <Button type="danger" block :disabled="orderQty === 0" @click="onSubmit">
|
|
|
|
|
+ {{ orderType === 1 ? $t('operation.buynow') : orderTypeStepList.find(e => e.value ===
|
|
|
|
|
+ orderType)?.label }}
|
|
|
</Button>
|
|
</Button>
|
|
|
</div>
|
|
</div>
|
|
|
- <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ goodsid, collectionid, orderType, orderQty }"
|
|
|
|
|
- @closed="closeComponent" v-if="componentId" />
|
|
|
|
|
- </template>
|
|
|
|
|
|
|
+ <component ref="componentRef" :is="componentMap.get(componentId)"
|
|
|
|
|
+ v-bind="{ goodsid, collectionid, orderType, orderQty }" @closed="closeComponent" v-if="componentId" />
|
|
|
|
|
+ </template>
|
|
|
</app-view>
|
|
</app-view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import { shallowRef, onMounted, onUnmounted, computed, defineAsyncComponent } from 'vue'
|
|
import { shallowRef, onMounted, onUnmounted, computed, defineAsyncComponent } from 'vue'
|
|
|
import { Form, Field, Button, FormInstance, Radio, RadioGroup, Tab, Tabs } from 'vant'
|
|
import { Form, Field, Button, FormInstance, Radio, RadioGroup, Tab, Tabs } from 'vant'
|
|
|
-import { useFuturesStore, useUserStore, i18n, useAccountStore } from '@/stores'
|
|
|
|
|
|
|
+import { useFuturesStore, useGoodsCollectionStore, useUserStore, i18n, useAccountStore } from '@/stores'
|
|
|
import { useNavigation } from '@mobile/router/navigation'
|
|
import { useNavigation } from '@mobile/router/navigation'
|
|
|
import { formatDecimal, handleNumberValue } from '@/filters'
|
|
import { formatDecimal, handleNumberValue } from '@/filters'
|
|
|
import { getGoodsUnitName } from '@/constants/unit'
|
|
import { getGoodsUnitName } from '@/constants/unit'
|
|
@@ -96,10 +89,11 @@ import Banner from '@mobile/components/base/banner/index.vue'
|
|
|
|
|
|
|
|
const { getQueryStringToNumber } = useNavigation()
|
|
const { getQueryStringToNumber } = useNavigation()
|
|
|
const futuresStore = useFuturesStore()
|
|
const futuresStore = useFuturesStore()
|
|
|
|
|
+const goodsCollectionStore = useGoodsCollectionStore()
|
|
|
const accountStore = useAccountStore()
|
|
const accountStore = useAccountStore()
|
|
|
|
|
|
|
|
const collectionid = getQueryStringToNumber('collectionid')
|
|
const collectionid = getQueryStringToNumber('collectionid')
|
|
|
-const collection = futuresStore.collections.find(e => e.collectionid === collectionid)
|
|
|
|
|
|
|
+const collection = goodsCollectionStore.getGoodsById(collectionid)
|
|
|
|
|
|
|
|
const { global: { t } } = i18n
|
|
const { global: { t } } = i18n
|
|
|
const subscribe = quoteSocket.createSubscribe()
|
|
const subscribe = quoteSocket.createSubscribe()
|
|
@@ -123,18 +117,18 @@ const orderQty = shallowRef(qtyStepList.value[0]) // 默认数量
|
|
|
// 订单模型列表
|
|
// 订单模型列表
|
|
|
const orderTypeStepList = computed(() => {
|
|
const orderTypeStepList = computed(() => {
|
|
|
return [
|
|
return [
|
|
|
- { label: '全款', value: 1},
|
|
|
|
|
- { label: '预付款', value: 2},
|
|
|
|
|
- { label: '回购', value: 3}
|
|
|
|
|
|
|
+ { label: '全款', value: 1 },
|
|
|
|
|
+ { label: '预付款', value: 2 },
|
|
|
|
|
+ { label: '回购', value: 3 }
|
|
|
]
|
|
]
|
|
|
})
|
|
})
|
|
|
// 订单模型
|
|
// 订单模型
|
|
|
-const orderType = shallowRef(orderTypeStepList.value[0].value)
|
|
|
|
|
|
|
+const orderType = shallowRef(orderTypeStepList.value[0].value)
|
|
|
|
|
|
|
|
// 商品信息
|
|
// 商品信息
|
|
|
const goodsList = shallowRef<Model.GoodsQuote[]>()
|
|
const goodsList = shallowRef<Model.GoodsQuote[]>()
|
|
|
// 默认选择第一个全款下的第一个商品
|
|
// 默认选择第一个全款下的第一个商品
|
|
|
-const goodsid = shallowRef(0)
|
|
|
|
|
|
|
+const goodsid = shallowRef(0)
|
|
|
const quote = shallowRef<Model.GoodsQuote>()
|
|
const quote = shallowRef<Model.GoodsQuote>()
|
|
|
|
|
|
|
|
// Banner图
|
|
// Banner图
|
|
@@ -142,34 +136,6 @@ const topBanners = computed(() => {
|
|
|
return collection?.bannerurls.split(',') ?? []
|
|
return collection?.bannerurls.split(',') ?? []
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-// 商品名称
|
|
|
|
|
-const collectionName = computed(() => {
|
|
|
|
|
- switch (i18n.global.locale) {
|
|
|
|
|
- case 'zh-CN':
|
|
|
|
|
- return collection?.collectionname
|
|
|
|
|
- case 'en-US':
|
|
|
|
|
- return collection?.collectionnameen
|
|
|
|
|
- case 'zh-TW':
|
|
|
|
|
- return collection?.collectionnametw
|
|
|
|
|
- default:
|
|
|
|
|
- return collection?.collectiondescth
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-// 商品名称
|
|
|
|
|
-const collectionDesc = computed(() => {
|
|
|
|
|
- switch (i18n.global.locale) {
|
|
|
|
|
- case 'zh-CN':
|
|
|
|
|
- return collection?.collectiondesc
|
|
|
|
|
- case 'en-US':
|
|
|
|
|
- return collection?.collectiondescen
|
|
|
|
|
- case 'zh-TW':
|
|
|
|
|
- return collection?.collectiondesctw
|
|
|
|
|
- default:
|
|
|
|
|
- return collection?.collectiondescth
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
const pictureurl = computed(() => {
|
|
const pictureurl = computed(() => {
|
|
|
return collection?.pictureurl ?? ''
|
|
return collection?.pictureurl ?? ''
|
|
|
})
|
|
})
|
|
@@ -197,7 +163,7 @@ const onOrderTypeRadioChange = (value: number) => {
|
|
|
}
|
|
}
|
|
|
// 订阅商品行情
|
|
// 订阅商品行情
|
|
|
subscribe.start(quote.value?.goodscode ?? '')
|
|
subscribe.start(quote.value?.goodscode ?? '')
|
|
|
- }
|
|
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 商品规格切换
|
|
// 商品规格切换
|
|
|
const onGoodsRadioChange = (value: number) => {
|
|
const onGoodsRadioChange = (value: number) => {
|
|
@@ -219,7 +185,7 @@ const marketPrice = computed(() => {
|
|
|
case 2:
|
|
case 2:
|
|
|
return ask
|
|
return ask
|
|
|
default:
|
|
default:
|
|
|
- return bid
|
|
|
|
|
|
|
+ return bid
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
@@ -273,7 +239,7 @@ const onSubmit = () => {
|
|
|
openComponent('fullpayment')
|
|
openComponent('fullpayment')
|
|
|
} else {
|
|
} else {
|
|
|
// 预付款以及回购
|
|
// 预付款以及回购
|
|
|
- openComponent('prepayment')
|
|
|
|
|
|
|
+ openComponent('prepayment')
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|