|
|
|
@ -1,14 +1,13 @@ |
|
|
|
<!-- @format --> |
|
|
|
|
|
|
|
<template> |
|
|
|
<view class="main"> |
|
|
|
<!-- 固定头部 --> |
|
|
|
<view class="header_fixed" :style="{ top: iSMT + 'px' }"> |
|
|
|
<view class="header_content"> |
|
|
|
<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" /> |
|
|
|
<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"> |
|
|
|
@ -20,11 +19,9 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="channel_li" v-if="channelData.length > 0"> |
|
|
|
<scroll-view class="channel_wrap" scroll-x="true" :scroll-into-view="scrollToView" |
|
|
|
:scroll-with-animation="true" show-scrollbar="false"> |
|
|
|
<scroll-view class="channel_wrap" scroll-x="true" :scroll-into-view="scrollToView" :scroll-with-animation="true" show-scrollbar="false"> |
|
|
|
<view class="channel_innerWrap"> |
|
|
|
<view v-for="(item, index) in channelData" :key="item.id" :id="'nav' + item.id" |
|
|
|
:class="['channel_item', index === pageIndex ? 'active' : '']" @click="navClick(index)"> |
|
|
|
<view v-for="(item, index) in channelData" :key="item.id" :id="'nav' + item.id" :class="['channel_item', index === pageIndex ? 'active' : '']" @click="navClick(index)"> |
|
|
|
<text class="channel_text">{{ item.title }}</text> |
|
|
|
<view v-if="index === pageIndex" class="active_indicator"></view> |
|
|
|
</view> |
|
|
|
@ -44,10 +41,10 @@ |
|
|
|
</view> |
|
|
|
<view class="global_index"> |
|
|
|
<view class="global_index_title"> |
|
|
|
{{ $t('marketSituation.globalIndex') }} |
|
|
|
{{ $t("marketSituation.globalIndex") }} |
|
|
|
</view> |
|
|
|
<view class="global_index_more" @click="goToGlobalIndex"> |
|
|
|
<text>{{ $t('marketSituation.globalIndexMore') }}</text> |
|
|
|
<text>{{ $t("marketSituation.globalIndexMore") }}</text> |
|
|
|
<image src="/static/marketSituation-image/more.png" mode="aspectFit"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -55,15 +52,13 @@ |
|
|
|
<!-- 卡片网格 --> |
|
|
|
<view class="cards_grid"> |
|
|
|
<view v-for="(card, index) in cardData" :key="index" class="card_item"> |
|
|
|
<IndexCard :flagIcon="card.flagIcon" :indexName="card.indexName" |
|
|
|
:currentPrice="card.currentPrice" :changeAmount="card.changeAmount" |
|
|
|
:changePercent="card.changePercent" :isRising="card.isRising" /> |
|
|
|
<IndexCard :flagIcon="card.flagIcon" :stockName="card.stockName" :currentPrice="card.currentPrice" :changeAmount="card.changeAmount" :changePercent="card.changePercent" :isRising="card.isRising" @click="viewIndexDetail(card)" /> |
|
|
|
</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> |
|
|
|
<text :class="warnTextClass">{{ $t("marketSituation.warn") }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 底部安全区域，防止被导航栏遮挡 --> |
|
|
|
@ -85,9 +80,7 @@ |
|
|
|
</view> |
|
|
|
<view class="modal_body"> |
|
|
|
<view class="country_grid"> |
|
|
|
<view v-for="(country, index) in countryList" :key="index" |
|
|
|
:class="['country_item', selectedCountry === country ? 'selected' : '']" |
|
|
|
@click="selectCountry(country)"> |
|
|
|
<view v-for="(country, index) in countryList" :key="index" :class="['country_item', selectedCountry === country ? 'selected' : '']" @click="selectCountry(country)"> |
|
|
|
<text class="country_text">{{ country }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -97,285 +90,305 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, onMounted, watch, nextTick, computed } from 'vue' |
|
|
|
import util from '../../common/util.js' |
|
|
|
import footerBar from '../../components/footerBar.vue' |
|
|
|
import IndexCard from '../../components/IndexCard.vue' |
|
|
|
|
|
|
|
const type = ref('marketSituation') |
|
|
|
const iSMT = ref(0) |
|
|
|
const searchValue = ref('') |
|
|
|
const contentHeight = ref(0) |
|
|
|
const headerHeight = ref(0) // 动态计算的header高度 |
|
|
|
const isWarnTextOverflow = ref(false) // warn文字是否溢出 |
|
|
|
import { ref, onMounted, watch, nextTick, computed } from "vue"; |
|
|
|
import util from "../../common/util.js"; |
|
|
|
import footerBar from "../../components/footerBar.vue"; |
|
|
|
import IndexCard from "../../components/IndexCard.vue"; |
|
|
|
|
|
|
|
const type = ref("marketSituation"); |
|
|
|
const iSMT = ref(0); |
|
|
|
const searchValue = ref(""); |
|
|
|
const contentHeight = ref(0); |
|
|
|
const headerHeight = ref(0); // 动态计算的header高度 |
|
|
|
const isWarnTextOverflow = ref(false); // warn文字是否溢出 |
|
|
|
|
|
|
|
// Tab 栏相关数据 |
|
|
|
const channelData = ref([ |
|
|
|
{ id: 1, title: '概况' }, |
|
|
|
{ id: 2, title: '新加坡' }, |
|
|
|
{ id: 3, title: '马来西亚' }, |
|
|
|
{ id: 4, title: '印度尼西亚' }, |
|
|
|
{ id: 5, title: '美国' }, |
|
|
|
{ id: 6, title: '中国香港' }, |
|
|
|
{ id: 7, title: '泰国' }, |
|
|
|
{ id: 8, title: '中国' }, |
|
|
|
{ id: 9, title: '加拿大' }, |
|
|
|
{ id: 10, title: '越南' }, |
|
|
|
{ id: 11, title: '外汇' }, |
|
|
|
{ id: 12, title: '贵金属' }, |
|
|
|
]) |
|
|
|
const pageIndex = ref(0) |
|
|
|
const scrollToView = ref('') |
|
|
|
{ id: 1, title: "概况" }, |
|
|
|
{ id: 2, title: "新加坡" }, |
|
|
|
{ id: 3, title: "马来西亚" }, |
|
|
|
{ id: 4, title: "印度尼西亚" }, |
|
|
|
{ id: 5, title: "美国" }, |
|
|
|
{ id: 6, title: "中国香港" }, |
|
|
|
{ id: 7, title: "泰国" }, |
|
|
|
{ id: 8, title: "中国" }, |
|
|
|
{ id: 9, title: "加拿大" }, |
|
|
|
{ id: 10, title: "越南" }, |
|
|
|
{ id: 11, title: "外汇" }, |
|
|
|
{ id: 12, title: "贵金属" }, |
|
|
|
]); |
|
|
|
const pageIndex = ref(0); |
|
|
|
const scrollToView = ref(""); |
|
|
|
|
|
|
|
// 计算属性：精准计算content区域的top值 |
|
|
|
const contentTopPosition = computed(() => { |
|
|
|
const statusBarHeight = iSMT.value || 0 |
|
|
|
const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140 |
|
|
|
return statusBarHeight + currentHeaderHeight |
|
|
|
}) |
|
|
|
const statusBarHeight = iSMT.value || 0; |
|
|
|
const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140; |
|
|
|
return statusBarHeight + currentHeaderHeight; |
|
|
|
}); |
|
|
|
|
|
|
|
// warn文字的class计算属性 |
|
|
|
const warnTextClass = computed(() => { |
|
|
|
return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text' |
|
|
|
}) |
|
|
|
return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text"; |
|
|
|
}); |
|
|
|
|
|
|
|
// 弹窗相关数据 |
|
|
|
const showCountryModal = ref(false) |
|
|
|
const selectedCountry = ref('概况') |
|
|
|
const countryList = ref([ |
|
|
|
'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港', |
|
|
|
'泰国', '中国', '加拿大', '越南', '外汇', '贵金属' |
|
|
|
]) |
|
|
|
const showCountryModal = ref(false); |
|
|
|
const selectedCountry = ref("概况"); |
|
|
|
const countryList = ref(["概况", "新加坡", "马来西亚", "印度尼西亚", "美国", "中国香港", "泰国", "中国", "加拿大", "越南", "外汇", "贵金属"]); |
|
|
|
|
|
|
|
// 卡片数据 |
|
|
|
const cardData = ref([ |
|
|
|
{ |
|
|
|
flagIcon: '🇺🇸', |
|
|
|
indexName: '道琼斯', |
|
|
|
currentPrice: '45757.90', |
|
|
|
changeAmount: '-125.22', |
|
|
|
changePercent: '-0.27%', |
|
|
|
isRising: false |
|
|
|
flagIcon: "🇺🇸", |
|
|
|
stockName: "道琼斯", |
|
|
|
stockCode: "DJIA", |
|
|
|
currentPrice: "45757.90", |
|
|
|
changeAmount: "-125.22", |
|
|
|
changePercent: "-0.27%", |
|
|
|
isRising: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇺🇸', |
|
|
|
indexName: '纳斯达克', |
|
|
|
currentPrice: '22333.96', |
|
|
|
changeAmount: '+125.22', |
|
|
|
changePercent: '+0.47%', |
|
|
|
isRising: true |
|
|
|
flagIcon: "🇺🇸", |
|
|
|
stockName: "纳斯达克", |
|
|
|
stockCode: "NDX", |
|
|
|
currentPrice: "22333.96", |
|
|
|
changeAmount: "+125.22", |
|
|
|
changePercent: "+0.47%", |
|
|
|
isRising: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇺🇸', |
|
|
|
indexName: '标普500', |
|
|
|
currentPrice: '6606.08', |
|
|
|
changeAmount: '+125.22', |
|
|
|
changePercent: '+0.27%', |
|
|
|
isRising: true |
|
|
|
flagIcon: "🇺🇸", |
|
|
|
stockName: "标普500", |
|
|
|
stockCode: "SPX", |
|
|
|
currentPrice: "6606.08", |
|
|
|
changeAmount: "+125.22", |
|
|
|
changePercent: "+0.27%", |
|
|
|
isRising: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇨🇳', |
|
|
|
indexName: '上证指数', |
|
|
|
currentPrice: '3333.96', |
|
|
|
changeAmount: '+125.22', |
|
|
|
changePercent: '+0.27%', |
|
|
|
isRising: true |
|
|
|
flagIcon: "🇨🇳", |
|
|
|
stockName: "上证指数", |
|
|
|
stockCode: "1A0001", |
|
|
|
currentPrice: "3333.96", |
|
|
|
changeAmount: "+125.22", |
|
|
|
changePercent: "+0.27%", |
|
|
|
isRising: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇨🇳', |
|
|
|
indexName: '科创50', |
|
|
|
currentPrice: '757.90', |
|
|
|
changeAmount: '-25.22', |
|
|
|
changePercent: '-0.27%', |
|
|
|
isRising: false |
|
|
|
flagIcon: "🇨🇳", |
|
|
|
stockName: "科创50", |
|
|
|
stockCode: "1B0688", |
|
|
|
currentPrice: "757.90", |
|
|
|
changeAmount: "-25.22", |
|
|
|
changePercent: "-0.27%", |
|
|
|
isRising: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇭🇰', |
|
|
|
indexName: '恒生指数', |
|
|
|
currentPrice: '19757.90', |
|
|
|
changeAmount: '-125.22', |
|
|
|
changePercent: '-0.63%', |
|
|
|
isRising: false |
|
|
|
flagIcon: "🇭🇰", |
|
|
|
stockName: "恒生指数", |
|
|
|
stockCode: "HSI", |
|
|
|
currentPrice: "19757.90", |
|
|
|
changeAmount: "-125.22", |
|
|
|
changePercent: "-0.63%", |
|
|
|
isRising: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇸🇬', |
|
|
|
indexName: '道琼斯', |
|
|
|
currentPrice: '3757.90', |
|
|
|
changeAmount: '+85.22', |
|
|
|
changePercent: '+2.31%', |
|
|
|
isRising: true |
|
|
|
flagIcon: "🇸🇬", |
|
|
|
stockName: "道琼斯", |
|
|
|
stockCode: "DJIA", |
|
|
|
currentPrice: "3757.90", |
|
|
|
changeAmount: "+85.22", |
|
|
|
changePercent: "+2.31%", |
|
|
|
isRising: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇲🇾', |
|
|
|
indexName: '纳斯达克', |
|
|
|
currentPrice: '1657.90', |
|
|
|
changeAmount: '-15.22', |
|
|
|
changePercent: '-0.91%', |
|
|
|
isRising: false |
|
|
|
flagIcon: "🇲🇾", |
|
|
|
stockName: "纳斯达克", |
|
|
|
stockCode: "NDX", |
|
|
|
currentPrice: "1657.90", |
|
|
|
changeAmount: "-15.22", |
|
|
|
changePercent: "-0.91%", |
|
|
|
isRising: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
flagIcon: '🇹🇭', |
|
|
|
indexName: '标普500', |
|
|
|
currentPrice: '1457.90', |
|
|
|
changeAmount: '+35.22', |
|
|
|
changePercent: '+2.48%', |
|
|
|
isRising: true |
|
|
|
} |
|
|
|
]) |
|
|
|
flagIcon: "🇹🇭", |
|
|
|
stockName: "标普500", |
|
|
|
stockCode: "SPX", |
|
|
|
currentPrice: "1457.90", |
|
|
|
changeAmount: "+35.22", |
|
|
|
changePercent: "+2.48%", |
|
|
|
isRising: true, |
|
|
|
}, |
|
|
|
]); |
|
|
|
|
|
|
|
// 搜索输入事件 |
|
|
|
const onSearchInput = (e) => { |
|
|
|
searchValue.value = e.detail.value |
|
|
|
} |
|
|
|
searchValue.value = e.detail.value; |
|
|
|
}; |
|
|
|
|
|
|
|
// 搜索确认事件 |
|
|
|
const onSearchConfirm = (e) => { |
|
|
|
console.log('搜索内容:', e.detail.value) |
|
|
|
console.log("搜索内容:", e.detail.value); |
|
|
|
// 这里可以添加搜索逻辑 |
|
|
|
performSearch(e.detail.value) |
|
|
|
} |
|
|
|
performSearch(e.detail.value); |
|
|
|
}; |
|
|
|
|
|
|
|
// 搜索图标点击事件 |
|
|
|
const onSearchClick = () => { |
|
|
|
if (searchValue.value.trim()) { |
|
|
|
performSearch(searchValue.value) |
|
|
|
} |
|
|
|
performSearch(searchValue.value); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 执行搜索 |
|
|
|
const performSearch = (keyword) => { |
|
|
|
if (!keyword.trim()) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请输入搜索内容', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
return |
|
|
|
title: "请输入搜索内容", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
uni.showToast({ |
|
|
|
title: `搜索: ${keyword}`, |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
// 这里添加实际的搜索逻辑 |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 我的收藏点击事件 |
|
|
|
const selected = () => { |
|
|
|
uni.showToast({ |
|
|
|
title: '我的收藏', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
title: "我的收藏", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
// 这里可以跳转到收藏页面 |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 历史记录点击事件 |
|
|
|
const history = () => { |
|
|
|
uni.showToast({ |
|
|
|
title: '历史记录', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
title: "历史记录", |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
// 这里可以跳转到历史页面 |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// Tab 栏点击事件 |
|
|
|
const navClick = (index) => { |
|
|
|
pageIndex.value = index |
|
|
|
const currentItem = channelData.value[index] |
|
|
|
scrollToView.value = 'nav' + currentItem.id |
|
|
|
pageIndex.value = index; |
|
|
|
const currentItem = channelData.value[index]; |
|
|
|
scrollToView.value = "nav" + currentItem.id; |
|
|
|
|
|
|
|
// 同步更新弹窗中的选中状态 |
|
|
|
selectedCountry.value = currentItem.title |
|
|
|
selectedCountry.value = currentItem.title; |
|
|
|
|
|
|
|
uni.showToast({ |
|
|
|
title: `切换到: ${currentItem.title}`, |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
icon: "none", |
|
|
|
}); |
|
|
|
|
|
|
|
// 这里可以添加切换 tab 后的数据加载逻辑 |
|
|
|
console.log('当前选中的 tab:', currentItem) |
|
|
|
} |
|
|
|
console.log("当前选中的 tab:", currentItem); |
|
|
|
}; |
|
|
|
|
|
|
|
// 更多选项点击事件 |
|
|
|
const channel_more = () => { |
|
|
|
showCountryModal.value = true |
|
|
|
} |
|
|
|
showCountryModal.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
// 选择国家 |
|
|
|
const selectCountry = (country) => { |
|
|
|
selectedCountry.value = country |
|
|
|
selectedCountry.value = country; |
|
|
|
|
|
|
|
// 查找对应的tab索引 |
|
|
|
const targetIndex = channelData.value.findIndex(item => item.title === country) |
|
|
|
const targetIndex = channelData.value.findIndex((item) => item.title === country); |
|
|
|
|
|
|
|
if (targetIndex !== -1) { |
|
|
|
// 同步更新页面tab |
|
|
|
pageIndex.value = targetIndex |
|
|
|
const currentItem = channelData.value[targetIndex] |
|
|
|
scrollToView.value = 'nav' + currentItem.id |
|
|
|
pageIndex.value = targetIndex; |
|
|
|
const currentItem = channelData.value[targetIndex]; |
|
|
|
scrollToView.value = "nav" + currentItem.id; |
|
|
|
|
|
|
|
console.log('选中了：' + country + '，同步到tab索引：' + targetIndex) |
|
|
|
console.log("选中了：" + country + "，同步到tab索引：" + targetIndex); |
|
|
|
uni.showToast({ |
|
|
|
title: '已切换到：' + country, |
|
|
|
icon: 'none', |
|
|
|
duration: 2000 |
|
|
|
}) |
|
|
|
title: "已切换到：" + country, |
|
|
|
icon: "none", |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
// 如果是"概况"或其他特殊选项，默认切换到第一个tab |
|
|
|
if (country === '概况' || country === '全部') { |
|
|
|
pageIndex.value = 0 |
|
|
|
scrollToView.value = 'nav' + channelData.value[0].id |
|
|
|
if (country === "概况" || country === "全部") { |
|
|
|
pageIndex.value = 0; |
|
|
|
scrollToView.value = "nav" + channelData.value[0].id; |
|
|
|
} |
|
|
|
|
|
|
|
console.log('选中了：' + country) |
|
|
|
console.log("选中了：" + country); |
|
|
|
uni.showToast({ |
|
|
|
title: '已选择：' + country, |
|
|
|
icon: 'none', |
|
|
|
duration: 2000 |
|
|
|
}) |
|
|
|
title: "已选择：" + country, |
|
|
|
icon: "none", |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 这里可以添加切换到对应国家/地区数据的逻辑 |
|
|
|
// 例如：loadMarketData(country) |
|
|
|
closeModal() |
|
|
|
} |
|
|
|
closeModal(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 关闭弹窗 |
|
|
|
const closeModal = () => { |
|
|
|
showCountryModal.value = false |
|
|
|
} |
|
|
|
showCountryModal.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
// 检测warn文字是否溢出 |
|
|
|
const checkWarnTextOverflow = () => { |
|
|
|
nextTick(() => { |
|
|
|
setTimeout(() => { |
|
|
|
const query = uni.createSelectorQuery() |
|
|
|
const query = uni.createSelectorQuery(); |
|
|
|
|
|
|
|
// 同时查询容器和文字元素 |
|
|
|
query.select('.warn_text_container').boundingClientRect() |
|
|
|
query.select('.warn_text').boundingClientRect() |
|
|
|
query.select(".warn_text_container").boundingClientRect(); |
|
|
|
query.select(".warn_text").boundingClientRect(); |
|
|
|
query.exec((res) => { |
|
|
|
const containerRect = res[0] |
|
|
|
const textRect = res[1] |
|
|
|
const containerRect = res[0]; |
|
|
|
const textRect = res[1]; |
|
|
|
|
|
|
|
if (!containerRect || !textRect) { |
|
|
|
return |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 判断文字是否超出容器（留一些余量） |
|
|
|
const isOverflow = textRect.width > (containerRect.width - 10) |
|
|
|
const isOverflow = textRect.width > containerRect.width - 10; |
|
|
|
|
|
|
|
isWarnTextOverflow.value = isOverflow |
|
|
|
}) |
|
|
|
}, 500) |
|
|
|
}) |
|
|
|
} |
|
|
|
isWarnTextOverflow.value = isOverflow; |
|
|
|
}); |
|
|
|
}, 500); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// 跳转到全球指数页面 |
|
|
|
const goToGlobalIndex = () => { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/home/globalIndex' |
|
|
|
}) |
|
|
|
} |
|
|
|
url: "/pages/home/globalIndex", |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// 方法：查看指数详情 |
|
|
|
const viewIndexDetail = (item) => { |
|
|
|
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(() => { |
|
|
|
// 状态栏高度 |
|
|
|
@ -383,45 +396,54 @@ onMounted(() => { |
|
|
|
|
|
|
|
// 初始化 tab 栏 |
|
|
|
if (channelData.value.length > 0) { |
|
|
|
pageIndex.value = 0 |
|
|
|
scrollToView.value = 'nav' + channelData.value[0].id |
|
|
|
pageIndex.value = 0; |
|
|
|
scrollToView.value = "nav" + channelData.value[0].id; |
|
|
|
} |
|
|
|
|
|
|
|
util.request('link/api/brain/privilege', (res) => { |
|
|
|
console.log(res) |
|
|
|
},{ |
|
|
|
'token': '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs' |
|
|
|
}, (err) => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
util.request( |
|
|
|
"link/api/brain/privilege", |
|
|
|
(res) => { |
|
|
|
console.log(res); |
|
|
|
}, |
|
|
|
{ |
|
|
|
token: "9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs", |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
// 确保DOM渲染完成后再查询高度 |
|
|
|
nextTick(() => { |
|
|
|
// 动态计算header实际高度 |
|
|
|
uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => { |
|
|
|
uni |
|
|
|
.createSelectorQuery() |
|
|
|
.select(".header_fixed") |
|
|
|
.boundingClientRect((rect) => { |
|
|
|
if (rect) { |
|
|
|
headerHeight.value = rect.height |
|
|
|
console.log('Header实际高度:', headerHeight.value, 'px') |
|
|
|
headerHeight.value = rect.height; |
|
|
|
console.log("Header实际高度:", headerHeight.value, "px"); |
|
|
|
} |
|
|
|
}).exec() |
|
|
|
}) |
|
|
|
.exec(); |
|
|
|
|
|
|
|
// 检测warn文字是否溢出 |
|
|
|
checkWarnTextOverflow() |
|
|
|
}) |
|
|
|
}) |
|
|
|
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 |
|
|
|
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) |
|
|
|
contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight; |
|
|
|
console.log("重新计算contentHeight:", contentHeight.value); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
@ -580,7 +602,7 @@ watch(headerHeight, (newHeight) => { |
|
|
|
min-width: 40rpx; |
|
|
|
max-width: 120rpx; |
|
|
|
height: 8rpx; |
|
|
|
background-image: url('/static/marketSituation-image/bg.png'); |
|
|
|
background-image: url("/static/marketSituation-image/bg.png"); |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -629,9 +651,9 @@ watch(headerHeight, (newHeight) => { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background-color: #F3F3F3; |
|
|
|
background-color: #f3f3f3; |
|
|
|
border-radius: 30rpx; |
|
|
|
border: 1rpx solid #E0E0E0; |
|
|
|
border: 1rpx solid #e0e0e0; |
|
|
|
padding: 30rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
/* 设置最小高度保护，但允许内容撑开 */ |
|
|
|
|
no99
4 weeks ago