You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
10 KiB
498 lines
10 KiB
<!-- @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>
|