update

src/packages/pc/assets/themes/default/default.less

@@ -33,7 +33,7 @@
 
     --el-color-primary: #26487c;
     --el-color-primary-light-3: #29538c;
-    --el-color-primary-light-5: #70abd8;
+    --el-color-primary-light-5: #98acbb;
     --el-color-primary-light-7: #c6e2ff;
     --el-color-primary-light-8: #d9ecff;
     --el-color-primary-light-9: #ecf5ff;

src/packages/pc/components/layouts/footer/index.less

@@ -1,6 +1,6 @@
 .app-footer {
     display: flex;
-    height: 300px;
+    height: 330px;
     color: #fff;
     background-color: #0e0e0f;
     border-top: 1px solid #363f45;

src/packages/pc/components/modules/listing/index.less

@@ -17,7 +17,7 @@
     }
 
     &__form {
-        width: 240px;
+        width: 260px;
         padding: 10px;
         border-left: 1px solid #363f45;
 
@@ -30,5 +30,10 @@
             display: flex;
             justify-content: center;
         }
+
+        .el-radio {
+            --el-radio-text-color: #7a8a94;
+            --el-color-primary: #3a87f7;
+        }
     }
 }

src/packages/pc/components/modules/listing/index.vue

@@ -5,8 +5,7 @@
         </div>
         <div class="app-listing__form">
             <h4 class="header-title">订单挂牌</h4>
-            <el-form ref="formRef" class="el-form--vertical" size="small" label-width="50px" :model="formData"
-                :rules="formRules">
+            <el-form ref="formRef" class="el-form--vertical" label-width="60px" :model="formData" :rules="formRules">
                 <el-form-item prop="GoodsID" label="商品">
                     <el-select placeholder="请选择" v-model="goodsStore.goodsId">
                         <el-option :label="item.goodsname" :value="item.goodsid"
@@ -15,9 +14,9 @@
                 </el-form-item>
                 <el-form-item prop="BuyOrSell" label="方向">
                     <el-radio-group v-model="formData.BuyOrSell">
-                        <el-radio-button v-for="(item, index) in getBuyOrSellList()" :key="index" :label="item.value">
+                        <el-radio v-for="(item, index) in getBuyOrSellList()" :key="index" :label="item.value">
                             {{ item.label }}
-                        </el-radio-button>
+                        </el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item prop="OrderPrice" label="价格">
@@ -39,19 +38,19 @@
             </el-form>
             <div class="footer-btnbar">
                 <template v-if="formData.BuyOrSell === BuyOrSell.Buy">
-                    <el-button type="primary" size="small" :loading="loading" :disabled="!goodsStore.goodsId"
+                    <el-button type="primary" :loading="loading" :disabled="!goodsStore.goodsId"
                         @click="onSubmit(EBuildType.BUILDTYPE_OPEN)">订立买入</el-button>
-                    <el-button type="primary" size="small" :loading="loading"
-                        :disabled="(sellQty === 0) || (orderQty > sellQty)" @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
+                    <el-button type="primary" :loading="loading" :disabled="(sellQty === 0) || (orderQty > sellQty)"
+                        @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
                         <span>转让买入</span>
                         <span v-if="sellQty">(≤{{ sellQty }})</span>
                     </el-button>
                 </template>
                 <template v-if="formData.BuyOrSell === BuyOrSell.Sell">
-                    <el-button type="primary" size="small" :loading="loading" :disabled="!goodsStore.goodsId"
+                    <el-button type="primary" :loading="loading" :disabled="!goodsStore.goodsId"
                         @click="onSubmit(EBuildType.BUILDTYPE_OPEN)">订立卖出</el-button>
-                    <el-button type="primary" size="small" :loading="loading"
-                        :disabled="(buyQty === 0) || (orderQty > buyQty)" @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
+                    <el-button type="primary" :loading="loading" :disabled="(buyQty === 0) || (orderQty > buyQty)"
+                        @click="onSubmit(EBuildType.BUILDTYPE_CLOSE)">
                         <span>转让卖出</span>
                         <span v-if="buyQty">(≤{{ buyQty }})</span>
                     </el-button>

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

@@ -16,7 +16,7 @@
             display: flex;
             font-size: 12px;
             text-align: center;
-            padding: 5px;
+            padding: 3px 5px;
 
             &.is-active {
                 background-color: #262d33;

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

@@ -31,6 +31,12 @@
                     font-size: 18px;
                     text-align: center;
                     margin-right: 20px;
+
+                    span.g-price-up {
+                        &::before {
+                            content: '+';
+                        }
+                    }
                 }
 
                 &-right {

src/packages/pc/views/market/trade/goods/detail/components/chart/index.less

@@ -4,6 +4,7 @@
 
     >.block-left {
         flex: 1;
+        overflow: hidden;
     }
 
     >.block-right {
@@ -12,6 +13,7 @@
         width: 240px;
         background-color: #14181B;
         border-left: 1px solid #33393D;
+        overflow: hidden;
 
         .app-quote-tik {
             flex: 1;

src/packages/pc/views/market/trade/goods/detail/components/chart/index.vue

@@ -3,11 +3,11 @@
         <div class="block-left">
             <Chart v-bind="{ goodsCode }" />
         </div>
-        <div class="block-right">
+        <el-scrollbar class="block-right">
             <Price v-bind="{ goodsCode }" />
             <Forex v-bind="{ goodsCode }" />
             <Tik v-bind="{ goodsCode }" />
-        </div>
+        </el-scrollbar>
     </div>
 </template>
 

src/packages/pc/views/market/trade/goods/detail/components/order/index.vue

@@ -68,13 +68,13 @@ const { dataList: sellList, run: getSellList } = useRequest(queryWrTradeOrderDet
 
 const buyColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'username', label: '销售方' },
-    { prop: 'orderqty', label: '卖量' },
-    { prop: 'orderprice', label: '卖价' },
+    { prop: 'orderqty', label: '买量' },
+    { prop: 'orderprice', label: '买价' },
 ])
 
 const sellColumns = shallowRef<Model.TableColumn[]>([
-    { prop: 'orderprice', label: '买价' },
-    { prop: 'orderqty', label: '买量' },
+    { prop: 'orderprice', label: '卖价' },
+    { prop: 'orderqty', label: '卖量' },
     { prop: 'username', label: '购买方' },
 ])
 

src/packages/pc/views/market/trade/spot/order/index.vue

@@ -130,13 +130,13 @@ const { dataList: sellList, run: getSellList } = useRequest(queryOrderQuoteDetai
 
 const buyColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'username', label: '销售方' },
-    { prop: 'orderqty', label: '卖量' },
-    { prop: 'fixedprice', label: '卖价' },
+    { prop: 'orderqty', label: '买量' },
+    { prop: 'fixedprice', label: '买价' },
 ])
 
 const sellColumns = shallowRef<Model.TableColumn[]>([
-    { prop: 'fixedprice', label: '买价' },
-    { prop: 'orderqty', label: '买量' },
+    { prop: 'fixedprice', label: '卖价' },
+    { prop: 'orderqty', label: '卖量' },
     { prop: 'username', label: '购买方' },
 ])
 

src/packages/sbyj/views/home/main/index.less

@@ -2,13 +2,15 @@
 
 .home-main {
     &__banner {
+        position: relative;
+        overflow: hidden;
         padding: .4rem;
         padding-bottom: 0;
 
         &::before {
             content: '';
             width: 140%;
-            height: 3.6rem;
+            height: 3rem;
             position: absolute;
             left: -20%;
             top: 0;

src/packages/sbyj/views/market/detail/index.less

@@ -0,0 +1,110 @@
+.market-detail {
+    &__form {
+        background-color: #fff;
+        border-radius: .16rem;
+        margin: .2rem;
+        margin-bottom: 0;
+
+        .form-price {
+            display: flex;
+            padding: .32rem 0;
+
+            dl {
+                flex: 1;
+                text-align: center;
+
+                dt {
+                    margin-bottom: .1rem;
+                }
+
+                dd {
+                    font-size: .56rem;
+                    font-weight: bold;
+                }
+            }
+        }
+
+        .form-qty {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            &__stepper {
+                display: flex;
+                align-items: center;
+                gap: .1rem;
+                width: 70%;
+
+                .van-stepper {
+                    flex: 1;
+                    display: flex;
+
+                    &__input {
+                        flex: 1;
+                        font-size: .32rem;
+                    }
+
+                    &__minus,
+                    &__plus,
+                    &__input {
+                        height: .72rem;
+                    }
+
+                    &__minus,
+                    &__plus {
+                        width: .72rem;
+                    }
+                }
+            }
+
+            .van-radio-group {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+                margin-top: .2rem;
+            }
+
+            .van-radio {
+                width: 25%;
+                padding: .04rem;
+                margin-right: 0;
+
+                .van-radio__icon {
+                    display: none;
+                }
+
+                &__label {
+                    display: block;
+                    width: 100%;
+                    font-size: .24rem;
+                    text-align: center;
+                    color: #666;
+                    border: 1px solid #e5e5e5;
+                    border-radius: .08rem;
+                    padding: .04rem;
+                    margin-left: 0;
+                }
+
+                &[aria-checked="true"] {
+                    .van-radio__label {
+                        color: var(--van-radio-checked-icon-color);
+                        border-color: var(--van-radio-checked-icon-color);
+                    }
+                }
+            }
+        }
+
+        .form-submit {
+            display: flex;
+            gap: .32rem;
+            padding: .32rem;
+        }
+    }
+
+    &__list {
+        .g-order-list {
+            padding: .2rem;
+        }
+    }
+}

src/packages/sbyj/views/market/detail/index.vue

@@ -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>

src/packages/sbyj/views/order/list/components/supplement-deposit/index.vue

@@ -18,7 +18,7 @@
                     <Cell title="滞纳金" :value="selectedRow.tHDetailEx.callAteFee" />
                     <Field label="类型">
                         <template #input>
-                            <RadioGroup v-model="orderType" @click="onTypeChanged">
+                            <RadioGroup direction="horizontal" v-model="orderType" @click="onTypeChanged">
                                 <Radio :name="1">补充</Radio>
                                 <Radio :name="2">退返</Radio>
                             </RadioGroup>
@@ -49,7 +49,7 @@ import { shallowRef, PropType, onMounted, reactive } from 'vue'
 import { CellGroup, Cell, Button, Stepper, Field, Form, FormInstance, FieldRule, RadioGroup, Radio } from 'vant'
 import { fullloading } from '@/utils/vant'
 import AppModal from '@/components/base/modal/index.vue'
-import { formatDate, formatDecimal, parsePercent } from '@/filters'
+import { parsePercent } from '@/filters'
 import { supplementDeposit, refundedDeposit } from '@/services/api/trade'
 
 const props = defineProps({