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.
477 lines
9.6 KiB
477 lines
9.6 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" 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>
|