挂牌点价 PC 界面优化

src/packages/pc/components/modules/goods-detail/chart/index.vue

@@ -5,7 +5,7 @@
         </div>
         <el-scrollbar class="block-right">
             <Price v-bind="{ goodsCode }" />
-            <Forex v-bind="{ goodsCode }" />
+            <Forex v-if="quote?.trademode != 10" v-bind="{ goodsCode }" />
             <Tik v-bind="{ goodsCode }" />
         </el-scrollbar>
     </div>
@@ -16,14 +16,19 @@ import Price from '@pc/components/modules/quote/price/index.vue'
 import Chart from '@pc/components/modules/hqchart/index.vue'
 import Forex from '@pc/components/modules/quote/forex/index.vue'
 import Tik from '@pc/components/modules/quote/tik/index.vue'
+import { useFuturesStore } from '@/stores'
 
-defineProps({
+const props = defineProps({
     goodsCode: {
         type: String,
         required: true
     },
     makretId: Number
 })
+
+const futuresStore = useFuturesStore()
+const quote = futuresStore.getGoodsQuote(props.goodsCode)
+
 </script>
 
 <style lang="less">

src/packages/pc/components/modules/goods-detail/order/index.vue

@@ -33,7 +33,7 @@ import { BuyOrSell } from '@/constants/order'
 import { useComponent } from '@/hooks/component'
 import { useComposeTable } from '@pc/components/base/table'
 import { queryWrTradeOrderDetail } from '@/services/api/transfer'
-import { useLoginStore, useFuturesStore } from '@/stores'
+import { useFuturesStore } from '@/stores'
 import AppTable from '@pc/components/base/table/index.vue'
 import service from '@/services'
 
@@ -48,7 +48,7 @@ const componentMap = new Map<string, unknown>([
     ['delisting', defineAsyncComponent(() => import('./delisting/index.vue'))], // 摘牌
 ])
 
-const loginStore = useLoginStore()
+// const loginStore = useLoginStore()
 const futuresStore = useFuturesStore()
 const quote = futuresStore.getGoodsQuote(props.goodsId)
 const oem = service.getConfig('oem')
@@ -88,10 +88,10 @@ const sellColumns = shallowRef<Model.TableColumn[]>(
                        { field: 'orderqty', label: '卖量' }]
 )
 
-const showComponent = (componentName: string, row: Model.WrTradeOrderDetailRsp) => {
-    selectedRow.value = row
-    openComponent(componentName)
-}
+// const showComponent = (componentName: string, row: Model.WrTradeOrderDetailRsp) => {
+//     selectedRow.value = row
+//     openComponent(componentName)
+// }
 
 // 监听行情变动
 if (quote.value) {

src/packages/pc/components/modules/quote/forex/index.css

@@ -0,0 +1,32 @@
+.app-quote-forex {
+  display: flex;
+  flex-direction: column;
+  color: #ACB8C0;
+}
+.app-quote-forex ul {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+.app-quote-forex ul + ul {
+  border-top: 1px solid #333;
+}
+.app-quote-forex ul li {
+  display: flex;
+  font-size: 12px;
+  text-align: center;
+  padding: 3px 5px;
+}
+.app-quote-forex ul li.is-active {
+  background-color: #262d33;
+}
+.app-quote-forex ul li span {
+  flex: 1;
+}
+.app-quote-forex ul li span:first-child {
+  text-align: left;
+}
+.app-quote-forex ul li span:last-child {
+  text-align: right;
+}

src/packages/pc/components/modules/quote/forex/index.vue

@@ -2,20 +2,30 @@
     <div class="app-quote-forex"  v-if="quote?.marketid != 99201">
         <ul class="top">
             <template v-for="(item, index) in sellList" :key="index">
-                <li :class="active === 'sell_' + index ? 'is-active' : ''" @click="onPriceClick(BuyOrSell.Sell, index)">
+                <li v-if="quote?.trademode != 10" 
+                    :class="active === 'sell_' + index ? 'is-active' : ''" @click="onPriceClick(BuyOrSell.Sell, index)" >
                     <span>{{ item.label }}</span>
                     <span :class="item.color">{{ handleNumberValue(item.price.toFixed(quote?.decimalplace)) }}</span>
                     <span>{{ handleNumberValue(item.qty) }}</span>
                 </li>
+                <li v-else :class="active === 'sell_' + index ? 'is-active' : ''" @click="onPriceClick(BuyOrSell.Sell, index)">
+                    <span style="font-size: 20px;">{{ item.label }}</span>
+                    <span style="font-size: 20px;" :class="item.color">{{ handleNumberValue(item.price.toFixed(quote?.decimalplace)) }}</span>
+                </li>
             </template>
         </ul>
         <ul class="bottom" v-if="quote">
             <template v-for="(item, index) in buyList" :key="index">
-                <li :class="active === 'buy_' + index ? 'is-active' : ''" @click="onPriceClick(BuyOrSell.Buy, index)">
+                <li v-if="quote?.trademode != 10" 
+                    :class="active === 'buy_' + index ? 'is-active' : ''" @click="onPriceClick(BuyOrSell.Buy, index)">
                     <span>{{ item.label }}</span>
                     <span :class="item.color">{{ handleNumberValue(item.price.toFixed(quote?.decimalplace)) }}</span>
                     <span>{{ handleNumberValue(item.qty) }}</span>
                 </li>
+                <li v-else :class="active === 'buy_' + index ? 'is-active' : ''" @click="onPriceClick(BuyOrSell.Buy, index)">
+                    <span style="font-size: 20px;">{{ item.label }}</span>
+                    <span style="font-size: 20px;" :class="item.color">{{ handleNumberValue(item.price.toFixed(quote?.decimalplace)) }}</span>
+                </li>
             </template>
         </ul>
     </div>
@@ -48,7 +58,7 @@ const buyList = computed(() => {
         if (item) {
             const result = [
                 {
-                    label: '买一',
+                    label: '买价',
                     price: item.ask,
                     qty: item.askvolume,
                     color: item.askColor,
@@ -103,7 +113,7 @@ const sellList = computed(() => {
         if (item) {
             const result = [
                 {
-                    label: '卖一',
+                    label: '卖价',
                     price: item.bid,
                     qty: item.bidvolume,
                     color: item.bidColor,

src/packages/pc/components/modules/quote/price/index.vue

@@ -6,9 +6,14 @@
                 <span>{{ quote.goodsname }}</span>
             </div>
             <div class="block-bottom">
-                <div class="block-bottom-left">
+                <div class="block-bottom-left" v-if="quote.trademode != 10">
                     <span :class="quote.lastColor">{{ handleNumberValue(quote.last.toFixed(quote.decimalplace)) }}</span>
                 </div>
+                <div class="block-bottom-left" v-els>
+                    <span :class="quote.bidColor">{{ handleNumberValue(quote.bid.toFixed(quote.decimalplace)) }}</span>
+                    <span>{{ ' / ' }}</span>
+                    <span :class="quote.askColor">{{ handleNumberValue(quote.ask.toFixed(quote.decimalplace)) }}</span>
+                </div>
                 <div class="block-bottom-right">
                     <span :class="quote.lastColor">{{ quote.rise.toFixed(quote.decimalplace) }}</span>
                     <span :class="quote.lastColor">{{ parsePercent(quote.change) }}</span>

src/packages/pc/views/market/trade/pricing/list/listing/index.vue

@@ -27,14 +27,6 @@
                         </el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item prop="MarketMaxSub" label="点差" v-if="formData.PriceMode === PriceMode.Market">
-                    <el-input-number ref="priceRef" placeholder="请输入" :min="0" :max="9999999999" v-model="formData.MarketMaxSub" 
-                    @keyup.enter="submitFocus" integer />
-                </el-form-item>
-                <el-form-item prop="OrderPrice" label="价格" v-if="formData.PriceMode === PriceMode.Limit">
-                    <el-input-number ref="priceRef" placeholder="请输入" :max="9999999999" :min="0" v-model="formData.OrderPrice" 
-                     :auto-fixed="false" :decimal-length="decimalplace" :step="decimalvalue" @keyup.enter="submitFocus" />
-                </el-form-item>
                 <el-form-item prop="OrderQty" label="数量">
                     <div class="g-qty-group">
                         <el-input-number ref="qtyRef" placeholder="请输入" :min="0" :max="9999999999" :precision="0" :step="qtyStep || 1"
@@ -53,6 +45,14 @@
                         </template>
                     </div>
                 </el-form-item>
+                <el-form-item prop="MarketMaxSub" label="点差" v-if="formData.PriceMode === PriceMode.Market">
+                    <el-input-number ref="priceRef" placeholder="请输入" :min="0" :max="9999999999" v-model="formData.MarketMaxSub" 
+                    @keyup.enter="submitFocus" integer />
+                </el-form-item>
+                <el-form-item prop="OrderPrice" label="价格" v-if="formData.PriceMode === PriceMode.Limit">
+                    <el-input-number ref="priceRef" placeholder="请输入" :max="9999999999" :min="0" v-model="formData.OrderPrice" 
+                     :auto-fixed="false" :decimal-length="decimalplace" :step="decimalvalue" @keyup.enter="submitFocus" />
+                </el-form-item>
                 <el-form-item class="footer-btnbar">
                     <template v-if="formData.BuyOrSell === BuyOrSell.Buy">
                         <el-button ref="submitRef" type="danger" :disabled="!selectedGoodsId || !formData.OrderQty"

src/types/model/order.d.ts

@@ -1003,7 +1003,8 @@ declare namespace Model {
         tradeproperty: number
         /// 占用保证金[商品币种]
         usedmargin: number
-        tacurrencyid: number; // 报价货币ID - taaccount
+        /// 报价货币ID - taaccount
+        tacurrencyid: number
     }
 
     /* 查询我的订单/历史成交 请求 */