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

Merge branch 'milestone-20251031-简版功能开发' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into wangyi/feature-20251026183100-deepmate王毅

lihuilin/feature-20251024095243-我的
Ethereal 4 weeks ago
parent
6b01227736 10760a7da8
commit
79c766af1a
28 changed files with 4883 additions and 2042 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
      .hbuilderx/launch.json
  2. 21
      api/tcpConnection.js
  3. 5
      common/util.js
  4. 50
      components/MarketOverview.vue
  5. 2
      components/footerBar.vue
  6. 25
      manifest.json
  7. 42
      pages.json
  8. 23
      pages/blank/blank.vue
  9. 100
      pages/blank/institutionalTrendsBriefing.vue
  10. 100
      pages/blank/notice.vue
  11. 27
      pages/deepMate/deepMate.vue
  12. 579
      pages/home/globalIndex.vue
  13. 705
      pages/home/home.vue
  14. 488
      pages/home/marketDetail.vue
  15. 920
      pages/home/marketSituation.vue
  16. 655
      pages/marketSituation/chartExample.vue
  17. 493
      pages/marketSituation/countryMarket.vue
  18. 301
      pages/marketSituation/forexMetals.vue
  19. 574
      pages/marketSituation/globalIndex.vue
  20. 0
      pages/marketSituation/marketCondition.vue
  21. 485
      pages/marketSituation/marketDetail.vue
  22. 733
      pages/marketSituation/marketOverview.vue
  23. 593
      pages/marketSituation/marketSituation.vue
  24. BIN
      static/icons/Left_(左).png
  25. BIN
      static/images/缺省.png
  26. BIN
      static/marketSituation-image/cool.png
  27. BIN
      static/marketSituation-image/hot.png
  28. BIN
      static/marketSituation-image/warm.png

4
.hbuilderx/launch.json
View File

@ -2,8 +2,8 @@
"version" : "1.0",
"configurations" : [
{
"customPlaygroundType" : "device",
"playground" : "standard",
"customPlaygroundType" : "local",
"playground" : "custom",
"type" : "uni-app:app-android"
// "playground" : "standard",
// "type" : "uni-app:app-ios"

21
api/tcpConnection.js
View File

@ -30,6 +30,26 @@ class TCPConnection {
* @param {Function} callback - 连接状态回调函数
*/
connect(config = {}, callback = null) {
// 如果已经连接，先断开现有连接
if (this.isConnected) {
console.log('检测到现有TCP连接，先断开...');
this.disconnect(config);
// 等待断开完成后再连接
setTimeout(() => {
this._performConnect(config, callback);
}, 300);
} else {
// 直接连接
this._performConnect(config, callback);
}
}
/**
* 执行TCP连接
* @param {Object} config - 连接配置
* @param {Function} callback - 连接状态回调函数
*/
_performConnect(config = {}, callback = null) {
const connectionConfig = {
channel: config.channel || TCP_CONFIG.channel,
ip: config.ip || TCP_CONFIG.ip,
@ -41,6 +61,7 @@ class TCPConnection {
connectionConfig.charsetname = config.charsetname || TCP_CONFIG.charsetname;
}
console.log('开始建立TCP连接:', connectionConfig);
TCPSocket.connect(
connectionConfig,
result => {

5
common/util.js
View File

@ -1,6 +1,6 @@
var util = {}
util.data = {}
util.data.base_url = 'https://dbqb.nfdxy.net/devApi'
util.data.base_url = 'https://hwjb.homilychart.com/testApi'
// util.data.base_url = 'https://dbqb.nfdxy.net/prodApi'
// AJAX 请求方法
@ -15,7 +15,8 @@ util.request = (url, callback, data = {}, failCallback) => {
'content-type': 'application/json',
'version': uni.getSystemInfoSync().appVersion,
'client': uni.getSystemInfoSync().platform == 'ios' ? 'ios' : 'android',
'token': uni.getStorageSync('token')
'token': uni.getStorageSync('token'),
'deviceId': uni.getSystemInfoSync().deviceId
},
sslVerify: false,
success: callback,

50
components/MarketOverview.vue
View File

@ -18,20 +18,13 @@
<view class="forex-market">
<!-- 上部分：三个汇率容器 -->
<view class="forex-rates">
<view class="forex-rate-item up">
<text class="forex-pair">美元/日元</text>
<text class="forex-value">151.13</text>
<text class="forex-change">+1.62%</text>
</view>
<view class="forex-rate-item down">
<text class="forex-pair">美元/韩元</text>
<text class="forex-value">1424.900</text>
<text class="forex-change">-2.92%</text>
</view>
<view class="forex-rate-item up">
<text class="forex-pair">美元/英镑</text>
<text class="forex-value">0.730</text>
<text class="forex-change">+2.92%</text>
<view class="forex-rate-item"
v-for="(stock, index) in stockInfoList"
:key="index"
:class="stock.change_percent >= 0 ? 'up' : 'down'">
<text class="forex-pair">{{ stock.stock_name }}</text>
<text class="forex-value">{{ stock.current_price }}</text>
<text class="forex-change">{{ stock.change }}</text>
</view>
</view>
@ -94,6 +87,35 @@
<script>
export default {
name: 'MarketOverview',
props: {
// 接收来自父组件的3个股票数据
stockInfoList: {
type: Array,
default: () => ([
{
stock_name: '美元/日元',
current_price: '151.13',
change: '+1.62%',
change_value: 0,
change_percent: 0
},
{
stock_name: '美元/韩元',
current_price: '1424.900',
change: '-2.92%',
change_value: 0,
change_percent: 0
},
{
stock_name: '美元/英镑',
current_price: '0.730',
change: '+2.92%',
change_value: 0,
change_percent: 0
}
])
}
},
data() {
return {
selectedMarket: 'forex',

2
components/footerBar.vue
View File

@ -111,7 +111,7 @@ const tabChange = (value) => {
})
} else if (value == 2) { //行情
uni.redirectTo({
url: '/pages/home/marketSituation',
url: '/pages/marketSituation/marketSituation',
animationType: 'fade-in'
})
} else if (value == 3) { //DeepMate

25
manifest.json
View File

@ -1,6 +1,6 @@
{
"name" : "DeepChartApp",
"appid" : "__UNI__D8DF433",
"appid" : "__UNI__2646D0B",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
@ -40,9 +40,12 @@
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
],
"minSdkVersion" : 21
},
"ios" : {
"dSYMs" : false
},
"ios" : {},
/* ios打包配置 */
"sdkConfigs" : {
"oauth" : {
@ -52,6 +55,22 @@
}
}
}
},
"nativePlugins" : {
"Aimer-TCPPlugin" : {
"__plugin_info__" : {
"name" : "TCP-Socket原生插件(支持Android和IOS) - [试用版，仅用于自定义调试基座]",
"description" : "Uniapp实现基于TCP的数据通信,支持单片机、智能家居等硬件交互,联系QQ: 462108858",
"platforms" : "Android,iOS",
"url" : "https://ext.dcloud.net.cn/plugin?id=2029",
"android_package_name" : "",
"ios_bundle_id" : "",
"isCloud" : true,
"bought" : 0,
"pid" : "2029",
"parameters" : {}
}
}
}
},
/* SDK配置 */

42
pages.json
View File

@ -98,7 +98,33 @@
}
},
{
"path": "pages/home/marketSituation",
"path": "pages/marketSituation/marketSituation",
"style": {
"navigationStyle": "custom",
"disableSwipeBack": true,
"titleNView": false,
"bounce": false
}
},
{
"path": "pages/marketSituation/chartExample",
"style": {
"navigationBarTitleText": "图表示例",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/marketSituation/globalIndex",
"style": {
"navigationStyle": "custom",
"disableSwipeBack": true,
"titleNView": false,
"bounce": false
}
},
{
"path": "pages/marketSituation/marketDetail",
"style": {
"navigationStyle": "custom",
"disableSwipeBack": true,
@ -134,7 +160,17 @@
}
},
{
"path": "pages/blank/blank",
"path": "pages/blank/institutionalTrendsBriefing",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"disableSwipeBack": true,
"titleNView": false,
"bounce": false
}
},
{
"path": "pages/blank/notice",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
@ -260,7 +296,7 @@
}
},
{
"path" : "pages/home/marketCondition",
"path" : "pages/marketSituation/marketCondition",
"style" :
{
"navigationBarTitleText" : "行情",

23
pages/blank/blank.vue
View File

@ -1,23 +0,0 @@
<template>
<view class="blank-page">
<text class="tip">当前特斯拉该如何布局？</text>
</view>
</template>
<script setup>
// 空白页，无逻辑
</script>
<style scoped>
.blank-page {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #ffffff;
}
.tip {
color: #999999;
font-size: 28rpx;
}
</style>

100
pages/blank/institutionalTrendsBriefing.vue
View File

@ -0,0 +1,100 @@
<template>
<view class="blank-page">
<view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<!-- 返回按钮 -->
<view class="head-left">
<image class="back-button" @click="goBack" src="/static/icons/Left_(左).png">
<!-- <text class="tip">当前特斯拉该如何布局？</text> -->
</image>
</view>
<view class="header-center">
<text class="title" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
>机构动向解析</text
>
</view>
</view>
<image class="picture" src="/static/images/缺省.png" />
<text class="tip">暂无内容~</text>
</view>
</template>
<script setup>
// 返回到 deepMate 页面
const goBack = () => {
uni.navigateTo({
url: '/pages/deepMate/deepMate'
});
};
</script>
<style scoped>
.blank-page {
display: flex;
flex-direction: column;
position: fixed;
/* 充满视口，彻底禁用页面滚动 */
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
overflow: hidden;
/* 锁定页面滚动 */
background-color: #ffffff;
padding: 20rpx 0rpx;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background-color: #ffffff;
box-shadow: 0 2rpx rgba(0, 0, 0, 0.1);
}
.head-left {
display: flex;
align-items: center;
}
.back-button {
width: 40rpx;
height: 40rpx;
}
.header-center .title {
position: fixed;
top: 25rpx;
left: 50%;
transform: translateX(-50%);
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.back-button:hover {
background-color: #e0e0e0;
}
.back-button:active {
transform: scale(0.95);
}
.back-icon {
font-size: 32rpx;
color: #333333;
margin-right: 10rpx;
}
.picture {
display: block;
margin: 200rpx auto 0; /* 图片水平居中 */
width: 60%;
height: 600rpx;
}
.tip {
color: #999999;
font-size: 28rpx;
text-align: center;
margin-top: 20rpx;
}
</style>

100
pages/blank/notice.vue
View File

@ -0,0 +1,100 @@
<template>
<view class="blank-page">
<view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<!-- 返回按钮 -->
<view class="head-left">
<image class="back-button" @click="goBack" src="/static/icons/Left_(左).png">
<!-- <text class="tip">当前特斯拉该如何布局？</text> -->
</image>
</view>
<view class="header-center">
<text class="title" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
>消息推送通知</text
>
</view>
</view>
<image class="picture" src="/static/images/缺省.png" />
<text class="tip">暂无内容~</text>
</view>
</template>
<script setup>
// 返回到 deepMate 页面
const goBack = () => {
uni.navigateTo({
url: '/pages/deepMate/deepMate'
});
};
</script>
<style scoped>
.blank-page {
display: flex;
flex-direction: column;
position: fixed;
/* 充满视口，彻底禁用页面滚动 */
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
overflow: hidden;
/* 锁定页面滚动 */
background-color: #ffffff;
padding: 20rpx 0rpx;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background-color: #ffffff;
box-shadow: 0 2rpx rgba(0, 0, 0, 0.1);
}
.head-left {
display: flex;
align-items: center;
}
.back-button {
width: 40rpx;
height: 40rpx;
}
.header-center .title {
position: fixed;
top: 25rpx;
left: 50%;
transform: translateX(-50%);
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.back-button:hover {
background-color: #e0e0e0;
}
.back-button:active {
transform: scale(0.95);
}
.back-icon {
font-size: 32rpx;
color: #333333;
margin-right: 10rpx;
}
.picture {
display: block;
margin: 200rpx auto 0; /* 图片水平居中 */
width: 60%;
height: 600rpx;
}
.tip {
color: #999999;
font-size: 28rpx;
text-align: center;
margin-top: 20rpx;
}
</style>

27
pages/deepMate/deepMate.vue
View File

@ -6,6 +6,7 @@
<image
src="https://d31zlh4on95l9h.cloudfront.net/images/f91e09b5987802185e7679055dafd272.svg"
class="icon"
@click="goToCustomerService"
>
</image>
</view>
@ -18,6 +19,7 @@
<image
src="https://d31zlh4on95l9h.cloudfront.net/images/d7c4e74201213a25dd9574e908233928.svg"
class="icon"
@click="goToNotice" @tap="goToNotice"
>
</image>
<image
@ -63,7 +65,7 @@
<view
class="recommend-card"
v-if="messages.length === 0"
@click="goBlank"
@click="goinstitutionalTrendsBriefing"
>
<view class="arrow" v-if="messages.length === 0"></view>
<view class="card-content">
@ -78,7 +80,7 @@
<image
src="https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg"
class="arrow-icon"
@click="goBlank"
@click="goinstitutionalTrendsBriefing"
></image>
</view>
</view>
@ -418,12 +420,29 @@ const newChat = () => {
};
// 跳转到空白页
const goBlank = () => {
const goinstitutionalTrendsBriefing = () => {
uni.navigateTo({
url: "/pages/blank/blank",
url: "/pages/blank/institutionalTrendsBriefing",
});
};
// 跳转到客户服务平台首页
const goToCustomerService = () => {
uni.navigateTo({
url: "/pages/customerServicePlatform/csPlatformIndex",
});
};
// 跳转到通知页
function goToNotice() {
try {
console.log("goToNotice: navigating to /pages/blank/notice");
uni.navigateTo({ url: "/pages/blank/notice" });
} catch (e) {
console.error("goToNotice navigateTo failed, fallback to redirect:", e);
uni.redirectTo({ url: "/pages/blank/notice" });
}
}
// 历史记录
const openHistoryDrawer = async () => {
const res = await postHistory({

579
pages/home/globalIndex.vue
View File

@ -1,579 +0,0 @@
<!-- @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>
<!-- 内容区域 -->
<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";
// 响应式数据
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",
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",
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",
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 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.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();
});
// 监听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>

705
pages/home/home.vue
View File

@ -17,7 +17,7 @@
<!-- 内容区域 - 使用滚动视图 -->
<scroll-view scroll-y class="content-container">
<!-- 1. 今日市场概览 -->
<market-overview></market-overview>
<market-overview :stock-info-list="currentStockInfoList"></market-overview>
<!-- 间隔 -->
<view class="section-gap"></view>
@ -121,7 +121,43 @@
</view>
</view>
<!-- 5. 今日市场看点 -->
<!-- 5. TCP连接测试 -->
<!-- <view class="section tcp-test-section">
<view class="section-header">
<text class="section-title">TCP连接测试</text>
<view class="tcp-status" :class="{'connected': tcpConnected, 'disconnected': !tcpConnected}">
<text class="status-text">{{tcpConnected ? '已连接' : '未连接'}}</text>
</view>
</view> -->
<!-- TCP控制按钮 -->
<!-- <view class="tcp-controls">
<button class="tcp-btn connect-btn" @click="connectTcp" :disabled="tcpConnected">连接</button>
<button class="tcp-btn disconnect-btn" @click="disconnectTcp" :disabled="!tcpConnected">断开</button>
<button class="tcp-btn send-btn" @click="sendTcpMessage" :disabled="!tcpConnected">发送测试消息</button>
<button class="tcp-btn status-btn" @click="getTcpStatus">查看状态</button>
</view> -->
<!-- 消息记录 -->
<!-- <view class="tcp-messages" v-if="tcpMessages.length > 0">
<view class="messages-header">
<text class="messages-title">消息记录 ({{tcpMessages.length}})</text>
<button class="clear-btn" @click="clearTcpMessages">清空</button>
</view>
<scroll-view scroll-y class="messages-list" scroll-top="{{tcpMessages.length * 50}}">
<view class="message-item" v-for="(msg, index) in tcpMessages" :key="index"
:class="{'sent': msg.direction === 'sent', 'received': msg.direction === 'received'}">
<view class="message-info">
<text class="message-direction">{{msg.direction === 'sent' ? '发送' : '接收'}}</text>
<text class="message-time">{{msg.timestamp}}</text>
</view>
<text class="message-content">{{msg.content}}</text>
</view>
</scroll-view>
</view>
</view> -->
<!-- 6. 今日市场看点 -->
<view class="section-header highlights-title-container">
<text class="section-title">今日市场核心看点</text>
</view>
@ -142,6 +178,8 @@
import footerBar from '../../components/footerBar.vue'
import MarketOverview from '../../components/MarketOverview.vue'
import DeepMate from '../../components/DeepMate.vue'
import tcpConnection from '../../api/tcpConnection.js'
import th from '../../static/language/th'
export default {
components: {
@ -177,7 +215,62 @@ export default {
],
// 防抖定时器
debounceTimer: null
debounceTimer: null,
// TCP连接相关状态
tcpConnected: false,
tcpMessages: [],
lastSentMessage: '',
// TCP监听器引用，用于移除监听器
connectionListener: null,
messageListener: null,
// TCP股票数据存储
tcpStockData: {
count: 0,
data: {},
stock_count: 0,
timestamp: '',
type: ''
},
// TCP数据缓存机制，用于处理分片数据
tcpDataCache: {
isCollecting: false, // 是否正在收集数据片段
expectedCount: 0, // 期望的数据总数
collectedData: {}, // 已收集的数据对象（用于对象级拼接）
timestamp: '', // 数据时间戳
type: '', // 数据类型
// 新增：字符串片段缓存
firstPartData: '', // 前半部分数据字符串
isWaitingSecondPart: false // 是否正在等待后半部分数据
},
// 当前显示的3个股票数据（用于MarketOverview组件）
currentStockInfoList: [
{
stock_name: '美元/日元',
current_price: '151.13',
change: '+1.62%',
change_value: 0,
change_percent: 0
},
{
stock_name: '美元/韩元',
current_price: '1424.900',
change: '-2.92%',
change_value: 0,
change_percent: 0
},
{
stock_name: '美元/英镑',
current_price: '0.730',
change: '+2.92%',
change_value: 0,
change_percent: 0
}
]
}
},
@ -200,6 +293,34 @@ export default {
}
})
})
// 初始化TCP连接监听器
this.initTcpListeners()
// 页面渲染完成后自动连接TCP
this.$nextTick(() => {
console.log('页面渲染完成，开始自动连接TCP服务器...')
this.connectTcp()
})
},
// 页面销毁前的清理工作
onUnload() {
// 自动关闭TCP连接
if (this.tcpConnected) {
console.log('页面销毁，自动关闭TCP连接')
tcpConnection.disconnect()
this.tcpConnected = false
}
// 清理防抖定时器
if (this.debounceTimer) {
clearTimeout(this.debounceTimer)
this.debounceTimer = null
}
// 移除TCP监听器，防止内存泄漏
this.removeTcpListeners()
},
methods: {
@ -210,6 +331,433 @@ export default {
fn()
this.debounceTimer = null
}, delay)
},
// TCP连接相关方法
// 初始化TCP监听器
initTcpListeners() {
// 创建连接状态监听器并保存引用
this.connectionListener = (status, result) => {
this.tcpConnected = (status === 'connected')
console.log('TCP连接状态变化:', status, this.tcpConnected)
// 显示连接状态提示
uni.showToast({
title: status === 'connected' ? '连接服务器成功' : '服务器连接断开',
icon: status === 'connected' ? 'success' : 'none',
duration: 1000
})
// 连接成功后自动发送股票数据请求命令
if (status === 'connected') {
console.log('TCP连接成功，自动发送股票数据请求...')
// 延迟一小段时间确保连接稳定后再发送命令
setTimeout(() => {
this.sendTcpMessage()
}, 500)
}
}
// 创建消息监听器并保存引用
this.messageListener = (type, message, parsedArray) => {
const messageObj = {
type: type,
content: message,
parsedArray: parsedArray,
timestamp: new Date().toLocaleTimeString(),
direction: 'received'
}
console.log("0000")
this.tcpMessages.push(messageObj)
// console.log('收到TCP消息:', messageObj)
console.log('home开始调用parseStockData',messageObj)
// 解析股票数据
this.parseStockData(message)
}
// 注册监听器
tcpConnection.onConnectionChange(this.connectionListener)
tcpConnection.onMessage(this.messageListener)
},
// 连接TCP服务器
connectTcp() {
console.log('开始连接TCP服务器...')
// 先断开现有连接（如果存在）
if (this.tcpConnected) {
console.log('检测到现有连接，先断开...')
this.disconnectTcp()
// 等待断开完成后再连接
setTimeout(() => {
this.performTcpConnect()
}, 500)
} else {
// 直接连接
this.performTcpConnect()
}
},
// 执行TCP连接
performTcpConnect() {
console.log('执行TCP连接...')
tcpConnection.connect(
{
ip: '192.168.1.9',
port: '8080',
channel: '1', // 可选 1~20
charsetname: 'UTF-8' // 默认UTF-8，可选GBK
}
)
},
// 断开TCP连接
disconnectTcp() {
console.log('断开TCP连接...')
tcpConnection.disconnect(
{
ip: '192.168.1.9',
port: '8080',
channel: '1', // 可选 1~20
charsetname: 'UTF-8' // 默认UTF-8，可选GBK
}
)
this.tcpConnected = false
},
// 发送TCP消息
sendTcpMessage() {
// 构造要发送的消息对象
const messageData =
// {
// command: "real_time",
// stock_code: "SH.000001"
// }
// {"command": "stock_list"}
// {"command": "batch_real_time", "stock_codes": ["SH.000001"]}
{"command": "batch_real_time", "stock_codes": ["SH.000001","SH.000002","SH.000003"]}
// 发送消息
const success = tcpConnection.send(messageData)
if (success) {
console.log('home发送TCP消息:', messageData)
uni.showToast({
title: '服务器连接成功',
icon: 'success',
duration: 1500
})
}
},
// 清空消息记录
clearTcpMessages() {
this.tcpMessages = []
uni.showToast({
title: '消息记录已清空',
icon: 'success',
duration: 1500
})
},
// 获取TCP连接状态
getTcpStatus() {
const status = tcpConnection.getConnectionStatus()
uni.showModal({
title: 'TCP连接状态',
content: `当前状态: ${status ? '已连接' : '未连接'}\n消息数量: ${this.tcpMessages.length}`,
showCancel: false
})
},
// 验证数据完整性（检查count值与data对象个数是否相等）
validateDataIntegrity(parsedMessage) {
if (!parsedMessage.count || !parsedMessage.data) {
return false
}
const dataObjectCount = Object.keys(parsedMessage.data).length
const expectedCount = parsedMessage.count
console.log(`数据完整性验证: 期望${expectedCount}个对象，实际${dataObjectCount}个对象`)
return dataObjectCount === expectedCount
},
// 检查数据状态（完整数据、前半部分数据、后半部分数据）
getDataStatus(message) {
if (typeof message !== 'string') {
return 'invalid'
}
const trimmedMessage = message.trim()
const startsWithBrace = trimmedMessage.startsWith('{')
const endsWithBrace = trimmedMessage.endsWith('}')
if (startsWithBrace && endsWithBrace) {
// 以{开头，以}结尾 - 完整数据
console.log('检测到完整数据格式')
return 'complete'
} else if (startsWithBrace && !endsWithBrace) {
// 以{开头，不以}结尾 - 前半部分数据
console.log('检测到前半部分数据')
return 'first_part'
} else if (!startsWithBrace && endsWithBrace) {
// 不以{开头，以}结尾 - 后半部分数据
console.log('检测到后半部分数据')
return 'second_part'
} else {
// 其他情况 - 无效数据
console.log('检测到无效数据格式')
return 'invalid'
}
},
// 缓存前半部分数据
cacheFirstPartData(message) {
this.tcpDataCache.firstPartData = message.trim()
this.tcpDataCache.isWaitingSecondPart = true
console.log('已缓存前半部分数据，长度:', this.tcpDataCache.firstPartData.length)
},
// 拼接前后两部分数据
concatenateDataParts(secondPartMessage) {
const completeMessage = this.tcpDataCache.firstPartData + secondPartMessage.trim()
console.log('数据拼接完成，完整数据长度:', completeMessage.length)
// 清空缓存
this.clearStringFragmentCache()
return completeMessage
},
// 清空字符串片段缓存
clearStringFragmentCache() {
this.tcpDataCache.firstPartData = ''
this.tcpDataCache.isWaitingSecondPart = false
console.log('字符串片段缓存已清空')
},
// 合并数据到缓存中
mergeDataToCache(parsedMessage) {
// 如果是第一次收集数据，初始化缓存
if (!this.tcpDataCache.isCollecting) {
this.tcpDataCache.isCollecting = true
this.tcpDataCache.expectedCount = parsedMessage.count
this.tcpDataCache.collectedData = {}
this.tcpDataCache.timestamp = parsedMessage.timestamp
this.tcpDataCache.type = parsedMessage.type
console.log('开始收集数据片段，期望总数:', parsedMessage.count)
}
// 合并新数据到缓存中
if (parsedMessage.data) {
Object.assign(this.tcpDataCache.collectedData, parsedMessage.data)
console.log('数据片段已合并，当前已收集:', Object.keys(this.tcpDataCache.collectedData).length, '个对象')
}
},
// 检查缓存数据是否完整
isCacheDataComplete() {
const collectedCount = Object.keys(this.tcpDataCache.collectedData).length
const expectedCount = this.tcpDataCache.expectedCount
console.log(`缓存数据检查: 已收集${collectedCount}个，期望${expectedCount}个`)
return collectedCount === expectedCount && collectedCount > 0
},
// 获取完整的缓存数据并清空缓存
getCompleteDataFromCache() {
const completeData = {
count: this.tcpDataCache.expectedCount,
data: { ...this.tcpDataCache.collectedData },
stock_count: this.tcpDataCache.expectedCount,
timestamp: this.tcpDataCache.timestamp,
type: this.tcpDataCache.type
}
// 清空缓存
this.tcpDataCache.isCollecting = false
this.tcpDataCache.expectedCount = 0
this.tcpDataCache.collectedData = {}
this.tcpDataCache.timestamp = ''
this.tcpDataCache.type = ''
console.log('获取完整数据并清空缓存，数据对象数:', Object.keys(completeData.data).length)
return completeData
},
// 解析TCP股票数据
parseStockData(message) {
try {
console.log('进入parseStockData, message类型:', typeof message, '长度:', message.length)
// 第一步：检查数据状态（完整、前半部分、后半部分）
const dataStatus = this.getDataStatus(message)
let completeMessage = ''
switch (dataStatus) {
case 'complete':
// 完整数据，直接处理
console.log('检测到完整数据，直接处理')
completeMessage = message
break
case 'first_part':
// 前半部分数据，缓存并等待后半部分
console.log('检测到前半部分数据，开始缓存')
this.cacheFirstPartData(message)
return // 等待后半部分数据
case 'second_part':
// 后半部分数据，检查是否有缓存的前半部分
if (this.tcpDataCache.isWaitingSecondPart) {
console.log('检测到后半部分数据，开始拼接')
completeMessage = this.concatenateDataParts(message)
} else {
console.log('收到后半部分数据，但没有缓存的前半部分，跳过处理')
return
}
break
case 'invalid':
default:
console.log('数据格式无效，跳过处理')
return
}
// 第二步：解析完整的JSON数据
let parsedMessage
try {
console.log('开始解析完整JSON数据，长度:', completeMessage.length)
parsedMessage = JSON.parse(completeMessage)
console.log('JSON解析成功，解析后类型:', typeof parsedMessage, parsedMessage)
} catch (parseError) {
console.error('JSON解析失败:', parseError.message)
// 清空字符串片段缓存
this.clearStringFragmentCache()
return
}
// 第三步：检查是否是股票数据类型
if (!((parsedMessage.type === 'batch_data_chunk' || parsedMessage.type === 'batch_realtime_data') && parsedMessage.data)) {
console.log('不是batch_data_chunk或batch_realtime_data类型的消息，跳过处理')
return
}
console.log('开始处理股票数据')
// 第四步：验证数据完整性（对象级别的完整性检查）
// 注意：batch_data_chunk类型的数据不需要验证完整性，直接处理
if (parsedMessage.type === 'batch_data_chunk') {
console.log('batch_data_chunk类型数据，跳过完整性验证，直接处理')
this.processCompleteStockData(parsedMessage)
} else {
const isDataComplete = this.validateDataIntegrity(parsedMessage)
if (isDataComplete) {
// 数据完整，直接处理
console.log('对象级数据完整，直接处理')
this.processCompleteStockData(parsedMessage)
} else {
// 数据不完整，需要拼接（对象级别的拼接）
console.log('对象级数据不完整，开始拼接处理')
// 将当前数据合并到缓存中
this.mergeDataToCache(parsedMessage)
// 检查缓存中的数据是否已经完整
if (this.isCacheDataComplete()) {
console.log('缓存数据已完整，开始处理')
const completeData = this.getCompleteDataFromCache()
this.processCompleteStockData(completeData)
} else {
console.log('缓存数据仍不完整，等待更多数据片段')
}
}
}
} catch (error) {
console.error('解析TCP股票数据失败:', error.message)
console.error('错误详情:', error)
// 发生错误时清空所有缓存
this.clearStringFragmentCache()
if (this.tcpDataCache.isCollecting) {
console.log('发生错误，清空对象级数据缓存')
this.tcpDataCache.isCollecting = false
this.tcpDataCache.expectedCount = 0
this.tcpDataCache.collectedData = {}
this.tcpDataCache.timestamp = ''
this.tcpDataCache.type = ''
}
}
},
// 处理完整的股票数据
processCompleteStockData(completeData) {
console.log("开始更新TCP股票数据存储")
// 更新TCP股票数据存储
this.tcpStockData = {
count: completeData.count || 0,
data: completeData.data || {},
stock_count: completeData.stock_count || 0,
timestamp: completeData.timestamp || '',
type: completeData.type || ''
}
// 获取所有股票的数据用于显示（最多3个）
const stockCodes = Object.keys(completeData.data)
const newStockInfoList = []
// 处理最多3个股票数据
for (let i = 0; i < Math.min(stockCodes.length, 3); i++) {
const stockCode = stockCodes[i]
// 检查数据结构
if (completeData.data[stockCode] && Array.isArray(completeData.data[stockCode]) && completeData.data[stockCode].length > 0) {
const stockData = completeData.data[stockCode][0] // 取第一条数据
if (stockData && stockData.current_price !== undefined && stockData.pre_close !== undefined) {
// 计算涨跌幅
const changeValue = stockData.current_price - stockData.pre_close
const changePercent = ((changeValue / stockData.pre_close) * 100).toFixed(2)
const changeSign = changeValue >= 0 ? '+' : ''
// 添加到股票信息列表
newStockInfoList.push({
stock_name: stockData.stock_name || '未知股票',
current_price: stockData.current_price ? stockData.current_price.toFixed(2) : '0.00',
change: `${changeSign}${changePercent}%`,
change_value: changeValue,
change_percent: parseFloat(changePercent)
})
}
}
}
// 更新当前显示的股票信息列表
if (newStockInfoList.length > 0) {
this.currentStockInfoList = newStockInfoList
console.log('股票数据更新成功，共', newStockInfoList.length, '个股票:', this.currentStockInfoList)
}
},
// 移除TCP监听器
removeTcpListeners() {
if (this.connectionListener) {
tcpConnection.removeConnectionListener(this.connectionListener)
this.connectionListener = null
console.log('已移除TCP连接状态监听器')
}
if (this.messageListener) {
tcpConnection.removeMessageListener(this.messageListener)
this.messageListener = null
console.log('已移除TCP消息监听器')
}
}
}
}
@ -706,4 +1254,155 @@ export default {
bottom: 0;
width: 100%;
}
/* TCP测试区域样式 */
.tcp-test-section {
border: 1px solid #e0e0e0;
background-color: #f9f9f9;
}
.tcp-status {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
}
.tcp-status.connected {
background-color: #e8f5e8;
color: #4caf50;
border: 1px solid #4caf50;
}
.tcp-status.disconnected {
background-color: #ffeaea;
color: #f44336;
border: 1px solid #f44336;
}
.status-text {
font-size: 12px;
font-weight: bold;
}
.tcp-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.tcp-btn {
flex: 1;
min-width: 80px;
height: 36px;
border-radius: 6px;
font-size: 12px;
border: none;
color: white;
font-weight: bold;
}
.connect-btn {
background-color: #4caf50;
}
.connect-btn:disabled {
background-color: #cccccc;
}
.disconnect-btn {
background-color: #f44336;
}
.disconnect-btn:disabled {
background-color: #cccccc;
}
.send-btn {
background-color: #2196f3;
}
.send-btn:disabled {
background-color: #cccccc;
}
.status-btn {
background-color: #ff9800;
}
.tcp-messages {
margin-top: 15px;
border-top: 1px solid #e0e0e0;
padding-top: 15px;
}
.messages-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.messages-title {
font-size: 14px;
font-weight: bold;
color: #333;
}
.clear-btn {
padding: 4px 8px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
font-size: 10px;
}
.messages-list {
max-height: 200px;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 8px;
background-color: white;
}
.message-item {
margin-bottom: 8px;
padding: 8px;
border-radius: 6px;
border-left: 3px solid #ccc;
}
.message-item.sent {
background-color: #e3f2fd;
border-left-color: #2196f3;
}
.message-item.received {
background-color: #f1f8e9;
border-left-color: #4caf50;
}
.message-info {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.message-direction {
font-size: 10px;
font-weight: bold;
color: #666;
}
.message-time {
font-size: 10px;
color: #999;
}
.message-content {
font-size: 12px;
color: #333;
word-break: break-all;
}
</style>

488
pages/home/marketDetail.vue
View File

@ -1,488 +0,0 @@
<!-- @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.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";
// 响应式数据
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([
{
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;
});
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);
// 这里可以跳转到股票详情页面
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();
});
// 监听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>

920
pages/home/marketSituation.vue
View File

@ -1,920 +0,0 @@
<!-- @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" />
</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="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">
<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)">
<text class="channel_text">{{ item.title }}</text>
<view v-if="index === pageIndex" class="active_indicator"></view>
</view>
</view>
</scroll-view>
<view class="scroll_indicator" @click="channel_more">
<image src="/static/marketSituation-image/menu.png" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- 可滚动内容区域 -->
<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
<view class="content">
<view class="map">
<image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
</view>
<view class="global_index">
<view class="global_index_title">
{{ $t("marketSituation.globalIndex") }}
</view>
<view class="global_index_more" @click="goToGlobalIndex">
<text>{{ $t("marketSituation.globalIndexMore") }}</text>
<image src="/static/marketSituation-image/more.png" mode="aspectFit"></image>
</view>
</view>
<!-- 卡片网格 -->
<view class="cards_grid">
<view v-for="(card, index) in cardData" :key="index" class="card_item">
<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>
</view>
</view>
<!-- 底部安全区域，防止被导航栏遮挡 -->
<view class="bottom_safe_area"></view>
</view>
</scroll-view>
</view>
<footerBar class="static-footer" :type="type"></footerBar>
<!-- 更多tab弹窗 -->
<view v-if="showCountryModal" class="modal_overlay" @click="closeModal">
<view class="modal_content" @click.stop>
<view class="modal_header">
<text class="modal_title">全部栏目</text>
<view class="modal_close" @click="closeModal">
<text>×</text>
</view>
</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)">
<text class="country_text">{{ country }}</text>
</view>
</view>
</view>
</view>
</view>
</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文字是否溢出
// 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("");
// 计算属性：精准计算content区域的top值
const contentTopPosition = computed(() => {
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";
});
// 弹窗相关数据
const showCountryModal = ref(false);
const selectedCountry = ref("概况");
const countryList = ref(["概况", "新加坡", "马来西亚", "印度尼西亚", "美国", "中国香港", "泰国", "中国", "加拿大", "越南", "外汇", "贵金属"]);
// 卡片数据
const cardData = ref([
{
flagIcon: "🇺🇸",
stockName: "道琼斯",
stockCode: "DJIA",
currentPrice: "45757.90",
changeAmount: "-125.22",
changePercent: "-0.27%",
isRising: false,
},
{
flagIcon: "🇺🇸",
stockName: "纳斯达克",
stockCode: "NDX",
currentPrice: "22333.96",
changeAmount: "+125.22",
changePercent: "+0.47%",
isRising: true,
},
{
flagIcon: "🇺🇸",
stockName: "标普500",
stockCode: "SPX",
currentPrice: "6606.08",
changeAmount: "+125.22",
changePercent: "+0.27%",
isRising: true,
},
{
flagIcon: "🇨🇳",
stockName: "上证指数",
stockCode: "1A0001",
currentPrice: "3333.96",
changeAmount: "+125.22",
changePercent: "+0.27%",
isRising: true,
},
{
flagIcon: "🇨🇳",
stockName: "科创50",
stockCode: "1B0688",
currentPrice: "757.90",
changeAmount: "-25.22",
changePercent: "-0.27%",
isRising: false,
},
{
flagIcon: "🇭🇰",
stockName: "恒生指数",
stockCode: "HSI",
currentPrice: "19757.90",
changeAmount: "-125.22",
changePercent: "-0.63%",
isRising: false,
},
{
flagIcon: "🇸🇬",
stockName: "道琼斯",
stockCode: "DJIA",
currentPrice: "3757.90",
changeAmount: "+85.22",
changePercent: "+2.31%",
isRising: true,
},
{
flagIcon: "🇲🇾",
stockName: "纳斯达克",
stockCode: "NDX",
currentPrice: "1657.90",
changeAmount: "-15.22",
changePercent: "-0.91%",
isRising: false,
},
{
flagIcon: "🇹🇭",
stockName: "标普500",
stockCode: "SPX",
currentPrice: "1457.90",
changeAmount: "+35.22",
changePercent: "+2.48%",
isRising: true,
},
]);
// 搜索输入事件
const onSearchInput = (e) => {
searchValue.value = e.detail.value;
};
// 搜索确认事件
const onSearchConfirm = (e) => {
console.log("搜索内容:", e.detail.value);
// 这里可以添加搜索逻辑
performSearch(e.detail.value);
};
// 搜索图标点击事件
const onSearchClick = () => {
if (searchValue.value.trim()) {
performSearch(searchValue.value);
}
};
// 执行搜索
const performSearch = (keyword) => {
if (!keyword.trim()) {
uni.showToast({
title: "请输入搜索内容",
icon: "none",
});
return;
}
uni.showToast({
title: `搜索: ${keyword}`,
icon: "none",
});
// 这里添加实际的搜索逻辑
};
// 我的收藏点击事件
const selected = () => {
uni.showToast({
title: "我的收藏",
icon: "none",
});
// 这里可以跳转到收藏页面
};
// 历史记录点击事件
const history = () => {
uni.showToast({
title: "历史记录",
icon: "none",
});
// 这里可以跳转到历史页面
};
// Tab 栏点击事件
const navClick = (index) => {
pageIndex.value = index;
const currentItem = channelData.value[index];
scrollToView.value = "nav" + currentItem.id;
// 同步更新弹窗中的选中状态
selectedCountry.value = currentItem.title;
uni.showToast({
title: `切换到: ${currentItem.title}`,
icon: "none",
});
// 这里可以添加切换 tab 后的数据加载逻辑
console.log("当前选中的 tab:", currentItem);
};
// 更多选项点击事件
const channel_more = () => {
showCountryModal.value = true;
};
// 选择国家
const selectCountry = (country) => {
selectedCountry.value = country;
// 查找对应的tab索引
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;
console.log("选中了：" + country + "，同步到tab索引：" + targetIndex);
uni.showToast({
title: "已切换到：" + country,
icon: "none",
duration: 2000,
});
} else {
// 如果是"概况"或其他特殊选项，默认切换到第一个tab
if (country === "概况" || country === "全部") {
pageIndex.value = 0;
scrollToView.value = "nav" + channelData.value[0].id;
}
console.log("选中了：" + country);
uni.showToast({
title: "已选择：" + country,
icon: "none",
duration: 2000,
});
}
// 这里可以添加切换到对应国家/地区数据的逻辑
// 例如：loadMarketData(country)
closeModal();
};
// 关闭弹窗
const closeModal = () => {
showCountryModal.value = false;
};
// 检测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 goToGlobalIndex = () => {
uni.navigateTo({
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(() => {
// 状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
// 初始化 tab 栏
if (channelData.value.length > 0) {
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);
}
);
// 确保DOM渲染完成后再查询高度
nextTick(() => {
// 动态计算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 scoped>
/* 状态栏占位 */
.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);
}
/* 可滚动内容区域 */
.content_scroll {
position: fixed;
left: 0;
right: 0;
bottom: 100rpx;
/* 底部导航栏高度 */
overflow-y: auto;
}
.header_content {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
padding: 0 20rpx;
margin-bottom: 10rpx;
}
.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;
}
/* Tab 栏样式 */
.channel_li {
display: flex;
align-items: center;
height: 80rpx;
background-color: #ffffff;
border-bottom: 1rpx solid #f0f0f0;
}
.channel_wrap {
width: calc(100% - 60rpx);
height: 100%;
overflow: hidden;
flex-shrink: 0;
}
.channel_innerWrap {
display: flex;
align-items: center;
height: 100%;
padding: 0 20rpx;
white-space: nowrap;
}
.channel_item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60rpx;
padding: 0 20rpx;
border-radius: 30rpx;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.channel_item:active {
transform: scale(0.98);
}
.channel_item.active {
color: #333;
font-weight: bold;
}
.channel_text {
font-size: 28rpx;
font-weight: 500;
color: #666666;
transition: color 0.3s ease;
white-space: nowrap;
}
.channel_item.active .channel_text {
color: #333333;
font-weight: 400;
z-index: 2;
}
.active_indicator {
position: absolute;
left: 50%;
top: 60%;
transform: translateX(-45%);
width: calc(100% - 20rpx);
min-width: 40rpx;
max-width: 120rpx;
height: 8rpx;
background-image: url("/static/marketSituation-image/bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slideIn 0.1s ease;
border-radius: 8rpx;
z-index: 1;
}
@keyframes slideIn {
from {
width: 0;
opacity: 0;
}
to {
width: 40rpx;
opacity: 1;
}
}
.scroll_indicator {
border-left: 1rpx solid #b6b6b6;
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 30rpx;
background-color: #ffffff;
flex-shrink: 0;
}
.scroll_indicator image {
width: 20rpx;
height: 20rpx;
opacity: 0.5;
}
.content {
margin-top: 20rpx;
background-color: white;
}
.map {
width: calc(100% - 60rpx);
margin: 0 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
border-radius: 30rpx;
border: 1rpx solid #e0e0e0;
padding: 30rpx 20rpx;
box-sizing: border-box;
/* 设置最小高度保护，但允许内容撑开 */
min-height: 200rpx;
}
.map image {
width: 100%;
height: auto;
max-width: 100%;
display: block;
/* widthFix模式下，高度会自动按比例调整 */
/* 设置最大高度避免图片过大 */
max-height: 60vh;
/* 添加平滑过渡效果 */
transition: all 0.3s ease;
max-height: 60vh;
}
/* 响应式优化 */
@media screen and (max-width: 750rpx) {
.map {
margin: 0 20rpx;
width: calc(100% - 40rpx);
padding: 20rpx 15rpx;
}
}
@media screen and (max-width: 480rpx) {
.map {
margin: 0 15rpx;
width: calc(100% - 30rpx);
padding: 15rpx 10rpx;
}
}
.static-footer {
position: fixed;
bottom: 0;
}
/* 弹窗样式 */
.modal_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-end;
z-index: 1000;
}
.modal_content {
width: 100%;
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
max-height: 80vh;
overflow: hidden;
}
.modal_header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.modal_title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
text-align: center;
}
.modal_close {
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
color: #999;
}
.modal_body {
padding: 40rpx;
}
.country_grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
}
.country_item {
padding: 24rpx 30rpx;
border-radius: 12rpx;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.country_item.selected {
background-color: #ff4444;
color: #fff;
}
.country_text {
font-size: 28rpx;
color: #333;
}
.country_item.selected .country_text {
color: #fff;
}
.global_index {
margin: 30rpx 20rpx 0 20rpx;
display: flex;
justify-content: space-between;
}
.global_index_title {
margin-left: 20rpx;
font-size: 40rpx;
font-weight: 100;
color: #333333;
align-items: center;
}
.global_index_more {
display: flex;
gap: 10rpx;
font-size: 28rpx;
color: #333333;
align-items: center;
}
.global_index_more image {
width: 40rpx;
height: 40rpx;
align-items: center;
}
/* 卡片网格样式 */
.cards_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0;
box-sizing: border-box;
width: 100%;
}
.card_item {
width: 100%;
box-sizing: border-box;
min-width: 0;
/* 防止内容溢出 */
}
/* 响应式布局 - 小屏幕时改为两列 */
@media (max-width: 600rpx) {
.cards_grid {
grid-template-columns: repeat(2, 1fr);
padding: 30rpx 20rpx;
}
}
/* 超小屏幕时改为单列 */
@media (max-width: 400rpx) {
.cards_grid {
grid-template-columns: 1fr;
padding: 30rpx 20rpx;
}
}
.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秒开始滚动，让用户先看到开头 */
}
/* 底部安全区域 */
.bottom_safe_area {
height: 40rpx;
background-color: transparent;
}
/* 主容器样式调整 */
.main {
position: relative;
height: 100vh;
overflow: hidden;
background-color: white;
}
</style>

655
pages/marketSituation/chartExample.vue
View File

@ -0,0 +1,655 @@
<template>
<view style="width: 750rpx; height: 750rpx;">
<l-echart ref="chartRef" @finished="initChart"></l-echart>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
const chartRef = ref(null)
// 获取系统信息，替代 window.innerWidth
const systemInfo = uni.getSystemInfoSync()
const screenWidth = ref(systemInfo.screenWidth || 375) // 默认值 375px
// 生成30天的交易信号数据
const generateAIGoldBullData = () => {
const data = []
for (let i = 0; i < 30; i++) {
// 模拟交易信号 [索引, 买入信号, 卖出信号, 持有信号, 强度, 成交量]
const buySignal = Math.random() > 0.7 ? 1 : 0 // 30%概率买入信号
const sellSignal = Math.random() > 0.8 ? 1 : 0 // 20%概率卖出信号
const holdSignal = Math.random() > 0.5 ? 1 : 0 // 50%概率持有信号
const strength = Math.floor(Math.random() * 3) + 1 // 信号强度1-3
const volume = Math.floor(Math.random() * 2000) + 500 // 成交量500-2500
data.push([i, buySignal, sellSignal, holdSignal, strength, volume])
}
return data
}
// 添加缺失的变量定义
var option
const AIGoldBull = ref({
JN: generateAIGoldBullData()
})
// 模拟多语言数据
const t = ref({
suoxie: 'zh',
tianxian: '天线',
feixian: '飞线',
zhoongxian: '中线',
liuxian: '流线',
Klinetext_5: 'K线5',
Klinetext_6: 'K线6',
maipan: '买盘',
maipan1: '卖盘'
})
// 生成30天的模拟K线数据 [日期, 开盘, 最高, 最低, 收盘]
const generateKLineData = () => {
const data = []
let basePrice = 2450 // 黄金基础价格
for (let i = 0; i < 30; i++) {
const date = new Date(2024, 0, i + 1).toISOString().split('T')[0]
// 模拟价格波动
const volatility = (Math.random() - 0.5) * 50 // ±25的波动
const open = basePrice + volatility
const highVolatility = Math.random() * 30 + 10 // 10-40的向上波动
const lowVolatility = Math.random() * 30 + 10 // 10-40的向下波动
const high = Math.max(open, open + highVolatility)
const low = Math.min(open, open - lowVolatility)
const closeVolatility = (Math.random() - 0.5) * 20
const close = Math.max(low, Math.min(high, open + closeVolatility))
data.push([date,
Math.round(open * 100) / 100,
Math.round(high * 100) / 100,
Math.round(low * 100) / 100,
Math.round(close * 100) / 100
])
basePrice = close // 下一天的基础价格
}
return data
}
// 生成30天的成交量和技术指标数据 [日期, 成交量1, 成交量2, 指标1, 指标2, 指标3]
const generateWaveVolData = () => {
const data = []
for (let i = 0; i < 30; i++) {
const date = new Date(2024, 0, i + 1).toISOString().split('T')[0]
// 模拟成交量数据
const vol1 = Math.floor(Math.random() * 2000) + 800 // 800-2800
const vol2 = Math.floor(Math.random() * 1500) + 600 // 600-2100
// 模拟技术指标
const indicator1 = Math.floor(Math.random() * 30) + 40 // 40-70
const indicator2 = Math.floor(Math.random() * 40) + 50 // 50-90
const indicator3 = Math.floor(Math.random() * 35) + 60 // 60-95
data.push([date, vol1, vol2, indicator1, indicator2, indicator3])
}
return data
}
// 生成30天的移动平均线数据 [MA5, MA10, MA20, MA30]
const generateFTLineData = () => {
const data = []
let ma5Base = 2450
let ma10Base = 2445
let ma20Base = 2440
let ma30Base = 2435
for (let i = 0; i < 30; i++) {
// 模拟移动平均线的平滑变化
ma5Base += (Math.random() - 0.5) * 10
ma10Base += (Math.random() - 0.5) * 8
ma20Base += (Math.random() - 0.5) * 6
ma30Base += (Math.random() - 0.5) * 4
data.push([
Math.round(ma5Base * 100) / 100,
Math.round(ma10Base * 100) / 100,
Math.round(ma20Base * 100) / 100,
Math.round(ma30Base * 100) / 100
])
}
return data
}
// 生成模拟数据
const mockKLineData = generateKLineData()
const mockWaveVolData = generateWaveVolData()
const mockFTLineData = generateFTLineData()
// 生成RSI指标数据 (相对强弱指数)
const generateRSIData = () => {
const data = []
for (let i = 0; i < 30; i++) {
const rsi = Math.random() * 60 + 20 // RSI值在20-80之间
data.push(Math.round(rsi * 100) / 100)
}
return data
}
// 生成MACD指标数据
const generateMACDData = () => {
const data = []
for (let i = 0; i < 30; i++) {
const macd = (Math.random() - 0.5) * 20 // MACD值在-10到10之间
const signal = (Math.random() - 0.5) * 15 // 信号线
const histogram = macd - signal // 柱状图
data.push([
Math.round(macd * 100) / 100,
Math.round(signal * 100) / 100,
Math.round(histogram * 100) / 100
])
}
return data
}
// 生成布林带数据
const generateBollingerData = () => {
const data = []
let middleLine = 2450
for (let i = 0; i < 30; i++) {
middleLine += (Math.random() - 0.5) * 10
const upperBand = middleLine + Math.random() * 30 + 20 // 上轨
const lowerBand = middleLine - Math.random() * 30 - 20 // 下轨
data.push([
Math.round(upperBand * 100) / 100,
Math.round(middleLine * 100) / 100,
Math.round(lowerBand * 100) / 100
])
}
return data
}
// 生成成交量分析数据
const generateVolumeAnalysisData = () => {
const data = []
for (let i = 0; i < 30; i++) {
const buyVolume = Math.floor(Math.random() * 1500) + 500 // 买入量
const sellVolume = Math.floor(Math.random() * 1500) + 500 // 卖出量
const netVolume = buyVolume - sellVolume // 净买入量
data.push([buyVolume, sellVolume, netVolume])
}
return data
}
// 生成市场情绪数据
const generateMarketSentimentData = () => {
const sentiments = ['极度恐慌', '恐慌', '中性', '贪婪', '极度贪婪']
const data = []
for (let i = 0; i < 30; i++) {
const sentimentIndex = Math.floor(Math.random() * 100) // 0-100的情绪指数
const sentimentLabel = sentiments[Math.floor(sentimentIndex / 20)]
data.push({
date: new Date(2024, 0, i + 1).toISOString().split('T')[0],
index: sentimentIndex,
label: sentimentLabel,
fearGreedRatio: Math.random() * 100
})
}
return data
}
// 生成重要新闻事件数据
const generateNewsEventsData = () => {
const events = [
'美联储利率决议',
'非农就业数据发布',
'通胀数据公布',
'地缘政治紧张',
'央行政策变化',
'经济数据超预期',
'市场技术突破',
'大宗商品价格波动'
]
const data = []
for (let i = 0; i < 10; i++) { // 生成10个随机事件
const randomDay = Math.floor(Math.random() * 30) + 1
const event = events[Math.floor(Math.random() * events.length)]
const impact = Math.floor(Math.random() * 5) + 1 // 影响力1-5
data.push({
date: new Date(2024, 0, randomDay).toISOString().split('T')[0],
event: event,
impact: impact,
type: Math.random() > 0.5 ? 'positive' : 'negative'
})
}
return data.sort((a, b) => new Date(a.date) - new Date(b.date))
}
// 生成价格预测数据
const generatePricePredictionData = () => {
const data = []
let currentPrice = 2450
for (let i = 0; i < 7; i++) { // 未来7天预测
const date = new Date(2024, 1, i + 1).toISOString().split('T')[0] // 2月份
// 模拟AI预测的价格区间
const prediction = currentPrice + (Math.random() - 0.5) * 100
const confidence = Math.random() * 40 + 60 // 60-100%的置信度
const upperBound = prediction + Math.random() * 50
const lowerBound = prediction - Math.random() * 50
data.push({
date: date,
predicted_price: Math.round(prediction * 100) / 100,
confidence: Math.round(confidence),
upper_bound: Math.round(upperBound * 100) / 100,
lower_bound: Math.round(lowerBound * 100) / 100
})
currentPrice = prediction
}
return data
}
// 模拟提取的绘图数据
const extractedDrawData = {
KLine20: mockKLineData,
WAVEVOL: mockWaveVolData,
FTLINE: mockFTLineData,
RSI: generateRSIData(),
MACD: generateMACDData(),
BOLLINGER: generateBollingerData(),
VOLUME_ANALYSIS: generateVolumeAnalysisData(),
MARKET_SENTIMENT: generateMarketSentimentData(),
NEWS_EVENTS: generateNewsEventsData(),
PRICE_PREDICTION: generatePricePredictionData()
}
const fnShowEcharts4 = (extractedDrawData) => {
const splitData = (b) => {
const a = JSON.parse(JSON.stringify(b))
let categoryData = []
let values = []
for (let i = 0; i < a.length; i++) {
categoryData.push(a[i].splice(0, 1)[0])
values.push(a[i])
}
return {
categoryData,
values
}
}
var bodongliang = splitData(extractedDrawData.WAVEVOL)
function bodongliangData(values, i) {
return values.map((subArray) => subArray[i])
}
function calculateMA(index, data) {
let result = []
if (data.FTLINE) {
data.FTLINE.forEach((item) => {
result.push(item[index])
})
}
return result
}
function vwToPx(vw) {
return (screenWidth.value * vw) / 100
}
var dealData = splitData(extractedDrawData.KLine20)
var dealGnBullData = AIGoldBull.value.JN
const textEcharts = t.value
const firstLegend = computed(() => {
if (screenWidth.value < 768) {
if (textEcharts.suoxie === 'en' || textEcharts.suoxie === 'th') {
return '2%'
} else if (textEcharts.suoxie === 'kr') {
return '2%'
} else {
return '2%'
}
} else {
return textEcharts.suoxie === 'en' ||
textEcharts.suoxie === 'th' ||
textEcharts.suoxie === 'kr'
? '9%'
: '9%'
}
})
const processBarData = (data) => {
const barData = []
data.forEach((item) => {
let color
switch (item[4]) {
case 1:
color = '#13E113'
break
case 2:
color = '#FF0E00'
break
case 3:
color = '#0000FE'
break
case 4:
color = '#1397FF'
break
}
barData.push({
value: item[5],
itemStyle: {
normal: {
color: color
}
}
})
})
return { barData }
}
const { barData } = processBarData(dealGnBullData)
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(119, 120, 125, 0.6)',
borderWidth: 1,
borderColor: '#77787D',
padding: 10,
textStyle: {
color: '#fff'
}
},
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
],
label: {
backgroundColor: '#77787D'
}
},
toolbox: {
show: false
},
grid: [
{
left: screenWidth.value > 768 ? '10%' : '12%',
right: screenWidth.value > 768 ? '4%' : '6%',
top: screenWidth.value > 768 ? '10%' : '12%',
height: screenWidth.value > 768 ? '35%' : '34%',
containLabel: false
},
{
left: screenWidth.value > 768 ? '10%' : '12%',
right: screenWidth.value > 768 ? '4%' : '6%',
top: screenWidth.value > 768 ? '48%' : '48%',
height: screenWidth.value > 768 ? '19%' : '21%',
containLabel: false
},
{
left: screenWidth.value > 768 ? '10%' : '12%',
right: screenWidth.value > 768 ? '4%' : '6%',
top: screenWidth.value > 768 ? '70%' : '71%',
height: screenWidth.value > 768 ? '19%' : '21%',
containLabel: false
}
],
xAxis: [
{
type: 'category',
data: dealData.categoryData,
boundaryGap: true,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax',
axisPointer: {
z: 100,
label: {
show: false // 不显示标签
}
},
axisLine: {
lineStyle: {
color: 'black'
}
}, //
axisLabel: { show: false },
axisTick: { show: false }
},
{
type: 'category',
gridIndex: 1,
data: dealData.categoryData,
boundaryGap: true,
axisPointer: {
z: 100,
label: {
show: false // 不显示标签
}
},
axisLine: { lineStyle: { color: 'black' } },
axisLabel: {
show: false,
interval: 'auto'
},
axisTick: { show: false }
},
{
type: 'category',
gridIndex: 2,
data: dealData.categoryData,
boundaryGap: true,
axisLine: { lineStyle: { color: 'black' } },
axisLabel: {
show: true,
interval: 'auto',
fontSize: screenWidth.value > 768 ? 15 : 9
},
axisTick: { show: false }
}
],
yAxis: [
{
scale: true,
gridIndex: 0,
position: 'left',
axisLabel: {
inside: false,
align: 'right',
fontSize: screenWidth.value > 768 ? 15 : 9
},
axisLine: {
show: true,
lineStyle: {
fontSize: '',
color: 'black'
}
},
axisTick: { show: false },
splitLine: { show: false }
},
{
scale: true,
gridIndex: 1,
splitNumber: 4,
min: 0,
minInterval: 1,
axisLabel: {
show: true,
fontSize: screenWidth.value > 768 ? 15 : 9,
margin: 8,
},
axisLine: { show: true, lineStyle: { color: 'black' } },
axisTick: { show: false },
splitLine: { show: true, lineStyle: { type: 'dashed' } },
boundaryGap: ['20%', '20%']
},
{
scale: true,
gridIndex: 2,
splitNumber: 2,
axisLabel: {
show: true,
fontSize: screenWidth.value > 768 ? 15 : 9
},
axisLine: { show: true, lineStyle: { color: 'black' } },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1, 2],
start: 50,
end: 100
},
{
show: true,
xAxisIndex: [0, 1, 2],
type: 'slider',
start: 50,
end: 100
}
],
series: [
{
type: 'candlestick',
name: '日K',
xAxisIndex: 0,
yAxisIndex: 0,
data: dealData.values,
itemStyle: {
normal: {
color0: 'red',
color: 'green',
borderColor0: 'red',
borderColor: 'green'
}
},
gridIndex: 1
},
{
name: '成交量',
type: 'bar',
barWidth: '70%',
xAxisIndex: 1,
yAxisIndex: 1,
data: barData,
},
// {
// name: textEcharts.feixian,
// type: 'line',
// data: calculateMA(1, extractedDrawData),
// smooth: true,
// symbol: 'none',
// xAxisIndex: 2,
// yAxisIndex: 2,
// itemStyle: {
// normal: {
// color: '#00a32e',
// lineStyle: {
// color: '#00a32e',
// width: 2,
// type: 'solid'
// }
// }
// }
// },
// {
// name: textEcharts.zhoongxian,
// type: 'line',
// data: calculateMA(2, extractedDrawData),
// smooth: true,
// symbol: 'none',
// xAxisIndex: 2,
// yAxisIndex: 2,
// itemStyle: {
// normal: {
// color: '#de0000',
// lineStyle: {
// color: '#de0000',
// width: 2,
// type: 'solid'
// }
// }
// }
// },
// {
// name: textEcharts.tianxian,
// type: 'line',
// data: calculateMA(3, extractedDrawData),
// smooth: true,
// symbol: 'none',
// xAxisIndex: 2,
// yAxisIndex: 2,
// itemStyle: {
// normal: {
// color: '#ffb300',
// lineStyle: {
// color: '#ffb300',
// width: 2,
// type: 'solid'
// }
// }
// }
// },
// {
// name: textEcharts.liuxian,
// type: 'line',
// data: calculateMA(4, extractedDrawData),
// smooth: true,
// symbol: 'none',
// xAxisIndex: 2,
// yAxisIndex: 2,
// itemStyle: {
// normal: {
// color: '#00c8ff',
// lineStyle: {
// color: '#00c8ff',
// width: 2,
// type: 'solid'
// }
// }
// }
// },
]
}
initChart()
}
// 组件挂载时初始化图表
onMounted(() => {
// 调用图表初始化函数
fnShowEcharts4(extractedDrawData)
})
// 初始化图表
const initChart = async () => {
if (!chartRef.value) return
try {
const chart = await chartRef.value.init(echarts)
chart.setOption(option)
} catch (error) {
console.error('图表初始化失败:', error)
}
}
</script>

493
pages/marketSituation/countryMarket.vue
View File

@ -0,0 +1,493 @@
<template>
<view class="content">
<!-- 市场子Tab -->
<view class="sub_tabs">
<view v-for="(tab, i) in marketTabs" :key="tab" :class="['tab_item', i === activeTabIndex ? 'active' : '']"
@click="switchTab(i)">
<text>{{ tab }}</text>
</view>
</view>
<!-- 大盘指数 -->
<view class="section">
<view class="section_header">
<text class="section_title">大盘指数</text>
<text class="section_action" @click="viewMore('indices')">查看更多 ></text>
</view>
<view class="indices_grid">
<view v-for="(index, i) in countryInfo.mainIndices" :key="i" class="index_item">
<IndexCard :flagIcon="countryInfo.flag" :indexName="index.name" :currentPrice="index.price"
:changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" />
</view>
</view>
<!-- 今日市场情绪温度 -->
<view class="sentiment">
<view class="section_subtitle">
<text>今日市场情绪温度</text>
</view>
<view class="meters">
<view class="meter_item" v-for="(m, i) in sentimentMeters" :key="i">
<image class="meter_icon" :class="m.theme" :src="selectIcons[m.theme]" mode="aspectFit"></image>
<view class="meter_info">
<text class="meter_value" :class="m.theme">{{ m.value }}°C</text>
<text class="meter_label" :class="m.theme">{{ m.label }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 板块 -->
<view class="section">
<view class="section_header">
<text class="section_title">板块</text>
<text class="section_action" @click="viewMore('sectors')">查看更多 ></text>
</view>
<view class="sectors_grid">
<view v-for="(sec, i) in sectors" :key="i" class="sector_item">
<view class="sector_header">
<text class="sector_name">{{ sec.name }}</text>
<text :class="['sector_change', sec.isRising ? 'rising' : 'falling']">
{{ sec.change }}
</text>
</view>
<view class="sector_price">{{ sec.price }}</view>
</view>
</view>
</view>
<!-- 股票 -->
<view class="section">
<view class="section_header">
<text class="section_title">股票</text>
<text class="section_action" @click="viewMore('stocks')">查看更多 ></text>
</view>
<view class="table">
<view class="table_header">
<text class="cell name">名称</text>
<text class="cell price">最新</text>
<text class="cell change">涨幅</text>
</view>
<view class="table_row" v-for="(stk, i) in stocks" :key="i">
<view class="cell name">
<text class="stk_name">{{ stk.name }}</text>
<text class="stk_code">{{ stk.code }}</text>
</view>
<view class="cell price">
<text class="stk_price">{{ stk.price }}</text>
</view>
<view class="cell change">
<text :class="['stk_change', stk.isRising ? 'rising' : 'falling']">
{{ stk.change }}
</text>
</view>
</view>
</view>
</view>
<!-- 底部安全区域 -->
<view class="bottom_safe_area"></view>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import IndexCard from '../../components/IndexCard.vue'
// 子Tab与操作
const marketTabs = ['全部', '美股', '纽交所', '纳斯达克']
const activeTabIndex = ref(0)
const switchTab = (i) => {
activeTabIndex.value = i
}
// 今日情绪温度示例数据
const sentimentMeters = [
{ value: 90, label: '道琼斯', theme: 'hot' },
{ value: 60, label: '纳斯达克', theme: 'warm' },
{ value: 20, label: '标普500', theme: 'cool' }
]
// 图标映射
const selectIcons = {
hot: '/static/marketSituation-image/hot.png',
warm: '/static/marketSituation-image/warm.png',
cool: '/static/marketSituation-image/cool.png'
}
// Props
const props = defineProps({
countryId: {
type: Number,
required: true
}
})
// 国家/地区信息映射
const countryInfoMap = {
2: { // 新加坡
name: '新加坡',
flag: '🇸🇬',
isMarketOpen: true,
mainIndices: [
{ name: '海峡时报指数', price: '3,234.56', change: '+12.34', changePercent: '+0.38%', isRising: true },
{ name: 'FTSE ST Mid Cap', price: '1,234.56', change: '-5.67', changePercent: '-0.46%', isRising: false }
],
hotStocks: [
{ name: '星展银行', code: 'D05.SI', price: '35.20', change: '+0.15', isRising: true },
{ name: '华侨银行', code: 'O39.SI', price: '13.45', change: '-0.05', isRising: false }
]
},
3: { // 马来西亚
name: '马来西亚',
flag: '🇲🇾',
isMarketOpen: false,
mainIndices: [
{ name: '富时大马KLCI指数', price: '1,567.89', change: '+8.90', changePercent: '+0.57%', isRising: true }
],
hotStocks: [
{ name: '马来亚银行', code: '1155.KL', price: '9.85', change: '+0.10', isRising: true },
{ name: '大众银行', code: '1295.KL', price: '4.32', change: '-0.02', isRising: false }
]
},
4: { // 印度尼西亚
name: '印度尼西亚',
flag: '🇮🇩',
isMarketOpen: true,
mainIndices: [
{ name: '雅加达综合指数', price: '7,234.56', change: '+45.67', changePercent: '+0.63%', isRising: true }
],
hotStocks: []
},
5: { // 美国
name: '美国',
flag: '🇺🇸',
isMarketOpen: false,
mainIndices: [
{ name: '道琼斯', price: '45,757.90', change: '-125.22', changePercent: '-0.27%', isRising: false },
{ name: '纳斯达克', price: '22,333.96', change: '+125.22', changePercent: '+0.47%', isRising: true },
{ name: '标普500', price: '6,606.08', change: '+125.22', changePercent: '+0.27%', isRising: true }
],
hotStocks: [
{ name: '苹果', code: 'AAPL', price: '195.89', change: '+2.34', isRising: true },
{ name: '微软', code: 'MSFT', price: '378.85', change: '-1.23', isRising: false }
]
}
}
// 计算当前国家信息
const countryInfo = computed(() => {
return countryInfoMap[props.countryId] || {
name: '未知地区',
flag: '🌍',
isMarketOpen: false,
mainIndices: [],
hotStocks: []
}
})
// 计算当前国家的板块与股票
const sectors = computed(() => {
return countryInfoMap[props.countryId]?.sectors || []
})
const stocks = computed(() => {
return countryInfoMap[props.countryId]?.stocks || []
})
// 查看更多占位
const viewMore = (type) => {
// 可根据 type 跳转到相应页面或加载更多
// 例如：indices/sectors/stocks
// uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
}
</script>
<style scoped>
.content {
padding: 0 20rpx 20rpx 20rpx;
}
/* 子Tab */
.sub_tabs {
display: flex;
gap: 16rpx;
padding: 0 20rpx 20rpx 20rpx;
}
.tab_item {
padding: 6rpx 20rpx;
border-radius: 5rpx;
background: #f5f5f5;
color: #666;
font-size: 24rpx;
}
.tab_item.active {
background: #ff4444;
color: #fff;
}
.section {
padding: 20rpx;
border-radius: 16rpx;
}
.section_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.section_title {
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.section_action {
font-size: 24rpx;
color: #999;
}
.indices_grid {
padding: 20rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
background-color: #F6F6F6;
}
/* 情绪温度 */
.sentiment {
background-color: #F6F6F6;
padding: 0 20rpx 20rpx 20rpx;
}
.section_subtitle {
font-size: 24rpx;
color: #000000;
padding: 20rpx 0;
}
.meters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
}
.meter_item {
display: flex;
align-items: center;
/* padding: 10rpx; */
background: #ffffff;
border-radius: 12rpx;
}
.meter_item image {
width: 100rpx;
height: 100rpx;
}
.meter_info {
display: flex;
flex-direction: column;
}
.meter_value {
font-size: 36rpx;
}
.meter_value.hot {
color: #ff6b6b;
}
.meter_value.warm {
color: #ffd166;
}
.meter_value.cool {
color: #60a5fa;
}
.meter_label {
font-size: 22rpx;
}
.meter_label.hot {
color: #ff6b6b;
}
.meter_label.warm {
color: #ffd166;
}
.meter_label.cool {
color: #60a5fa;
}
/* 板块 */
.sectors_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
}
.sector_item {
background: #fafafa;
border-radius: 12rpx;
padding: 16rpx;
}
.sector_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
}
.sector_name {
font-size: 24rpx;
color: #333;
}
.sector_change {
font-size: 22rpx;
}
.sector_change.rising {
color: #e74c3c;
}
.sector_change.falling {
color: #27ae60;
}
.sector_price {
font-size: 24rpx;
color: #666;
}
/* 股票表 */
.table {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.table_header,
.table_row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
padding: 18rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.table_header {
background: #fafafa;
}
.cell.name {
display: flex;
flex-direction: column;
}
.stk_name {
font-size: 26rpx;
color: #333;
}
.stk_code {
font-size: 22rpx;
color: #999;
}
.stk_price {
font-size: 26rpx;
color: #333;
}
.stk_change {
font-size: 24rpx;
}
.stk_change.rising {
color: #e74c3c;
}
.stk_change.falling {
color: #27ae60;
}
.index_item {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.hot_stocks {
margin-bottom: 30rpx;
}
.stocks_list {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.stock_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.stock_item:last-child {
border-bottom: none;
}
.stock_info {
flex: 1;
}
.stock_name {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.stock_code {
font-size: 24rpx;
color: #999;
}
.stock_price {
text-align: right;
}
.price {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.change {
font-size: 24rpx;
}
.change.rising {
color: #e74c3c;
}
.change.falling {
color: #27ae60;
}
.bottom_safe_area {
height: 120rpx;
}
</style>

301
pages/marketSituation/forexMetals.vue
View File

@ -0,0 +1,301 @@
<template>
<view class="content">
<view class="section" v-if="type === 'forex'">
<view class="section_title">
<text class="title_icon">💱</text>
<text>外汇市场</text>
</view>
<view class="forex_grid">
<view v-for="(item, index) in forexData" :key="index" class="forex_item">
<view class="forex_pair">
<text class="base_currency">{{ item.base }}</text>
<text class="separator">/</text>
<text class="quote_currency">{{ item.quote }}</text>
</view>
<view class="forex_price">
<text class="price">{{ item.price }}</text>
<text :class="['change', item.isRising ? 'rising' : 'falling']">
{{ item.change }}
</text>
</view>
</view>
</view>
</view>
<view class="section" v-if="type === 'metals'">
<view class="section_title">
<text class="title_icon">🥇</text>
<text>贵金属</text>
</view>
<view class="metals_grid">
<view v-for="(item, index) in metalsData" :key="index" class="metal_item">
<view class="metal_info">
<text class="metal_icon">{{ item.icon }}</text>
<text class="metal_name">{{ item.name }}</text>
</view>
<view class="metal_price">
<text class="price">{{ item.price }}</text>
<text class="unit">{{ item.unit }}</text>
<text :class="['change', item.isRising ? 'rising' : 'falling']">
{{ item.change }}
</text>
</view>
</view>
</view>
</view>
<!-- 市场动态 -->
<view class="market_news">
<view class="section_title">
<text class="title_icon">📰</text>
<text>市场动态</text>
</view>
<view class="news_list">
<view v-for="(news, index) in newsData" :key="index" class="news_item">
<view class="news_content">
<text class="news_title">{{ news.title }}</text>
<text class="news_time">{{ news.time }}</text>
</view>
<view class="news_impact" :class="news.impact">
<text>{{ news.impactText }}</text>
</view>
</view>
</view>
</view>
<!-- 底部安全区域 -->
<view class="bottom_safe_area"></view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
// Props
const props = defineProps({
countryId: {
type: Number,
required: true
}
})
// 判断类型
const type = computed(() => {
return props.countryId === 11 ? 'forex' : 'metals'
})
// 外汇数据
const forexData = ref([
{ base: 'USD', quote: 'CNY', price: '7.2456', change: '+0.0123', isRising: true },
{ base: 'EUR', quote: 'USD', price: '1.0876', change: '-0.0034', isRising: false },
{ base: 'GBP', quote: 'USD', price: '1.2654', change: '+0.0087', isRising: true },
{ base: 'USD', quote: 'JPY', price: '149.87', change: '+0.45', isRising: true },
{ base: 'AUD', quote: 'USD', price: '0.6543', change: '-0.0021', isRising: false },
{ base: 'USD', quote: 'SGD', price: '1.3456', change: '+0.0012', isRising: true }
])
// 贵金属数据
const metalsData = ref([
{ icon: '🥇', name: '黄金', price: '2,034.56', unit: 'USD/盎司', change: '+12.34', isRising: true },
{ icon: '🥈', name: '白银', price: '24.87', unit: 'USD/盎司', change: '-0.23', isRising: false },
{ icon: '⚪', name: '铂金', price: '987.65', unit: 'USD/盎司', change: '+5.67', isRising: true },
{ icon: '⚫', name: '钯金', price: '1,234.56', unit: 'USD/盎司', change: '-8.90', isRising: false }
])
// 新闻数据
const newsData = ref([
{
title: '美联储暗示可能暂停加息',
time: '2小时前',
impact: 'high',
impactText: '高影响'
},
{
title: '欧洲央行维持利率不变',
time: '4小时前',
impact: 'medium',
impactText: '中影响'
},
{
title: '黄金价格创新高',
time: '6小时前',
impact: 'medium',
impactText: '中影响'
},
{
title: '美元指数小幅下跌',
time: '8小时前',
impact: 'low',
impactText: '低影响'
}
])
</script>
<style scoped>
.content {
padding: 20rpx;
}
.section {
margin-bottom: 40rpx;
}
.section_title {
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.title_icon {
font-size: 32rpx;
margin-right: 12rpx;
}
.forex_grid, .metals_grid {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.forex_item, .metal_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.forex_item:last-child, .metal_item:last-child {
border-bottom: none;
}
.forex_pair {
display: flex;
align-items: center;
}
.base_currency {
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.separator {
font-size: 24rpx;
color: #999;
margin: 0 8rpx;
}
.quote_currency {
font-size: 28rpx;
color: #666;
}
.forex_price, .metal_price {
text-align: right;
}
.price {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.unit {
font-size: 20rpx;
color: #999;
margin-left: 8rpx;
}
.change {
font-size: 24rpx;
}
.change.rising {
color: #e74c3c;
}
.change.falling {
color: #27ae60;
}
.metal_info {
display: flex;
align-items: center;
}
.metal_icon {
font-size: 32rpx;
margin-right: 16rpx;
}
.metal_name {
font-size: 28rpx;
color: #333;
}
.market_news {
margin-bottom: 30rpx;
}
.news_list {
background: #fff;
border-radius: 12rpx;
overflow: hidden;
}
.news_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.news_item:last-child {
border-bottom: none;
}
.news_content {
flex: 1;
}
.news_title {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.news_time {
font-size: 24rpx;
color: #999;
}
.news_impact {
padding: 6rpx 12rpx;
border-radius: 16rpx;
font-size: 20rpx;
color: #fff;
}
.news_impact.high {
background: #e74c3c;
}
.news_impact.medium {
background: #f39c12;
}
.news_impact.low {
background: #95a5a6;
}
.bottom_safe_area {
height: 120rpx;
}
</style>

574
pages/marketSituation/globalIndex.vue
View File

@ -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/marketSituation/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
pages/home/marketCondition.vue → pages/marketSituation/marketCondition.vue
View File

485
pages/marketSituation/marketDetail.vue
View File

@ -0,0 +1,485 @@
<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 contentHeight = 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>

733
pages/marketSituation/marketOverview.vue
View File

@ -0,0 +1,733 @@
<template>
<view class="main">
<!-- 可滚动内容区域 -->
<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
<view class="content">
<button @click="goToChartExample">图表</button>
<view class="map">
<image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
</view>
<view class="global_index">
<view class="global_index_title">
{{ $t('marketSituation.globalIndex') }}
</view>
<view class="global_index_more" @click="goToGlobalIndex">
<text>{{ $t('marketSituation.globalIndexMore') }}</text>
<image src="/static/marketSituation-image/more.png" mode="aspectFit"></image>
</view>
</view>
<!-- 卡片网格 -->
<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" />
</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="bottom_safe_area"></view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, onMounted, watch, nextTick, computed } from 'vue'
import util from '../../common/util.js'
import IndexCard from '../../components/IndexCard.vue'
const iSMT = ref(0)
const searchValue = ref('')
const contentHeight = ref(0)
const headerHeight = ref(0) // 动态计算的header高度
const isWarnTextOverflow = ref(false) // warn文字是否溢出
const pageIndex = ref(0)
const scrollToView = ref('')
// 跳转图表示例页面
const goToChartExample = () => {
uni.navigateTo({
url: '/pages/marketSituation/chartExample'
})
}
// 计算属性：精准计算content区域的top值
const contentTopPosition = computed(() => {
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'
})
// 弹窗相关数据
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: '🇺🇸',
indexName: '纳斯达克',
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: '🇨🇳',
indexName: '上证指数',
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: '🇭🇰',
indexName: '恒生指数',
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: '🇲🇾',
indexName: '纳斯达克',
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
}
])
// 搜索输入事件
const onSearchInput = (e) => {
searchValue.value = e.detail.value
}
// 搜索确认事件
const onSearchConfirm = (e) => {
console.log('搜索内容:', e.detail.value)
// 这里可以添加搜索逻辑
performSearch(e.detail.value)
}
// 搜索图标点击事件
const onSearchClick = () => {
if (searchValue.value.trim()) {
performSearch(searchValue.value)
}
}
// 执行搜索
const performSearch = (keyword) => {
if (!keyword.trim()) {
uni.showToast({
title: '请输入搜索内容',
icon: 'none'
})
return
}
uni.showToast({
title: `搜索: ${keyword}`,
icon: 'none'
})
// 这里添加实际的搜索逻辑
}
// 检测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 goToGlobalIndex = () => {
uni.navigateTo({
url: '/pages/marketSituation/globalIndex'
})
}
onMounted(() => {
// 状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
// 确保DOM渲染完成后再查询高度
nextTick(() => {
// 动态计算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 scoped>
/* 状态栏占位 */
.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);
}
/* 可滚动内容区域 */
.content_scroll {
position: fixed;
left: 0;
right: 0;
bottom: 100rpx;
/* 底部导航栏高度 */
overflow-y: auto;
}
.header_content {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
padding: 0 20rpx;
margin-bottom: 10rpx;
}
.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;
}
/* Tab 栏样式 */
.channel_li {
display: flex;
align-items: center;
height: 80rpx;
background-color: #ffffff;
border-bottom: 1rpx solid #f0f0f0;
}
.channel_wrap {
width: calc(100% - 60rpx);
height: 100%;
overflow: hidden;
flex-shrink: 0;
}
.channel_innerWrap {
display: flex;
align-items: center;
height: 100%;
padding: 0 20rpx;
white-space: nowrap;
}
.channel_item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60rpx;
padding: 0 20rpx;
border-radius: 30rpx;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.channel_item:active {
transform: scale(0.98);
}
.channel_item.active {
color: #333;
font-weight: bold;
}
.channel_text {
font-size: 28rpx;
font-weight: 500;
color: #666666;
transition: color 0.3s ease;
white-space: nowrap;
}
.channel_item.active .channel_text {
color: #333333;
font-weight: 400;
z-index: 2;
}
.active_indicator {
position: absolute;
left: 50%;
top: 60%;
transform: translateX(-45%);
width: calc(100% - 20rpx);
min-width: 40rpx;
max-width: 120rpx;
height: 8rpx;
background-image: url('/static/marketSituation-image/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slideIn 0.1s ease;
border-radius: 8rpx;
z-index: 1;
}
@keyframes slideIn {
from {
width: 0;
opacity: 0;
}
to {
width: 40rpx;
opacity: 1;
}
}
.scroll_indicator {
border-left: 1rpx solid #b6b6b6;
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 30rpx;
background-color: #ffffff;
flex-shrink: 0;
}
.scroll_indicator image {
width: 20rpx;
height: 20rpx;
opacity: 0.5;
}
.content {
margin-top: 20rpx;
background-color: white;
}
.map {
width: calc(100% - 60rpx);
margin: 0 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #F3F3F3;
border-radius: 30rpx;
border: 1rpx solid #E0E0E0;
padding: 30rpx 20rpx;
box-sizing: border-box;
/* 设置最小高度保护，但允许内容撑开 */
min-height: 200rpx;
}
.map image {
width: 100%;
height: auto;
max-width: 100%;
display: block;
/* widthFix模式下，高度会自动按比例调整 */
/* 设置最大高度避免图片过大 */
max-height: 60vh;
/* 添加平滑过渡效果 */
transition: all 0.3s ease;
max-height: 60vh;
}
/* 响应式优化 */
@media screen and (max-width: 750rpx) {
.map {
margin: 0 20rpx;
width: calc(100% - 40rpx);
padding: 20rpx 15rpx;
}
}
@media screen and (max-width: 480rpx) {
.map {
margin: 0 15rpx;
width: calc(100% - 30rpx);
padding: 15rpx 10rpx;
}
}
.static-footer {
position: fixed;
bottom: 0;
}
/* 弹窗样式 */
.modal_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-end;
z-index: 1000;
}
.modal_content {
width: 100%;
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
max-height: 80vh;
overflow: hidden;
}
.modal_header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.modal_title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
text-align: center;
}
.modal_close {
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
color: #999;
}
.modal_body {
padding: 40rpx;
}
.country_grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
}
.country_item {
padding: 24rpx 30rpx;
border-radius: 12rpx;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.country_item.selected {
background-color: #ff4444;
color: #fff;
}
.country_text {
font-size: 28rpx;
color: #333;
}
.country_item.selected .country_text {
color: #fff;
}
.global_index {
margin: 30rpx 20rpx 0 20rpx;
display: flex;
justify-content: space-between;
}
.global_index_title {
margin-left: 20rpx;
font-size: 40rpx;
font-weight: 100;
color: #333333;
align-items: center;
}
.global_index_more {
display: flex;
gap: 10rpx;
font-size: 28rpx;
color: #333333;
align-items: center;
}
.global_index_more image {
width: 40rpx;
height: 40rpx;
align-items: center;
}
/* 卡片网格样式 */
.cards_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0;
box-sizing: border-box;
width: 100%;
padding: 30rpx 20rpx;
gap: 20rpx;
}
.card_item {
width: 100%;
box-sizing: border-box;
min-width: 0;
/* 防止内容溢出 */
}
/* 响应式布局 - 小屏幕时改为两列 */
@media (max-width: 600rpx) {
.cards_grid {
grid-template-columns: repeat(2, 1fr);
padding: 30rpx 20rpx;
}
}
/* 超小屏幕时改为单列 */
@media (max-width: 400rpx) {
.cards_grid {
grid-template-columns: 1fr;
padding: 30rpx 20rpx;
}
}
.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秒开始滚动，让用户先看到开头 */
}
/* 底部安全区域 */
.bottom_safe_area {
height: 40rpx;
background-color: transparent;
}
/* 主容器样式调整 */
.main {
position: relative;
height: 100vh;
overflow: hidden;
background-color: white;
}
</style>

593
pages/marketSituation/marketSituation.vue
View File

@ -0,0 +1,593 @@
<template>
<view>
<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" />
</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="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">
<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)">
<text class="channel_text">{{ item.title }}</text>
<view v-if="index === pageIndex" class="active_indicator"></view>
</view>
</view>
</scroll-view>
<view class="scroll_indicator" @click="channel_more">
<image src="/static/marketSituation-image/menu.png" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- 可滚动内容区域 -->
<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
<!-- 动态组件切换 -->
<component :is="currentComponent" :countryId="currentChannelId" />
</scroll-view>
</view>
<footerBar class="static-footer" :type="type"></footerBar>
<!-- 更多tab弹窗 -->
<view v-if="showCountryModal" class="modal_overlay" @click="closeModal">
<view class="modal_content" @click.stop>
<view class="modal_header">
<text class="modal_title">全部栏目</text>
<view class="modal_close" @click="closeModal">
<text>×</text>
</view>
</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)">
<text class="country_text">{{ country }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, watch, nextTick, computed } from 'vue'
import footerBar from '../../components/footerBar.vue'
import forexMetals from './forexMetals.vue'
import marketOverview from './marketOverview.vue'
import countryMarket from './countryMarket.vue'
const type = ref('marketSituation')
const iSMT = ref(0)
const searchValue = ref('')
const contentHeight = ref(0)
const headerHeight = ref(0) // 动态计算的header高度
// 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('')
// 动态组件相关
const currentChannelId = computed(() => {
return channelData.value[pageIndex.value]?.id || 1
})
const currentComponent = computed(() => {
const channelId = currentChannelId.value
// 概况页面使用 MarketOverview 组件
if (pageIndex.value === 0) {
return marketOverview
}
// 外汇(id=11)和贵金属(id=12)使用 ForexMetals 组件
else if (channelId === 11 || channelId === 12) {
return forexMetals
}
// 其他国家/地区页面使用 CountryMarket 组件
else {
return countryMarket
}
})
// 计算属性：精准计算content区域的top值
const contentTopPosition = computed(() => {
const statusBarHeight = iSMT.value || 0
const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140
return statusBarHeight + currentHeaderHeight
})
// 弹窗相关数据
const showCountryModal = ref(false)
const selectedCountry = ref('概况')
const countryList = ref([
'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港',
'泰国', '中国', '加拿大', '越南', '外汇', '贵金属'
])
// 搜索输入事件
const onSearchInput = (e) => {
searchValue.value = e.detail.value
}
// 搜索确认事件
const onSearchConfirm = (e) => {
console.log('搜索内容:', e.detail.value)
// 这里可以添加搜索逻辑
performSearch(e.detail.value)
}
// 搜索图标点击事件
const onSearchClick = () => {
if (searchValue.value.trim()) {
performSearch(searchValue.value)
}
}
// 执行搜索
const performSearch = (keyword) => {
if (!keyword.trim()) {
uni.showToast({
title: '请输入搜索内容',
icon: 'none'
})
return
}
uni.showToast({
title: `搜索: ${keyword}`,
icon: 'none'
})
// 这里添加实际的搜索逻辑
}
// 我的收藏点击事件
const selected = () => {
uni.showToast({
title: '我的收藏',
icon: 'none'
})
// 这里可以跳转到收藏页面
}
// 历史记录点击事件
const history = () => {
uni.showToast({
title: '历史记录',
icon: 'none'
})
// 这里可以跳转到历史页面
}
// Tab 栏点击事件
const navClick = (index) => {
pageIndex.value = index
const currentItem = channelData.value[index]
scrollToView.value = 'nav' + currentItem.id
// 同步更新弹窗中的选中状态
selectedCountry.value = currentItem.title
uni.showToast({
title: `切换到: ${currentItem.title}`,
icon: 'none'
})
// 这里可以添加切换 tab 后的数据加载逻辑
console.log('当前选中的 tab:', currentItem)
}
// 更多选项点击事件
const channel_more = () => {
showCountryModal.value = true
}
// 选择国家
const selectCountry = (country) => {
selectedCountry.value = country
// 查找对应的tab索引
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
console.log('选中了：' + country + '，同步到tab索引：' + targetIndex)
uni.showToast({
title: '已切换到：' + country,
icon: 'none',
duration: 2000
})
} else {
// 如果是"概况"或其他特殊选项，默认切换到第一个tab
if (country === '概况' || country === '全部') {
pageIndex.value = 0
scrollToView.value = 'nav' + channelData.value[0].id
}
console.log('选中了：' + country)
uni.showToast({
title: '已选择：' + country,
icon: 'none',
duration: 2000
})
}
// 这里可以添加切换到对应国家/地区数据的逻辑
// 例如：loadMarketData(country)
closeModal()
}
// 关闭弹窗
const closeModal = () => {
showCountryModal.value = false
}
onMounted(() => {
// 状态栏高度
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
// 初始化 tab 栏
if (channelData.value.length > 0) {
pageIndex.value = 0
scrollToView.value = 'nav' + channelData.value[0].id
}
// 确保DOM渲染完成后再查询高度
nextTick(() => {
// 动态计算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 {
position: relative;
height: 100vh;
overflow: hidden;
background-color: white;
}
/* 状态栏占位 */
.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);
}
/* 可滚动内容区域 */
.content_scroll {
position: fixed;
left: 0;
right: 0;
bottom: 100rpx;
/* 底部导航栏高度 */
overflow-y: auto;
}
.header_content {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
padding: 0 20rpx;
margin-bottom: 10rpx;
}
.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;
}
/* Tab 栏样式 */
.channel_li {
display: flex;
align-items: center;
height: 80rpx;
background-color: #ffffff;
border-bottom: 1rpx solid #f0f0f0;
}
.channel_wrap {
width: calc(100% - 60rpx);
height: 100%;
overflow: hidden;
flex-shrink: 0;
}
.channel_innerWrap {
display: flex;
align-items: center;
height: 100%;
padding: 0 20rpx;
white-space: nowrap;
}
.channel_item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60rpx;
padding: 0 20rpx;
border-radius: 30rpx;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.channel_item:active {
transform: scale(0.98);
}
.channel_item.active {
color: #333;
font-weight: bold;
}
.channel_text {
font-size: 28rpx;
font-weight: 500;
color: #666666;
transition: color 0.3s ease;
white-space: nowrap;
}
.channel_item.active .channel_text {
color: #333333;
font-weight: 400;
z-index: 2;
}
.active_indicator {
position: absolute;
left: 50%;
top: 60%;
transform: translateX(-45%);
width: calc(100% - 20rpx);
min-width: 40rpx;
max-width: 120rpx;
height: 8rpx;
background-image: url('/static/marketSituation-image/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slideIn 0.1s ease;
border-radius: 8rpx;
z-index: 1;
}
@keyframes slideIn {
from {
width: 0;
opacity: 0;
}
to {
width: 40rpx;
opacity: 1;
}
}
.scroll_indicator {
border-left: 1rpx solid #b6b6b6;
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 30rpx;
background-color: #ffffff;
flex-shrink: 0;
}
.scroll_indicator image {
width: 20rpx;
height: 20rpx;
opacity: 0.5;
}
.content {
margin-top: 20rpx;
background-color: white;
}
.static-footer {
position: fixed;
bottom: 0;
}
/* 弹窗样式 */
.modal_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-end;
z-index: 1000;
}
.modal_content {
width: 100%;
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
max-height: 80vh;
overflow: hidden;
}
.modal_header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.modal_title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
text-align: center;
}
.modal_close {
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
color: #999;
}
.modal_body {
padding: 40rpx;
}
.country_grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
}
.country_item {
padding: 24rpx 30rpx;
border-radius: 12rpx;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.country_item.selected {
background-color: #ff4444;
color: #fff;
}
.country_text {
font-size: 28rpx;
color: #333;
}
.country_item.selected .country_text {
color: #fff;
}
</style>

BIN
static/icons/Left_(左).png
View File

Side by Side

After

Width: 20  |  Height: 20  |  Size: 247 B

BIN
static/images/缺省.png
View File

Side by Side

After

Width: 213  |  Height: 228  |  Size: 16 KiB

BIN
static/marketSituation-image/cool.png
View File

Side by Side

After

Width: 50  |  Height: 110  |  Size: 11 KiB

BIN
static/marketSituation-image/hot.png
View File

Side by Side

After

Width: 50  |  Height: 109  |  Size: 11 KiB

BIN
static/marketSituation-image/warm.png
View File

Side by Side

After

Width: 50  |  Height: 110  |  Size: 12 KiB

Write Preview
Loading…
Cancel
Save