:bug: 买卖列表页状态调整; :art: 挂单样式优化

src/views/buyOrSell/BuyConfList.vue

@@ -8,12 +8,14 @@ import dateUtil from "@/utils/dateUtil";
 import { useRouter } from 'vue-router'
 import { useTradeStore } from '@/stores/trade';
 
-// 状态，0未确认，1已确认，2特殊取消
+// 状态，0未确认，1已确认(双方已确认)，2买家已付款（卖家未确认）,3买家超时未确认，4特殊取消
 const showStatusText = (statusVal) => {
     const statusMap = {
         0: '未确认',
         1: '已确认',
-        2: '特殊取消',
+        2: '等待卖家确认',
+        3: '买家超时未确认',
+        4: '特殊取消'
     }
     return statusMap[statusVal] || '未知状态';
 }
@@ -156,8 +158,7 @@ onMounted(async () => {
                                     showDateTime(item.sellerConfirmTime)
                                 }}
                             </div>
-
-                            <!-- 0未确认，去付款 -->
+                            <!-- 0买家未确认，去付款 -->
                             <div v-if="item.status === '0'" class="itemRow"
                                 style="display: flex; justify-content: flex-end">
                                 <van-button span="5" round type="primary" :style="{
@@ -173,13 +174,22 @@ onMounted(async () => {
                                 </van-button>
                             </div>
 
+                            <!-- 1双方确认-绿#16D81A，2已付款卖家未确认-蓝#16D8CF，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
                             <div class="itemRow" style="display: flex; justify-content: flex-end">
                                 <!-- 已确认 -->
-                                <span v-if="item.status === '1'" style="color: #4fc08d">{{
+                                <span v-if="item.status === '1'" style="color: #16D81A">{{
+                                    showStatusText(item.status)
+                                    }}</span>
+                                <!-- 已付款未确认 -->
+                                <span v-if="item.status === '2'" style="color: #16D8CF">{{
+                                    showStatusText(item.status)
+                                    }}</span>
+                                <!-- 买家超时未确认 -->
+                                <span v-if="item.status === '3'" style="color: #163DD8">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 特殊取消 -->
-                                <span v-if="item.status === '2'" style="color: #ff0000">{{
+                                <span v-if="item.status === '4'" style="color: #D816D8">{{
                                     showStatusText(item.status)
                                     }}</span>
                             </div>

src/views/buyOrSell/SellConfList.vue

@@ -8,13 +8,14 @@ import dateUtil from "@/utils/dateUtil";
 import { useRouter } from 'vue-router'
 import { useTradeStore } from '@/stores/trade';
 
-// 状态，0未确认，1已确认(双方已确认)，2买家已付款（卖家未确认）,3特殊取消
+// 状态，0未确认，1已确认(双方已确认)，2买家已付款（卖家未确认）,3买家超时未确认，4特殊取消
 const showStatusText = (statusVal) => {
     const statusMap = {
         0: '买家未付款',
         1: '已确认',
-        2: '待确认',
-        3: '特殊取消',
+        2: '等待卖家确认',
+        3: '买家超时未确认',
+        4: '特殊取消'
     }
     return statusMap[statusVal] || '未知状态';
 }
@@ -155,7 +156,7 @@ onMounted(async () => {
                                 }}
                             </div>
 
-                            <!-- 未确认，去确认收款 -->
+                            <!-- 2买家已付款，待确认，去确认收款 -->
                             <div v-if="item.status === '2'" class="itemRow"
                                 style="display: flex; justify-content: flex-end">
                                 <van-button span="5" round type="primary" :style="{
@@ -171,18 +172,22 @@ onMounted(async () => {
                                 </van-button>
                             </div>
 
-                            <!-- 未付款-红#F90068，付款未确认-蓝#00A2F9，双方确认-绿#00CC00，特殊取消-紫#5300EF -->
+                            <!-- 0未付款-红#D84A16，1双方确认-绿#16D81A，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
                             <div class="itemRow" style="display: flex; justify-content: flex-end">
                                 <!-- 未付款 -->
-                                <span v-if="item.status === '0'">{{
+                                <span v-if="item.status === '0'" style="color: #D84A16">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已确认 -->
-                                <span v-if="item.status === '1'" style="color: #00CC00">{{
+                                <span v-if="item.status === '1'" style="color: #16D81A">{{
+                                    showStatusText(item.status)
+                                    }}</span>
+                                <!-- 买家超时未确认 -->
+                                <span v-if="item.status === '3'" style="color: #163DD8">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 特殊取消 -->
-                                <span v-if="item.status === '3'" style="color: #5300EF">{{
+                                <span v-if="item.status === '4'" style="color: #D816D8">{{
                                     showStatusText(item.status)
                                     }}</span>
                             </div>

src/views/position/SearchPop.vue

@@ -5,8 +5,8 @@
 
       <div class="content">
         <van-form @submit="onSubmit">
-          <!-- 订单编号 -->
-          <van-field v-model="orderId" name="orderId" label="订单编号" placeholder="订单编号" />
+          <!-- 挂单编号 -->
+          <van-field v-model="orderId" name="orderId" label="挂单编号" placeholder="挂单编号" />
 
           <!-- 创建时间 -->
 

src/views/taskMessage/PendingOrderList.vue

@@ -15,10 +15,10 @@ const showTypeText = (typeValue) => {
 const showStatusText = (statusVal) => {
   const statusMap = {
     0: '过期',
-    1: '生效',
+    1: '匹配中',
     2: '撤单',
-    3: '全部成交',
-    4: '部分成交',
+    3: '匹配成功',
+    4: '部分匹配成功'
   }
   return statusMap[statusVal] || '未知状态';
 }
@@ -146,9 +146,9 @@ onMounted(async () => {
                 <span class="itemTitle">撤单时间:&nbsp;</span>{{
                   item.cancelTime }}
               </div>
-              <!-- if 3，4 显示成交数量 -->
+              <!-- if 3，4 显示匹配到的股票数量 -->
               <div v-if="item.status === '3' || item.status === '4'" class="itemRow">
-                <span class="itemTitle">成交数量:&nbsp;</span>{{
+                <span class="itemTitle">匹配数量:&nbsp;</span>{{
                   item.tradeNumber }}
               </div>
 
@@ -158,20 +158,13 @@ onMounted(async () => {
                   showDateTime(item.createTime) }}
               </div>
 
-              <!-- 卖家确认时间 -->
-              <div class="itemRow" v-if="item.status === '1'">
-                <span class="itemTitle">卖家确认时间:&nbsp;</span>{{
-                  showDateTime(item.sellerConfirmTime)
-                }}
-              </div>
-
               <!-- 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
               <div class="itemRow" style="display: flex; justify-content: flex-end">
                 <!-- 0过期 -->
                 <span v-if="item.status === '0'" style="color: #B7B7B7">{{
                   showStatusText(item.status)
                 }}</span>
-                <!-- 1生效 -->
+                <!-- 1匹配中 -->
                 <span v-if="item.status === '1'" style="color: #4BC38B">{{
                   showStatusText(item.status)
                 }}</span>
@@ -179,11 +172,11 @@ onMounted(async () => {
                 <span v-if="item.status === '2'" style="color: #D8553B">{{
                   showStatusText(item.status)
                 }}</span>
-                <!-- 3全部成交 -->
+                <!-- 3匹配成功 -->
                 <span v-if="item.status === '3'" style="color: #ff0000">{{
                   showStatusText(item.status)
                 }}</span>
-                <!-- 4部分成交 -->
+                <!-- 4部分匹配成功 -->
                 <span v-if="item.status === '4'" style="color: #9C3FC4">{{
                   showStatusText(item.status)
                 }}</span>

src/views/taskMessage/TransactionList.vue

@@ -36,7 +36,7 @@
                                     item.price }}
                             </div>
                             <div class="itemRow">
-                                <span class="itemTitle">股票数:&nbsp;</span>{{
+                                <span class="itemTitle">股票数量:&nbsp;</span>{{
                                     item.tradeNumber }}
                             </div>
                             <!-- 创建时间 -->
@@ -51,22 +51,26 @@
                                     showDateTime(item.sellerConfirmTime)
                                 }}
                             </div>
-                            <!-- 未付款-红#F90068，付款未确认-蓝#00A2F9，双方确认-绿#00CC00，特殊取消-紫#5300EF -->
+                            <!-- 0未付款-红#D84A16，1双方确认-绿#16D81A，2已付款未确认-蓝#16D8CF，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
                             <div class="itemRow" style="display: flex; justify-content: flex-end">
                                 <!-- 未付款 -->
-                                <span v-if="item.status === '0'" style="color: #F90068">{{
+                                <span v-if="item.status === '0'" style="color: #D84A16">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已确认 -->
-                                <span v-if="item.status === '1'" style="color: #00CC00">{{
+                                <span v-if="item.status === '1'" style="color: #16D81A">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已付款，待卖家确认 -->
-                                <span v-if="item.status === '2'" style="color: #00A2F9">{{
+                                <span v-if="item.status === '2'" style="color: #16D8CF">{{
+                                    showStatusText(item.status)
+                                    }}</span>
+                                <!-- 买家超时未确认 -->
+                                <span v-if="item.status === '3'" style="color: #163DD8">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 特殊取消 -->
-                                <span v-if="item.status === '3'" style="color: #5300EF">{{
+                                <span v-if="item.status === '4'" style="color: #D816D8">{{
                                     showStatusText(item.status)
                                     }}</span>
                             </div>
@@ -88,13 +92,14 @@ import { showFailToast } from "vant";
 import { getLoginUser, styleUrl } from "@/common/js/utils";
 import dateUtil from "@/utils/dateUtil";
 
-// 状态，0未确认，1已确认(双方已确认)，2买家已付款（卖家未确认）,3特殊取消
+// 状态，0未确认，1已确认(双方已确认)，2买家已付款（卖家未确认）,3买家超时未确认，4特殊取消
 const showStatusText = (statusVal) => {
     const statusMap = {
         0: '未付款',
         1: '已确认',
         2: '待确认',
-        3: '特殊取消',
+        3: '买家超时未确认',
+        4: '特殊取消',
     }
     return statusMap[statusVal] || '未知状态';
 }

src/views/trading/TradingIndex.vue

@@ -59,11 +59,16 @@
           <van-col span="8">交易数量</van-col>
           <van-col span="8">单价￥</van-col>
         </van-row>
-        <van-row v-for="item in sellerList" :key="item.id" justify="center">
+        <van-row v-for="item in visibleSellerList" :key="item.id" justify="center">
           <van-col span="8">{{ item.userAnonymousName }}</van-col>
           <van-col span="8">{{ item.entrustNumber }}</van-col>
           <van-col span="8">{{ item.price }}</van-col>
         </van-row>
+        <van-row v-if="sellListLength >= 10" justify="center">
+          <van-col span="8">...</van-col>
+          <van-col span="8">...</van-col>
+          <van-col span="8">...</van-col>
+        </van-row>
       </div>
 
       <!-- 分割线 -->
@@ -92,11 +97,16 @@
           <van-col span="8">交易数量</van-col>
           <van-col span="8">单价￥</van-col>
         </van-row>
-        <van-row v-for="item in buyerList" :key="item.id" justify="center">
+        <van-row v-for="item in visibleBuyerList" :key="item.id" justify="center">
           <van-col span="8">{{ item.userAnonymousName }}</van-col>
           <van-col span="8">{{ item.entrustNumber }}</van-col>
           <van-col span="8">{{ item.price }}</van-col>
         </van-row>
+        <van-row v-if="buyListLength >= 10" justify="center">
+          <van-col span="8">...</van-col>
+          <van-col span="8">...</van-col>
+          <van-col span="8">...</van-col>
+        </van-row>
       </div>
       <!-- 分割线 -->
       <img class="pic1" src="../../assets/trading/line.png" />
@@ -131,7 +141,7 @@
 
 <script setup>
 
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import sHeader from "@/components/SimpleHeader";
 import { styleUrl } from "@/common/js/utils";
 import {
@@ -177,20 +187,30 @@ setInterval(() => {
 }, 1000);
 
 
-const buyerList = ref([]);
-const sellerList = ref([]);
+const buyerList = ref([])
+const sellerList = ref([])
+const buyListLength = ref(0)
+const sellListLength = ref(0)
 
 async function getBuySellListFunc() {
   const { data } = await getBuySellList()
   if (data.code === '00000') {
-    console.log("buyerList >>", data.data.buyOrderList);
-    console.log("sellerList >>", data.data.sellOrderList);
     buyerList.value = data.data.buyOrderList
     sellerList.value = data.data.sellOrderList
+
+    buyListLength.value = buyerList.value.length
+    sellListLength.value = sellerList.value.length
   }
   // 加载状态结束
   loading.value = false;
 }
+
+
+
+// 使用 computed 确保不会返回超过10个元素的列表
+const visibleSellerList = computed(() => sellerList.value.slice(0, 10));
+const visibleBuyerList = computed(() => buyerList.value.slice(0, 10));
+
 const pushPageList = (url) => {
   router.push(url);
 }