xxxx

src/packages/digital/views/contract/goods/detail/index.vue

@@ -28,10 +28,10 @@
         </Row>
         <Row class="g-layout-block g-layout-block--inset" gutter="10">
             <Col span="12">
-            <Button type="success" size="small" block>开多</Button>
+            <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'default'" size="small" block @click="buyOrSell(BuyOrSell.Buy)">开多</Button>
             </Col>
             <Col span="12">
-            <Button type="default" size="small" block>开空</Button>
+            <Button :type="formData.BuyOrSell === BuyOrSell.Sell ? 'danger' : 'default'" size="small" block @click="buyOrSell(BuyOrSell.Sell)">开空</Button>
             </Col>
         </Row>
         <Form ref="formRef" class="g-form__container">
@@ -41,18 +41,19 @@
                         <app-select v-model="formData.PriceMode" :options="options" />
                     </template>
                 </Field>
-                <Field name="OrderPrice" :rules="formRules.OrderPrice" label="价格">
+                <Field v-if="formData.PriceMode === EPriceMode.PRICEMODE_LIMIT" name="OrderPrice" :rules="formRules.OrderPrice" label="价格">
                     <template #input>
                         <app-stepper v-model="formData.OrderPrice" min="0.0" :decimal-length="quote?.decimalplace"
                             :step="quote?.decimalvalue" :auto-fixed="false" />
                     </template>
                 </Field>
+                <Cell v-else vlaue="最优市价" />
                 <Field name="OrderQty" :rules="formRules.OrderQty" label="数量">
                     <template #input>
                         <app-stepper v-model="formData.OrderQty" min="0.0" :auto-fixed="false" integer />
                     </template>
                 </Field>
-                <Field label="开仓价值"></Field>
+                <Field label="开仓价值" readonly v-model="openAmount"></Field>
             </CellGroup>
             <CellGroup>
                 <Cell title="可用余额" :value="taAccount?.balance" />
@@ -62,7 +63,7 @@
         </Form>
         <Row class="g-layout-block g-layout-block--inset">
             <Col span="24">
-            <Button type="success" block @click="onSubmit">开多</Button>
+            <Button :type="formData.BuyOrSell === BuyOrSell.Buy ? 'success' : 'danger' " block @click="onSubmit">{{ formData.BuyOrSell === BuyOrSell.Buy ? '开多' : '开空' }}{{ goods.goodscode }}</Button>
             </Col>
         </Row>
         <Tabs v-model:active="tabIndex">
@@ -129,6 +130,23 @@ const routerToChart = () => {
     })
 }
 
+// 开仓价值
+const openAmount = computed(() => {
+    const { agreeunit = 0.0 } = goods.value ?? {}
+    const orderQty = formData.OrderQty ?? 0.0
+    if (formData.PriceMode === EPriceMode.PRICEMODE_MARKET) {
+        const price = (formData.BuyOrSell === BuyOrSell.Buy ? quote.value?.ask : quote.value?.bid) ?? 0.0
+        return price*orderQty*agreeunit
+    } else {
+        const price = formData.OrderPrice ?? 0.0
+        return price*orderQty*agreeunit
+    }
+})
+
+const buyOrSell = ( item: BuyOrSell) => {
+    formData.BuyOrSell = item
+}
+
 // 表单验证规则
 const formRules: { [key: string]: FieldRule[] } = {
     OrderPrice: [{
@@ -186,6 +204,7 @@ onMounted(() => {
     if (quote.value) {
         formData.BuyOrSell = BuyOrSell.Buy
         formData.PriceMode = EPriceMode.PRICEMODE_MARKET
+        formData.OrderPrice = formData.BuyOrSell === BuyOrSell.Buy ? quote.value.ask : quote.value.bid
     }
 })
 </script>