From 79db9782438e27a9006d540d18d649c720180a31 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Wed, 13 Aug 2025 18:46:46 +0800
Subject: [PATCH] 1

---
 src/components/stock-list.vue |  118 ++++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 81 insertions(+), 37 deletions(-)

diff --git a/src/components/stock-list.vue b/src/components/stock-list.vue
index 36a09df..cfd49fa 100644
--- a/src/components/stock-list.vue
+++ b/src/components/stock-list.vue
@@ -20,11 +20,21 @@
         <div class="i_name">{{ item.name }}</div>
       </van-col>
       <van-col span="4" class="flex-start item_n">{{ item.nowPrice }}</van-col>
+
       <van-col span="8" class="item_n">
-        <div class="flex-end" style="margin-bottom: .15em;">
+        <div
+          class="flex-end"
+          style="margin-bottom: .15em;"
+          :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
+        >
           {{ item.hcrate }}
         </div>
-        <div class="flex-end">{{ item.hcrateP }}</div>
+        <div
+          class="flex-end"
+          :class="{ red: item.hcrate < 0, green: item.hcrate > 0 }"
+        >
+          {{ item.hcrateP }}
+        </div>
       </van-col>
 
       <div
@@ -36,6 +46,12 @@
       </div>
     </van-row>
 
+    <div class="more-news" @click="getMore" v-if="stockList.length > 0">
+      <span v-if="lod == 1">{{ $t("加载更多") }}</span>
+      <span v-else-if="lod == 2">{{ $t("加载中") }}</span>
+      <span v-else-if="lod == 3">{{ $t("沒有更多了") }}</span>
+    </div>
+
     <!-- 无数据时显示 -->
     <div
       class="no_data flex-center"
@@ -43,30 +59,23 @@
     >
       <img src="@/assets/img/zhaobudao2.png" alt="" />
     </div>
-
-    <n-pagination
-      :pageNo.sync="pageNum"
-      :pageSize="pageSize"
-      :total="total"
-    ></n-pagination>
   </div>
 </template>
 
 <script>
-import nPagination from "@/components/nPagination.vue";
 import * as api from "@/axios/api";
 import { Toast } from "vant";
+import { WhrWebSocket } from "@/utils/WhrWebSocket";
 export default {
   name: "stock_list",
-  components: {
-    nPagination
-  },
+  components: {},
   data() {
     return {
       pageNum: 1,
-      pageSize: 10,
+      pageSize: 20,
       total: 1,
-      stockList: []
+      stockList: [],
+      lod: 1 // 1 加载更多 2 加载中 3 沒有更多了
     };
   },
   props: {
@@ -87,24 +96,17 @@
       default: false
     }
   },
-  watch: {
-    propOption: {
-      handler(val) {
-        this.pageNum = 1;
-        this.getStockList();
-      }
-    },
-    pageNum: {
-      handler(val) {
-        // this.stockList = [];
-        this.getStockList();
-      }
-    }
-  },
+  watch: {},
   mounted() {
-    this.getStockList();
+    this.init();
+    this.initWebSocket();
   },
   methods: {
+    init() {
+      this.pageNum = 1;
+      this.stockList = [];
+      this.getStockList();
+    },
     // 获取数据
     async getStockList() {
       let opt = {
@@ -112,15 +114,17 @@
         pageSize: this.pageSize,
         stockPlate: "",
         keyWords: "",
-        // stockType: '',
         orderBy: ""
       };
 
       opt = { ...opt, ...this.propOption };
 
       let data = await this.listApi(opt);
-      this.stockList = data.data.list;
+      this.stockList = [...this.stockList, ...data.data.list];
       this.total = data.data.total || 1;
+
+      this.lod = 1;
+      if (this.total <= this.stockList.length) this.lod = 3;
     },
     // 点击进入详情
     toDetails(item) {
@@ -151,6 +155,39 @@
       } else {
         Toast.fail(data.msg);
       }
+    },
+    // 连接ws实时监控变动
+    initWebSocket() {
+      console.log("initWebSocket");
+      this.Trade = new WhrWebSocket({
+        path: `wss://usws.yanshiz.com/websocket-server `,
+        onmessage: this.getTradeMessage
+      });
+
+      this.Trade.init();
+    },
+    getTradeMessage({ data }) {
+      let result = JSON.parse(data);
+      let pid = result.pid;
+      let userToUpdate = this.stockList.find(item => item.code == pid);
+      if (userToUpdate) {
+        // 更新对象数据
+        userToUpdate.nowPrice = result.last;
+        userToUpdate.hcrateP = result.pcp;
+      }
+    },
+    // 加载更多
+    getMore() {
+      if (this.lod == 3) return;
+      this.lod = 2;
+      this.pageNum++;
+      this.getStockList();
+    }
+  },
+  beforeDestroy() {
+    if (this.Trade) {
+      this.Trade.close();
+      console.log("WebSocket disconnected");
     }
   }
 };
@@ -163,23 +200,22 @@
 
 .stock_list {
   .markets_head {
-    background-color: @green2;
+    // background-color: @green2;
     margin-top: 0.25em;
     height: 1em;
     padding: 0 0.25em;
 
     .head_item {
-      font-size: 0.4em;
+      font-size: 0.3em;
       height: 100%;
-      font-weight: 600;
+      font-weight: 300;
+      color: #898a8e;
     }
   }
 
   .markets_item {
-    // margin-top: .25em;
-    // height: 1em;
     padding: 0.5em 0.25em 0.25em;
-    border-bottom: #f5f5f5 solid 0.01em;
+    border-bottom: rgba(#fff, 0.2) solid 0.01em;
     position: relative;
 
     .item_n {
@@ -203,6 +239,14 @@
       }
     }
 
+    .up {
+      color: @dark_green;
+    }
+
+    .down {
+      color: @red;
+    }
+
     .edit {
       width: 100%;
       height: 100%;

--
Gitblit v1.9.3