update

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

@@ -58,10 +58,6 @@
     &__list {
         padding: 10px;
 
-        .g-order-list {
-            padding: 10px;
-        }
-
         table {
             width: 100%;
             text-align: center;
@@ -69,32 +65,26 @@
             overflow: hidden;
 
             tr {
+                &.is-active td {
+                    background-color: #f0f1f5;
+                }
+
                 td {
-                    padding-bottom: 1px;
+                    background-color: #fff;
+                    border-bottom: 1px solid #f0f1f5;
+
+                    &:first-child {
+                        >span {
+                            font-weight: bold;
+                        }
+                    }
 
                     >span {
                         display: block;
-                        background-color: #fff;
                         padding: 14px 0;
                     }
                 }
             }
         }
     }
-
-    &__ul {
-        text-align: center;
-        padding: 10px;
-
-        li {
-            display: flex;
-            background-color: #fff;
-            padding: 10px 0;
-            margin-bottom: 10px;
-
-            span {
-                flex: 1;
-            }
-        }
-    }
 }

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

@@ -36,17 +36,10 @@
                 <Button type="danger" @click="commit(BuyOrSell.Buy)" block square>我要买料</Button>
             </div>
         </div>
-        <!-- <ul class="market-detail__ul">
-            <li v-for="(item, index) in orderList" :key="index">
-                <span>{{ item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? '买料:' : '卖料:' }}</span>
-                <span>{{ item.tHDetailEx.openQty * item.agreeUnit }}{{ getGoodsUnitName(item.goodsUnitID) }}</span>
-                <span>{{ formatDecimal(item.tHDetailEx.holderPrice) }}</span>
-                <span>{{ parsePercent(item.tHDetailEx.depositRate) }}</span>
-            </li>
-        </ul> -->
         <div class="market-detail__list">
             <table cellspacing="0" cellpadding="0">
-                <tr v-for="(item, index) in orderList" :key="index">
+                <tr :class="item.tHDetailEx.tradeID === selectedRow?.tHDetailEx.tradeID ? 'is-active' : ''" v-for="(item, index) in orderList" :key="index"
+                    @click="showPopup(item)">
                     <td>
                         <span :class="item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? 'g-price-up' : 'g-price-down'">
                             {{ item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? '买料' : '卖料' }}
@@ -66,20 +59,20 @@
                 </tr>
             </table>
         </div>
-        <div class="market-detail__list" v-if="false">
-            <div class="g-order-list">
-                <div class="g-order-list__box" v-for="(item, index) in orderList" :key="index">
+        <ActionSheet v-model:show="show" title="订单">
+            <div class="g-order-list" style="padding-bottom: 60px;" v-if="selectedRow">
+                <div class="g-order-list__box">
                     <div class="g-order-list__titlebar">
                         <div class="left">
-                            <h4 :class="item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? 'g-price-up' : 'g-price-down'">
-                                {{ item.tHDetailEx.buyOrSell === BuyOrSell.Buy ? '买料:' : '卖料:' }}
-                                {{ item.goodsCode + '/' + item.goodsName }}
+                            <h4 :class="selectedRow.tHDetailEx.buyOrSell === BuyOrSell.Buy ? 'g-price-up' : 'g-price-down'">
+                                {{ selectedRow.tHDetailEx.buyOrSell === BuyOrSell.Buy ? '买料:' : '卖料:' }}
+                                {{ selectedRow.goodsCode + '/' + selectedRow.goodsName }}
                             </h4>
                         </div>
                         <div class="right">
                             <span
-                                :class="item.tHDetailEx.depositRate <= item.tHDetailEx.promptDepositRate ? 'g-price-up' : ''">{{
-                                    parsePercent(item.tHDetailEx.depositRate) }}</span>
+                                :class="selectedRow.tHDetailEx.depositRate <= selectedRow.tHDetailEx.promptDepositRate ? 'g-price-up' : ''">{{
+                                    parsePercent(selectedRow.tHDetailEx.depositRate) }}</span>
                         </div>
                     </div>
                     <div class="g-order-list__content">
@@ -87,41 +80,41 @@
                             <li>
                                 <span>订单重量</span>
                                 <span>
-                                    {{ item.tHDetailEx.openQty * item.agreeUnit }}
-                                    {{ getGoodsUnitName(item.goodsUnitID) }}
+                                    {{ selectedRow.tHDetailEx.openQty * selectedRow.agreeUnit }}
+                                    {{ getGoodsUnitName(selectedRow.goodsUnitID) }}
                                 </span>
                             </li>
                             <li>
                                 <span>可用重量</span>
                                 <span>
-                                    {{ enableqty(item) + getGoodsUnitName(item.goodsUnitID) }}
+                                    {{ enableqty(selectedRow) + getGoodsUnitName(selectedRow.goodsUnitID) }}
                                 </span>
                             </li>
                             <li>
                                 <span>订单价格</span>
-                                <span>{{ formatDecimal(item.tHDetailEx.holderPrice) }}</span>
+                                <span>{{ formatDecimal(selectedRow.tHDetailEx.holderPrice) }}</span>
                             </li>
                             <li>
                                 <span>已付定金</span>
-                                <span>{{ item.tHDetailEx.payedDeposit }}</span>
+                                <span>{{ selectedRow.tHDetailEx.payedDeposit }}</span>
                             </li>
                             <li>
                                 <span>浮动权益</span>
-                                <span :class="handlePriceColor(item.tHDetailEx.floatPL)">
-                                    {{ formatDecimal(item.tHDetailEx.floatPL) }}
+                                <span :class="handlePriceColor(selectedRow.tHDetailEx.floatPL)">
+                                    {{ formatDecimal(selectedRow.tHDetailEx.floatPL) }}
                                 </span>
                             </li>
                             <li>
                                 <span>已补定金</span>
-                                <span>{{ handleNumberValue(item.tHDetailEx.restockDeposit) }}</span>
+                                <span>{{ handleNumberValue(selectedRow.tHDetailEx.restockDeposit) }}</span>
                             </li>
                             <li>
                                 <span>订单天数</span>
-                                <span>{{ item.tHDetailEx.holdDays }}天</span>
+                                <span>{{ selectedRow.tHDetailEx.holdDays }}天</span>
                             </li>
                             <li>
                                 <span>滞纳金</span>
-                                <span>{{ handleNumberValue(item.tHDetailEx.callAteFee) }}</span>
+                                <span>{{ handleNumberValue(selectedRow.tHDetailEx.callAteFee) }}</span>
                             </li>
 
                             <!-- <li>
@@ -132,27 +125,26 @@
                         </ul>
                     </div>
                     <div class="g-order-list__btnbar">
-                        <Button size="small" @click="showComponent('supplement', item)" round
-                            v-if="item.tHDetailEx.holderQty">补充</Button>
-                        <template v-if="enableqty(item)">
-                            <Button size="small" @click="showComponent('delivery', item)" round>交料</Button>
-                            <Button size="small" @click="showComponent('closeholder', item)" round>终止</Button>
+                        <Button size="small" @click="showComponent('supplement')" round
+                            v-if="selectedRow.tHDetailEx.holderQty">补充</Button>
+                        <template v-if="enableqty(selectedRow)">
+                            <Button size="small" @click="showComponent('delivery')" round>交料</Button>
+                            <Button size="small" @click="showComponent('closeholder')" round>终止</Button>
                         </template>
-                        <Button size="small" @click="showComponent('detail', item)" round>详情</Button>
+                        <Button size="small" @click="showComponent('detail')" round>详情</Button>
                     </div>
                 </div>
             </div>
-        </div>
+        </ActionSheet>
         <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)" @closed="closeComponent"
             v-if="componentId" />
     </app-view>
 </template>
 
 <script lang="ts" setup>
-
 import { useOrder } from '@/business/trade'
 import { shallowRef, onMounted, onUnmounted, computed, onActivated, defineAsyncComponent } from 'vue'
-import { Form, Field, Stepper, Button, FieldRule, FormInstance, Radio, RadioGroup, showToast } from 'vant'
+import { Form, Field, Stepper, Button, FieldRule, FormInstance, Radio, RadioGroup, showToast, ActionSheet } from 'vant'
 import { useNavigation } from '@mobile/router/navigation'
 import { useFuturesStore, useUserStore, useSBYJOrderStore } from '@/stores'
 import { getGoodsUnitName } from '@/constants/unit'
@@ -177,6 +169,7 @@ const qtyStep = shallowRef(1) // 数量步长
 const subscribe = quoteSocket.createSubscribe()
 const selectedRow = shallowRef<Model.SBYJMyOrderRsp>()
 const orderQty = shallowRef(1) // 数量
+const show = shallowRef(false)
 /// 能否下单交易
 const canBankSign = shallowRef(false)
 
@@ -272,8 +265,13 @@ const onRadioChange = (value: number) => {
     }
 }
 
-const showComponent = (componentName: string, row: Model.SBYJMyOrderRsp) => {
+const showPopup = (row: Model.SBYJMyOrderRsp) => {
     selectedRow.value = row
+    show.value = true
+}
+
+const showComponent = (componentName: string) => {
+    show.value = false
     openComponent(componentName)
 }