整合api请求、添加购买会员卡页面、登陆页面

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

@@ -56,91 +56,100 @@
     </view>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
 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'
+import { getBodyTestTrendData } 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'
-        }
-    }
+const tabs = ref([
+    { key: 'weight', label: '体重' },
+    { key: 'bodyFat', label: '体脂率' },
+    { key: 'muscleMass', label: '肌肉量' },
+    { key: 'bmi', label: 'BMI' }
+])
+const activeMetric = ref('weight')
+const trendPoints = ref([])
+const chartWidth = ref(300)
+
+const units = {
+    weight: 'kg',
+    bodyFat: '%',
+    muscleMass: 'kg',
+    bmi: ''
 }
+
+const activeLabel = computed(() => {
+    return tabs.value.find((t) => t.key === activeMetric.value)?.label || ''
+})
+
+const activeUnit = computed(() => {
+    return units[activeMetric.value] || ''
+})
+
+const trendPointsReversed = computed(() => {
+    return [...trendPoints.value].reverse()
+})
+
+const summaryText = computed(() => {
+    if (trendPoints.value.length < 2) return ''
+    const first = trendPoints.value[0].value
+    const last = trendPoints.value[trendPoints.value.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(activeMetric.value)
+    let advice = ''
+    if (diff !== 0) {
+        const good = lowerBetter ? diff < 0 : diff > 0
+        advice = good ? '，变化方向符合健康目标' : '，建议关注饮食与训练计划'
+    }
+    return `期间${activeLabel.value}${sign} ${abs}${activeUnit.value}${advice}`
+})
+
+function onBack() {
+    goBackOrTab(PAGE.BODY_TEST_HOME)
+}
+
+function switchMetric(key) {
+    activeMetric.value = key
+    loadTrend()
+}
+
+function loadTrend() {
+    const store = loadMemberStore()
+    trendPoints.value = getBodyTestTrendData(store, activeMetric.value, 6)
+}
+
+function rowDiffText(current, older) {
+    const diff = Math.round((current.value - older.value) * 10) / 10
+    const sign = diff > 0 ? '+' : ''
+    return `${sign}${diff}${activeUnit.value}`
+}
+
+function rowDiffColor(current, older) {
+    const diff = current.value - older.value
+    if (diff === 0) return '#8A99B4'
+    const lowerBetter = ['weight', 'bodyFat'].includes(activeMetric.value)
+    const good = lowerBetter ? diff < 0 : diff > 0
+    return good ? '#2ECC71' : '#F39C12'
+}
+
+onMounted(() => {
+    const pages = getCurrentPages()
+    const currentPage = pages[pages.length - 1]
+    const options = currentPage?.options || {}
+    if (options?.metric) {
+        activeMetric.value = options.metric
+    }
+    chartWidth.value = uni.getSystemInfoSync().windowWidth - 64
+    loadTrend()
+})
 </script>
 
-<style>
+<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';