zhaowenkang
1 month ago
12 changed files with 1266 additions and 31 deletions
-
29common/util.js
-
18pages.json
-
574pages/home/globalIndex.vue
-
484pages/home/marketDetail.vue
-
158pages/home/marketSituation.vue
-
1static/language/en.js
-
1static/language/ms.js
-
1static/language/th.js
-
1static/language/vi.js
-
7static/language/zh_CN.js
-
1static/language/zh_HK.js
-
BINstatic/marketSituation-image/back.png
@ -0,0 +1,29 @@ |
|||
var util = {} |
|||
util.data = {} |
|||
util.data.base_url = 'http://39.101.133.168:8828/' |
|||
// util.data.base_url = 'https://dbqb.nfdxy.net/prodApi'
|
|||
|
|||
// AJAX 请求方法
|
|||
util.request = (url, callback, data = {}, failCallback) => { |
|||
url = util.data.base_url + url |
|||
// if (uni.getStorageSync('token') && !data.token && data.token !='') data.token = uni.getStorageSync('token')
|
|||
// data.app_from = uni.getStorageSync('ajax_app_from')
|
|||
console.log('请求该接口->', url,'请求参数为->',data); |
|||
uni.request({ |
|||
url: url, //仅为示例，并非真实接口地址。
|
|||
data, |
|||
method: 'post', |
|||
header: { |
|||
'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
|
|||
// 'version': uni.getSystemInfoSync().appVersion,
|
|||
// 'platform': 2,
|
|||
// 'client': uni.getSystemInfoSync().platform == 'ios' ? 'ios' : 'android',
|
|||
// 'app_from': uni.getStorageSync('ajax_app_from')
|
|||
}, |
|||
sslVerify: false, |
|||
success: callback, |
|||
fail: failCallback |
|||
}); |
|||
} |
|||
|
|||
export default util |
|||
@ -0,0 +1,574 @@ |
|||
<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> |
|||
|
|||
<!-- 内容区域 --> |
|||
<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> |
|||
|
|||
<!-- 底部导航栏 --> |
|||
<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' |
|||
|
|||
// 响应式数据 |
|||
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' |
|||
}) |
|||
|
|||
// 检测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) |
|||
}) |
|||
} |
|||
|
|||
// 亚太-中华指数数据 |
|||
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 |
|||
} |
|||
]) |
|||
|
|||
// 亚太指数数据 |
|||
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 |
|||
} |
|||
]) |
|||
|
|||
// 美洲指数数据 |
|||
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 |
|||
} |
|||
]) |
|||
|
|||
// 计算属性：内容区域顶部位置 |
|||
const contentTopPosition = computed(() => { |
|||
const statusBarHeight = iSMT.value || 0 |
|||
const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100 |
|||
return statusBarHeight + currentHeaderHeight |
|||
}) |
|||
|
|||
// 方法：返回上一页 |
|||
const goBack = () => { |
|||
uni.navigateBack() |
|||
} |
|||
|
|||
// 方法：搜索输入 |
|||
const onSearchInput = (e) => { |
|||
searchValue.value = e.detail.value |
|||
} |
|||
|
|||
// 方法：清除搜索 |
|||
const clearSearch = () => { |
|||
searchValue.value = '' |
|||
} |
|||
|
|||
// 方法：查看更多 |
|||
const viewMore = (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/detail/indexDetail?id=${item.id}` |
|||
// }) |
|||
} |
|||
|
|||
// 生命周期：页面挂载 |
|||
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() |
|||
}) |
|||
|
|||
// 监听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) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
position: relative; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
/* 状态栏占位 */ |
|||
.top { |
|||
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); |
|||
} |
|||
|
|||
.header_content { |
|||
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; |
|||
} |
|||
|
|||
.header_back image { |
|||
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); |
|||
} |
|||
|
|||
.search_icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.header_input { |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.header_icons { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 15rpx; |
|||
} |
|||
|
|||
.header_icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.header_icon image { |
|||
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; |
|||
} |
|||
|
|||
.warn image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
flex-shrink: 0; |
|||
/* 防止图片被压缩 */ |
|||
position: relative; |
|||
z-index: 2; |
|||
/* 确保图片在最上层 */ |
|||
} |
|||
|
|||
.warn_text_container { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
position: relative; |
|||
min-width: 0; |
|||
/* 允许容器收缩 */ |
|||
} |
|||
|
|||
.warn_text { |
|||
display: block; |
|||
white-space: nowrap; |
|||
will-change: transform; |
|||
/* 优化动画性能 */ |
|||
} |
|||
|
|||
/* 文字滚动动画 */ |
|||
@keyframes scrollText { |
|||
0% { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
20% { |
|||
transform: translateX(0); |
|||
} |
|||
|
|||
80% { |
|||
transform: translateX(-85%); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateX(-85%); |
|||
} |
|||
} |
|||
|
|||
/* 当文字超长时启用滚动动画 */ |
|||
.warn_text.scroll-active { |
|||
animation: scrollText 12s linear infinite; |
|||
animation-delay: 2s; |
|||
/* 延迟2秒开始滚动，让用户先看到开头 */ |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.content { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 120rpx; |
|||
background-color: #f5f5f5; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* 市场分组 */ |
|||
.market-section { |
|||
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; |
|||
} |
|||
|
|||
.market-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.market-more { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8rpx; |
|||
} |
|||
|
|||
.more-text { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.more-arrow { |
|||
font-size: 20rpx; |
|||
color: #666; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 三列卡片网格 */ |
|||
.cards-grid-three { |
|||
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; |
|||
} |
|||
|
|||
.card-item:active { |
|||
transform: scale(0.98); |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12); |
|||
} |
|||
|
|||
/* 底部安全区域 */ |
|||
.bottom-safe-area { |
|||
height: 40rpx; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/* 底部导航栏 */ |
|||
.static-footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 400rpx) { |
|||
.cards-grid-three { |
|||
grid-template-columns: repeat(2, 1fr); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,484 @@ |
|||
<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> --> |
|||
</template> |
|||
|
|||
<script setup> |
|||
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 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 |
|||
} |
|||
]) |
|||
|
|||
// 计算属性 |
|||
const contentTopPosition = computed(() => { |
|||
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 |
|||
}) |
|||
|
|||
// 页面加载时接收参数 |
|||
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 = '全球指数' |
|||
} |
|||
} |
|||
}) |
|||
|
|||
// 方法 |
|||
const goBack = () => { |
|||
uni.navigateBack() |
|||
} |
|||
|
|||
const sortByPrice = () => { |
|||
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' |
|||
} |
|||
} |
|||
|
|||
const viewStockDetail = (stock) => { |
|||
console.log('查看股票详情:', 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() |
|||
}) |
|||
|
|||
// 监听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) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.main { |
|||
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; |
|||
} |
|||
|
|||
.header-content { |
|||
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; |
|||
} |
|||
|
|||
.header-left { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.header-right { |
|||
justify-content: flex-end; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.back-text { |
|||
font-size: 24px; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.header-center { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.header-title { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
} |
|||
|
|||
.header-icon { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.more-text { |
|||
font-size: 20px; |
|||
color: #666666; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* 内容区域 */ |
|||
.content { |
|||
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; |
|||
} |
|||
|
|||
.header-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.header-item.name-column { |
|||
flex: 2; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.header-item.price-column, |
|||
.header-item.change-column { |
|||
flex: 1; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.header-text { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.sort-icon { |
|||
margin-left: 4px; |
|||
font-size: 12px; |
|||
color: #999999; |
|||
} |
|||
|
|||
/* 股票列表 */ |
|||
.stock-list { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.stock-row { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 12px 15px; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
|
|||
.stock-row:active { |
|||
background-color: #f8f8f8; |
|||
} |
|||
|
|||
.stock-cell { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.stock-cell.name-column { |
|||
flex: 2; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.stock-cell.price-column, |
|||
.stock-cell.change-column { |
|||
flex: 1; |
|||
align-items: center; |
|||
} |
|||
|
|||
.stock-name { |
|||
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; |
|||
} |
|||
|
|||
.stock-price { |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.stock-change { |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.rising { |
|||
color: #00C851; |
|||
} |
|||
|
|||
.falling { |
|||
color: #FF4444; |
|||
} |
|||
|
|||
/* 底部安全区域 */ |
|||
/* .bottom-safe-area { |
|||
height: 20px; |
|||
} */ |
|||
|
|||
/* 底部导航栏 */ |
|||
/* .static-footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1000; |
|||
} */ |
|||
</style> |
|||
|
After Width: 18 | Height: 32 | Size: 576 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue