From df43dbd4f80baedb88764ca9545e4b5ec7e1ac73 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sun, 27 Jul 2025 16:26:34 +0800
Subject: [PATCH] 1

---
 src/components/stock-list.vue |  125 +++++++++++++++++++++++++++++++++--------
 1 files changed, 101 insertions(+), 24 deletions(-)

diff --git a/src/components/stock-list.vue b/src/components/stock-list.vue
index 30656ee..03e8878 100644
--- a/src/components/stock-list.vue
+++ b/src/components/stock-list.vue
@@ -6,7 +6,7 @@
       <van-col span="8" class="flex-end head_item">{{ $t("Change") }}</van-col>
     </van-row>
 
-    <van-row class="markets_item" v-for="item in stockList" :key="item.id">
+    <van-row class="markets_item" v-for="item in stockList" :key="item.id" @click="toDetails(item)">
       <van-col span="12" class="item_n">
         <div class="flex-start">
           <span class="i_icon">{{ item.stock_type }}</span>
@@ -15,29 +15,35 @@
         <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 class="edit flex-end" v-show="editorShow">
+      <div class="edit flex-end" v-show="editorShow" @click.stop="deleteStock(item)">
         <span>{{ $t("移除") }}</span>
       </div>
     </van-row>
 
-    <n-pagination
-      :pageNo.sync="pageNum"
-      :pageSize="pageSize"
-      :total="total"
-    ></n-pagination>
+    <!-- 无数据时显示 -->
+    <div class="no_data flex-center" v-show="!stockList || stockList.length == 0">
+      <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: {
@@ -45,10 +51,9 @@
   },
   data() {
     return {
-      editorShow: false, // 编辑状态
       pageNum: 1,
       pageSize: 10,
-      total: 0,
+      total: 1,
       stockList: []
     };
   },
@@ -58,29 +63,39 @@
       default: () => {
         return {};
       }
+    },
+    listApi: {
+      default: () => {
+        return api.getStockByType;
+      }
+    },
+    // 编辑状态
+    editorShow: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
     propOption: {
       handler(val) {
+        this.pageNum = 1;
         this.getStockList();
       }
     },
     pageNum: {
       handler(val) {
-        console.log(val);
+        // this.stockList = [];
+        this.getStockList();
       }
     }
   },
   mounted() {
     this.getStockList();
+    this.initWebSocket();
   },
   methods: {
-    onEdit() {
-      this.editorShow = !this.editorShow;
-    },
+    // 获取数据
     async getStockList() {
-      // 获取数据
       let opt = {
         pageNum: this.pageNum,
         pageSize: this.pageSize,
@@ -92,11 +107,67 @@
 
       opt = { ...opt, ...this.propOption };
 
-      let data = await api.getStockByType(opt);
+      let data = await this.listApi(opt);
       this.stockList = data.data.list;
-      this.total = data.data.total;
+      this.total = data.data.total || 1;
+    },
+    // 点击进入详情
+    toDetails(item) {
+      const obj = {
+        pid: item.code || "",
+        type: item.stock_type || ""
+      };
+      window.localStorage.setItem("kLine", JSON.stringify(obj));
+
+      this.$router.push({
+        path: "/kline",
+        query: {
+          code: item.code,
+          type: item.stock_type
+        }
+      });
+    },
+    // 删除自选股
+    async deleteStock(item) {
+      let opt = {
+        code: item.code
+      };
+      let data = await api.delOption(opt);
+      if (data.status === 0) {
+        this.$emit("update:editorShow", false);
+        Toast.success(data.msg);
+        this.getStockList();
+      } else {
+        Toast.fail(data.msg);
+      }
+    },
+    // 连接ws实时监控变动
+    initWebSocket() {
+      console.log("initWebSocket");
+      this.Trade = new WhrWebSocket({
+        path: `wss://ws.kuspitai.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;
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this.Trade) {
+      this.Trade.close();
+      console.log('WebSocket disconnected');
     }
-  }
+  },
 };
 </script>
 
@@ -147,17 +218,23 @@
       }
     }
 
+    .up {
+      color: @dark_green;
+    }
+
+    .down {
+      color: @red;
+    }
+
     .edit {
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
-      background: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0.8)
-      );
+      background: linear-gradient(to right,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 0.8));
       text-align: end;
       color: @red;
       padding-right: 0.25em;

--
Gitblit v1.9.3