gym-manage/gym-manage-uniapp/pages/memberInfo/bodyTestConnect.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">{{ 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="https://gymfuture.oss-cn-chengdu.aliyuncs.com/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>