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 setup>
import { ref } from 'vue'
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
} from '@/common/memberInfo/bodyTestStore.js'

const device = ref({})
const steps = ref([
    { step: 1, text: '打开体测仪电源' },
    { step: 2, text: '站在体测仪上' },
    { step: 3, text: '等待测量完成' }
])
const searching = ref(false)
const connected = ref(false)
const searchHint = ref('请保持手机蓝牙已开启')

function refreshFromStore() {
    const store = loadMemberStore()
    device.value = { ...store.bodyTest.device }
    connected.value = store.bodyTest.device.connected
}

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

function searchDevice() {
    if (searching.value) return
    searching.value = true
    searchHint.value = '发现 InBody 270…'
    setTimeout(() => {
        const store = loadMemberStore()
        connectBodyTestDevice(store)
        persistMemberStore(store)
        device.value = { ...store.bodyTest.device }
        connected.value = true
        searching.value = false
        uni.showToast({ title: '设备已连接', icon: 'success' })
    }, 1800)
}

function goMeasuring() {
    navigateToPage(PAGE.BODY_TEST_MEASURING)
}

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';

.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>