deepChartVueApp/pages/marketSituation/countryMarket.vue

<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 :flagIcon="countryInfo.flag" :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
	}
})

// 国家/地区信息映射
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>