deepChartVueApp/pages/marketSituation/countryMarket.vue

<!-- @format -->

<template>
  <view class="content">
    <!-- 市场子Tab -->
    <view class="sub_tabs">
      <view v-for="(tab, i) in marketTabs" :key="tab" :class="['tab_item', i === activeTabIndex ? 'active' : '']" @click="switchTab(i)">
        <text>{{ tab }}</text>
      </view>
    </view>

    <!-- 大盘指数 -->
    <view class="section" v-if="activeTabIndex === 0">
      <view class="section_header">
        <text class="section_title">大盘指数</text>
        <text class="section_action" @click="viewMore('indices')">查看更多 ></text>
      </view>
      <view class="indices_grid">
        <view v-for="(index, i) in countryInfo" :key="i" class="index_item">
          <IndexCard :market="index.market" :stockName="index.name" :currentPrice="index.price" :changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" @click="viewIndexDetail(index,i)"/>
        </view>
      </view>

      <!-- 今日市场情绪温度 -->
      <view class="sentiment">
        <view class="section_subtitle">
          <text>今日市场情绪温度</text>
        </view>
        <view class="meters">
          <view class="meter_item" v-for="(m, i) in sentimentMeters" :key="i">
            <image class="meter_icon" :class="m.theme" :src="selectIcons[m.theme]" mode="aspectFit"></image>
            <view class="meter_info">
              <text class="meter_value" :class="m.theme">{{ m.value }}°C</text>
              <text class="meter_label" :class="m.theme">{{ m.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 板块 -->
    <view class="section" v-if="activeTabIndex === 1">
      <view class="section_header">
        <text class="section_title">板块</text>
        <text class="section_action" @click="viewMore('sectors')">查看更多 ></text>
      </view>
      <view class="sectors_grid">
        <view v-for="(sec, i) in countryInfo" :key="i" class="sector_item">
          <view class="sector_header">
            <text class="sector_name">{{ sec.name }}</text>
            <text :class="['sector_change', sec.isRising ? 'rising' : 'falling']">
              {{ sec.change }}
            </text>
          </view>
          <view class="sector_price">{{ sec.price }}</view>
        </view>
      </view>
    </view>

    <!-- 股票 -->
    <view class="section" v-if="activeTabIndex === 2">
      <view class="section_header">
        <text class="section_title">股票</text>
        <text class="section_action" @click="viewMore('stocks')">查看更多 ></text>
      </view>
      <view class="table">
        <view class="table_header">
          <text class="cell name">名称</text>
          <text class="cell price">最新</text>
          <text class="cell change">涨幅</text>
        </view>
        <view class="table_row" v-for="(stk, i) in countryInfo" :key="i">
          <view class="cell name">
            <text class="stk_name">{{ stk.name }}</text>
            <text class="stk_code">{{ stk.code }}</text>
          </view>
          <view class="cell price">
            <text class="stk_price">{{ stk.price }}</text>
          </view>
          <view class="cell change">
            <text :class="['stk_change', stk.isRising ? 'rising' : 'falling']">
              {{ stk.change }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom_safe_area"></view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import IndexCard from "../../components/IndexCard.vue";
import { queryStockDataAPI } from "@/api/marketSituation/marketSituation";
import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
const marketSituationStore = useMarketSituationStore();

onMounted(() => {
  switchTab(0);
});

// 子Tab与操作
// const marketTabs = ["全部", "美股", "纽交所", "纳斯达克"];
const activeTabIndex = ref(0);
const switchTab = (i) => {
  activeTabIndex.value = i;
  queryStockDataAPI({
    parentId: props.countryId,
    tradeId: activeTabIndex.value+1,
  }).then((res) => {
    if (res.code === 200) {
      countryInfo.value = res.data.dataPage.records;
      marketSituationStore.countryMarketCardData = countryInfo.value.map((item) => ({
          market: item.market,
          stockCode: item.code,
          stockName: item.name,
        }));
	  console.log(res.data)
	  console.log(res.data.dataPage.records)
      console.log(countryInfo.value);
    }
  });
};

// 今日情绪温度示例数据
const sentimentMeters = [
  { value: 90, label: "道琼斯", theme: "hot" },
  { value: 60, label: "纳斯达克", theme: "warm" },
  { value: 20, label: "标普500", theme: "cool" },
];

// 图标映射
const selectIcons = {
  hot: "/static/marketSituation-image/hot.png",
  warm: "/static/marketSituation-image/warm.png",
  cool: "/static/marketSituation-image/cool.png",
};

// Props
const props = defineProps({
  countryId: {
    type: Number,
    required: true,
  },
  marketTabs: {
    type: Array,
  },
  tabData: {
    type: Object,
    default: null
  },
});

// 计算当前国家信息
const countryInfo = ref('')
// 方法：查看指数详情
const viewIndexDetail = (item, index) => {
  console.log("查看指数详情:", item);
  uni.navigateTo({
    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}&index=${index}&from=countryMarket`,
  });
};
// 处理从父组件接收的数据
const handleTabData = (tabData) => {
  if (tabData && tabData.type === 'country' && tabData.data) {
    if (tabData.data.dataPage && tabData.data.dataPage.records) {
      countryInfo.value = tabData.data.dataPage.records;
      marketSituationStore.countryMarketCardData = countryInfo.value.map((item) => ({
          market: item.market,
          stockCode: item.code,
          stockName: item.name,
        }));
      console.log('countryMarket接收到数据:', countryInfo.value);
    }
  }
};

// 监听tabData变化
watch(() => props.tabData, (newTabData) => {
  if (newTabData) {
    handleTabData(newTabData);
  }
}, { immediate: true });

// 查看更多占位
const viewMore = (type) => {
};
</script>

<style scoped>
.content {
  padding: 0 20rpx 20rpx 20rpx;
}

/* 子Tab */
.sub_tabs {
  display: flex;
  gap: 16rpx;
  padding: 0 20rpx 20rpx 20rpx;
}

.tab_item {
  padding: 6rpx 20rpx;
  border-radius: 5rpx;
  background: #f5f5f5;
  color: #666;
  font-size: 24rpx;
}

.tab_item.active {
  background: #ff4444;
  color: #fff;
}

.section {
  padding: 20rpx;
  border-radius: 16rpx;
}

.section_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.section_title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section_action {
  font-size: 24rpx;
  color: #999;
}

.indices_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 情绪温度 */
.sentiment {
  background-color: #f6f6f6;
  padding: 0 20rpx 20rpx 20rpx;
}

.section_subtitle {
  font-size: 24rpx;
  color: #000000;
  padding: 20rpx 0;
}

.meters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.meter_item {
  display: flex;
  align-items: center;
  /* padding: 10rpx; */
  background: #ffffff;
  border-radius: 12rpx;
}

.meter_item image {
  width: 100rpx;
  height: 100rpx;
}

.meter_info {
  display: flex;
  flex-direction: column;
}

.meter_value {
  font-size: 36rpx;
}

.meter_value.hot {
  color: #ff6b6b;
}

.meter_value.warm {
  color: #ffd166;
}

.meter_value.cool {
  color: #60a5fa;
}

.meter_label {
  font-size: 22rpx;
}

.meter_label.hot {
  color: #ff6b6b;
}

.meter_label.warm {
  color: #ffd166;
}

.meter_label.cool {
  color: #60a5fa;
}

/* 板块 */
.sectors_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.sector_item {
  background: #fafafa;
  border-radius: 12rpx;
  padding: 16rpx;
}

.sector_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.sector_name {
  font-size: 24rpx;
  color: #333;
}

.sector_change {
  font-size: 22rpx;
}

.sector_change.rising {
  color: #e74c3c;
}

.sector_change.falling {
  color: #27ae60;
}

.sector_price {
  font-size: 24rpx;
  color: #666;
}

/* 股票表 */
.table {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.table_header,
.table_row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 18rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.table_header {
  background: #fafafa;
}

.cell.name {
  display: flex;
  flex-direction: column;
}

.stk_name {
  font-size: 26rpx;
  color: #333;
}

.stk_code {
  font-size: 22rpx;
  color: #999;
}

.stk_price {
  font-size: 26rpx;
  color: #333;
}

.stk_change {
  font-size: 24rpx;
}

.stk_change.rising {
  color: #e74c3c;
}

.stk_change.falling {
  color: #27ae60;
}

.index_item {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.hot_stocks {
  margin-bottom: 30rpx;
}

.stocks_list {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.stock_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.stock_item:last-child {
  border-bottom: none;
}

.stock_info {
  flex: 1;
}

.stock_name {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.stock_code {
  font-size: 24rpx;
  color: #999;
}

.stock_price {
  text-align: right;
}

.price {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.change {
  font-size: 24rpx;
}

.change.rising {
  color: #e74c3c;
}

.change.falling {
  color: #27ae60;
}

.bottom_safe_area {
  height: 120rpx;
}
</style>