|
|
@@ -0,0 +1,173 @@
|
|
|
+<!-- 全款商城 - 交易下单 -->
|
|
|
+<template>
|
|
|
+ <app-view class="pricing-trade">
|
|
|
+ <template #header>
|
|
|
+ <app-navbar :title="quote ? `${quote.goodscode}` : $t('quote.pricing.title')" />
|
|
|
+ </template>
|
|
|
+ <Banner :data-list="topBanners" />
|
|
|
+ <div class="pricing-trade__header" v-if="goods">
|
|
|
+ <h1 class="pricing-trade__header-title">{{ goods.goodsname }}</h1>
|
|
|
+ <div class="pricing-trade__header-price">
|
|
|
+ <dl v-if="quote.askColor">
|
|
|
+ <dt>积分</dt>
|
|
|
+ <dd>
|
|
|
+ {{ currencyFormat(quote?.ask, quote?.currencyid, {
|
|
|
+ fractionDigits: quote?.decimalplace, noneValue: true
|
|
|
+ }) }}
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 下单选择区域 -->
|
|
|
+ <Form ref="formRef" class="pricing-trade__form" @submit="onSubmit">
|
|
|
+ <Field name="OrderQty" :label="$t('tss.orderqty')" label-align="top">
|
|
|
+ <template #input>
|
|
|
+ <div class="g-qty-group">
|
|
|
+ <RadioGroup v-model="qtyStep" direction="horizontal" @change="onQtyRadioChange">
|
|
|
+ <Radio v-for="(value, index) in qtyStepList" :key="index" :name="value">{{ value }}
|
|
|
+ </Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ <div class="g-qty-group__stepper">
|
|
|
+ <Stepper v-model="orderQty" :min="1" :step="qtyStep" integer />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Field>
|
|
|
+ </Form>
|
|
|
+ <Tabs v-model:active="active">
|
|
|
+ <template v-for="(item, index) in components.filter(e => e.show === true)" :key="index">
|
|
|
+ <Tab :title="item.title" :name="item.name">
|
|
|
+ <component :is="item.component" v-bind="{ quote }" />
|
|
|
+ </Tab>
|
|
|
+ </template>
|
|
|
+ </Tabs>
|
|
|
+ <template #footer v-if="goods">
|
|
|
+ <div class="g-form__footer inset">
|
|
|
+ <Button type="danger" block :disabled="orderQty === 0" @click="onSubmit">
|
|
|
+ {{ $t('operation.buynow') }}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef, onMounted, onUnmounted, computed, defineAsyncComponent } from 'vue'
|
|
|
+import { Form, Field, Button, FormInstance, Radio, RadioGroup, Tab, Tabs } from 'vant'
|
|
|
+import { useFuturesStore, useUserStore, i18n } from '@/stores'
|
|
|
+import { useNavigation } from '@mobile/router/navigation'
|
|
|
+import { currencyFormat } from '@/filters'
|
|
|
+import { useOrder } from '@/business/trade'
|
|
|
+import { fullloading, dialog } from '@/utils/vant'
|
|
|
+import { BuildType, BuyOrSell, PriceMode } from '@/constants/order'
|
|
|
+import eventBus from '@/services/bus'
|
|
|
+import quoteSocket from '@/services/websocket/quote'
|
|
|
+import Stepper from '@mobile/components/base/stepper/index.vue'
|
|
|
+import Banner from '@mobile/components/base/banner/index.vue'
|
|
|
+
|
|
|
+const { getQueryString, getQueryStringToNumber, routerBack } = useNavigation()
|
|
|
+
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+
|
|
|
+const goodsCode = getQueryString('goodscode') ?? ''
|
|
|
+const goodsid = getQueryStringToNumber('goodsid')
|
|
|
+const quote = futuresStore.getGoodsQuote(goodsCode)
|
|
|
+const goods = futuresStore.getGoods(goodsid)
|
|
|
+
|
|
|
+const { global: { t } } = i18n
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
+
|
|
|
+const formRef = shallowRef<FormInstance>()
|
|
|
+const { formData, formSubmit } = useOrder()
|
|
|
+
|
|
|
+const { getSystemParamValue } = useUserStore()
|
|
|
+const system_1012 = getSystemParamValue('1012') ?? '1'
|
|
|
+
|
|
|
+const active = shallowRef('images')
|
|
|
+
|
|
|
+// 数量步长列表
|
|
|
+const qtyStepList = computed(() => {
|
|
|
+ const result = [1, 5, 10]
|
|
|
+ const system_1009 = getSystemParamValue('1009') ?? '1'
|
|
|
+ return result.map((value) => +system_1009 * value)
|
|
|
+})
|
|
|
+const qtyStep = shallowRef(qtyStepList.value[0]) // 数量步长
|
|
|
+const orderQty = shallowRef(qtyStepList.value[0]) // 默认数量
|
|
|
+
|
|
|
+// 计算市价
|
|
|
+const marketPrice = computed(() => {
|
|
|
+ const { ask = 0, bid = 0 } = quote.value ?? {}
|
|
|
+ return formData.BuyOrSell === BuyOrSell.Buy ? ask : bid
|
|
|
+})
|
|
|
+
|
|
|
+// Banner图
|
|
|
+const topBanners = computed(() => {
|
|
|
+ const { bannerurls } = futuresStore.getGoods(goodsCode) ?? {}
|
|
|
+ return bannerurls?.split(',') ?? []
|
|
|
+})
|
|
|
+
|
|
|
+const pictureurl = computed(() => {
|
|
|
+ return goods?.pictureurl ?? ''
|
|
|
+})
|
|
|
+
|
|
|
+// 数量切换
|
|
|
+const onQtyRadioChange = (value: number) => {
|
|
|
+ orderQty.value = value
|
|
|
+}
|
|
|
+
|
|
|
+const components = [
|
|
|
+ {
|
|
|
+ name: 'images',
|
|
|
+ title: t('operation.details'),
|
|
|
+ component: defineAsyncComponent(() => import('@mobile/components/modules/images/Index.vue')),
|
|
|
+ show: pictureurl.value != ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'chart',
|
|
|
+ title: t('quote.title'),
|
|
|
+ component: defineAsyncComponent(() => import('@mobile/views/pricing/trade/components/detail/Index.vue')),
|
|
|
+ show: system_1012 != '0'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+// 委托下单
|
|
|
+const onSubmit = () => {
|
|
|
+ const { goodsid, marketid } = quote.value ?? {}
|
|
|
+ formData.BuyOrSell = BuyOrSell.Buy
|
|
|
+ formData.BuildType = BuildType.Open
|
|
|
+ formData.PriceMode = PriceMode.Market
|
|
|
+ formData.MarketMaxSub = 100.0
|
|
|
+ formData.GoodsID = goodsid
|
|
|
+ formData.MarketID = marketid
|
|
|
+ formData.OrderQty = orderQty.value
|
|
|
+ // 市价
|
|
|
+ if (formData.PriceMode === PriceMode.Market) { formData.OrderPrice = marketPrice.value }
|
|
|
+
|
|
|
+ fullloading((hideLoading) => {
|
|
|
+ formSubmit().then(() => {
|
|
|
+ hideLoading()
|
|
|
+ dialog({ message: t('common.submitsuccess'), confirmButtonText: t('operation.confirm') }).then(() => {
|
|
|
+ // 成交通知
|
|
|
+ eventBus.$emit('OrderDealedNtf')
|
|
|
+ // 返回上层试图
|
|
|
+ routerBack()
|
|
|
+ })
|
|
|
+ }).catch((err) => {
|
|
|
+ hideLoading(err, 'fail')
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // 订阅商品行情
|
|
|
+ subscribe.start(quote.value?.goodscode ?? '')
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ subscribe.stop()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|