longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个股中心

Browse Source
This commit is contained in:
renzhijun
2026-01-31 09:22:58 +08:00
parent 5ffaac8fb2
commit 441f4c7360
6 changed files with 1292 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
pages/geGuCenter/detail.vue
View File

@@ -11,7 +11,7 @@
<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
<view>
<view style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin: 0 20rpx;">
<view @click="list2Index = index" v-for="(item,index) in topLists" :key="index"
<view @click="handleTypeClick(index)" v-for="(item,index) in topLists" :key="index"
style="padding: 12rpx;"
:style="{'border-bottom': (list2Index == index ? '1rpx solid #F2C369' : 'none')}">
<view style="font-size: 24rpx; color: #070707; font-weight: bold; text-align: center;"
@@ -21,8 +21,8 @@
<view style="font-size: 20rpx; font-weight: 400; text-align: center;"
:style="{color: (list2Index == index ? '#BB8520' : '#070707')}">{{item.value}}</view>
</view>
</view>
</view>
<view style="height: 1rpx; margin: 0 20rpx; background-color: #E7E7E7;"></view>
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' -->
<view
@@ -33,14 +33,20 @@
</view>
</view>
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' 的 内容 -->
<view v-for="(obj, j) in 10"
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; min-height: 60rpx; margin: 0 20rpx;"
:style="{'background-color': (j % 2 == 0 ? '#fff' : '#FAFAFC')}">
<view v-for="(item,index) in ['云南白药', '+0.04%', '996.85 亿元', '4.44 亿元', '医药生物']" :key="index"
style="padding: 10rpx 0; color: #666666; font-size: 20rpx; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;" :style="{color: (index == 0 ? '#222222' : index == 1 ? '#EC3440' : '#666666')}">
<view>{{item}}</view>
<view v-if="index == 0" style="color: #666666; font-size: 20rpx; font-weight: 500;">000768</view>
</view>
<view v-for="(obj, j) in filteredData" @click="itemDetails(obj)"
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; min-height: 60rpx; margin: 0 20rpx;"
:style="{'background-color': (j % 2 == 0 ? '#fff' : '#FAFAFC')}">
<!-- 外层循环：每一行数据 -->
<view v-for="(item,index) in getTableItem(obj)" :key="index"
style="padding: 10rpx 0; color: #666666; font-size: 20rpx; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;"
:style="{
color: (index == 0 ? '#222222' :
index == 1 ? (item[2] === 'positive' ? '#EC3440' : '#01AB5D') : '#666666')
}">
<view>{{item[0]}}</view>
<view v-if="index == 0" style="color: #666666; font-size: 20rpx; font-weight: 500;">{{item[1]}}</view>
</view>
</view>
<view style="height: 25rpx;"></view>
</view>
@@ -53,12 +59,18 @@
import {
inject
} from 'vue'
import {
marketHeatmap
} from '@/request/api'
export default {
data() {
return {
navH: inject('navHeight'),
contentTop: '',
allStockData: [],
filteredData: [],
currentDate: '', // 最终要赋值的日期
topLists: [{
title: '超大盘股',
value: '（>1000亿）',
@@ -76,11 +88,90 @@
}
},
onLoad(e) {
this.activeIndex = e.index
this.currentDate = e.currentDate
this.contentTop = this.navH + (20 + 70 + 25) / 750 * inject('windowWidth')
this.marketHeatmap()
},
methods: {
handleTypeClick(index) {
this.list2Index = index;
// 先请求数据，再筛选
this.marketHeatmap();
},
getTableItem(obj) {
// 1. 处理空值，避免 toFixed 调用时报错
const marketCap = obj.market_cap ? obj.market_cap.toFixed(2) : '0.00';
const amount = obj.amount ? obj.amount.toFixed(2) : '0.00';
// 统一处理涨跌幅：空值默认0，转数字避免字符串干扰判断
const changePercent = obj.change_percent ? Number(obj.change_percent) : 0;
// 2. 处理涨跌幅的符号和类型标记
let changePercentStr = '';
let changeType = ''; // 标记正负：positive/negative/zero
if (changePercent > 0) {
changePercentStr = `+${changePercent}%`; // 正数拼接+号
changeType = 'positive';
} else if (changePercent < 0) {
changePercentStr = `${changePercent}%`; // 负数直接显示
changeType = 'negative';
} else {
changePercentStr = '0%'; // 0值统一显示
changeType = 'zero';
}
// 3. 返回数组：涨跌幅位置新增 changeType 用于模板判断颜色
return [
[obj.stock_name, obj.stock_code],
[changePercentStr, '', changeType], // 第三个元素存类型标记
[`${marketCap}亿元`],
[`${amount}亿元`],
[obj.industry || '暂无'] // 处理行业为空的情况
];
},
marketHeatmap() {
let param = {
limit: 500,
date: this.currentDate
}
marketHeatmap(param).then(res => {
// 存储原始数据
this.allStockData = res.data || [];
// 调用筛选方法
this.filterStockByMarketCap();
}).catch(error => {
})
},
// 根据市值区间筛选数据
filterStockByMarketCap() {
const {
list2Index,
allStockData
} = this;
let filtered = [];
switch (list2Index) {
case 0: // 超大盘股（>1000亿）
filtered = allStockData.filter(item => item.market_cap > 1000);
break;
case 1: // 大盘股（500-1000亿）
filtered = allStockData.filter(item => item.market_cap >= 500 && item.market_cap <= 1000);
break;
case 2: // 中盘股（100-500亿）
filtered = allStockData.filter(item => item.market_cap >= 100 && item.market_cap <= 500);
break;
default:
filtered = allStockData;
}
this.filteredData = filtered;
},
itemDetails(item) {
uni.navigateTo({
url: '/pagesStock/stockCenterDetails/stockCenterDetails?code=' + item.stock_code
})
},
}
}
</script>
@@ -123,8 +214,8 @@
.stockDetailsC {
left: 25rpx;
width: calc(100vw - 50rpx);
bottom: env(safe-area-inset-bottom);
background-color: white;
bottom: env(safe-area-inset-bottom);
background-color: white;
border-radius: 10rpx;
}
</style>