|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <app-view class="contract-goods-detail g-layout g-form">
|
|
|
|
|
|
|
+ <app-view class="contract-goods-detail g-layout g-form" v-model:show="showModal">
|
|
|
<template #header>
|
|
<template #header>
|
|
|
<app-navbar title="交易">
|
|
<app-navbar title="交易">
|
|
|
<template #footer>
|
|
<template #footer>
|
|
@@ -10,7 +10,7 @@
|
|
|
<template #label>
|
|
<template #label>
|
|
|
<span>{{ quote?.presettle }}</span>
|
|
<span>{{ quote?.presettle }}</span>
|
|
|
<span>{{ parsePercent(quote?.change) }}</span>
|
|
<span>{{ parsePercent(quote?.change) }}</span>
|
|
|
- <span>{{ getGoodsCurrencyName(goods?.currencyid) }}</span>
|
|
|
|
|
|
|
+ <span>{{ enumName }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
<template #right-icon>
|
|
<template #right-icon>
|
|
|
<span @click="routerToChart">图表</span>
|
|
<span @click="routerToChart">图表</span>
|
|
@@ -35,36 +35,36 @@
|
|
|
<Button :type="formData.BuyOrSell === BuyOrSell.Sell ? 'danger' : 'default'" size="small" block @click="buyOrSell(BuyOrSell.Sell)">开空</Button>
|
|
<Button :type="formData.BuyOrSell === BuyOrSell.Sell ? 'danger' : 'default'" size="small" block @click="buyOrSell(BuyOrSell.Sell)">开空</Button>
|
|
|
</Col>
|
|
</Col>
|
|
|
</Row>
|
|
</Row>
|
|
|
- <Form ref="formRef" class="g-form__container">
|
|
|
|
|
|
|
+ <Form ref="formRef" class="g-form__container" @submit="onSubmit" >
|
|
|
<CellGroup inset>
|
|
<CellGroup inset>
|
|
|
<Field label="方式" is-link>
|
|
<Field label="方式" is-link>
|
|
|
<template #input>
|
|
<template #input>
|
|
|
<app-select v-model="formData.PriceMode" :options="options" />
|
|
<app-select v-model="formData.PriceMode" :options="options" />
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
- <Field v-if="formData.PriceMode === EPriceMode.PRICEMODE_LIMIT" name="OrderPrice" :rules="formRules.OrderPrice" label="价格">
|
|
|
|
|
|
|
+ <Field v-if="formData.PriceMode === EPriceMode.PRICEMODE_LIMIT" name="OrderPrice" :rules="formRules.OrderPrice" :label="'价格'+enumName">
|
|
|
<template #input>
|
|
<template #input>
|
|
|
- <app-stepper v-model="formData.OrderPrice" min="0.0" :decimal-length="quote?.decimalplace"
|
|
|
|
|
|
|
+ <Stepper v-model="formData.OrderPrice" min="0.0" :decimal-length="quote?.decimalplace"
|
|
|
:step="quote?.decimalvalue" :auto-fixed="false" />
|
|
:step="quote?.decimalvalue" :auto-fixed="false" />
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
<Cell v-else value="最优市价" />
|
|
<Cell v-else value="最优市价" />
|
|
|
<Field name="OrderQty" :rules="formRules.OrderQty" label="数量">
|
|
<Field name="OrderQty" :rules="formRules.OrderQty" label="数量">
|
|
|
<template #input>
|
|
<template #input>
|
|
|
- <app-stepper v-model="formData.OrderQty" min="0.0" :auto-fixed="false" integer />
|
|
|
|
|
|
|
+ <Stepper v-model="formData.OrderQty" min="0.0" :auto-fixed="false" integer theme="round" />
|
|
|
</template>
|
|
</template>
|
|
|
</Field>
|
|
</Field>
|
|
|
- <Cell title="开仓价值" :value="formatDecimal(openAmount)" />
|
|
|
|
|
|
|
+ <Cell title="开仓价值" :value="formatDecimal(openAmount)+enumName" />
|
|
|
</CellGroup>
|
|
</CellGroup>
|
|
|
<CellGroup>
|
|
<CellGroup>
|
|
|
<Cell title="可用余额" :value="calculations.availableBalance" />
|
|
<Cell title="可用余额" :value="calculations.availableBalance" />
|
|
|
<Cell title="可开数量" :value="calculations.sellQty" />
|
|
<Cell title="可开数量" :value="calculations.sellQty" />
|
|
|
- <Cell title="预估手续费" :value="serivcefee" />
|
|
|
|
|
|
|
+ <Cell title="预估手续费" :value="formatDecimal(serivcefee)" />
|
|
|
</CellGroup>
|
|
</CellGroup>
|
|
|
</Form>
|
|
</Form>
|
|
|
<Row class="g-layout-block g-layout-block--inset">
|
|
<Row class="g-layout-block g-layout-block--inset">
|
|
|
<Col span="24">
|
|
<Col span="24">
|
|
|
- <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'danger' " block @click="onSubmit">{{ formData.BuyOrSell === BuyOrSell.Buy ? '开多' : '开空' }}{{ goods?.goodscode }}</Button>
|
|
|
|
|
|
|
+ <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'danger' " block @click="formRef?.submit">{{ formData.BuyOrSell === BuyOrSell.Buy ? '开多' : '开空' }}{{ goods?.goodscode }}</Button>
|
|
|
</Col>
|
|
</Col>
|
|
|
</Row>
|
|
</Row>
|
|
|
<Tabs v-model:active="tabIndex">
|
|
<Tabs v-model:active="tabIndex">
|
|
@@ -83,27 +83,31 @@
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import { shallowRef, computed, onMounted } from 'vue'
|
|
import { shallowRef, computed, onMounted } from 'vue'
|
|
|
-import { Form, Button, CellGroup, Field, Cell, Tab, Tabs, FieldRule, Col, Row } from 'vant'
|
|
|
|
|
|
|
+import { Form, FormInstance, Button, CellGroup, Field, Cell, Tab, Tabs, FieldRule, Col, Row } from 'vant'
|
|
|
import { EPriceMode, EValidType, EOrderOperateType, EBuildType } from '@/constants/client'
|
|
import { EPriceMode, EValidType, EOrderOperateType, EBuildType } from '@/constants/client'
|
|
|
import { formatDecimal, parsePercent } from '@/filters'
|
|
import { formatDecimal, parsePercent } from '@/filters'
|
|
|
import { useNavigation } from '@mobile/router/navigation'
|
|
import { useNavigation } from '@mobile/router/navigation'
|
|
|
-import { useFuturesStore, useSBYJOrderStore, useUserStore } from '@/stores'
|
|
|
|
|
|
|
+import { useFuturesStore, useSBYJOrderStore, useUserStore, useAccountStore } from '@/stores'
|
|
|
import { fullloading, dialog } from '@/utils/vant'
|
|
import { fullloading, dialog } from '@/utils/vant'
|
|
|
import { useOrder } from '@/business/trade'
|
|
import { useOrder } from '@/business/trade'
|
|
|
-import { useSpotAccountStore } from '../../../wallet/components/spot/composables'
|
|
|
|
|
-import AppStepper from '@mobile/components/base/stepper/index.vue'
|
|
|
|
|
|
|
+import { BuyOrSell, getGoodsCurrencyItemName } from '@/constants/order'
|
|
|
import AppSelect from '@mobile/components/base/select/index.vue'
|
|
import AppSelect from '@mobile/components/base/select/index.vue'
|
|
|
import ContractPosition from '../../components/position/index.vue'
|
|
import ContractPosition from '../../components/position/index.vue'
|
|
|
import ContractOrder from '../../components/order/index.vue'
|
|
import ContractOrder from '../../components/order/index.vue'
|
|
|
import ContractAccount from '../../components/account/index.vue'
|
|
import ContractAccount from '../../components/account/index.vue'
|
|
|
-import { BuyOrSell, getGoodsCurrencyName } from '@/constants/order'
|
|
|
|
|
|
|
+import Stepper from '@mobile/components/base/stepper/index.vue'
|
|
|
|
|
|
|
|
const { router, getQueryStringToNumber } = useNavigation()
|
|
const { router, getQueryStringToNumber } = useNavigation()
|
|
|
const goodsId = getQueryStringToNumber('id')
|
|
const goodsId = getQueryStringToNumber('id')
|
|
|
const futuresStore = useFuturesStore()
|
|
const futuresStore = useFuturesStore()
|
|
|
const tabIndex = shallowRef(0)
|
|
const tabIndex = shallowRef(0)
|
|
|
|
|
|
|
|
|
|
+const formRef = shallowRef<FormInstance>()
|
|
|
|
|
+const showModal = shallowRef(true)
|
|
|
|
|
+
|
|
|
const userStore = useUserStore()
|
|
const userStore = useUserStore()
|
|
|
|
|
+const taAccountStore = useAccountStore()
|
|
|
|
|
+
|
|
|
const { formData, formSubmit } = useOrder()
|
|
const { formData, formSubmit } = useOrder()
|
|
|
const { getSBYJMyOrders } = useSBYJOrderStore()
|
|
const { getSBYJMyOrders } = useSBYJOrderStore()
|
|
|
const quote = computed(() => futuresStore.getQuoteInfo({ goodsid: goodsId }))
|
|
const quote = computed(() => futuresStore.getQuoteInfo({ goodsid: goodsId }))
|
|
@@ -117,9 +121,13 @@ const options = computed(() => {
|
|
|
}]
|
|
}]
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-const spotAccountStore = useSpotAccountStore()
|
|
|
|
|
-const baseAccount = computed(() => spotAccountStore.getAccountItem({ currencyid: quote.value?.goodscurrencyid })) // 基础货币账户
|
|
|
|
|
-const quoteAccount = computed(() => spotAccountStore.getAccountItem({ currencyid: quote.value?.currencyid })) // 计价货币账户
|
|
|
|
|
|
|
+const enumName = computed(() => {
|
|
|
|
|
+ return getGoodsCurrencyItemName(quote.value?.currencyid ?? 0)
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// const spotAccountStore = useSpotAccountStore()
|
|
|
|
|
+// const baseAccount = computed(() => spotAccountStore.getAccountItem({ currencyid: quote.value?.goodscurrencyid })) // 基础货币账户
|
|
|
|
|
+// const quoteAccount = computed(() => spotAccountStore.getAccountItem({ currencyid: quote.value?.currencyid })) // 计价货币账户
|
|
|
|
|
|
|
|
// 预估手续费(小数位根据币种小数位格式化):
|
|
// 预估手续费(小数位根据币种小数位格式化):
|
|
|
// 手续费设置(固定) 时:预估手续费 = 数量 * 合约乘数 * 固定值
|
|
// 手续费设置(固定) 时:预估手续费 = 数量 * 合约乘数 * 固定值
|
|
@@ -140,23 +148,26 @@ const serivcefee = computed(() => {
|
|
|
// 保证金设置(固定) 时:可开数量 = 可用余额 / (合约乘数 * 固定值)
|
|
// 保证金设置(固定) 时:可开数量 = 可用余额 / (合约乘数 * 固定值)
|
|
|
// 保证金设置(比率) 时:可开数量 = 可用余额 / (价格 * 合约乘数 * 比率值)
|
|
// 保证金设置(比率) 时:可开数量 = 可用余额 / (价格 * 合约乘数 * 比率值)
|
|
|
const calculations = computed(() => {
|
|
const calculations = computed(() => {
|
|
|
|
|
+
|
|
|
const { last = 0, agreeunit = 0 } = quote.value ?? {}
|
|
const { last = 0, agreeunit = 0 } = quote.value ?? {}
|
|
|
const { OrderPrice = 0, OrderQty = 0 } = formData
|
|
const { OrderPrice = 0, OrderQty = 0 } = formData
|
|
|
|
|
|
|
|
|
|
+ const { balance = 0.0 } = taAccountStore.currentAccount
|
|
|
|
|
+
|
|
|
const price = formData.PriceMode === EPriceMode.PRICEMODE_MARKET ? last : OrderPrice
|
|
const price = formData.PriceMode === EPriceMode.PRICEMODE_MARKET ? last : OrderPrice
|
|
|
|
|
|
|
|
// 预估金额
|
|
// 预估金额
|
|
|
const estimatedAmount = price * OrderQty * agreeunit
|
|
const estimatedAmount = price * OrderQty * agreeunit
|
|
|
|
|
|
|
|
// 可用余额
|
|
// 可用余额
|
|
|
- const availableBalance = spotAccountStore.getAvailableBalance(quoteAccount.value)
|
|
|
|
|
|
|
+ const availableBalance = balance
|
|
|
// 可用数量
|
|
// 可用数量
|
|
|
const availableQty = availableBalance / agreeunit
|
|
const availableQty = availableBalance / agreeunit
|
|
|
// 预估手续费
|
|
// 预估手续费
|
|
|
const buyEstimatedFee = 0
|
|
const buyEstimatedFee = 0
|
|
|
|
|
|
|
|
// 可卖数量
|
|
// 可卖数量
|
|
|
- const sellQty = spotAccountStore.getAvailableBalance(baseAccount.value)
|
|
|
|
|
|
|
+ const sellQty = 0
|
|
|
// 可获金额
|
|
// 可获金额
|
|
|
const availableAmount = price * sellQty * agreeunit
|
|
const availableAmount = price * sellQty * agreeunit
|
|
|
// 预估手续费
|
|
// 预估手续费
|
|
@@ -209,8 +220,15 @@ const formRules: { [key: string]: FieldRule[] } = {
|
|
|
}],
|
|
}],
|
|
|
OrderQty: [{
|
|
OrderQty: [{
|
|
|
message: '请输入数量',
|
|
message: '请输入数量',
|
|
|
- validator: () => {
|
|
|
|
|
- return !!formData.OrderQty
|
|
|
|
|
|
|
+ validator: (val) => {
|
|
|
|
|
+ if (val) {
|
|
|
|
|
+ console.log(val)
|
|
|
|
|
+ if (val > 0) {
|
|
|
|
|
+ return true
|
|
|
|
|
+ }
|
|
|
|
|
+ return '数量必须大于0'
|
|
|
|
|
+ }
|
|
|
|
|
+ return false
|
|
|
}
|
|
}
|
|
|
}],
|
|
}],
|
|
|
}
|
|
}
|