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

2026-06-04 14:18:53 +08:00
parent 1fa2fbd3f3
commit a0026b1da5
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,146 @@
+<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">{{ device.name }}</text>
+                    <text class="bt-card__desc">型号 {{ device.model }} · 请按以下步骤完成蓝牙配对</text>
+                </view>
+
+                <view class="bt-card">
+                    <text class="bt-card__title">连接引导</text>
+                    <view class="bt-steps">
+                        <view
+                            v-for="step in steps"
+                            :key="step.step"
+                            class="bt-step"
+                        >
+                            <view class="bt-step__num">{{ step.step }}</view>
+                            <view class="bt-step__content">
+                                <text class="bt-step__title">{{ step.title }}</text>
+                                <text class="bt-step__desc">{{ step.desc }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <view v-if="searching" class="bt-card">
+                    <view class="bt-measure">
+                        <text class="bt-measure__hint">正在搜索附近设备…</text>
+                        <text class="bt-measure__hint">{{ searchHint }}</text>
+                    </view>
+                </view>
+
+                <view v-if="connected" class="bt-card">
+                    <view class="bt-device">
+                        <view class="bt-device__icon-wrap">
+                            <image class="bt-device__icon" src="/static/images/shield.png" mode="aspectFit" />
+                        </view>
+                        <view class="bt-device__info">
+                            <text class="bt-device__name">连接成功</text>
+                            <text class="bt-device__status bt-device__status--on">
+                                {{ device.name }} · 电量 {{ device.battery }}%
+                            </text>
+                        </view>
+                        <view class="bt-device__dot bt-device__dot--on"></view>
+                    </view>
+                </view>
+
+                <view class="bt-footer-actions">
+                    <view
+                        v-if="!connected"
+                        class="bt-btn bt-btn--primary"
+                        :class="{ 'bt-btn--outline': searching }"
+                        hover-class="mi-tap-btn--hover"
+                        :hover-stay-time="150"
+                        @tap="searchDevice"
+                    >
+                        <text class="bt-btn__text">{{ searching ? '搜索中…' : '搜索并连接' }}</text>
+                    </view>
+                    <view
+                        v-else
+                        class="bt-btn bt-btn--primary"
+                        hover-class="mi-tap-btn--hover"
+                        :hover-stay-time="150"
+                        @tap="goMeasuring"
+                    >
+                        <text class="bt-btn__text">开始测量</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
+import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
+import {
+    loadMemberStore,
+    persistMemberStore
+} from '@/common/memberInfo/store.js'
+import {
+    connectBodyTestDevice,
+    bodyTestMock
+} from '@/common/memberInfo/bodyTestStore.js'
+
+export default {
+    components: { MemberInfoSubNav },
+    data() {
+        return {
+            device: {},
+            steps: bodyTestMock.connectSteps,
+            searching: false,
+            connected: false,
+            searchHint: '请保持手机蓝牙已开启'
+        }
+    },
+    onShow() {
+        const store = loadMemberStore()
+        this.device = { ...store.bodyTest.device }
+        this.connected = store.bodyTest.device.connected
+    },
+    methods: {
+        onBack() {
+            goBackOrTab(PAGE.BODY_TEST_HOME)
+        },
+        searchDevice() {
+            if (this.searching) return
+            this.searching = true
+            this.searchHint = '发现 InBody 270…'
+            setTimeout(() => {
+                const store = loadMemberStore()
+                connectBodyTestDevice(store)
+                persistMemberStore(store)
+                this.device = { ...store.bodyTest.device }
+                this.connected = true
+                this.searching = false
+                uni.showToast({ title: '设备已连接', icon: 'success' })
+            }, 1800)
+        },
+        goMeasuring() {
+            navigateToPage(PAGE.BODY_TEST_MEASURING)
+        }
+    }
+}
+</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';
+
+.bt-footer-actions .bt-btn--primary.bt-btn--outline {
+    background: var(--bg-gray, #F2F5F9);
+    box-shadow: none;
+}
+
+.bt-footer-actions .bt-btn--primary.bt-btn--outline .bt-btn__text {
+    color: var(--text-muted, #5E6F8D);
+}
+</style>