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

修改行情页面跳转方法

zhaowenkang/feature-20251028181547-行情页面
no99 4 weeks ago
parent
0a9fb991b6
commit
026263009b
5 changed files with 1492 additions and 1417 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. 4
      components/IndexCard.vue
  2. 839
      pages/home/globalIndex.vue
  3. 54
      pages/home/marketCondition.vue
  4. 682
      pages/home/marketDetail.vue
  5. 1324
      pages/home/marketSituation.vue

4
components/IndexCard.vue
View File

@ -4,7 +4,7 @@
<view class="flag-container">
<image :src="flagIcon" class="flag-icon" mode="aspectFit"></image>
</view>
<text class="index-name">{{ indexName }}</text>
<text class="index-name">{{ stockName }}</text>
</view>
<view class="price-info">
@ -35,7 +35,7 @@ const props = defineProps({
required: true
},
// 指数名称
indexName: {
stockName: {
type: String,
required: true
},

839
pages/home/globalIndex.vue
View File

@ -1,574 +1,579 @@
<!-- @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" :indexName="item.indexName"
: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" :indexName="item.indexName"
: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" :indexName="item.indexName"
: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">
<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>
<!-- 底部导航栏 -->
<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";
// 响应式数据
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 asiachinaIndexes = ref([
{
flagIcon: '/static/c1.png',
indexName: '上证指数',
currentPrice: '3933.96',
changeAmount: '+24.32',
changePercent: '+0.62%',
isRising: true
},
{
flagIcon: '/static/c2.png',
indexName: '深证成指',
currentPrice: '45757.90',
changeAmount: '-123.45',
changePercent: '-0.27%',
isRising: false
},
{
flagIcon: '/static/c3.png',
indexName: '创业板指',
currentPrice: '6606.08',
changeAmount: '+89.76',
changePercent: '+1.38%',
isRising: true
},
{
flagIcon: '/static/c4.png',
indexName: 'HSI50',
currentPrice: '22333.96',
changeAmount: '+156.78',
changePercent: '+0.71%',
isRising: true
},
{
flagIcon: '/static/c5.png',
indexName: '沪深300',
currentPrice: '45757.90',
changeAmount: '-89.12',
changePercent: '-0.19%',
isRising: false
},
{
flagIcon: '/static/c6.png',
indexName: '上证50',
currentPrice: '45757.90',
changeAmount: '+234.56',
changePercent: '+0.52%',
isRising: true
}
])
{
flagIcon: "/static/c1.png",
stockName: "上证指数",
stockCode: "1A0001",
currentPrice: "3933.96",
changeAmount: "+24.32",
changePercent: "+0.62%",
isRising: true,
},
{
flagIcon: "/static/c2.png",
stockName: "深证成指",
stockCode: "2A01",
currentPrice: "45757.90",
changeAmount: "-123.45",
changePercent: "-0.27%",
isRising: false,
},
{
flagIcon: "/static/c3.png",
stockName: "创业板指",
stockCode: "399006",
currentPrice: "6606.08",
changeAmount: "+89.76",
changePercent: "+1.38%",
isRising: true,
},
{
flagIcon: "/static/c4.png",
stockName: "沪深300",
stockCode: "1B0300",
currentPrice: "45757.90",
changeAmount: "-89.12",
changePercent: "-0.19%",
isRising: false,
},
{
flagIcon: "/static/c5.png",
stockName: "上证50",
stockCode: "1B0011",
currentPrice: "45757.90",
changeAmount: "+234.56",
changePercent: "+0.52%",
isRising: true,
},
{
flagIcon: "/static/c6.png",
stockName: "科创50",
stockCode: "1B0688",
currentPrice: "22333.96",
changeAmount: "+156.78",
changePercent: "+0.71%",
isRising: true,
},
]);
// 亚太指数数据
const asiaIndexes = ref([
{
flagIcon: '/static/c7.png',
indexName: '日经225',
currentPrice: '28456.78',
changeAmount: '+234.56',
changePercent: '+0.83%',
isRising: true
},
{
flagIcon: '/static/c8.png',
indexName: '韩国KOSPI',
currentPrice: '2567.89',
changeAmount: '-12.34',
changePercent: '-0.48%',
isRising: false
},
{
flagIcon: '/static/c9.png',
indexName: '印度孟买',
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',
indexName: '道琼斯指数',
currentPrice: '34567.89',
changeAmount: '+123.45',
changePercent: '+0.36%',
isRising: true
},
{
flagIcon: '/static/c8.png',
indexName: '纳斯达克',
currentPrice: '13456.78',
changeAmount: '-67.89',
changePercent: '-0.50%',
isRising: false
},
{
flagIcon: '/static/c9.png',
indexName: '标普500',
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/home/marketDetail?market=${market}`
})
}
console.log("查看更多:", market);
uni.navigateTo({
url: `/pages/home/marketDetail?market=${market}`,
});
};
// 方法：查看指数详情
const viewIndexDetail = (item) => {
console.log('查看指数详情:', item.indexName)
// uni.showToast({
// title: `查看 ${item.indexName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/home/marketCondition`
})
}
console.log("查看指数详情:", item.stockName);
// uni.showToast({
// title: `查看 ${item.stockName} 详情`,
// icon: 'none',
// duration: 2000
// })
// 这里可以跳转到具体的指数详情页面
uni.navigateTo({
url: `/pages/home/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
});
};
// 生命周期：页面挂载
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()
})
// 获取系统信息
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>

54
pages/home/marketCondition.vue
View File

@ -9,13 +9,11 @@
<image class="back-homepage-btn" src="/static/marketSituation-image/back.png" mode="返回按钮" @click="backToHomepage()"> </image>
<view class="mid-title">
<view class="arrow-left"> </view>
<image class="left-page" src="/static/img/left-page.png" mode="向左翻页"></image>
<view class="stock-id">
<view class="stock-name"> {{ stockInformation.stockName }} </view>
<view class="stock-code"> {{ stockInformation.stockCode }} </view>
</view>
<view class="arrow-right"> </view>
<image class="right-page" src="/static/img/right-page.png" mode="向右翻页"></image>
</view>
<image class="search" src="/static/marketSituation-image/search.png" mode="搜索" @click="startTcp()"> </image>
<view class="more" @click="disconnect()">···</view>
@ -227,6 +225,7 @@
<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick, onUnmounted, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const instance = getCurrentInstance();
import { prevClosePrice, timeData as testTimeData, klineData as testKlineData } from "@/common/stockTimeInformation.js";
import { throttle } from "@/common/util.js";
@ -1534,6 +1533,52 @@ const startAddDataTimer = () => {
}, 2000); // 5000毫秒 = 5秒
};
onLoad((options) => {
console.log("页面接收到的参数：", options);
// 处理通过data参数传递的复杂对象
if (options.data) {
try {
const stockData = JSON.parse(decodeURIComponent(options.data));
console.log("解析的股票数据：", stockData);
// 更新stockInformation
if (stockData) {
stockInformation.value.stockName=stockData.stockName;
stockInformation.value.stockCode=stockData.stockCode;
}
} catch (error) {
console.error("解析股票数据失败：", error);
}
}
// 处理通过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);
}
}
// 处理简单参数
if (options.stockCode) {
stockInformation.value.stockCode = options.stockCode;
}
if (options.stockName) {
stockInformation.value.stockName = decodeURIComponent(options.stockName);
}
});
// 保存定时器，用于页面卸载时清理
onUnmounted(() => {
// disconnect();
@ -1883,7 +1928,7 @@ onMounted(async () => {
display: inline-block;
}
.arrow-left{
.arrow-left {
width: 0;
height: 0;
border-top: 10rpx solid transparent;
@ -1893,7 +1938,7 @@ onMounted(async () => {
display: inline-block;
}
.arrow-right{
.arrow-right {
width: 0;
height: 0;
border-top: 10rpx solid transparent;
@ -1910,7 +1955,6 @@ onMounted(async () => {
margin-bottom: 5rpx;
}
.moreTabItem {
flex: 1;
padding: 10rpx 20rpx;

682
pages/home/marketDetail.vue
View File

@ -1,471 +1,475 @@
<!-- @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="viewStockDetail(stock)">
<view class="stock-cell name-column">
<view class="stock-name">{{ stock.name }}</view>
<view class="stock-code">{{ stock.code }}</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="viewStockDetail(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";
// 响应式数据
const iSMT = 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 headerHeight = ref(80);
const marketType = ref("america");
const marketTitle = ref("美洲");
const sortType = ref(""); // 排序类型：'price' 或 'change'
const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'
// 股票数据
const stockList = ref([
{
name: 'Telecommunication',
code: '888607',
price: 1349.47,
change: '+7.67%',
isRising: true
},
{
name: 'Other',
code: '888607',
price: 1349.47,
change: '+6.67%',
isRising: true
},
{
name: 'Consumer Discretio...',
code: '888610',
price: 1349.47,
change: '+5.67%',
isRising: true
},
{
name: 'Telecommunication',
code: '888607',
price: 1349.47,
change: '+4.67%',
isRising: true
},
{
name: 'Other',
code: '888611',
price: 1359.47,
change: '+3.67%',
isRising: true
},
{
name: 'Consumer Discretio...',
code: '888610',
price: 1349.47,
change: '+2.67%',
isRising: true
},
{
name: 'Telecommunication',
code: '888607',
price: 1349.47,
change: '+1.67%',
isRising: true
},
{
name: 'Other',
code: '888611',
price: 1009.98,
change: '-1.67%',
isRising: false
},
{
name: 'Consumer Discretio...',
code: '888610',
price: 1009.98,
change: '-0.67%',
isRising: false
},
{
name: 'Telecommunication',
code: '888607',
price: 1009.98,
change: '-0.67%',
isRising: false
},
{
name: 'Other',
code: '888611',
price: 1009.98,
change: '-1.67%',
isRising: false
},
{
name: 'Consumer Discretio...',
code: '888610',
price: 1009.98,
change: '-4.67%',
isRising: false
},
{
name: 'Consumer Discretio...',
code: '888610',
price: 1009.98,
change: '-3.67%',
isRising: false
},
{
name: 'Consumer Discretio...',
code: '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;
});
// 页面加载时接收参数
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) {
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 = "全球指数";
}
}
});
// 方法
const goBack = () => {
uni.navigateBack()
}
uni.navigateBack();
};
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";
}
};
const viewStockDetail = (stock) => {
console.log('查看股票详情:', stock)
// 这里可以跳转到股票详情页面
}
console.log("查看股票详情:", stock);
// 这里可以跳转到股票详情页面
uni.navigateTo({
url: `/pages/home/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(stock))}`,
});
};
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;
}
/* 底部安全区域 */

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

Write Preview
Loading…
Cancel
Save