deepChartVueApp/pages/marketSituation/marketDetail.vue

<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>