|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<app-view class="market-detail">
|
|
|
<template #header>
|
|
|
- <app-navbar title="点价详情" />
|
|
|
+ <app-navbar :title="quote?.goodsname" />
|
|
|
</template>
|
|
|
<table style="width: 100%;">
|
|
|
<tr>
|
|
|
@@ -9,32 +9,90 @@
|
|
|
<td style="text-align: center;">销售价</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <td style="text-align: center;">449.81</td>
|
|
|
- <td style="text-align: center;">450.00</td>
|
|
|
+ <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">
|
|
|
- <template #input>
|
|
|
- <Stepper v-model="formData.OrderQty" :rules="formRules.OrderQty" theme="round" button-size="22"
|
|
|
- :auto-fixed="false" integer />
|
|
|
- </template>
|
|
|
- </Field>
|
|
|
- </Form>
|
|
|
- <table style="width: 100%;">
|
|
|
- <tr>
|
|
|
- <td style="width: calc(`100% / 4`); text-align: center;"><Button>100g</Button></td>
|
|
|
- <td style="width: calc(`100% / 4`); text-align: center;"><Button>500g</Button></td>
|
|
|
- <td style="width: calc(`100% / 4`); text-align: center;"><Button>1000g</Button></td>
|
|
|
- <td style="width: calc(`100% / 4`); text-align: center;"><Button>5000g</Button></td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <div>
|
|
|
- <span><Button>我要卖料</Button></span>
|
|
|
- <span><Button>我要买料</Button></span>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
</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="right">
|
|
|
+ <span :class="item.tHDetailEx.depositRate >= 0.4 ? 'g-price-up' : ''">{{ parsePercent(item.tHDetailEx.depositRate) }}</span>
|
|
|
+ </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" round>补充</Button>
|
|
|
+ <Button size="small" round>交收</Button>
|
|
|
+ <Button size="small" round>转让</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</app-view>
|
|
|
</template>
|
|
|
|
|
|
@@ -43,26 +101,128 @@
|
|
|
import { useOrder } from '@/business/trade'
|
|
|
import { shallowRef, onMounted, onUnmounted, computed } from 'vue'
|
|
|
import { Form, Field, Stepper, Button, FieldRule, FormInstance, Radio, RadioGroup, Checkbox } 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 { 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'
|
|
|
|
|
|
+const formRef = shallowRef<FormInstance>()
|
|
|
+const { router } = useNavigation()
|
|
|
+const { getQueryString, getQueryStringToNumber } = useNavigation()
|
|
|
const { formData, formSubmit } = useOrder()
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+const goodscode = getQueryString('goodscode')
|
|
|
+const quote = futuresStore.getQuoteInfo(goodscode)
|
|
|
+const qtyStep = shallowRef(1) // 数量步长
|
|
|
+const dataList = shallowRef<Model.SBYJMyOrderRsp[]>([])
|
|
|
+const error = shallowRef(false)
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
+const selectedRow = shallowRef<Model.SBYJMyOrderRsp>()
|
|
|
+const orderQty = shallowRef(1) // 数量
|
|
|
+
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
|
|
|
+ // pullRefreshRef.value?.refresh()
|
|
|
+})
|
|
|
+// 合约乘数
|
|
|
+const agreeunit = computed(() => quote.value?.agreeunit ?? 0)
|
|
|
+// 数量步长列表
|
|
|
+const qtyStepList = computed(() => {
|
|
|
+ return [
|
|
|
+ agreeunit.value * 1,
|
|
|
+ agreeunit.value * 5,
|
|
|
+ agreeunit.value * 10,
|
|
|
+ agreeunit.value * 50,
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+const { loading, pageIndex, pageCount, run } = useRequest(querySBYJMyOrders, {
|
|
|
+ params: {
|
|
|
+ goodsId: quote?.value?.goodsid
|
|
|
+ },
|
|
|
+ onSuccess: (res) => {
|
|
|
+ if (pageIndex.value === 1) {
|
|
|
+ dataList.value = []
|
|
|
+ }
|
|
|
+ dataList.value.push(...res.data)
|
|
|
+ },
|
|
|
+ onError: () => {
|
|
|
+ error.value = true
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const commit = (buyOrSell: BuyOrSell) => {
|
|
|
+ formData.BuyOrSell = buyOrSell
|
|
|
+ formData.OrderPrice = buyOrSell === BuyOrSell.Buy ? quote.value?.ask : quote.value?.bid
|
|
|
+ formRef.value?.submit()
|
|
|
+}
|
|
|
+
|
|
|
+// 下单
|
|
|
+const onSubmit = () => {
|
|
|
+ dialog({
|
|
|
+ allowHtml: true,
|
|
|
+ message: `确认要提交吗?\n`,
|
|
|
+ showCancelButton: true,
|
|
|
+ }).then(() => {
|
|
|
+
|
|
|
+ const { marketid = 0, goodsid = 0 } = quote.value ?? {}
|
|
|
+ /// 获取对应的市场ID
|
|
|
+ formData.MarketID = marketid
|
|
|
+ formData.PriceMode = EPriceMode.PRICEMODE_MARKET
|
|
|
+ formData.GoodsID = goodsid
|
|
|
+ formData.TimevalidType = EValidType.VALIDTYPE_DR
|
|
|
+ formData.OperateType = EOrderOperateType.ORDEROPERATETYPE_NORMAL
|
|
|
+ formData.BuildType = EBuildType.BUILDTYPE_OPEN
|
|
|
+ formData.OrderQty = orderQty.value / agreeunit.value // 数量÷合约乘数
|
|
|
+
|
|
|
+ fullloading((hideLoading) => {
|
|
|
+ formSubmit().then(() => {
|
|
|
+ hideLoading()
|
|
|
+ dialog('提交成功。').then(() => closed(true))
|
|
|
+ }).catch((err) => {
|
|
|
+ hideLoading(err, 'fail')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- formData.OrderQty = 100
|
|
|
+ subscribe.start(goodscode)
|
|
|
+ orderQty.value = agreeunit.value
|
|
|
+ qtyStep.value = qtyStepList.value[0]
|
|
|
})
|
|
|
|
|
|
+onUnmounted(() => subscribe.stop())
|
|
|
+
|
|
|
// 表单验证规则
|
|
|
const formRules: { [key in keyof Proto.OrderReq]?: FieldRule[] } = {
|
|
|
OrderQty: [{
|
|
|
message: '请输入数量',
|
|
|
validator: () => {
|
|
|
- return !!formData.OrderQty
|
|
|
+ return !!orderQty.value
|
|
|
}
|
|
|
}],
|
|
|
}
|
|
|
|
|
|
-// 下单
|
|
|
-const onSubmit = () => {
|
|
|
- console.log("onSubmit")
|
|
|
+const onRadioChange = (value: number) => {
|
|
|
+ orderQty.value = value
|
|
|
+}
|
|
|
+
|
|
|
+const showComponent = (componentName: string, row: Model.SBYJMyOrderRsp) => {
|
|
|
+ selectedRow.value = row
|
|
|
+ openComponent(componentName)
|
|
|
+}
|
|
|
+
|
|
|
+// 关闭弹窗
|
|
|
+const closed = (isRefresh = true) => {
|
|
|
+ // refresh.value = isRefresh
|
|
|
+ // showModal.value = false
|
|
|
}
|
|
|
|
|
|
</script>
|