会员个人中心页面初步完成

2026-06-04 14:18:53 +08:00
parent 1fa2fbd3f3
commit a0026b1da5
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,151 @@
+<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>