From 80a5d8b97bba0b2211725468bf9bf1d58349ad66 Mon Sep 17 00:00:00 2001
From: TorsenLi <litong19@126.com>
Date: Tue, 16 Jun 2026 06:19:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=82=E5=9C=BA=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=AC=A6=E5=8F=B7=E5=B8=82=E5=9C=BA=E6=98=A0=E5=B0=84?=
 =?UTF-8?q?=E5=92=8C=E5=BC=B9=E5=87=BA=E6=A1=86=E5=8F=AF=E8=A7=81=E6=80=A7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=EF=BC=8C=E6=94=B9=E8=BF=9B=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=9C=BA=E5=88=B6=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=BB=B6=E8=BF=9F=E5=8A=A0=E8=BD=BD=E5=92=8C=E5=90=88=E5=B9=B6?=
 =?UTF-8?q?=E5=B8=82=E5=9C=BA=E6=95=B0=E6=8D=AE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/exchangeStock/index.vue | 172 +++++++++++++++++++-----------
 1 file changed, 112 insertions(+), 60 deletions(-)

diff --git a/src/views/exchangeStock/index.vue b/src/views/exchangeStock/index.vue
index fcb62b9..382326f 100644
--- a/src/views/exchangeStock/index.vue
+++ b/src/views/exchangeStock/index.vue
@@ -47,6 +47,8 @@
 		        ref="popover"
 		        width="400"
 		        trigger="click"
+		        @show="popoverVisible = true"
+		        @hide="popoverVisible = false"
 		      >
 		        <div slot="reference">
 		          <!-- {{ activeContract.pair_name }} -->
@@ -56,52 +58,45 @@
 		          </el-button>
 		        </div>
 		        <div
+		          v-if="popoverVisible"
 		          class="markets-pair-list"
 		          style="max-height:300px;overflow:auto;"
 		        >
-		          <template v-for="parent in marketList">
-		            <div class="px-3 text-primary" :key="parent.coin_name">
-		              <!-- {{ parent.coin_name }} -->
-		            </div>
-		            <table class="table" :key="parent.coin_name + 1">
-		              <thead>
-		                <tr class="text-secondary">
-		                  <th class="w-10/24">{{ $t("contract.h5") }}</th>
-		                  <th class="w-7/24">{{ $t("contract.g3") }}</th>
-		                  <th class="w-7/24 text-right">
-		                    {{ $t("contract.h6") }}
-		                  </th>
-		                </tr>
-		              </thead>
-		              <tbody>
-		                  <!-- @click="symbol = item.symbol" -->
-		                <tr
-		                  v-for="item in parent.marketInfoList"
-		                  :key="item.symbol"
-		                  :class="{ active: item.symbol == symbol }"
-		                  @click="ispopover1(item.symbol)"
+		          <table class="table">
+		            <thead>
+		              <tr class="text-secondary">
+		                <th class="w-10/24">{{ $t("contract.h5") }}</th>
+		                <th class="w-7/24">{{ $t("contract.g3") }}</th>
+		                <th class="w-7/24 text-right">
+		                  {{ $t("contract.h6") }}
+		                </th>
+		              </tr>
+		            </thead>
+		            <tbody>
+		              <tr
+		                v-for="item in flatMarketList"
+		                :key="item.symbol"
+		                :class="{ active: item.symbol == symbol }"
+		                @click="ispopover1(item.symbol)"
+		              >
+		                <td class="w-10/24">
+		                  {{ item.coin_name }}
+		                </td>
+		                <td
+		                  class="w-7/24"
+		                  :class="item.increase < 0 ? 'decreace' : 'increace'"
 		                >
-		                  <td class="w-10/24">
-		                    <!-- {{ item.symbol }}/{{ parent.coin_name }} -->
-		                    {{ item.coin_name }}
-		                  </td>
-		                  <td
-		                    class="w-7/24 "
-		                    :class="item.increase < 0 ? 'decreace' : 'increace'"
-		                  >
-		                    {{item.price}}
-										  <!-- item.symbol == symbol ? price1 : -->
-		                  </td>
-		                  <td
-		                    class="w-7/24"
-		                    :class="item.increase < 0 ? 'decreace' : 'increace'"
-		                  >
-		                    {{ item.increaseStr }}
-		                  </td>
-		                </tr>
-		              </tbody>
-		            </table>
-		          </template>
+		                  {{ item.price }}
+		                </td>
+		                <td
+		                  class="w-7/24"
+		                  :class="item.increase < 0 ? 'decreace' : 'increace'"
+		                >
+		                  {{ item.increaseStr }}
+		                </td>
+		              </tr>
+		            </tbody>
+		          </table>
 		        </div>
 		      </el-popover>
 		    </div>
@@ -207,6 +202,10 @@
 					to: '-',
 				},
 				marketList: [], // 在symbol组件中 需要遍历 因此默认数组避免出错
+				symbolMarketMap: {},
+				popoverVisible: false,
+				marketListPending: null,
+				marketListUpdateTimer: null,
 				trade: [],
 				pcBannerList: [],
 				newTrade: null,
@@ -312,15 +311,18 @@
 					};
 				}
 			},
-			activeContract(val) {
-			    let marketList=this.marketList
-			        .map(item => item.marketInfoList)
-			        .flat()
-			        .find(item => item.symbol == this.symbol) || {}
-			        if(val.price){
-			            delete marketList.price
-			        }
-			    return marketList;
+			activeContract() {
+				return this.symbolMarketMap[this.symbol] || {};
+			},
+			flatMarketList() {
+				if (!this.popoverVisible) return [];
+				const list = [];
+				this.marketList.forEach(group => {
+					(group.marketInfoList || []).forEach(item => {
+						list.push(item);
+					});
+				});
+				return list;
 			},
 		},
 
@@ -405,6 +407,59 @@
 			ispopover1(item){
 			    this.symbol=item;
 			},
+			rebuildSymbolMarketMap() {
+				const map = {};
+				this.marketList.forEach(group => {
+					(group.marketInfoList || []).forEach(item => {
+						map[item.symbol] = item;
+					});
+				});
+				this.symbolMarketMap = map;
+			},
+			mergeMarketListInPlace(newData) {
+				const symbolMap = {};
+				newData.forEach(group => {
+					(group.marketInfoList || []).forEach(item => {
+						symbolMap[item.symbol] = item;
+					});
+				});
+				this.marketList.forEach(group => {
+					(group.marketInfoList || []).forEach((item, index) => {
+						const updated = symbolMap[item.symbol];
+						if (updated) {
+							this.$set(group.marketInfoList, index, Object.assign({}, item, updated));
+						}
+					});
+				});
+				this.rebuildSymbolMarketMap();
+			},
+			updateMarketList(data) {
+				if (!data || !data.length) return;
+				if (!this.marketList.length) {
+					this.marketList = data;
+					this.rebuildSymbolMarketMap();
+				} else {
+					this.mergeMarketListInPlace(data);
+				}
+				if (!this.symbol) {
+					this.initDefaultSymbol(data);
+				} else {
+					this.findMarketBySymbol();
+				}
+			},
+			scheduleMarketListUpdate(data) {
+				if (!this.popoverVisible) {
+					this.updateMarketList(data);
+					return;
+				}
+				this.marketListPending = data;
+				if (this.marketListUpdateTimer) return;
+				this.marketListUpdateTimer = setTimeout(() => {
+					this.updateMarketList(this.marketListPending);
+					this.marketListPending = null;
+					this.marketListUpdateTimer = null;
+				}, 300);
+			},
 			initMarket() {
 				// 初始化订阅marketList数据
 				this.ws.send({
@@ -652,13 +707,7 @@
 
 						case "exchangeMarketList":
 
-							this.marketList = data;
-
-							if (!this.symbol) {
-								this.initDefaultSymbol(data);
-							} else {
-								this.findMarketBySymbol();
-							}
+							this.scheduleMarketListUpdate(data);
 
 							break;
 
@@ -708,13 +757,16 @@
 			this.indexList()
 			
 			Market.getstockMarketList().then(data => {
-			    this.marketList = data;
-				this.initDefaultSymbol(data);
+			    this.updateMarketList(data);
 			}).catch(err => {});
 			// this.update();
 		},
 		beforeDestroy() {
 		    clearInterval(this.timer);
+			if (this.marketListUpdateTimer) {
+				clearTimeout(this.marketListUpdateTimer);
+				this.marketListUpdateTimer = null;
+			}
 		},
 
 		mounted() {