gym-manage/gym-manage-uniapp/pages/memberInfo/bodyTestTrend.vue

<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="趋势分析" @back="onBack" />
            <view class="bt-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="bt-tab"
                    :class="{ 'bt-tab--active': activeMetric === tab.key }"
                    hover-class="mi-tap-tab--hover"
                    :hover-stay-time="150"
                    @tap="switchMetric(tab.key)"
                >
                    <text class="bt-tab__text">{{ tab.label }}</text>
                </view>
            </view>
            <view class="bt-page__body">
                <view class="bt-card">
                    <text class="bt-card__title">{{ activeLabel }}变化趋势</text>
                    <text class="bt-card__desc">基于最近 {{ trendPoints.length }} 次体测数据</text>
                    <BodyTestTrendChart
                        :points="trendPoints"
                        :unit="activeUnit"
                        :width="chartWidth"
                        :height="200"
                    />
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">数据明细</text>
                    <view
                        v-for="(pt, idx) in trendPointsReversed"
                        :key="pt.id"
                        class="bt-compare-row"
                    >
                        <text class="bt-compare-row__label">{{ pt.date }}</text>
                        <text class="bt-compare-row__val">{{ pt.value }}{{ activeUnit }}</text>
                        <text
                            v-if="idx < trendPointsReversed.length - 1"
                            class="bt-compare-row__diff"
                            :style="{ color: rowDiffColor(pt, trendPointsReversed[idx + 1]) }"
                        >
                            {{ rowDiffText(pt, trendPointsReversed[idx + 1]) }}
                        </text>
                        <text v-else class="bt-compare-row__diff">--</text>
                    </view>
                </view>

                <view v-if="summaryText" class="bt-card">
                    <text class="bt-card__title">趋势解读</text>
                    <text class="bt-card__desc">{{ summaryText }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import BodyTestTrendChart from '@/components/memberInfo/BodyTestTrendChart.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getBodyTestTrendData, bodyTestMock } from '@/common/memberInfo/bodyTestStore.js'

export default {
    components: { MemberInfoSubNav, BodyTestTrendChart },
    data() {
        return {
            tabs: bodyTestMock.trendMetrics,
            activeMetric: 'weight',
            trendPoints: [],
            chartWidth: 300
        }
    },
    computed: {
        activeLabel() {
            return this.tabs.find((t) => t.key === this.activeMetric)?.label || ''
        },
        activeUnit() {
            const units = {
                weight: 'kg',
                bodyFat: '%',
                muscleMass: 'kg',
                bmi: ''
            }
            return units[this.activeMetric] || ''
        },
        trendPointsReversed() {
            return [...this.trendPoints].reverse()
        },
        summaryText() {
            if (this.trendPoints.length < 2) return ''
            const first = this.trendPoints[0].value
            const last = this.trendPoints[this.trendPoints.length - 1].value
            const diff = Math.round((last - first) * 10) / 10
            const sign = diff > 0 ? '上升' : diff < 0 ? '下降' : '持平'
            const abs = Math.abs(diff)
            const lowerBetter = ['weight', 'bodyFat'].includes(this.activeMetric)
            let advice = ''
            if (diff !== 0) {
                const good = lowerBetter ? diff < 0 : diff > 0
                advice = good ? '，变化方向符合健康目标' : '，建议关注饮食与训练计划'
            }
            return `期间${this.activeLabel}${sign} ${abs}${this.activeUnit}${advice}`
        }
    },
    onLoad(options) {
        if (options?.metric) {
            this.activeMetric = options.metric
        }
        this.chartWidth = uni.getSystemInfoSync().windowWidth - 64
        this.loadTrend()
    },
    methods: {
        onBack() {
            goBackOrTab(PAGE.BODY_TEST_HOME)
        },
        switchMetric(key) {
            this.activeMetric = key
            this.loadTrend()
        },
        loadTrend() {
            const store = loadMemberStore()
            this.trendPoints = getBodyTestTrendData(store, this.activeMetric, 6)
        },
        rowDiffText(current, older) {
            const diff = Math.round((current.value - older.value) * 10) / 10
            const sign = diff > 0 ? '+' : ''
            return `${sign}${diff}${this.activeUnit}`
        },
        rowDiffColor(current, older) {
            const diff = current.value - older.value
            if (diff === 0) return '#8A99B4'
            const lowerBetter = ['weight', 'bodyFat'].includes(this.activeMetric)
            const good = lowerBetter ? diff < 0 : diff > 0
            return good ? '#2ECC71' : '#F39C12'
        }
    }
}
</script>

<style>
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
</style>