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.
493 lines
9.7 KiB
493 lines
9.7 KiB
<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>
|