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

<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="历史对比" @back="onBack" />
            <view class="bt-page__body">
                <view class="bt-card">
                    <text class="bt-card__title">选择对比记录</text>
                    <view class="bt-compare-header">
                        <view
                            class="bt-compare-picker"
                            hover-class="mi-tap--hover"
                            :hover-stay-time="150"
                            @tap="pickRecord('a')"
                        >
                            <text class="bt-compare-picker__label">记录 A（较新）</text>
                            <text class="bt-compare-picker__date">{{ recordA?.date || '点击选择' }}</text>
                        </view>
                        <view
                            class="bt-compare-picker"
                            hover-class="mi-tap--hover"
                            :hover-stay-time="150"
                            @tap="pickRecord('b')"
                        >
                            <text class="bt-compare-picker__label">记录 B（较旧）</text>
                            <text class="bt-compare-picker__date">{{ recordB?.date || '点击选择' }}</text>
                        </view>
                    </view>
                </view>

                <view v-if="compareData" class="bt-card">
                    <text class="bt-card__title">指标对比</text>
                    <view class="bt-compare-row">
                        <text class="bt-compare-row__label">指标</text>
                        <text class="bt-compare-row__val">A</text>
                        <text class="bt-compare-row__val">B</text>
                        <text class="bt-compare-row__diff">差值</text>
                    </view>
                    <view
                        v-for="row in compareData.metrics"
                        :key="row.key"
                        class="bt-compare-row"
                    >
                        <text class="bt-compare-row__label">{{ row.label }}</text>
                        <text class="bt-compare-row__val">{{ row.valueA }}</text>
                        <text class="bt-compare-row__val">{{ row.valueB }}</text>
                        <text
                            class="bt-compare-row__diff"
                            :style="{ color: diffColor(row) }"
                        >
                            {{ formatDiff(row.diff, row.key) }}
                        </text>
                    </view>
                </view>

                <view v-if="compareData" class="bt-card">
                    <text class="bt-card__title">评分变化</text>
                    <view class="bt-metrics">
                        <view class="bt-metric">
                            <text class="bt-metric__value">{{ compareData.recordA.score }}</text>
                            <text class="bt-metric__label">记录 A 评分</text>
                        </view>
                        <view class="bt-metric">
                            <text class="bt-metric__value">{{ compareData.recordB.score }}</text>
                            <text class="bt-metric__label">记录 B 评分</text>
                        </view>
                    </view>
                    <text class="bt-card__desc" style="margin-top: 12px;">
                        综合评分变化 {{ scoreDiff > 0 ? '+' : '' }}{{ scoreDiff }} 分
                        {{ scoreDiff > 0 ? '，整体趋势向好' : scoreDiff < 0 ? '，建议加强训练' : '' }}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getBodyTestHistory, getCompareData } from '@/common/memberInfo/bodyTestStore.js'

const records = ref([])
const recordA = ref(null)
const recordB = ref(null)
const compareData = ref(null)

const scoreDiff = computed(() => {
    if (!compareData.value) return 0
    return compareData.value.recordA.score - compareData.value.recordB.score
})

function refreshFromStore() {
    const store = loadMemberStore()
    records.value = getBodyTestHistory(store)
    if (records.value.length >= 2 && !recordA.value) {
        recordA.value = records.value[0]
        recordB.value = records.value[1]
        refreshCompare()
    }
}

function onBack() {
    goBackOrTab(PAGE.BODY_TEST_HISTORY)
}

function pickRecord(which) {
    const labels = records.value.map(
        (r) => `${r.date} · ${r.score}分 · ${r.gradeLabel}`
    )
    uni.showActionSheet({
        itemList: labels,
        success: (res) => {
            const picked = records.value[res.tapIndex]
            if (which === 'a') recordA.value = picked
            else recordB.value = picked
            refreshCompare()
        }
    })
}

function refreshCompare() {
    if (!recordA.value || !recordB.value) {
        compareData.value = null
        return
    }
    if (recordA.value.id === recordB.value.id) {
        uni.showToast({ title: '请选择两条不同记录', icon: 'none' })
        compareData.value = null
        return
    }
    const store = loadMemberStore()
    compareData.value = getCompareData(store, recordA.value.id, recordB.value.id)
}

function formatDiff(diff, key) {
    const sign = diff > 0 ? '+' : ''
    const units = { bodyFat: '%', weight: '', bmi: '', muscleMass: '', visceralFat: '', bmr: '' }
    return `${sign}${diff}${units[key] || ''}`
}

function diffColor(row) {
    const lowerBetter = ['weight', 'bodyFat', 'visceralFat'].includes(row.key)
    const good = lowerBetter ? row.diff < 0 : row.diff > 0
    if (row.diff === 0) return '#8A99B4'
    return good ? '#2ECC71' : '#F39C12'
}

refreshFromStore()
</script>

<style lang="scss">
@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>