MTP20_WEB_GLOBAL/src/packages/mobile/components/modules/hqchart/index.vue

<template>
    <div class="app-quote-chart">
        <div class="app-quote-chart__header">
            <Tabs v-model:active="tabIndex" :before-change="onTabChange" :ellipsis="false">
                <Tab :title="$t('chart.time')" />
                <Tab>
                    <template #title>
                        <Popover :actions="actions" @select="onPopoverSelect">
                            <template #reference>{{ selectedText || $t('chart.minutes') }}</template>
                        </Popover>
                    </template>
                </Tab>
                <Tab :title="$t('chart.dayline')" />
                <Tab :title="$t('chart.weekline')" />
                <Tab :title="$t('chart.monthline')" />
            </Tabs>
            <Icon name="setting-o" style="padding: 0 16px;" v-if="false" />
        </div>
        <MLine v-bind="{ symbol, goodsCode }" v-if="tabIndex === 0" />
        <KLine v-bind="{ symbol, goodsCode, cycleType }" v-else />
    </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Tab, Tabs, Popover, Icon, PopoverAction } from 'vant'
import { ChartCycleType } from '@/constants/chart'
import MLine from './timeline/index.vue'
import KLine from './candlestick/index.vue'
import { i18n } from '@/stores'

defineProps({
    goodsCode: {
        type: String,
        required: true
    }
})

const { global: { t } } = i18n
const symbol = '000000.et' // https://blog.csdn.net/jones2000/article/details/104457569
const tabIndex = shallowRef(0) // 当前选中的标签
const selectedText = shallowRef('') // 当前选中的分钟线
const cycleType = shallowRef(ChartCycleType.Minutes) // 图表周期类型

const actions = [
    { text: t('chart.oneminutes') },
    { text: t('chart.fiveminutes'), },
    { text: t('chart.thirtyminutes'), },
    { text: t('chart.onehour'), },
    { text: t('chart.fourhour'), }
]

// 切换图表
const onTabChange = (index: number) => {
    switch (index) {
        case 1: {
            return false
        }
        case 2: {
            cycleType.value = ChartCycleType.Day
            return true
        }
        case 3: {
            cycleType.value = ChartCycleType.Week
            return true
        }
        case 4: {
            cycleType.value = ChartCycleType.Month
            return true
        }
        default: {
            return true
        }
    }
}

// 切换分钟
const onPopoverSelect = (action: PopoverAction) => {
    tabIndex.value = 1
    selectedText.value = action.text

    switch (action.text) {
        case t('chart.oneminutes'): {
            cycleType.value = ChartCycleType.Minutes
            break
        }
        case t('chart.fiveminutes'): {
            cycleType.value = ChartCycleType.Minutes5
            break
        }
        case t('chart.thirtyminutes'): {
            cycleType.value = ChartCycleType.Minutes30
            break
        }
        case t('chart.onehour'): {
            cycleType.value = ChartCycleType.Minutes60
            break
        }
        case '2小时': {
            cycleType.value = ChartCycleType.Hours2
            break
        }
        case t('chart.fourhour'): {
            cycleType.value = ChartCycleType.Hours4
            break
        }
    }
}
</script>

<style lang="less">
@import './index.less';
</style>