deepChartVueApp/pages/marketSituation/globalIndex.vue

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