|
|
@@ -3,100 +3,97 @@
|
|
|
<template #header>
|
|
|
<app-navbar :title="quote?.goodsname" />
|
|
|
</template>
|
|
|
- <table style="width: 100%;">
|
|
|
- <tr>
|
|
|
- <td style="text-align: center;">回购价</td>
|
|
|
- <td style="text-align: center;">销售价</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td :class="quote?.bidColor" style="text-align: center;">{{ quote?.bid }}</td>
|
|
|
- <td :class="quote?.askColor" style="text-align: center;">{{ quote?.ask }}</td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <Form class="pricing-detail__form" ref="formRef" style="padding: 0.2rem; background-color: white;"
|
|
|
- @submit="onSubmit">
|
|
|
- <Field name="OrderQty" :rules="formRules.OrderQty">
|
|
|
- <template #input>
|
|
|
- <div class="goods-listing__stepper">
|
|
|
- <div>
|
|
|
- <span>
|
|
|
- <Stepper v-model="orderQty" theme="round" button-size="22" :min="0" :step="qtyStep"
|
|
|
- integer />
|
|
|
- </span>
|
|
|
- <span>{{ getGoodsUnitName(quote?.goodunitid) }}</span>
|
|
|
+ <div class="market-detail__form">
|
|
|
+ <div class="form-price">
|
|
|
+ <dl>
|
|
|
+ <dt>回购价</dt>
|
|
|
+ <dd :class="quote?.bidColor">{{ quote?.bid }}</dd>
|
|
|
+ </dl>
|
|
|
+ <dl>
|
|
|
+ <dt>销售价</dt>
|
|
|
+ <dd :class="quote?.askColor">{{ quote?.ask }}</dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ <Form ref="formRef" @submit="onSubmit">
|
|
|
+ <Field name="OrderQty" :rules="formRules.OrderQty">
|
|
|
+ <template #input>
|
|
|
+ <div class="form-qty">
|
|
|
+ <div class="form-qty__stepper">
|
|
|
+ <Stepper v-model="orderQty" :min="0" :step="qtyStep" integer />
|
|
|
+ <span>{{ getGoodsUnitName(quote?.goodunitid) }}</span>
|
|
|
+ </div>
|
|
|
+ <RadioGroup v-model="qtyStep" direction="horizontal" @change="onRadioChange">
|
|
|
+ <Radio v-for="(value, index) in qtyStepList" :key="index" :name="value">
|
|
|
+ {{ value + getGoodsUnitName(quote?.goodunitid) }}
|
|
|
+ </Radio>
|
|
|
+ </RadioGroup>
|
|
|
</div>
|
|
|
- <RadioGroup v-model="qtyStep" direction="horizontal" @change="onRadioChange">
|
|
|
- <Radio v-for="(value, index) in qtyStepList" :key="index" :name="value">{{ value }} {{
|
|
|
- getGoodsUnitName(quote?.goodunitid) }}
|
|
|
- </Radio>
|
|
|
- </RadioGroup>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </Field>
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <span><Button @click="commit(BuyOrSell.Sell)">我要卖料</Button></span>
|
|
|
- <span><Button @click="commit(BuyOrSell.Buy)">我要买料</Button></span>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </Field>
|
|
|
+ </Form>
|
|
|
+ <div class="form-submit">
|
|
|
+ <Button type="primary" @click="commit(BuyOrSell.Sell)" block square>我要卖料</Button>
|
|
|
+ <Button type="danger" @click="commit(BuyOrSell.Buy)" block square>我要买料</Button>
|
|
|
</div>
|
|
|
- </Form>
|
|
|
-
|
|
|
- <div>订单明细</div>
|
|
|
- <div class="g-order-list">
|
|
|
- <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
|
|
|
- <div class="g-order-list__titlebar">
|
|
|
- <div class="left">
|
|
|
- <h5> {{ item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? '买料订单:' : '卖料订单:' }}{{ item.tHDetailEx.tradeID
|
|
|
- }} </h5>
|
|
|
+ </div>
|
|
|
+ <div class="market-detail__list">
|
|
|
+ <div class="g-order-list">
|
|
|
+ <div class="g-order-list__box" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <div class="g-order-list__titlebar">
|
|
|
+ <div class="left">
|
|
|
+ <h5> {{ item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? '买料订单:' : '卖料订单:' }}{{
|
|
|
+ item.tHDetailEx.tradeID
|
|
|
+ }} </h5>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span :class="item.tHDetailEx.depositRate <= 0.4 ? 'g-price-up' : ''">{{
|
|
|
+ parsePercent(item.tHDetailEx.depositRate) }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <span :class="item.tHDetailEx.depositRate <= 0.4 ? 'g-price-up' : ''">{{
|
|
|
- parsePercent(item.tHDetailEx.depositRate) }}</span>
|
|
|
+ <div class="g-order-list__content">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>订单重量：</span>
|
|
|
+ <span>{{ item.tHDetailEx.holderQty * item.agreeUnit }}{{ getGoodsUnitName(item.goodsUnitID)
|
|
|
+ }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>可用重量：</span>
|
|
|
+ <span>{{ (item.tHDetailEx.holderQty - item.tHDetailEx.freezeQty) * item.agreeUnit }}{{
|
|
|
+ getGoodsUnitName(item.goodsUnitID) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>订单金额：</span>
|
|
|
+ <span>{{ item.tHDetailEx.holderAmount }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>订单价格：</span>
|
|
|
+ <span>{{ formatDecimal(item.tHDetailEx.holderPrice) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>已付定金：</span>
|
|
|
+ <span>{{ item.tHDetailEx.payedDeposit }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>已补定金：</span>
|
|
|
+ <span>{{ handleNumberValue(item.tHDetailEx.restockDeposit) }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>订单天数：</span>
|
|
|
+ <span>{{ item.tHDetailEx.holdDays }}天</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>滞纳金：</span>
|
|
|
+ <span>{{ handleNumberValue(item.tHDetailEx.callAteFee) }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="g-order-list__btnbar">
|
|
|
+ <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
|
|
|
+ <Button size="small" @click="showComponent('supplement', item)" round>补充</Button>
|
|
|
+ <Button size="small" @click="showComponent('delivery', item)" round>交收</Button>
|
|
|
+ <Button size="small" @click="showComponent('closeholder', item)" round>转让</Button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="g-order-list__content">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <span>订单重量：</span>
|
|
|
- <span>{{ item.tHDetailEx.holderQty * item.agreeUnit }}{{ getGoodsUnitName(item.goodsUnitID)
|
|
|
- }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>可用重量：</span>
|
|
|
- <span>{{ (item.tHDetailEx.holderQty - item.tHDetailEx.freezeQty) * item.agreeUnit }}{{
|
|
|
- getGoodsUnitName(item.goodsUnitID) }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>订单金额：</span>
|
|
|
- <span>{{ item.tHDetailEx.holderAmount }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>订单价格：</span>
|
|
|
- <span>{{ formatDecimal(item.tHDetailEx.holderPrice) }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>已付定金：</span>
|
|
|
- <span>{{ item.tHDetailEx.payedDeposit }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>已补定金：</span>
|
|
|
- <span>{{ handleNumberValue(item.tHDetailEx.restockDeposit) }}</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>订单天数：</span>
|
|
|
- <span>{{ item.tHDetailEx.holdDays }}天</span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <span>滞纳金：</span>
|
|
|
- <span>{{ handleNumberValue(item.tHDetailEx.callAteFee) }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="g-order-list__btnbar">
|
|
|
- <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
|
|
|
- <Button size="small" @click="showComponent('supplement', item)" round>补充</Button>
|
|
|
- <Button size="small" @click="showComponent('delivery', item)" round>交收</Button>
|
|
|
- <Button size="small" @click="showComponent('closeholder', item)" round>转让</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -109,22 +106,22 @@
|
|
|
|
|
|
import { useOrder } from '@/business/trade'
|
|
|
import { shallowRef, onMounted, onUnmounted, computed, defineAsyncComponent } from 'vue'
|
|
|
-import { Form, Field, Stepper, Button, FieldRule, FormInstance, Radio, RadioGroup, Checkbox } from 'vant'
|
|
|
+import { Form, Field, Stepper, Button, FieldRule, FormInstance, Radio, RadioGroup } from 'vant'
|
|
|
import { useNavigation } from '@/packages/sbyj/router/navigation'
|
|
|
import { useFuturesStore } from '@/stores'
|
|
|
import { getGoodsUnitName } from '@/constants/unit'
|
|
|
import { querySBYJMyOrders } from '@/services/api/order'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
-import { formatDate, formatDecimal, parsePercent, handleNumberValue } from '@/filters'
|
|
|
+import { formatDecimal, parsePercent, handleNumberValue } from '@/filters'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
|
import { fullloading, dialog } from '@/utils/vant'
|
|
|
import { EPriceMode, EValidType, EOrderOperateType, EBuildType } from '@/constants/client'
|
|
|
import { BuyOrSell } from '@/constants/order'
|
|
|
import quoteSocket from '@/services/websocket/quote'
|
|
|
+import eventBus from '@/services/bus'
|
|
|
|
|
|
const formRef = shallowRef<FormInstance>()
|
|
|
-const { router } = useNavigation()
|
|
|
-const { getQueryString, getQueryStringToNumber } = useNavigation()
|
|
|
+const { getQueryString } = useNavigation()
|
|
|
const { formData, formSubmit } = useOrder()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
const goodscode = getQueryString('goodscode')
|
|
|
@@ -173,7 +170,7 @@ const commit = (buyOrSell: BuyOrSell) => {
|
|
|
const onSubmit = () => {
|
|
|
dialog({
|
|
|
allowHtml: true,
|
|
|
- message: `确认要提交吗？\n`,
|
|
|
+ message: `确认要提交吗？`,
|
|
|
showCancelButton: true,
|
|
|
}).then(() => {
|
|
|
|
|
|
@@ -199,14 +196,6 @@ const onSubmit = () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- subscribe.start(goodscode)
|
|
|
- orderQty.value = agreeunit.value
|
|
|
- qtyStep.value = qtyStepList.value[0]
|
|
|
-})
|
|
|
-
|
|
|
-onUnmounted(() => subscribe.stop())
|
|
|
-
|
|
|
// 表单验证规则
|
|
|
const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
|
|
|
OrderQty: [{
|
|
|
@@ -226,4 +215,21 @@ const showComponent = (componentName: string, row: Model.SBYJMyOrderRsp) => {
|
|
|
openComponent(componentName)
|
|
|
}
|
|
|
|
|
|
-</script>
|
|
|
+// 接收委托单成交通知
|
|
|
+const orderDealedNtf = eventBus.$on('OrderDealedNtf', () => getSBYJMyOrders())
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ subscribe.start(goodscode)
|
|
|
+ orderQty.value = agreeunit.value
|
|
|
+ qtyStep.value = qtyStepList.value[0]
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ subscribe.stop()
|
|
|
+ orderDealedNtf.cancel()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|
