deepChartVueApp/pages/deepExploration/MainForceActions.vue

<template>
	<view class="main">
		<!-- 顶部状态栏占位 -->
		<view class="top" :style="{height:iSMT+'px'}"></view>
		<deepExploration_header></deepExploration_header>

		<view class="search">
			<input v-model="stockName" class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
				placeholder-style="color: #A6A6A6; font-size: 22rpx;" />
			<image @click="searchStock" class="seachIcon" src="/static/deepExploration-images/search.png"
				mode="aspectFill"></image>
		</view>

		<view class="content">
			<view class="select">
				<image class="img" :src="navItems[currentIndex].icon" mode=""></image>
				<view v-for="(item, index) in navItems" :key="index" class="selectItem"
					:class="{ active: currentIndex === index }" @click="handleModel(index)">
					<button class="btn"></button>
				</view>
			</view>

			<view class="graphAndTxt">
				<view class="graph">
					<view class="graph_header">
						<view class="left">TESA</view>
						<view class="center">
							<image class="last" src="/static/deepExploration-images/last.png" mode="aspectFill"></image>
							<text>Taewlkj.sejssssssssf</text>
							<image class="next" src="/static/deepExploration-images/next.png" mode="aspectFill"></image>
						</view>
						<view class="right">2025/10/26</view>
					</view>
					<view class="graph_data">
						<text>435.900</text>
						<text>22.410</text>
						<text>5.120%</text>
					</view>
					<view class="graph_content">
						<view class="charts-box">
							<!-- uCharts 蜡烛图组件 -->
							<qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true"
								:ontouch="true" :onzoom="true" />
						</view>
					</view>
				</view>
				<view class="txt">
					<view class="txtHeader">
						<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
						<text>主力追踪</text>
					</view>
					<view class="txtContent"></view>
				</view>
			</view>
		</view>

		<!-- 底部切换栏 -->
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import deepExploration_header from '@/components/deepExploration_header.vue'
	import footerBar from '@/components/footerBar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 响应式变量定义
	const type = ref('deepExploration')
	const iSMT = ref(0)
	const currentIndex = ref(0)
	const navItems = ref([{
			name: '主力追踪',
			icon: '/static/deepExploration-images/1.png'
		},
		{
			name: '主力雷达',
			icon: '/static/deepExploration-images/2.png'
		},
		{
			name: '主力解码',
			icon: '/static/deepExploration-images/3.png'
		},
		{
			name: '主力资金流',
			icon: '/static/deepExploration-images/4.png'
		},
	])

	//点击四大模块
	const handleModel = (index) => {
		currentIndex.value = index
		if (currentIndex.value == 0) {
			console.log(index);
			handleTrack()
		} else if (currentIndex.value == 1) {
			console.log(index);
			handleRadar()
		} else if (currentIndex.value == 2) {
			console.log(index);
			handleDecode()
		} else if (currentIndex.value == 3) {
			console.log(index);
			handleCapitalFlow()
		}
	}

	//点击主力追踪
	const handleTrack = () => {
	
	}

	//点击主力雷达
	const handleRadar = () => {

	}

	//点击主力解码
	const handleDecode = () => {

	}

	//点击主力资金流
	const handleCapitalFlow = () => {

	}
	const stockName = ref('TSLA')
	//搜索股票
	const searchStock = () => {
		console.log('搜索参数：', stockName.value);

	}

	// 1. K线图配置
	const opts = ref({
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 15],
		dataLabel: false,
		enableScroll: true,
		enableMarkLine: false,
		legend: {},
		xAxis: {
			labelCount: 4,
			itemCount: 30,
			disableGrid: true,
			gridColor: "#CCCCCC",
			gridType: "solid",
			dashLength: 4,
			scrollShow: false,
			scrollAlign: "left",
			scrollColor: "#A6A6A6",
			scrollBackgroundColor: "#EFEBEF",
			labelColor: "#8C8C8C",
			fontSize: 9
		},
		yAxis: {
			labelColor: "#8C8C8C",
			fontSize: 9
		},
		extra: {
			candle: {
				color: {
					upLine: "#f04864",
					upFill: "#f04864",
					downLine: "#2fc25b",
					downFill: "#2fc25b"
				},
				average: {
					show: false,
					name: ["MA5", "MA10", "MA30"],
					day: [5, 10, 20],
					color: ["#1890ff", "#2fc25b", "#facc14"]
				}
			},
			markLine: {
				type: "dash",
				dashLength: 5,
				data: [{
						value: 2150,
						lineColor: "#f04864",
						showLabel: false
					},
					{
						value: 2350,
						lineColor: "#f04864",
						showLabel: false
					}
				]
			},
			tooltip: {
				showCategory: true
			}
		}
	})

	// 2. K线图数据（响应式定义）
	const chartData = ref({})

	// 获取K线数据函数（直接定义，无需methods）
	const getServerData = () => {
		// 模拟服务器请求延时
		setTimeout(() => {
			const res = {
				"categories": [
					"2025/08/25",
					"2025/08/26",
					"2025/08/27",
					"2025/08/28",
					"2025/08/29",
					"2025/09/01",
					"2025/09/02",
					"2025/09/03",
					"2025/09/04",
					"2025/09/05",
					"2025/09/08",
					"2025/09/09",
					"2025/09/10",
					"2025/09/11",
					"2025/09/12",
					"2025/09/15",
					"2025/09/16",
					"2025/09/17",
					"2025/09/18",
					"2025/09/19",
					"2025/09/22",
					"2025/09/23",
					"2025/09/24",
					"2025/09/25",
					"2025/09/26",
					"2025/09/29",
					"2025/09/30",
					"2025/10/09",
					"2025/10/10",
					"2025/10/13",
					"2025/10/14",
					"2025/10/15",
					"2025/10/16",
					"2025/10/17",
					"2025/10/20",
					"2025/10/21",
					"2025/10/22",
					"2025/10/23",
					"2025/10/24",
					"2025/10/27"
				],
				series: [{
					"name": "贵州茅台",
					"data": [
						[
							1470.01,
							1496.0,
							1466.0,
							1499.33
						],
						[
							1490.32,
							1474.23,
							1480.01,
							1481.61
						],
						[
							1481.88,
							1484.93,
							1448.0,
							1448.0
						],
						[
							1447.97,
							1456.1,
							1438.77,
							1446.1
						],
						[
							1453.0,
							1482.58,
							1452.0,
							1480.0
						],
						[
							1482.2,
							1488.0,
							1465.7,
							1476.1
						],
						[
							1478.66,
							1509.0,
							1478.0,
							1491.3
						],
						[
							1491.0,
							1503.5,
							1466.0,
							1480.55
						],
						[
							1472.0,
							1479.3,
							1460.47,
							1480.66
						],
						[
							1471.0,
							1486.97,
							1464.0,
							1483.0
						],
						[
							1483.0,
							1506.44,
							1477.5,
							1501.23
						],
						[
							1505.0,
							1509.95,
							1493.42,
							1505.0
						],
						[
							1506.66,
							1529.95,
							1496.0,
							1522.01
						],
						[
							1522.01,
							1526.02,
							1508.5,
							1523.5
						],
						[
							1526.0,
							1538.02,
							1510.53,
							1516.0
						],
						[
							1515.87,
							1517.48,
							1501.5,
							1515.1
						],
						[
							1515.1,
							1520.99,
							1496.21,
							1499.98
						],
						[
							1499.99,
							1510.28,
							1490.01,
							1493.0
						],
						[
							1492.0,
							1497.8,
							1463.5,
							1467.96
						],
						[
							1467.99,
							1475.5,
							1457.01,
							1467.97
						],
						[
							1465.09,
							1467.97,
							1450.01,
							1453.35
						],
						[
							1450.5,
							1457.5,
							1440.0,
							1447.42
						],
						[
							1434.07,
							1456.78,
							1434.07,
							1442.0
						],
						[
							1442.83,
							1445.21,
							1436.0,
							1439.0
						],
						[
							1441.18,
							1447.11,
							1428.01,
							1435.0
						],
						[
							1439.38,
							1469.99,
							1435.0,
							1460.86
						],
						[
							1460.0,
							1460.76,
							1440.0,
							1443.99
						],
						[
							1436.0,
							1439.38,
							1420.0,
							1436.78
						],
						[
							1437.6,
							1439.94,
							1427.5,
							1430.0
						],
						[
							1415.7,
							1422.85,
							1415.12,
							1419.2
						],
						[
							1429.99,
							1464.0,
							1429.99,
							1451.02
						],
						[
							1450.98,
							1463.0,
							1445.08,
							1462.0
						],
						[
							1461.92,
							1484.95,
							1458.88,
							1484.91
						],
						[
							1483.1,
							1488.0,
							1454.03,
							1455.0
						],
						[
							1455.0,
							1469.5,
							1454.88,
							1457.93
						],
						[
							1459.0,
							1469.94,
							1455.5,
							1462.26
						],
						[
							1462.08,
							1465.73,
							1456.0,
							1458.7
						],
						[
							1455.0,
							1468.8,
							1447.2,
							1467.98
						],
						[
							1467.95,
							1478.88,
							1449.34,
							1450.0
						],
						[
							1440.0,
							1452.49,
							1435.99,
							1440.41
						]
					],
				}]
			}
			// 给响应式变量赋值（需修改.value）
			chartData.value = JSON.parse(JSON.stringify(res))
		}, 500)
	}

	// 生命周期钩子：组件挂载后执行（替代onReady）
	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight
		getServerData() // 调用数据获取函数
	})

	// 页面加载时执行
	onLoad((e) => {
		if (e.index) {
			currentIndex.value = e.index - 1
			console.log('模块：', currentIndex.value)
		}
		if (e.stockName) {
			stockName.value = e.stockName
			console.log('股票名称：', stockName.value)
		}
	})
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.search {
			position: relative;
			display: flex;
			align-items: center;
			background-color: #F3F3F3;
			width: calc(100% - 60rpx);
			height: 80rpx;
			border-radius: 50rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			padding: 0 40rpx;
			margin: 15rpx 30rpx 0 30rpx;

			.seachIcon {
				position: absolute;
				right: 50rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.searchInput {
				color: #111;
			}
		}

		.content {
			margin-top: 30rpx;
			padding-top: 30rpx;
			background-color: rgb(248, 248, 248);

			.select {
				position: relative;
				margin-bottom: -5rpx;

				.img {
					width: 750rpx;
					height: 198rpx;
				}

				.selectItem {
					.btn {
						position: absolute;
						width: 120rpx;
						height: 150rpx;
						background-color: transparent;

						&::after {
							border: none;
						}
					}

					&:nth-of-type(1) .btn {
						top: 30rpx;
						left: 60rpx;
					}

					&:nth-of-type(2) .btn {
						top: 30rpx;
						left: 230rpx;
					}

					&:nth-of-type(3) .btn {
						top: 30rpx;
						left: 400rpx;
					}

					&:nth-of-type(4) .btn {
						top: 30rpx;
						left: 570rpx;
					}
				}
			}

			.graphAndTxt {
				height: 300rpx;
				background-color: #fff;
				border-radius: 50rpx 50rpx 0 0;
				padding: 68.6rpx 36.5rpx 0 36.5rpx;

				.graph {
					border: 1rpx solid #e2e2e2;
					border-radius: 30rpx 30rpx 0 0;

					.graph_header {
						padding: 32rpx 20.5rpx 0 24rpx;
						display: flex;
						align-items: center;

						.left {
							color: #333333;
							font-family: "PingFang SC";
							font-size: 15px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}

						.center {
							margin-left: 105rpx;
							display: flex;
							align-items: center;

							text {
								width: 160rpx;
								height: 36rpx;
								padding-left: 10rpx;
								color: #000000;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: center;
								font-family: "PingFang SC";
								font-size: 18px;
								font-style: normal;
								font-weight: 500;
								line-height: 18px;
							}

							.last {
								width: 15rpx;
								height: 20rpx;
								margin-right: 30rpx;
							}

							.next {
								width: 15rpx;
								height: 20rpx;
								margin-left: 30rpx;
							}
						}

						.right {
							margin-left: 50rpx;
							color: #6a6a6a;
							font-family: "PingFang SC";
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}
					}

					.graph_data {
						display: flex;
						padding: 48rpx 24rpx;

						text {
							display: flex;
							color: #25ba5d;
							font-family: "PingFang SC";
							font-size: 17px;
							line-height: 17px;
						}

						text:nth-child(2) {
							margin-left: 120rpx;
						}

						text:nth-child(3) {
							margin-left: 150rpx;
						}
					}

					.graph_content {
						.charts-box {
							width: 100%;
							height: 100%;
						}
					}
				}

				.txt {
					background-color: #F3F3F3;
					margin-top: 48rpx;
					border-radius: 30rpx;

					.txtHeader {
						padding: 30rpx 24rpx;

						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							background-color: #FFFFFF;
							color: #000000;
							padding: 0 22rpx;
							border-radius: 22rpx;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 37rpx;
						}
					}

					.txtContent {
						min-height: 200rpx;
					}
				}
			}
		}

		.static-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
</style>