地图指数标签接入数据

components/IndexCard.vue

@@ -12,8 +12,8 @@
     <view class="price-info">
       <text class="current-price" :style="{ color: priceColor }">{{ currentPrice }}</text>
       <view class="change-info">
-        <text class="change-amount" :style="{ color: priceColor }">{{ changeAmount }}</text>
-        <text class="change-percent" :style="{ color: priceColor }">{{ changePercent }}</text>
+        <text class="change-amount" :style="{ color: priceColor }">{{ judgeSymbol(changeAmount) }}</text>
+        <text class="change-percent" :style="{ color: priceColor }">{{ judgeSymbol(changePercent) }}</text>
       </view>
     </view>
 
@@ -63,6 +63,10 @@ const props = defineProps({
   },
 });
 
+const judgeSymbol = (num) => {
+  return num[0] === "-" ? num : "+" + num;
+};
+
 const getMarketFlag = (market) => {
   let imagePath;
 

pages/marketSituation/marketDetail.vue

@@ -36,7 +36,7 @@
     <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
       <!-- 股票列表 -->
       <view class="stock-list">
-        <view class="stock-row" v-for="(item,index) in sortedStockList" :key="item" @click="viewIndexDetail(item,index)">
+        <view class="stock-row" v-for="(item, index) in sortedStockList" :key="item" @click="viewIndexDetail(item, index)">
           <view class="stock-cell name-column">
             <view class="stock-name">{{ item.stockName }}</view>
             <view class="stock-code">{{ item.stockCode }}</view>
@@ -48,7 +48,7 @@
           </view>
           <view class="stock-cell change-column">
             <text class="stock-change" :class="item.isRising ? 'rising' : 'falling'">
-              {{ item.changePercent }}
+              {{ judgeSymbol(item.changePercent) }}
             </text>
           </view>
         </view>
@@ -79,107 +79,6 @@ const sortType = ref(""); // 排序类型：'price' 或 'change'
 const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'
 
 const regionalGroupArray = ref([]);
-// 股票数据
-const stockList = ref([
-  {
-    stockName: "Telecommunication",
-    stockCode: "888607",
-    price: 1349.47,
-    change: "+7.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Other",
-    stockCode: "888607",
-    price: 1349.47,
-    change: "+6.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Consumer Discretio...",
-    stockCode: "888610",
-    price: 1349.47,
-    change: "+5.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Telecommunication",
-    stockCode: "888607",
-    price: 1349.47,
-    change: "+4.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Other",
-    stockCode: "888611",
-    price: 1359.47,
-    change: "+3.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Consumer Discretio...",
-    stockCode: "888610",
-    price: 1349.47,
-    change: "+2.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Telecommunication",
-    stockCode: "888607",
-    price: 1349.47,
-    change: "+1.67%",
-    isRising: true,
-  },
-  {
-    stockName: "Other",
-    stockCode: "888611",
-    price: 1009.98,
-    change: "-1.67%",
-    isRising: false,
-  },
-  {
-    stockName: "Consumer Discretio...",
-    stockCode: "888610",
-    price: 1009.98,
-    change: "-0.67%",
-    isRising: false,
-  },
-  {
-    stockName: "Telecommunication",
-    stockCode: "888607",
-    price: 1009.98,
-    change: "-0.67%",
-    isRising: false,
-  },
-  {
-    stockName: "Other",
-    stockCode: "888611",
-    price: 1009.98,
-    change: "-1.67%",
-    isRising: false,
-  },
-  {
-    stockName: "Consumer Discretio...",
-    stockCode: "888610",
-    price: 1009.98,
-    change: "-4.67%",
-    isRising: false,
-  },
-  {
-    stockName: "Consumer Discretio...",
-    stockCode: "888610",
-    price: 1009.98,
-    change: "-3.67%",
-    isRising: false,
-  },
-  {
-    stockName: "Consumer Discretio...",
-    stockCode: "888610",
-    price: 1009.98,
-    change: "-3.67%",
-    isRising: false,
-  },
-]);
 
 // 计算属性
 const contentTopPosition = computed(() => {
@@ -206,6 +105,10 @@ const sortedStockList = computed(() => {
   return list;
 });
 
+const judgeSymbol = (num) => {
+  return num[0] === "-" ? num : "+" + num;
+};
+
 const getRegionalGroupList = async () => {
   try {
     const result = await getRegionalGroupListAPI({
@@ -224,7 +127,7 @@ const goBack = () => {
 };
 
 // 方法：查看指数详情
-const viewIndexDetail = (item,index) => {
+const viewIndexDetail = (item, index) => {
   console.log("查看指数详情:", item.stockName);
   // 这里可以跳转到具体的指数详情页面
   uni.navigateTo({
@@ -348,7 +251,6 @@ const sendTcpMessage = (command) => {
       break;
   }
   if (!messageData) {
-
     return;
   } else {
     try {

pages/marketSituation/marketOverview.vue

@@ -6,10 +6,10 @@
     <scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
       <view class="content">
         <view class="map">
-          <view class="INDU">道琼斯{{ INDU.value }}</view>
-          <view class="NDX">纳斯达克{{ NDX.value }}</view>
-          <view class="HSI">恒生指数{{ HSI.value }}</view>
-          <view class="CN">上证指数{{ CN.value }}</view>
+          <view class="INDU">道琼斯{{ judgeSymbol(INDU.value) }}</view>
+          <view class="NDX">纳斯达克{{ judgeSymbol(NDX.value) }}</view>
+          <view class="HSI">恒生指数{{ judgeSymbol(HSI.value) }}</view>
+          <view class="CN">上证指数{{ judgeSymbol(CN.value) }}</view>
           <image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
         </view>
         <view class="global_index">
@@ -64,10 +64,10 @@ const contentHeight = ref(0);
 const headerHeight = ref(0); // 动态计算的header高度
 const isWarnTextOverflow = ref(false); // warn文字是否溢出
 
-const INDU = ref({stockName: "道琼斯",stockCode: "INDU",value: ""});
-const NDX = ref({stockName: "纳斯达克",stockCode: "NDX",value: ""});
-const HSI = ref({stockName: "恒生指数",stockCode: "HSI",value: ""});
-const CN = ref({stockName: "上证指数",stockCode: "1A0001",value: ""});
+const INDU = ref({ stockName: "道琼斯", stockCode: "INDU", value: "" });
+const NDX = ref({ stockName: "纳斯达克", stockCode: "513300", value: "" });
+const HSI = ref({ stockName: "恒生指数", stockCode: "HSI", value: "" });
+const CN = ref({ stockName: "上证指数", stockCode: "1A0001", value: "" });
 
 const pageIndex = ref(0);
 const scrollToView = ref("");
@@ -86,6 +86,10 @@ const warnTextClass = computed(() => {
 
 const globalIndexArray = ref([]);
 
+const judgeSymbol = (num) => {
+  return num[0] === "-" ? num : "+" + num;
+};
+
 // 搜索输入事件
 const onSearchInput = (e) => {
   searchValue.value = e.detail.value;
@@ -369,6 +373,27 @@ const parseStockData = (message) => {
           changePercent: ((100 * (stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close)) / stockDataArray[item.stockCode][0].pre_close).toFixed(2) + "%",
           isRising: stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close >= 0,
         }));
+
+        if (stockDataArray[INDU.value.stockCode][0]) {
+          INDU.value.value = ((100 * (stockDataArray[INDU.value.stockCode][0].current_price - stockDataArray[INDU.value.stockCode][0].pre_close)) / stockDataArray[INDU.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("INDU不存在");
+        }
+        if (stockDataArray[NDX.value.stockCode][0]) {
+          NDX.value.value = ((100 * (stockDataArray[NDX.value.stockCode][0].current_price - stockDataArray[NDX.value.stockCode][0].pre_close)) / stockDataArray[NDX.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("NDX不存在");
+        }
+        if (stockDataArray[HSI.value.stockCode][0]) {
+          HSI.value.value = ((100 * (stockDataArray[HSI.value.stockCode][0].current_price - stockDataArray[HSI.value.stockCode][0].pre_close)) / stockDataArray[HSI.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("HSI不存在");
+        }
+        if (stockDataArray[CN.value.stockCode][0]) {
+          CN.value.value = ((100 * (stockDataArray[CN.value.stockCode][0].current_price - stockDataArray[CN.value.stockCode][0].pre_close)) / stockDataArray[CN.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("CN不存在");
+        }
       }
     } else if ((typeof message === "string" && message.includes('{"count')) || isMorePacket.batch_real_time) {
       if (typeof message === "string" && message.includes('{"count')) {
@@ -415,6 +440,27 @@ const parseStockData = (message) => {
           changePercent: ((100 * (stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close)) / stockDataArray[item.stockCode][0].pre_close).toFixed(2) + "%",
           isRising: stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close >= 0,
         }));
+
+        if (stockDataArray[INDU.value.stockCode][0]) {
+          INDU.value.value = ((100 * (stockDataArray[INDU.value.stockCode][0].current_price - stockDataArray[INDU.value.stockCode][0].pre_close)) / stockDataArray[INDU.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("INDU不存在");
+        }
+        if (stockDataArray[NDX.value.stockCode][0]) {
+          NDX.value.value = ((100 * (stockDataArray[NDX.value.stockCode][0].current_price - stockDataArray[NDX.value.stockCode][0].pre_close)) / stockDataArray[NDX.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("NDX不存在");
+        }
+        if (stockDataArray[HSI.value.stockCode][0]) {
+          HSI.value.value = ((100 * (stockDataArray[HSI.value.stockCode][0].current_price - stockDataArray[HSI.value.stockCode][0].pre_close)) / stockDataArray[HSI.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("HSI不存在");
+        }
+        if (stockDataArray[CN.value.stockCode][0]) {
+          CN.value.value = ((100 * (stockDataArray[CN.value.stockCode][0].current_price - stockDataArray[CN.value.stockCode][0].pre_close)) / stockDataArray[CN.value.stockCode][0].pre_close).toFixed(2) + "%";
+        } else {
+          console.log("CN不存在");
+        }
       }
     } else {
       // 没有通过JSON解析判断，说明不是需要的数据
@@ -906,8 +952,8 @@ watch(headerHeight, (newHeight) => {
 .global_index_title {
   margin-left: 20rpx;
   font-size: 40rpx;
-  font-weight: 100;
-  color: #333333;
+  font-weight: bold;
+  color: black;
   align-items: center;
 }
 

pages/marketSituation/marketSituation.vue

@@ -496,8 +496,8 @@ watch(headerHeight, (newHeight) => {
 }
 
 .scroll_indicator image {
-  width: 20rpx;
-  height: 20rpx;
+  width: 30rpx;
+  height: 30rpx;
   opacity: 0.5;
 }