gym-manage/gym-manage-uniapp/pages/memberInfo/bodyTestSettings.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">连接与同步</text>
                    <view class="bt-setting">
                        <view>
                            <text class="bt-setting__label">蓝牙自动连接</text>
                            <text class="bt-setting__desc">进入体测页时自动搜索已配对设备</text>
                        </view>
                        <switch
                            :checked="settings.bluetoothEnabled"
                            color="#FF6B35"
                            @change="onSwitch('bluetoothEnabled', $event)"
                        />
                    </view>
                    <view class="bt-setting">
                        <view>
                            <text class="bt-setting__label">测量完成自动同步</text>
                            <text class="bt-setting__desc">结果自动保存至云端与本地</text>
                        </view>
                        <switch
                            :checked="settings.autoSync"
                            color="#FF6B35"
                            @change="onSwitch('autoSync', $event)"
                        />
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">通知与隐私</text>
                    <view class="bt-setting">
                        <view>
                            <text class="bt-setting__label">测量完成通知</text>
                            <text class="bt-setting__desc">体测结束后推送报告摘要</text>
                        </view>
                        <switch
                            :checked="settings.notifyOnComplete"
                            color="#FF6B35"
                            @change="onSwitch('notifyOnComplete', $event)"
                        />
                    </view>
                    <view class="bt-setting">
                        <view>
                            <text class="bt-setting__label">分享时匿名化</text>
                            <text class="bt-setting__desc">隐藏姓名与手机号</text>
                        </view>
                        <switch
                            :checked="settings.shareAnonymous"
                            color="#FF6B35"
                            @change="onSwitch('shareAnonymous', $event)"
                        />
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">单位制</text>
                    <view class="bt-setting">
                        <view>
                            <text class="bt-setting__label">度量单位</text>
                            <text class="bt-setting__desc">{{ unitLabel }}</text>
                        </view>
                        <view
                            hover-class="mi-tap--hover"
                            :hover-stay-time="150"
                            @tap="toggleUnit"
                        >
                            <text style="font-size: 14px; color: #1A4A6F; font-weight: 600;">切换</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">设备管理</text>
                    <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/mappin2.png" mode="aspectFit" />
                        </view>
                        <view class="bt-device__info">
                            <text class="bt-device__name">{{ device.name }}</text>
                            <text class="bt-device__status">
                                {{ device.connected ? '已连接' : '未连接' }}
                                · 上次 {{ device.lastConnected || '--' }}
                            </text>
                        </view>
                    </view>
                    <view
                        class="bt-btn bt-btn--outline"
                        style="margin-top: 12px;"
                        hover-class="mi-tap-btn--hover"
                        :hover-stay-time="150"
                        @tap="disconnect"
                    >
                        <text class="bt-btn__text">解除设备配对</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import {
    loadMemberStore,
    persistMemberStore
} from '@/common/memberInfo/store.js'
import {
    updateBodyTestSettings,
    disconnectBodyTestDevice
} from '@/common/memberInfo/bodyTestStore.js'

export default {
    components: { MemberInfoSubNav },
    data() {
        return {
            settings: {},
            device: {}
        }
    },
    computed: {
        unitLabel() {
            return this.settings.unitSystem === 'imperial' ? '英制 (lb / in)' : '公制 (kg / cm)'
        }
    },
    onShow() {
        this.refreshFromStore()
    },
    methods: {
        refreshFromStore() {
            const store = loadMemberStore()
            this.settings = { ...store.bodyTest.settings }
            this.device = { ...store.bodyTest.device }
        },
        onBack() {
            goBackOrTab(PAGE.BODY_TEST_HOME)
        },
        onSwitch(key, e) {
            const store = loadMemberStore()
            updateBodyTestSettings(store, { [key]: e.detail.value })
            persistMemberStore(store)
            this.settings = { ...store.bodyTest.settings }
            uni.showToast({ title: '已保存', icon: 'success' })
        },
        toggleUnit() {
            const store = loadMemberStore()
            const next = this.settings.unitSystem === 'metric' ? 'imperial' : 'metric'
            updateBodyTestSettings(store, { unitSystem: next })
            persistMemberStore(store)
            this.settings = { ...store.bodyTest.settings }
            uni.showToast({ title: `已切换为${this.unitLabel}`, icon: 'none' })
        },
        disconnect() {
            uni.showModal({
                title: '解除配对',
                content: '解除后下次体测需重新连接设备，确定继续？',
                success: (res) => {
                    if (!res.confirm) return
                    const store = loadMemberStore()
                    disconnectBodyTestDevice(store)
                    persistMemberStore(store)
                    this.refreshFromStore()
                    uni.showToast({ title: '已解除配对', icon: 'success' })
                }
            })
        }
    }
}
</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>