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">
      <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.mainIndices" :key="i" class="index_item">
          <IndexCard :market="countryInfo.market" :indexName="index.name" :currentPrice="index.price" :changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" />
        </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">
      <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 sectors" :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">
      <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 stocks" :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 } from "vue";
import IndexCard from "../../components/IndexCard.vue";

// 子Tab与操作
// const marketTabs = ["全部", "美股", "纽交所", "纳斯达克"];
const activeTabIndex = ref(0);
const switchTab = (i) => {
  activeTabIndex.value = i;
};

// 今日情绪温度示例数据
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,
  },
});

// 国家/地区信息映射
const countryInfoMap = {
  2: {
    // 新加坡
    name: "新加坡",
    flag: "🇸🇬",
    isMarketOpen: true,
    mainIndices: [
      { name: "海峡时报指数", price: "3,234.56", change: "+12.34", changePercent: "+0.38%", isRising: true },
      { name: "FTSE ST Mid Cap", price: "1,234.56", change: "-5.67", changePercent: "-0.46%", isRising: false },
    ],
    hotStocks: [
      { name: "星展银行", code: "D05.SI", price: "35.20", change: "+0.15", isRising: true },
      { name: "华侨银行", code: "O39.SI", price: "13.45", change: "-0.05", isRising: false },
    ],
  },
  3: {
    // 马来西亚
    name: "马来西亚",
    flag: "🇲🇾",
    isMarketOpen: false,
    mainIndices: [{ name: "富时大马KLCI指数", price: "1,567.89", change: "+8.90", changePercent: "+0.57%", isRising: true }],
    hotStocks: [
      { name: "马来亚银行", code: "1155.KL", price: "9.85", change: "+0.10", isRising: true },
      { name: "大众银行", code: "1295.KL", price: "4.32", change: "-0.02", isRising: false },
    ],
  },
  4: {
    // 印度尼西亚
    name: "印度尼西亚",
    flag: "🇮🇩",
    isMarketOpen: true,
    mainIndices: [{ name: "雅加达综合指数", price: "7,234.56", change: "+45.67", changePercent: "+0.63%", isRising: true }],
    hotStocks: [],
  },
  5: {
    // 美国
    name: "美国",
    flag: "🇺🇸",
    isMarketOpen: false,
    mainIndices: [
      { name: "道琼斯", price: "45,757.90", change: "-125.22", changePercent: "-0.27%", isRising: false },
      { name: "纳斯达克", price: "22,333.96", change: "+125.22", changePercent: "+0.47%", isRising: true },
      { name: "标普500", price: "6,606.08", change: "+125.22", changePercent: "+0.27%", isRising: true },
    ],
    hotStocks: [
      { name: "苹果", code: "AAPL", price: "195.89", change: "+2.34", isRising: true },
      { name: "微软", code: "MSFT", price: "378.85", change: "-1.23", isRising: false },
    ],
  },
};

// 计算当前国家信息
const countryInfo = computed(() => {
  return (
    countryInfoMap[props.countryId] || {
      name: "未知地区",
      flag: "🌍",
      isMarketOpen: false,
      mainIndices: [],
      hotStocks: [],
    }
  );
});

// 计算当前国家的板块与股票
const sectors = computed(() => {
  return countryInfoMap[props.countryId]?.sectors || [];
});
const stocks = computed(() => {
  return countryInfoMap[props.countryId]?.stocks || [];
});

// 查看更多占位
const viewMore = (type) => {
  // 可根据 type 跳转到相应页面或加载更多
  // 例如：indices/sectors/stocks
  // uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
};
</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 {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  background-color: #f6f6f6;
}

/* 情绪温度 */
.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>