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