qimaohong
/
deepChartVueApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'hongxilin/feature-20251023103318-行情数据及页面' into milestone-20251031-简版功能开发

zhaowenkang/feature-20251028181547-行情页面
hongxilin 4 weeks ago
parent
bcb3e2d095 f24fd1d1ee
commit
19913c6393
18 changed files with 1856 additions and 1747 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      api/marketSituation/marketSituation.js
  2. 288
      components/IndexCard.vue
  3. 589
      pages/marketSituation/countryMarket.vue
  4. 842
      pages/marketSituation/globalIndex.vue
  5. 74
      pages/marketSituation/marketCondition.vue
  6. 697
      pages/marketSituation/marketDetail.vue
  7. 121
      pages/marketSituation/marketOverview.vue
  8. 844
      pages/marketSituation/marketSituation.vue
  9. BIN
      static/marketSituation-image/country-flag/can.png
  10. BIN
      static/marketSituation-image/country-flag/cn.png
  11. BIN
      static/marketSituation-image/country-flag/global.png
  12. BIN
      static/marketSituation-image/country-flag/hk.png
  13. BIN
      static/marketSituation-image/country-flag/my.png
  14. BIN
      static/marketSituation-image/country-flag/sg.png
  15. BIN
      static/marketSituation-image/country-flag/th.png
  16. BIN
      static/marketSituation-image/country-flag/us.png
  17. BIN
      static/marketSituation-image/country-flag/vi.png
  18. 78
      stores/modules/marketSituation.js

70
api/marketSituation/marketSituation.js
View File

@ -0,0 +1,70 @@
/** @format */
import { http } from "../../utils/http";
export const getData = () => {
return http({
method: "GET",
url: "/ka",
});
};
/**
* 获取全球指数
* POST /api/global/getGlobalIndex
*/
export const getGlobalIndexAPI = (data) => {
return http({
method: "POST",
url: "/api/global/getGlobalIndex",
data,
});
};
/**
* 获取地区分组列表
* POST /api/global/regionalGroup
*/
export const getRegionalGroupAPI = (data) => {
return http({
method: "POST",
url: "/api/global/regionalGroup",
data,
});
};
/**
* 获取地区详情
* POST /api/global/regionalGroupList
*/
export const getRegionalGroupListAPI = (data) => {
return http({
method: "POST",
url: "/api/global/regionalGroupList",
data,
});
};
/**
* 一次性查询所有Tab栏父子结构
* POST /api/homework/tab/getAll
*/
export const getAllTabsAPI = (data) => {
return http({
method: "POST",
url: "/api/homework/tab/getAll",
data,
});
};
/**
* 通用市场数据分页查询接口（默认1页20条）
* POST /api/market/data/page/query
*/
export const queryStockDataAPI = (data) => {
return http({
method: "POST",
url: "/api/market/data/page/query",
data,
});
};

288
components/IndexCard.vue
View File

@ -1,190 +1,220 @@
<!-- @format -->
<template>
<view class="index-card">
<view class="card-header">
<view class="flag-container">
<image :src="flagIcon" class="flag-icon" mode="aspectFit"></image>
</view>
<text class="index-name">{{ stockName }}</text>
</view>
<view class="price-info">
<text class="current-price" :style="{ color: priceColor }">{{ currentPrice }}</text>
<view class="change-info">
<text class="change-amount" :style="{ color: priceColor }">{{ changeAmount }}</text>
<text class="change-percent" :style="{ color: priceColor }">{{ changePercent }}</text>
</view>
</view>
<view class="chart-container">
<view class="mini-chart" :style="{ backgroundColor: chartBgColor }">
<!-- 这里可以放置实际的图表组件，目前用简单的波浪线表示 -->
<view class="chart-line" :style="{ borderColor: priceColor }"></view>
</view>
</view>
</view>
<view class="index-card">
<view class="card-header">
<view class="flag-container">
<image :src="getMarketFlag(market)" class="flag-icon" mode="aspectFit"></image>
</view>
<text class="index-name">{{ stockName }}</text>
</view>
<view class="price-info">
<text class="current-price" :style="{ color: priceColor }">{{ currentPrice }}</text>
<view class="change-info">
<text class="change-amount" :style="{ color: priceColor }">{{ changeAmount }}</text>
<text class="change-percent" :style="{ color: priceColor }">{{ changePercent }}</text>
</view>
</view>
<view class="chart-container">
<view class="mini-chart" :style="{ backgroundColor: chartBgColor }">
<!-- 这里可以放置实际的图表组件，目前用简单的波浪线表示 -->
<view class="chart-line" :style="{ borderColor: priceColor }"></view>
</view>
</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
import { computed } from "vue";
// 定义组件属性
const props = defineProps({
// 国旗图标路径
flagIcon: {
type: String,
required: true
},
// 指数名称
stockName: {
type: String,
required: true
},
// 当前价格
currentPrice: {
type: [String, Number],
required: true
},
// 涨跌金额
changeAmount: {
type: [String, Number],
required: true
},
// 涨跌幅
changePercent: {
type: [String, Number],
required: true
},
// 是否上涨
isRising: {
type: Boolean,
default: true
}
})
// 国旗图标路径
market: {
type: String,
required: true,
},
// 指数名称
stockName: {
type: String,
required: true,
},
// 当前价格
currentPrice: {
type: [String, Number],
required: true,
},
// 涨跌金额
changeAmount: {
type: [String, Number],
required: true,
},
// 涨跌幅
changePercent: {
type: [String, Number],
required: true,
},
// 是否上涨
isRising: {
type: Boolean,
default: true,
},
});
const getMarketFlag = (market) => {
console.log("market", market);
let imagePath;
if (market === "cn") {
imagePath = "/static/marketSituation-image/country-flag/cn.png";
} else if (market === "hk") {
imagePath = "/static/marketSituation-image/country-flag/hk.png";
} else if (market === "can") {
imagePath = "/static/marketSituation-image/country-flag/can.png";
} else if (market === "my") {
imagePath = "/static/marketSituation-image/country-flag/my.png";
} else if (market === "sg") {
imagePath = "/static/marketSituation-image/country-flag/sg.png";
} else if (market === "th") {
imagePath = "/static/marketSituation-image/country-flag/th.png";
} else if (market === "vi") {
imagePath = "/static/marketSituation-image/country-flag/vi.png";
} else if (market === "us" || market === "usa") {
imagePath = "/static/marketSituation-image/country-flag/us.png";
} else {
imagePath = "/static/marketSituation-image/country-flag/global.png";
}
console.log("返回的图片路径:", imagePath);
return imagePath;
};
// 计算价格颜色
const priceColor = computed(() => {
return props.isRising ? '#00C853' : '#FF1744'
})
return props.isRising ? "#00C853" : "#FF1744";
});
// 计算图表背景色
const chartBgColor = computed(() => {
return props.isRising ? '#E8F5E8' : '#FFEBEE'
})
return props.isRising ? "#E8F5E8" : "#FFEBEE";
});
</script>
<style scoped>
.index-card {
background-color: #ffffff;
border-radius: 12rpx;
padding: 20rpx;
margin: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
border: 1rpx solid #f0f0f0;
background-color: #ffffff;
border-radius: 12rpx;
padding: 20rpx;
margin: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
border: 1rpx solid #f0f0f0;
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.flag-container {
width: 48rpx;
height: 32rpx;
margin-right: 12rpx;
border-radius: 4rpx;
overflow: hidden;
width: 48rpx;
height: 32rpx;
margin-right: 12rpx;
border-radius: 4rpx;
overflow: hidden;
}
.flag-icon {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.index-name {
font-size: 28rpx;
font-weight: 500;
color: #333333;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 28rpx;
font-weight: 500;
color: #333333;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price-info {
margin-bottom: 20rpx;
margin-bottom: 20rpx;
}
.current-price {
font-size: 36rpx;
font-weight: bold;
display: block;
margin-bottom: 8rpx;
font-size: 36rpx;
font-weight: bold;
display: block;
margin-bottom: 8rpx;
}
.change-info {
display: flex;
align-items: center;
gap: 16rpx;
display: flex;
align-items: center;
gap: 16rpx;
}
.change-amount {
font-size: 24rpx;
font-weight: 500;
font-size: 24rpx;
font-weight: 500;
}
.change-percent {
font-size: 24rpx;
font-weight: 500;
font-size: 24rpx;
font-weight: 500;
}
.chart-container {
height: 80rpx;
border-radius: 8rpx;
overflow: hidden;
height: 80rpx;
border-radius: 8rpx;
overflow: hidden;
}
.mini-chart {
width: 100%;
height: 100%;
position: relative;
border-radius: 8rpx;
width: 100%;
height: 100%;
position: relative;
border-radius: 8rpx;
}
.chart-line {
position: absolute;
bottom: 20rpx;
left: 10rpx;
right: 10rpx;
height: 2rpx;
border-top: 2rpx solid;
border-style: solid;
position: absolute;
bottom: 20rpx;
left: 10rpx;
right: 10rpx;
height: 2rpx;
border-top: 2rpx solid;
border-style: solid;
}
/* 添加一些波浪效果 */
.chart-line::before {
content: '';
position: absolute;
top: -10rpx;
left: 20%;
width: 20rpx;
height: 20rpx;
border: 2rpx solid;
border-color: inherit;
border-radius: 50%;
background: transparent;
content: "";
position: absolute;
top: -10rpx;
left: 20%;
width: 20rpx;
height: 20rpx;
border: 2rpx solid;
border-color: inherit;
border-radius: 50%;
background: transparent;
}
.chart-line::after {
content: '';
position: absolute;
top: -6rpx;
right: 30%;
width: 12rpx;
height: 12rpx;
border: 2rpx solid;
border-color: inherit;
border-radius: 50%;
background: transparent;
content: "";
position: absolute;
top: -6rpx;
right: 30%;
width: 12rpx;
height: 12rpx;
border: 2rpx solid;
border-color: inherit;
border-radius: 50%;
background: transparent;
}
</style>
</style>

589
pages/marketSituation/countryMarket.vue
View File

@ -1,493 +1,498 @@
<!-- @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 :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>
<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'
import { ref, computed, onMounted } from "vue";
import IndexCard from "../../components/IndexCard.vue";
// 子Tab与操作
const marketTabs = ['全部', '美股', '纽交所', '纳斯达克']
const activeTabIndex = ref(0)
// const marketTabs = ["全部", "美股", "纽交所", "纳斯达克"];
const activeTabIndex = ref(0);
const switchTab = (i) => {
activeTabIndex.value = i
}
activeTabIndex.value = i;
};
// 今日情绪温度示例数据
const sentimentMeters = [
{ value: 90, label: '道琼斯', theme: 'hot' },
{ value: 60, label: '纳斯达克', theme: 'warm' },
{ value: 20, label: '标普500', theme: 'cool' }
]
{ 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'
}
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
}
})
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 }
]
}
}
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: []
}
})
return (
countryInfoMap[props.countryId] || {
name: "未知地区",
flag: "🌍",
isMarketOpen: false,
mainIndices: [],
hotStocks: [],
}
);
});
// 计算当前国家的板块与股票
const sectors = computed(() => {
return countryInfoMap[props.countryId]?.sectors || []
})
return countryInfoMap[props.countryId]?.sectors || [];
});
const stocks = computed(() => {
return countryInfoMap[props.countryId]?.stocks || []
})
return countryInfoMap[props.countryId]?.stocks || [];
});
// 查看更多占位
const viewMore = (type) => {
// 可根据 type 跳转到相应页面或加载更多
// 例如：indices/sectors/stocks
// uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
}
// 可根据 type 跳转到相应页面或加载更多
// 例如：indices/sectors/stocks
// uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
};
</script>
<style scoped>
.content {
padding: 0 20rpx 20rpx 20rpx;
padding: 0 20rpx 20rpx 20rpx;
}
/* 子Tab */
.sub_tabs {
display: flex;
gap: 16rpx;
padding: 0 20rpx 20rpx 20rpx;
display: flex;
gap: 16rpx;
padding: 0 20rpx 20rpx 20rpx;
}
.tab_item {
padding: 6rpx 20rpx;
border-radius: 5rpx;
background: #f5f5f5;
color: #666;
font-size: 24rpx;
padding: 6rpx 20rpx;
border-radius: 5rpx;
background: #f5f5f5;
color: #666;
font-size: 24rpx;
}
.tab_item.active {
background: #ff4444;
color: #fff;
background: #ff4444;
color: #fff;
}
.section {
padding: 20rpx;
border-radius: 16rpx;
padding: 20rpx;
border-radius: 16rpx;
}
.section_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.section_title {
font-size: 28rpx;
font-weight: bold;
color: #333;
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.section_action {
font-size: 24rpx;
color: #999;
font-size: 24rpx;
color: #999;
}
.indices_grid {
padding: 20rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
background-color: #F6F6F6;
padding: 20rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
background-color: #f6f6f6;
}
/* 情绪温度 */
.sentiment {
background-color: #F6F6F6;
padding: 0 20rpx 20rpx 20rpx;
background-color: #f6f6f6;
padding: 0 20rpx 20rpx 20rpx;
}
.section_subtitle {
font-size: 24rpx;
color: #000000;
padding: 20rpx 0;
font-size: 24rpx;
color: #000000;
padding: 20rpx 0;
}
.meters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
}
.meter_item {
display: flex;
align-items: center;
/* padding: 10rpx; */
background: #ffffff;
border-radius: 12rpx;
display: flex;
align-items: center;
/* padding: 10rpx; */
background: #ffffff;
border-radius: 12rpx;
}
.meter_item image {
width: 100rpx;
height: 100rpx;
width: 100rpx;
height: 100rpx;
}
.meter_info {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.meter_value {
font-size: 36rpx;
font-size: 36rpx;
}
.meter_value.hot {
color: #ff6b6b;
color: #ff6b6b;
}
.meter_value.warm {
color: #ffd166;
color: #ffd166;
}
.meter_value.cool {
color: #60a5fa;
color: #60a5fa;
}
.meter_label {
font-size: 22rpx;
font-size: 22rpx;
}
.meter_label.hot {
color: #ff6b6b;
color: #ff6b6b;
}
.meter_label.warm {
color: #ffd166;
color: #ffd166;
}
.meter_label.cool {
color: #60a5fa;
color: #60a5fa;
}
/* 板块 */
.sectors_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
}
.sector_item {
background: #fafafa;
border-radius: 12rpx;
padding: 16rpx;
background: #fafafa;
border-radius: 12rpx;
padding: 16rpx;
}
.sector_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
}
.sector_name {
font-size: 24rpx;
color: #333;
font-size: 24rpx;
color: #333;
}
.sector_change {
font-size: 22rpx;
font-size: 22rpx;
}
.sector_change.rising {
color: #e74c3c;
color: #e74c3c;
}
.sector_change.falling {
color: #27ae60;
color: #27ae60;
}
.sector_price {
font-size: 24rpx;
color: #666;
font-size: 24rpx;
color: #666;
}
/* 股票表 */
.table {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
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;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
padding: 18rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.table_header {
background: #fafafa;
background: #fafafa;
}
.cell.name {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.stk_name {
font-size: 26rpx;
color: #333;
font-size: 26rpx;
color: #333;
}
.stk_code {
font-size: 22rpx;
color: #999;
font-size: 22rpx;
color: #999;
}
.stk_price {
font-size: 26rpx;
color: #333;
font-size: 26rpx;
color: #333;
}
.stk_change {
font-size: 24rpx;
font-size: 24rpx;
}
.stk_change.rising {
color: #e74c3c;
color: #e74c3c;
}
.stk_change.falling {
color: #27ae60;
color: #27ae60;
}
.index_item {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
background: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.hot_stocks {
margin-bottom: 30rpx;
margin-bottom: 30rpx;
}
.stocks_list {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
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;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.stock_item:last-child {
border-bottom: none;
border-bottom: none;
}
.stock_info {
flex: 1;
flex: 1;
}
.stock_name {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.stock_code {
font-size: 24rpx;
color: #999;
font-size: 24rpx;
color: #999;
}
.stock_price {
text-align: right;
text-align: right;
}
.price {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.change {
font-size: 24rpx;
font-size: 24rpx;
}
.change.rising {
color: #e74c3c;
color: #e74c3c;
}
.change.falling {
color: #27ae60;
color: #27ae60;
}
.bottom_safe_area {
height: 120rpx;
height: 120rpx;
}
</style>
</style>

842
pages/marketSituation/globalIndex.vue
View File

@ -1,586 +1,566 @@
<!-- @format -->
<template>
<view class="main">
<!-- 固定头部 -->
<view class="header_fixed" :style="{ top: iSMT + 'px' }">
<view class="header_content">
<view class="header_back" @click="goBack">
<image src="/static/marketSituation-image/back.png" mode=""></image>
</view>
<view class="header_input_wrapper">
<image class="search_icon" src="/static/marketSituation-image/search.png" mode=""
@click="onSearchClick"></image>
<input class="header_input" type="text" placeholder="搜索"
placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue"
@input="onSearchInput" @confirm="onSearchConfirm" />
</view>
<view class="header_icons">
<view class="header_icon" @click="selected">
<image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
</view>
<view class="header_icon" @click="history">
<image src="/static/marketSituation-image/history.png" mode=""></image>
</view>
</view>
</view>
<view class="warn">
<image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
<view class="warn_text_container">
<text :class="warnTextClass">{{ $t('marketSituation.warn') }}</text>
</view>
</view>
<view class="main">
<!-- 固定头部 -->
<view class="header_fixed" :style="{ top: iSMT + 'px' }">
<view class="header_content">
<view class="header_back" @click="goBack">
<image src="/static/marketSituation-image/back.png" mode=""></image>
</view>
<!-- 内容区域 -->
<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
<!-- 亚太-中华 -->
<view class="market-section">
<view class="market-header">
<text class="market-title">亚太-中华</text>
<view class="market-more" @click="viewMore('asia-china')">
<text class="more-text">查看更多</text>
<text class="more-arrow">></text>
</view>
</view>
<view class="cards-grid-three">
<view v-for="(item, index) in asiachinaIndexes" :key="index" class="card-item">
<IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
:currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
:changePercent="item.changePercent" :isRising="item.isRising"
@click="viewIndexDetail(item)" />
</view>
</view>
</view>
<!-- 亚太 -->
<view class="market-section">
<view class="market-header">
<text class="market-title">亚太</text>
<view class="market-more" @click="viewMore('asia')">
<text class="more-text">查看更多</text>
<text class="more-arrow">></text>
</view>
</view>
<view class="cards-grid-three">
<view v-for="(item, index) in asiaIndexes" :key="index" class="card-item">
<IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
:currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
:changePercent="item.changePercent" :isRising="item.isRising"
@click="viewIndexDetail(item)" />
</view>
</view>
</view>
<!-- 美洲 -->
<view class="market-section">
<view class="market-header">
<text class="market-title">美洲</text>
<view class="market-more" @click="viewMore('america')">
<text class="more-text">查看更多</text>
<text class="more-arrow">></text>
</view>
</view>
<view class="cards-grid-three">
<view v-for="(item, index) in americaIndexes" :key="index" class="card-item">
<IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
:currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
:changePercent="item.changePercent" :isRising="item.isRising"
@click="viewIndexDetail(item)" />
</view>
</view>
</view>
<!-- 底部安全区域 -->
<view class="bottom-safe-area"></view>
</scroll-view>
<view class="header_input_wrapper">
<image class="search_icon" src="/static/marketSituation-image/search.png" mode="" @click="onSearchClick"></image>
<input class="header_input" type="text" placeholder="搜索" placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue" @input="onSearchInput" @confirm="onSearchConfirm" />
</view>
<view class="header_icons">
<view class="header_icon" @click="selected">
<image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
</view>
<view class="header_icon" @click="history">
<image src="/static/marketSituation-image/history.png" mode=""></image>
</view>
</view>
</view>
<view class="warn">
<image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
<view class="warn_text_container">
<text :class="warnTextClass">{{ $t("marketSituation.warn") }}</text>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<footerBar class="static-footer" :type="'marketSituation'"></footerBar>
<!-- 内容区域 -->
<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
<!-- 亚太-中华 -->
<view class="market-section" v-for="item in globalIndexArray" :key="item">
<view class="market-header">
<text class="market-title">{{ item.ac }}</text>
<view class="market-more" @click="viewMore(item.ac)">
<text class="more-text">查看更多</text>
<text class="more-arrow">></text>
</view>
</view>
<view class="cards-grid-three">
<view v-for="iitem in item.list" :key="iitem" class="card-item">
<IndexCard
:market="iitem.market"
:stockName="iitem.name"
:currentPrice="iitem.currentPrice"
:changeAmount="iitem.changeAmount"
:changePercent="iitem.changePercent"
:isRising="iitem.isRising"
@click="viewIndexDetail(iitem)"
/>
</view>
</view>
</view>
<!-- 底部安全区域 -->
<view class="bottom-safe-area"></view>
</scroll-view>
</view>
<!-- 底部导航栏 -->
<footerBar class="static-footer" :type="'marketSituation'"></footerBar>
</template>
<script setup>
import { ref, onMounted, computed, nextTick, watch } from 'vue'
import footerBar from '../../components/footerBar.vue'
import IndexCard from '../../components/IndexCard.vue'
import { ref, onMounted, computed, nextTick, watch } from "vue";
import footerBar from "../../components/footerBar.vue";
import IndexCard from "../../components/IndexCard.vue";
import { getRegionalGroupAPI } from "../../api/marketSituation/marketSituation.js";
// 响应式数据
const iSMT = ref(0) // 状态栏高度
const contentHeight = ref(0)
const headerHeight = ref(0) // 头部高度
const searchValue = ref('') // 搜索值
const isWarnTextOverflow = ref(false) // warn文字是否溢出
const iSMT = ref(0); // 状态栏高度
const contentHeight = ref(0);
const headerHeight = ref(0); // 头部高度
const searchValue = ref(""); // 搜索值
const isWarnTextOverflow = ref(false); // warn文字是否溢出
// warn文字的class计算属性
const warnTextClass = computed(() => {
return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text'
})
return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
});
// 检测warn文字是否溢出
const checkWarnTextOverflow = () => {
nextTick(() => {
setTimeout(() => {
const query = uni.createSelectorQuery()
// 同时查询容器和文字元素
query.select('.warn_text_container').boundingClientRect()
query.select('.warn_text').boundingClientRect()
query.exec((res) => {
const containerRect = res[0]
const textRect = res[1]
if (!containerRect || !textRect) {
return
}
// 判断文字是否超出容器（留一些余量）
const isOverflow = textRect.width > (containerRect.width - 10)
isWarnTextOverflow.value = isOverflow
})
}, 500)
})
}
nextTick(() => {
setTimeout(() => {
const query = uni.createSelectorQuery();
// 同时查询容器和文字元素
query.select(".warn_text_container").boundingClientRect();
query.select(".warn_text").boundingClientRect();
query.exec((res) => {
const containerRect = res[0];
const textRect = res[1];
if (!containerRect || !textRect) {
return;
}
// 判断文字是否超出容器（留一些余量）
const isOverflow = textRect.width > containerRect.width - 10;
isWarnTextOverflow.value = isOverflow;
});
}, 500);
});
};
const globalIndexArray = ref([]);
// 亚太-中华指数数据
const asiachinaIndexes = ref([
{
flagIcon: '/static/c1.png',
stockName: '上证指数',
stockCode:'noCode',
currentPrice: '3933.96',
changeAmount: '+24.32',
changePercent: '+0.62%',
isRising: true
},
{
flagIcon: '/static/c2.png',
stockName: '深证成指',
stockCode:'noCode',
currentPrice: '45757.90',
changeAmount: '-123.45',
changePercent: '-0.27%',
isRising: false
},
{
flagIcon: '/static/c3.png',
stockName: '创业板指',
stockCode:'noCode',
currentPrice: '6606.08',
changeAmount: '+89.76',
changePercent: '+1.38%',
isRising: true
},
{
flagIcon: '/static/c4.png',
stockName: 'HSI50',
stockCode:'noCode',
currentPrice: '22333.96',
changeAmount: '+156.78',
changePercent: '+0.71%',
isRising: true
},
{
flagIcon: '/static/c5.png',
stockName: '沪深300',
stockCode:'noCode',
currentPrice: '45757.90',
changeAmount: '-89.12',
changePercent: '-0.19%',
isRising: false
},
{
flagIcon: '/static/c6.png',
stockName: '上证50',
stockCode:'noCode',
currentPrice: '45757.90',
changeAmount: '+234.56',
changePercent: '+0.52%',
isRising: true
}
])
{
flagIcon: "/static/c1.png",
stockName: "上证指数",
stockCode: "noCode",
currentPrice: "3933.96",
changeAmount: "+24.32",
changePercent: "+0.62%",
isRising: true,
},
{
flagIcon: "/static/c2.png",
stockName: "深证成指",
stockCode: "noCode",
currentPrice: "45757.90",
changeAmount: "-123.45",
changePercent: "-0.27%",
isRising: false,
},
{
flagIcon: "/static/c3.png",
stockName: "创业板指",
stockCode: "noCode",
currentPrice: "6606.08",
changeAmount: "+89.76",
changePercent: "+1.38%",
isRising: true,
},
{
flagIcon: "/static/c4.png",
stockName: "HSI50",
stockCode: "noCode",
currentPrice: "22333.96",
changeAmount: "+156.78",
changePercent: "+0.71%",
isRising: true,
},
{
flagIcon: "/static/c5.png",
stockName: "沪深300",
stockCode: "noCode",
currentPrice: "45757.90",
changeAmount: "-89.12",
changePercent: "-0.19%",
isRising: false,
},
{
flagIcon: "/static/c6.png",
stockName: "上证50",
stockCode: "noCode",
currentPrice: "45757.90",
changeAmount: "+234.56",
changePercent: "+0.52%",
isRising: true,
},
]);
// 亚太指数数据
const asiaIndexes = ref([
{
flagIcon: '/static/c7.png',
stockName: '日经225',
stockCode:'noCode',
currentPrice: '28456.78',
changeAmount: '+234.56',
changePercent: '+0.83%',
isRising: true
},
{
flagIcon: '/static/c8.png',
stockName: '韩国KOSPI',
stockCode:'noCode',
currentPrice: '2567.89',
changeAmount: '-12.34',
changePercent: '-0.48%',
isRising: false
},
{
flagIcon: '/static/c9.png',
stockName: '印度孟买',
stockCode:'noCode',
currentPrice: '65432.10',
changeAmount: '+456.78',
changePercent: '+0.70%',
isRising: true
}
])
{
flagIcon: "/static/c7.png",
stockName: "日经225",
stockCode: "noCode",
currentPrice: "28456.78",
changeAmount: "+234.56",
changePercent: "+0.83%",
isRising: true,
},
{
flagIcon: "/static/c8.png",
stockName: "韩国KOSPI",
stockCode: "noCode",
currentPrice: "2567.89",
changeAmount: "-12.34",
changePercent: "-0.48%",
isRising: false,
},
{
flagIcon: "/static/c9.png",
stockName: "印度孟买",
stockCode: "noCode",
currentPrice: "65432.10",
changeAmount: "+456.78",
changePercent: "+0.70%",
isRising: true,
},
]);
// 美洲指数数据
const americaIndexes = ref([
{
flagIcon: '/static/c7.png',
stockName: '道琼斯指数',
stockCode:'noCode',
currentPrice: '34567.89',
changeAmount: '+123.45',
changePercent: '+0.36%',
isRising: true
},
{
flagIcon: '/static/c8.png',
stockName: '纳斯达克',
stockCode:'noCode',
currentPrice: '13456.78',
changeAmount: '-67.89',
changePercent: '-0.50%',
isRising: false
},
{
flagIcon: '/static/c9.png',
stockName: '标普500',
stockCode:'noCode',
currentPrice: '4234.56',
changeAmount: '+23.45',
changePercent: '+0.56%',
isRising: true
}
])
{
flagIcon: "/static/c7.png",
stockName: "道琼斯指数",
stockCode: "noCode",
currentPrice: "34567.89",
changeAmount: "+123.45",
changePercent: "+0.36%",
isRising: true,
},
{
flagIcon: "/static/c8.png",
stockName: "纳斯达克",
stockCode: "noCode",
currentPrice: "13456.78",
changeAmount: "-67.89",
changePercent: "-0.50%",
isRising: false,
},
{
flagIcon: "/static/c9.png",
stockName: "标普500",
stockCode: "noCode",
currentPrice: "4234.56",
changeAmount: "+23.45",
changePercent: "+0.56%",
isRising: true,
},
]);
// 计算属性：内容区域顶部位置
const contentTopPosition = computed(() => {
const statusBarHeight = iSMT.value || 0
const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100
return statusBarHeight + currentHeaderHeight
})
const statusBarHeight = iSMT.value || 0;
const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100;
return statusBarHeight + currentHeaderHeight;
});
// 方法：返回上一页
const goBack = () => {
uni.navigateBack()
}
uni.navigateBack();
};
// 方法：搜索输入
const onSearchInput = (e) => {
searchValue.value = e.detail.value
}
searchValue.value = e.detail.value;
};
// 方法：清除搜索
const clearSearch = () => {
searchValue.value = ''
}
searchValue.value = "";
};
// 方法：查看更多
const viewMore = (market) => {
console.log('查看更多:', market)
uni.navigateTo({
url: `/pages/marketSituation/marketDetail?market=${market}`
})
}
console.log("查看更多:", market);
uni.navigateTo({
url: `/pages/marketSituation/marketDetail?market=${market}`,
});
};
// 方法：查看指数详情
const viewIndexDetail = (item) => {
console.log('查看指数详情:', item.stockName)
// uni.showToast({
// title: `查看 ${item.stockName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`
})
}
console.log("查看指数详情:", item.stockName);
// uni.showToast({
// title: `查看 ${item.stockName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
});
};
const getRegionalGroup = async () => {
try {
const result = await getRegionalGroupAPI();
globalIndexArray.value = result.data;
} catch (e) {
console.log("获取区域指数失败", e);
}
};
// 生命周期：页面挂载
onMounted(() => {
// 获取系统信息
const systemInfo = uni.getSystemInfoSync()
iSMT.value = systemInfo.statusBarHeight || 0
console.log('全球指数页面加载完成')
// 动态计算header实际高度
uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
if (rect) {
headerHeight.value = rect.height
console.log('Header实际高度:', headerHeight.value, 'px')
}
}).exec()
// 检测warn文字是否溢出
checkWarnTextOverflow()
})
onMounted(async () => {
await getRegionalGroup();
// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
iSMT.value = systemInfo.statusBarHeight || 0;
console.log("全球指数页面加载完成");
// 动态计算header实际高度
uni
.createSelectorQuery()
.select(".header_fixed")
.boundingClientRect((rect) => {
if (rect) {
headerHeight.value = rect.height;
console.log("Header实际高度:", headerHeight.value, "px");
}
})
.exec();
// 检测warn文字是否溢出
checkWarnTextOverflow();
});
// 监听headerHeight变化，重新计算contentHeight
watch(headerHeight, (newHeight) => {
if (newHeight > 0) {
const systemInfo = uni.getSystemInfoSync()
const windowHeight = systemInfo.windowHeight
const statusBarHeight = systemInfo.statusBarHeight || 0
const footerHeight = 100
contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
console.log('重新计算contentHeight:', contentHeight.value)
}
})
if (newHeight > 0) {
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
const statusBarHeight = systemInfo.statusBarHeight || 0;
const footerHeight = 100;
contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
console.log("重新计算contentHeight:", contentHeight.value);
}
});
</script>
<style lang="scss" scoped>
.main {
position: relative;
height: 100vh;
overflow: hidden;
background-color: #f5f5f5;
position: relative;
height: 100vh;
overflow: hidden;
background-color: #f5f5f5;
}
/* 状态栏占位 */
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
background-color: #ffffff;
}
/* 固定头部样式 */
.header_fixed {
position: fixed;
left: 0;
right: 0;
z-index: 1000;
background-color: #ffffff;
padding: 20rpx 0 0 0;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
position: fixed;
left: 0;
right: 0;
z-index: 1000;
background-color: #ffffff;
padding: 20rpx 0 0 0;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.header_content {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
padding: 0 20rpx;
margin-bottom: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
padding: 0 20rpx;
margin-bottom: 10rpx;
}
.header_back {
margin-right: 20rpx;
width: 25rpx;
height: 30rpx;
margin-right: 20rpx;
width: 25rpx;
height: 30rpx;
}
.header_back image {
width: 25rpx;
height: 30rpx;
width: 25rpx;
height: 30rpx;
}
.header_input_wrapper {
display: flex;
align-items: center;
width: 100%;
margin: 0 20rpx 0 0;
height: 70rpx;
border-radius: 35rpx;
background-color: #ffffff;
border: 1rpx solid #e9ecef;
padding: 0 80rpx 0 30rpx;
font-size: 28rpx;
color: #5c5c5c;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
width: 100%;
margin: 0 20rpx 0 0;
height: 70rpx;
border-radius: 35rpx;
background-color: #ffffff;
border: 1rpx solid #e9ecef;
padding: 0 80rpx 0 30rpx;
font-size: 28rpx;
color: #5c5c5c;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.search_icon {
width: 40rpx;
height: 40rpx;
opacity: 0.6;
width: 40rpx;
height: 40rpx;
opacity: 0.6;
}
.header_input {
margin-left: 10rpx;
margin-left: 10rpx;
}
.header_icons {
display: flex;
align-items: center;
gap: 15rpx;
display: flex;
align-items: center;
gap: 15rpx;
}
.header_icon {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.header_icon image {
width: 40rpx;
height: 40rpx;
width: 40rpx;
height: 40rpx;
}
.warn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10rpx;
font-size: 28rpx;
color: #666666;
padding: 20rpx;
max-width: 100%;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10rpx;
font-size: 28rpx;
color: #666666;
padding: 20rpx;
max-width: 100%;
overflow: hidden;
position: relative;
}
.warn image {
width: 40rpx;
height: 40rpx;
flex-shrink: 0;
/* 防止图片被压缩 */
position: relative;
z-index: 2;
/* 确保图片在最上层 */
width: 40rpx;
height: 40rpx;
flex-shrink: 0;
/* 防止图片被压缩 */
position: relative;
z-index: 2;
/* 确保图片在最上层 */
}
.warn_text_container {
flex: 1;
overflow: hidden;
position: relative;
min-width: 0;
/* 允许容器收缩 */
flex: 1;
overflow: hidden;
position: relative;
min-width: 0;
/* 允许容器收缩 */
}
.warn_text {
display: block;
white-space: nowrap;
will-change: transform;
/* 优化动画性能 */
display: block;
white-space: nowrap;
will-change: transform;
/* 优化动画性能 */
}
/* 文字滚动动画 */
@keyframes scrollText {
0% {
transform: translateX(0);
}
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
80% {
transform: translateX(-85%);
}
80% {
transform: translateX(-85%);
}
100% {
transform: translateX(-85%);
}
100% {
transform: translateX(-85%);
}
}
/* 当文字超长时启用滚动动画 */
.warn_text.scroll-active {
animation: scrollText 12s linear infinite;
animation-delay: 2s;
/* 延迟2秒开始滚动，让用户先看到开头 */
animation: scrollText 12s linear infinite;
animation-delay: 2s;
/* 延迟2秒开始滚动，让用户先看到开头 */
}
/* 内容区域 */
.content {
position: fixed;
left: 0;
right: 0;
bottom: 120rpx;
background-color: #f5f5f5;
padding: 0;
position: fixed;
left: 0;
right: 0;
bottom: 120rpx;
background-color: #f5f5f5;
padding: 0;
}
/* 市场分组 */
.market-section {
background-color: white;
border-radius: 20rpx;
background-color: white;
border-radius: 20rpx;
}
.market-header {
margin: 20rpx 20rpx 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
padding-bottom: 10rpx;
border-bottom: 2rpx solid #f0f0f0;
margin: 20rpx 20rpx 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
padding-bottom: 10rpx;
border-bottom: 2rpx solid #f0f0f0;
}
.market-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.market-more {
display: flex;
align-items: center;
gap: 8rpx;
display: flex;
align-items: center;
gap: 8rpx;
}
.more-text {
font-size: 24rpx;
color: #666;
font-size: 24rpx;
color: #666;
}
.more-arrow {
font-size: 20rpx;
color: #666;
font-weight: bold;
font-size: 20rpx;
color: #666;
font-weight: bold;
}
/* 三列卡片网格 */
.cards-grid-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card-item {
background-color: white;
border-radius: 16rpx;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
background-color: white;
border-radius: 16rpx;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-item:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}
/* 底部安全区域 */
.bottom-safe-area {
height: 40rpx;
background-color: transparent;
height: 40rpx;
background-color: transparent;
}
/* 底部导航栏 */
.static-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
/* 响应式设计 */
@media (max-width: 400rpx) {
.cards-grid-three {
grid-template-columns: repeat(2, 1fr);
}
.cards-grid-three {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</style>

74
pages/marketSituation/marketCondition.vue
View File

@ -8,12 +8,12 @@
<view class="title">
<image class="back-homepage-btn" src="/static/marketSituation-image/back.png" mode="返回按钮" @click="backToHomepage()"> </image>
<view class="mid-title">
<view class="arrow-left"> </view>
<view class="arrow-left" @click="toLeftPage()"> </view>
<view class="stock-id">
<view class="stock-name"> {{ stockInformation.stockName }} </view>
<view class="stock-code"> {{ stockInformation.stockCode }} </view>
</view>
<view class="arrow-right"> </view>
<view class="arrow-right" @click="toRightPage()"> </view>
</view>
<image class="search" src="/static/marketSituation-image/search.png" mode="搜索" @click="search()"> </image>
<view class="more" @click="getMore()">···</view>
@ -240,6 +240,10 @@ const tcpConnected = ref(false);
const connectionListener = ref(null);
const messageListener = ref(null);
// 股票来源
const currentStockFrom = ref();
// 当前股票位置
const currentStockIndex = ref(-1);
// 股票信息栏变量
const stockInformation = ref({
stockName: "----", //股票名称
@ -511,6 +515,35 @@ const backToHomepage = () => {
}
};
const toLeftPage = () => {
if(currentStockFrom.value == "marketOverview"){
return;
}
if (currentStockIndex.value > 0) {
currentStockIndex.value--;
// updateStockInformation();
} else {
uni.showToast({
title: "没有更多股票了",
icon: "none",
duration: 1000,
});
}
};
const toRightPage = () => {
if (currentStockIndex.value < stockList.length - 1) {
currentStockIndex.value++;
// updateStockInformation();
} else {
uni.showToast({
title: "没有更多股票了",
icon: "none",
duration: 1000,
});
}
};
const openStockDetail = () => {
isStockDetail.value = true;
};
@ -2136,10 +2169,10 @@ const startAddDataTimer = () => {
onLoad((options) => {
console.log("页面接收到的参数：", options);
// 处理通过data参数传递的复杂对象
if (options.data) {
// 处理通过stockInformation参数传递的复杂对象
if (options.stockInformation) {
try {
const stockData = JSON.parse(decodeURIComponent(options.data));
const stockData = JSON.parse(decodeURIComponent(options.stockInformation));
console.log("解析的股票数据：", stockData);
// 更新stockInformation
@ -2152,30 +2185,17 @@ onLoad((options) => {
}
}
// 处理通过stockInformation参数传递的数据（兼容globalIndex.vue的传参方式）
if (options.stockInformation) {
try {
const stockData = JSON.parse(decodeURIComponent(options.stockInformation));
console.log("解析的股票信息：", stockData);
// 更新stockInformation
if (stockData) {
stockInformation.value = {
...stockInformation.value,
...stockData,
};
}
} catch (error) {
console.error("解析股票信息失败：", error);
}
// 处理index参数（股票在列表中的位置）
if (options.index !== undefined) {
const stockIndex = parseInt(options.index);
console.log("股票在列表中的索引：", stockIndex);
// 将index保存到响应式变量中，用于后续的左右切换功能
currentStockIndex.value = stockIndex;
}
// 处理简单参数
if (options.stockCode) {
stockInformation.value.stockCode = options.stockCode;
}
if (options.stockName) {
stockInformation.value.stockName = decodeURIComponent(options.stockName);
// 处理stockFrom参数（股票来源）
if (options.stockFrom) {
currentStockFrom.value = options.stockFrom;
}
});

697
pages/marketSituation/marketDetail.vue
View File

@ -1,481 +1,478 @@
<!-- @format -->
<template>
<view class="main">
<!-- 自定义导航栏 -->
<view class="header_fixed" :style="{ top: iSMT + 'px' }">
<view class="header-content">
<view class="header-left" @click="goBack">
<text class="back-text">‹</text>
</view>
<view class="header-center">
<text class="header-title">{{ marketTitle }}</text>
</view>
<view class="header-right">
<image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
<text class="more-text">···</text>
</view>
</view>
<!-- 表头 -->
<view class="table-header">
<view class="header-item name-column">
<text class="header-text">名称</text>
</view>
<view class="header-item price-column" @click="sortByPrice">
<text class="header-text">最新</text>
<text class="sort-icon">{{ sortType === 'price' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
</view>
<view class="header-item change-column" @click="sortByChange">
<text class="header-text">涨幅</text>
<text class="sort-icon">{{ sortType === 'change' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
</view>
</view>
</view>
<!-- 内容区域 -->
<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
<!-- 股票列表 -->
<view class="stock-list">
<view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index"
@click="viewIndexDetail(stock)">
<view class="stock-cell name-column">
<view class="stock-name">{{ stock.stockName }}</view>
<view class="stock-code">{{ stock.stockCode }}</view>
</view>
<view class="stock-cell price-column">
<text class="stock-price"
:class="stock.isRising ? 'rising' : 'falling'">
{{ typeof stock.price === 'number' ? stock.price.toFixed(2) : stock.price }}
</text>
</view>
<view class="stock-cell change-column">
<text class="stock-change"
:class="stock.isRising ? 'rising' : 'falling'">
{{ stock.change || stock.changePercent }}
</text>
</view>
</view>
</view>
<!-- 底部安全区域 -->
<!-- <view class="bottom-safe-area"></view> -->
</scroll-view>
</view>
<!-- 底部导航栏 -->
<!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
<view class="main">
<!-- 自定义导航栏 -->
<view class="header_fixed" :style="{ top: iSMT + 'px' }">
<view class="header-content">
<view class="header-left" @click="goBack">
<text class="back-text">‹</text>
</view>
<view class="header-center">
<text class="header-title">{{ marketTitle }}</text>
</view>
<view class="header-right">
<image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
<text class="more-text">···</text>
</view>
</view>
<!-- 表头 -->
<view class="table-header">
<view class="header-item name-column">
<text class="header-text">名称</text>
</view>
<view class="header-item price-column" @click="sortByPrice">
<text class="header-text">最新</text>
<text class="sort-icon">{{ sortType === "price" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
</view>
<view class="header-item change-column" @click="sortByChange">
<text class="header-text">涨幅</text>
<text class="sort-icon">{{ sortType === "change" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
</view>
</view>
</view>
<!-- 内容区域 -->
<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
<!-- 股票列表 -->
<view class="stock-list">
<view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index" @click="viewIndexDetail(stock)">
<view class="stock-cell name-column">
<view class="stock-name">{{ stock.stockName }}</view>
<view class="stock-code">{{ stock.stockCode }}</view>
</view>
<view class="stock-cell price-column">
<text class="stock-price" :class="stock.isRising ? 'rising' : 'falling'">
{{ typeof stock.price === "number" ? stock.price.toFixed(2) : stock.price }}
</text>
</view>
<view class="stock-cell change-column">
<text class="stock-change" :class="stock.isRising ? 'rising' : 'falling'">
{{ stock.change || stock.changePercent }}
</text>
</view>
</view>
</view>
<!-- 底部安全区域 -->
<!-- <view class="bottom-safe-area"></view> -->
</scroll-view>
</view>
<!-- 底部导航栏 -->
<!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import footerBar from '@/components/footerBar.vue'
import { ref, computed, onMounted, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import footerBar from "@/components/footerBar.vue";
import { getRegionalGroupListAPI } from "../../api/marketSituation/marketSituation.js";
// 响应式数据
const iSMT = ref(0)
const contentHeight = ref(0)
const headerHeight = ref(80)
const marketType = ref('america')
const marketTitle = ref('美洲')
const sortType = ref('') // 排序类型：'price' 或 'change'
const sortOrder = ref('desc') // 排序顺序：'asc' 或 'desc'
const iSMT = ref(0);
const contentHeight = ref(0);
const headerHeight = ref(80);
const marketTitle = ref();
const sortType = ref(""); // 排序类型：'price' 或 'change'
const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'
// 股票数据
const stockList = ref([
{
stockName: 'Telecommunication',
stockCode: '888607',
price: 1349.47,
change: '+7.67%',
isRising: true
},
{
stockName: 'Other',
stockCode: '888607',
price: 1349.47,
change: '+6.67%',
isRising: true
},
{
stockName: 'Consumer Discretio...',
stockCode: '888610',
price: 1349.47,
change: '+5.67%',
isRising: true
},
{
stockName: 'Telecommunication',
stockCode: '888607',
price: 1349.47,
change: '+4.67%',
isRising: true
},
{
stockName: 'Other',
stockCode: '888611',
price: 1359.47,
change: '+3.67%',
isRising: true
},
{
stockName: 'Consumer Discretio...',
stockCode: '888610',
price: 1349.47,
change: '+2.67%',
isRising: true
},
{
stockName: 'Telecommunication',
stockCode: '888607',
price: 1349.47,
change: '+1.67%',
isRising: true
},
{
stockName: 'Other',
stockCode: '888611',
price: 1009.98,
change: '-1.67%',
isRising: false
},
{
stockName: 'Consumer Discretio...',
stockCode: '888610',
price: 1009.98,
change: '-0.67%',
isRising: false
},
{
stockName: 'Telecommunication',
stockCode: '888607',
price: 1009.98,
change: '-0.67%',
isRising: false
},
{
stockName: 'Other',
stockCode: '888611',
price: 1009.98,
change: '-1.67%',
isRising: false
},
{
stockName: 'Consumer Discretio...',
stockCode: '888610',
price: 1009.98,
change: '-4.67%',
isRising: false
},
{
stockName: 'Consumer Discretio...',
stockCode: '888610',
price: 1009.98,
change: '-3.67%',
isRising: false
},
{
stockName: 'Consumer Discretio...',
stockCode: '888610',
price: 1009.98,
change: '-3.67%',
isRising: false
}
])
{
stockName: "Telecommunication",
stockCode: "888607",
price: 1349.47,
change: "+7.67%",
isRising: true,
},
{
stockName: "Other",
stockCode: "888607",
price: 1349.47,
change: "+6.67%",
isRising: true,
},
{
stockName: "Consumer Discretio...",
stockCode: "888610",
price: 1349.47,
change: "+5.67%",
isRising: true,
},
{
stockName: "Telecommunication",
stockCode: "888607",
price: 1349.47,
change: "+4.67%",
isRising: true,
},
{
stockName: "Other",
stockCode: "888611",
price: 1359.47,
change: "+3.67%",
isRising: true,
},
{
stockName: "Consumer Discretio...",
stockCode: "888610",
price: 1349.47,
change: "+2.67%",
isRising: true,
},
{
stockName: "Telecommunication",
stockCode: "888607",
price: 1349.47,
change: "+1.67%",
isRising: true,
},
{
stockName: "Other",
stockCode: "888611",
price: 1009.98,
change: "-1.67%",
isRising: false,
},
{
stockName: "Consumer Discretio...",
stockCode: "888610",
price: 1009.98,
change: "-0.67%",
isRising: false,
},
{
stockName: "Telecommunication",
stockCode: "888607",
price: 1009.98,
change: "-0.67%",
isRising: false,
},
{
stockName: "Other",
stockCode: "888611",
price: 1009.98,
change: "-1.67%",
isRising: false,
},
{
stockName: "Consumer Discretio...",
stockCode: "888610",
price: 1009.98,
change: "-4.67%",
isRising: false,
},
{
stockName: "Consumer Discretio...",
stockCode: "888610",
price: 1009.98,
change: "-3.67%",
isRising: false,
},
{
stockName: "Consumer Discretio...",
stockCode: "888610",
price: 1009.98,
change: "-3.67%",
isRising: false,
},
]);
// 计算属性
const contentTopPosition = computed(() => {
return iSMT.value + headerHeight.value
})
return iSMT.value + headerHeight.value;
});
const sortedStockList = computed(() => {
console.log('计算sortedStockList，原始数据长度:', stockList.value.length);
let list = [...stockList.value]
if (sortType.value === 'price') {
list.sort((a, b) => {
return sortOrder.value === 'asc' ? a.price - b.price : b.price - a.price
})
} else if (sortType.value === 'change') {
list.sort((a, b) => {
const aChange = parseFloat(a.change.replace(/[+%-]/g, ''))
const bChange = parseFloat(b.change.replace(/[+%-]/g, ''))
return sortOrder.value === 'asc' ? aChange - bChange : bChange - aChange
})
}
console.log('排序后数据长度:', list.length);
return list
})
console.log("计算sortedStockList，原始数据长度:", stockList.value.length);
let list = [...stockList.value];
if (sortType.value === "price") {
list.sort((a, b) => {
return sortOrder.value === "asc" ? a.price - b.price : b.price - a.price;
});
} else if (sortType.value === "change") {
list.sort((a, b) => {
const aChange = parseFloat(a.change.replace(/[+%-]/g, ""));
const bChange = parseFloat(b.change.replace(/[+%-]/g, ""));
return sortOrder.value === "asc" ? aChange - bChange : bChange - aChange;
});
}
console.log("排序后数据长度:", list.length);
return list;
});
const getRegionalGroupList = async () => {
try {
const result = await getRegionalGroupListAPI({
market: marketTitle.value,
});
} catch (e) {
console.error("获取区域分组列表失败:", e);
}
};
// 页面加载时接收参数
onLoad((options) => {
if (options && options.market) {
marketType.value = options.market
switch (options.market) {
case 'america':
marketTitle.value = '美洲'
break
case 'asia':
marketTitle.value = '亚太'
break
case 'asia-china':
marketTitle.value = '亚太-中华'
break
default:
marketTitle.value = '全球指数'
}
}
})
if (options && options.market) {
marketTitle.value = options.market;
}
});
// 方法
const goBack = () => {
uni.navigateBack()
}
uni.navigateBack();
};
// 方法：查看指数详情
const viewIndexDetail = (item) => {
console.log('查看指数详情:', item.stockName)
// uni.showToast({
// title: `查看 ${item.stockName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`
})
}
console.log("查看指数详情:", item.stockName);
// uni.showToast({
// title: `查看 ${item.stockName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
});
};
const sortByPrice = () => {
if (sortType.value === 'price') {
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
} else {
sortType.value = 'price'
sortOrder.value = 'desc'
}
}
if (sortType.value === "price") {
sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
} else {
sortType.value = "price";
sortOrder.value = "desc";
}
};
const sortByChange = () => {
if (sortType.value === 'change') {
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
} else {
sortType.value = 'change'
sortOrder.value = 'desc'
}
}
if (sortType.value === "change") {
sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
} else {
sortType.value = "change";
sortOrder.value = "desc";
}
};
onMounted(() => {
// 获取状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
// 动态计算header实际高度
uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
if (rect) {
headerHeight.value = rect.height
console.log('Header实际高度:', headerHeight.value, 'px')
}
}).exec()
})
// 获取状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
// 动态计算header实际高度
uni
.createSelectorQuery()
.select(".header_fixed")
.boundingClientRect((rect) => {
if (rect) {
headerHeight.value = rect.height;
console.log("Header实际高度:", headerHeight.value, "px");
}
})
.exec();
});
// 监听headerHeight变化，重新计算contentHeight
watch(headerHeight, (newHeight) => {
if (newHeight > 0) {
const systemInfo = uni.getSystemInfoSync()
const windowHeight = systemInfo.windowHeight
const statusBarHeight = systemInfo.statusBarHeight || 0
const footerHeight = 100
contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
console.log('重新计算contentHeight:', contentHeight.value)
}
})
if (newHeight > 0) {
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
const statusBarHeight = systemInfo.statusBarHeight || 0;
const footerHeight = 100;
contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
console.log("重新计算contentHeight:", contentHeight.value);
}
});
</script>
<style scoped>
.main {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
position: relative;
width: 100%;
height: 100vh;
background-color: #f5f5f5;
position: relative;
}
/* 自定义导航栏 */
.header_fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: #ffffff;
border-bottom: 1px solid #f0f0f0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: #ffffff;
border-bottom: 1px solid #f0f0f0;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 15px;
}
.header-left,
.header-right {
width: 60px;
display: flex;
align-items: center;
width: 60px;
display: flex;
align-items: center;
}
.header-left {
justify-content: flex-start;
justify-content: flex-start;
}
.header-right {
justify-content: flex-end;
gap: 10px;
justify-content: flex-end;
gap: 10px;
}
.back-text {
font-size: 24px;
color: #333333;
font-weight: 500;
line-height: 1;
font-size: 24px;
color: #333333;
font-weight: 500;
line-height: 1;
}
.header-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.header-title {
font-size: 18px;
font-weight: 600;
color: #333333;
font-size: 18px;
font-weight: 600;
color: #333333;
}
.header-icon {
width: 20px;
height: 20px;
width: 20px;
height: 20px;
}
.more-text {
font-size: 20px;
color: #666666;
font-weight: bold;
font-size: 20px;
color: #666666;
font-weight: bold;
}
/* 内容区域 */
.content {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
}
/* 表头样式 */
.table-header {
display: flex;
padding: 12px 15px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
display: flex;
padding: 12px 15px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.header-item {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.header-item.name-column {
flex: 2;
justify-content: flex-start;
flex: 2;
justify-content: flex-start;
}
.header-item.price-column,
.header-item.change-column {
flex: 1;
justify-content: center;
flex: 1;
justify-content: center;
}
.header-text {
font-size: 14px;
color: #666666;
font-weight: 500;
font-size: 14px;
color: #666666;
font-weight: 500;
}
.sort-icon {
margin-left: 4px;
font-size: 12px;
color: #999999;
margin-left: 4px;
font-size: 12px;
color: #999999;
}
/* 股票列表 */
.stock-list {
background-color: #ffffff;
background-color: #ffffff;
}
.stock-row {
display: flex;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f5f5f5;
display: flex;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f5f5f5;
}
.stock-row:active {
background-color: #f8f8f8;
background-color: #f8f8f8;
}
.stock-cell {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.stock-cell.name-column {
flex: 2;
align-items: flex-start;
flex: 2;
align-items: flex-start;
}
.stock-cell.price-column,
.stock-cell.change-column {
flex: 1;
align-items: center;
flex: 1;
align-items: center;
}
.stock-name {
font-size: 15px;
color: #333333;
font-weight: 500;
line-height: 1.2;
margin-bottom: 2px;
font-size: 15px;
color: #333333;
font-weight: 500;
line-height: 1.2;
margin-bottom: 2px;
}
.stock-code {
font-size: 11px;
color: #999999;
line-height: 1.2;
font-size: 11px;
color: #999999;
line-height: 1.2;
}
.stock-price {
font-size: 15px;
font-weight: 600;
line-height: 1.2;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
.stock-change {
font-size: 13px;
font-weight: 500;
line-height: 1.2;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.rising {
color: #00C851;
color: #00c851;
}
.falling {
color: #FF4444;
color: #ff4444;
}
/* 底部安全区域 */
@ -491,4 +488,4 @@ watch(headerHeight, (newHeight) => {
right: 0;
z-index: 1000;
} */
</style>
</style>

121
pages/marketSituation/marketOverview.vue
View File

@ -20,8 +20,16 @@
<!-- 卡片网格 -->
<view class="cards_grid">
<view v-for="(card, index) in cardData" :key="index" class="card_item">
<IndexCard :flagIcon="card.flagIcon" :stockName="card.stockName" :currentPrice="card.currentPrice" :changeAmount="card.changeAmount" :changePercent="card.changePercent" :isRising="card.isRising" @click="viewIndexDetail(card)" />
<view v-for="(card, index) in marketSituationStore.cardData" :key="index" class="card_item">
<IndexCard
:market="card.market"
:stockName="card.stockName"
:currentPrice="card.currentPrice"
:changeAmount="card.changeAmount"
:changePercent="card.changePercent"
:isRising="card.isRising"
@click="viewIndexDetail(card, index)"
/>
</view>
</view>
<view class="warn">
@ -41,6 +49,9 @@
import { ref, onMounted, watch, nextTick, computed } from "vue";
import util from "../../common/util.js";
import IndexCard from "../../components/IndexCard.vue";
import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
const marketSituationStore = useMarketSituationStore();
import { getGlobalIndexAPI } from "../../api/marketSituation/marketSituation.js";
const iSMT = ref(0);
const searchValue = ref("");
@ -63,95 +74,7 @@ const warnTextClass = computed(() => {
return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
});
// 弹窗相关数据
const showCountryModal = ref(false);
const selectedCountry = ref("概况");
const countryList = ref(["概况", "新加坡", "马来西亚", "印度尼西亚", "美国", "中国香港", "泰国", "中国", "加拿大", "越南", "外汇", "贵金属"]);
// 卡片数据
const cardData = ref([
{
flagIcon: "🇺🇸",
stockName: "道琼斯",
stockCode: "noCode",
currentPrice: "45757.90",
changeAmount: "-125.22",
changePercent: "-0.27%",
isRising: false,
},
{
flagIcon: "🇺🇸",
stockName: "纳斯达克",
stockCode: "noCode",
currentPrice: "22333.96",
changeAmount: "+125.22",
changePercent: "+0.47%",
isRising: true,
},
{
flagIcon: "🇺🇸",
stockName: "标普500",
stockCode: "noCode",
currentPrice: "6606.08",
changeAmount: "+125.22",
changePercent: "+0.27%",
isRising: true,
},
{
flagIcon: "🇨🇳",
stockName: "上证指数",
stockCode: "noCode",
currentPrice: "3333.96",
changeAmount: "+125.22",
changePercent: "+0.27%",
isRising: true,
},
{
flagIcon: "🇨🇳",
stockName: "科创50",
stockCode: "noCode",
currentPrice: "757.90",
changeAmount: "-25.22",
changePercent: "-0.27%",
isRising: false,
},
{
flagIcon: "🇭🇰",
stockName: "恒生指数",
stockCode: "noCode",
currentPrice: "19757.90",
changeAmount: "-125.22",
changePercent: "-0.63%",
isRising: false,
},
{
flagIcon: "🇸🇬",
stockName: "道琼斯",
stockCode: "noCode",
currentPrice: "3757.90",
changeAmount: "+85.22",
changePercent: "+2.31%",
isRising: true,
},
{
flagIcon: "🇲🇾",
stockName: "纳斯达克",
stockCode: "noCode",
currentPrice: "1657.90",
changeAmount: "-15.22",
changePercent: "-0.91%",
isRising: false,
},
{
flagIcon: "🇹🇭",
stockName: "标普500",
stockCode: "noCode",
currentPrice: "1457.90",
changeAmount: "+35.22",
changePercent: "+2.48%",
isRising: true,
},
]);
const globalIndexArray = ref([]);
// 搜索输入事件
const onSearchInput = (e) => {
@ -216,7 +139,7 @@ const checkWarnTextOverflow = () => {
};
// 方法：查看指数详情
const viewIndexDetail = (item) => {
const viewIndexDetail = (item, index) => {
console.log("查看指数详情:", item.stockName);
// uni.showToast({
// title: `查看 ${item.stockName} 详情`,
@ -225,7 +148,7 @@ const viewIndexDetail = (item) => {
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}&index=${index}&from=marketOverview`,
});
};
@ -236,7 +159,17 @@ const goToGlobalIndex = () => {
});
};
onMounted(() => {
const getGlobalIndex = async () => {
try {
const result = await getGlobalIndexAPI();
globalIndexArray.value = result.data;
} catch (e) {
console.log("获取全球指数失败", e);
}
};
onMounted(async () => {
await getGlobalIndex();
// 状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;

844
pages/marketSituation/marketSituation.vue
File diff suppressed because it is too large
View File

BIN
static/marketSituation-image/country-flag/can.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.1 KiB

BIN
static/marketSituation-image/country-flag/cn.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.1 KiB

BIN
static/marketSituation-image/country-flag/global.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 2.5 KiB

BIN
static/marketSituation-image/country-flag/hk.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.7 KiB

BIN
static/marketSituation-image/country-flag/my.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.7 KiB

BIN
static/marketSituation-image/country-flag/sg.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.1 KiB

BIN
static/marketSituation-image/country-flag/th.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 703 B

BIN
static/marketSituation-image/country-flag/us.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.4 KiB

BIN
static/marketSituation-image/country-flag/vi.png
View File

Side by Side

After

Width: 32  |  Height: 32  |  Size: 1.1 KiB

78
stores/modules/marketSituation.js
View File

@ -0,0 +1,78 @@
/** @format */
import { defineStore } from "pinia";
import { ref } from "vue";
// 定义 Store
export const useMarketSituationStore = defineStore(
"marketSituation",
() => {
const cardData = ref([
{
market: "usa",
stockName: "道琼斯",
stockCode: "noCode",
currentPrice: "45757.90",
changeAmount: "-125.22",
changePercent: "-0.27%",
isRising: false,
},
{
market: "usa",
stockName: "纳斯达克",
stockCode: "noCode",
currentPrice: "22333.96",
changeAmount: "+125.22",
changePercent: "+0.47%",
isRising: true,
},
{
market: "usa",
stockName: "标普500",
stockCode: "noCode",
currentPrice: "6606.08",
changeAmount: "+125.22",
changePercent: "+0.27%",
isRising: true,
},
{
market: "cn",
stockName: "上证指数",
stockCode: "noCode",
currentPrice: "3333.96",
changeAmount: "+125.22",
changePercent: "+0.27%",
isRising: true,
},
{
market: "cn",
stockName: "科创50",
stockCode: "noCode",
currentPrice: "757.90",
changeAmount: "-25.22",
changePercent: "-0.27%",
isRising: false,
},
]);
// 记得 return
return {
cardData
};
},
// TODO: 持久化
{
// 网页端持久化
// persist: true,
// 小程序端持久化
persist: {
storage: {
getItem(key) {
return uni.getStorageSync(key);
},
setItem(key, value) {
uni.setStorageSync(key, value);
},
},
},
}
);
Write Preview
Loading…
Cancel
Save