ajy/code/ajyApp/pages/ble-demo/ble-demo.nvue

<template>
	<view class="page">
		<view class="status">
			<text class="label">状态:</text>
			<text class="value">{{ state }}</text>
		</view>
		<view class="status" v-if="device">
			<text class="label">设备:</text>
			<text class="value">{{ device.name }} ({{ device.deviceId }})</text>
		</view>

		<view class="btn-row">
			<text class="btn" @click="onScanConnect">扫描并连接</text>
			<text class="btn" @click="onDisconnect">断开</text>
		</view>
		<view class="btn-row">
			<text class="btn" @click="onPowerOn">开机</text>
			<text class="btn" @click="onPowerOff">关机</text>
			<text class="btn" @click="onStart">开始艾灸</text>
			<text class="btn" @click="onPause">暂停</text>
		</view>

		<view class="log-box">
			<text class="log-line" v-for="(l, i) in logs" :key="i">{{ l }}</text>
		</view>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import { useBleStore } from '@/stores/ble'
import {
	BLE_STATE, MODE, SUB_MODE, TEMPERATURE
} from '@/utils/ble/constants.js'
import { ensureBlePrerequisite, openLocationSettings } from '@/utils/ble/permission.js'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			state: BLE_STATE.IDLE,
			device: null,
			logs: []
		}
	},
	computed: {
		bleStore() {
			return useBleStore()
		}
	},
	onLoad() {
		this.bleStore.configure({ debug: true })

		// 监听store状态变化
		this.$watch(() => this.bleStore.bleState, (s) => {
			this.state = s
		})
		this.$watch(() => this.bleStore.linked, (linked) => {
			if (linked) {
				this.device = this.bleStore.device
				this.log('已连接 ' + (this.bleStore.device && this.bleStore.device.deviceId || ''))
			} else if (this.device) {
				this.log('已断开')
			}
		})
	},
	methods: {
		log(msg) {
			const t = new Date().toTimeString().slice(0, 8)
			this.logs.unshift(`[${t}] ${msg}`)
			if (this.logs.length > 100) this.logs.pop()
		},
		async onScanConnect() {
			try {
				await ensureBlePrerequisite()
				await this.bleStore.init()
				const dev = await this.bleStore.scanAndConnect({ timeout: 8000 })
				this.device = dev
			} catch (e) {
				this.log('失败: ' + e.message)
				if (e.message === 'BLE_LOCATION_OFF') {
					uni.showModal({
						title: '提示', content: '请先开启位置服务', success: r => { if (r.confirm) openLocationSettings() }
					})
				} else if (e.message === 'BLE_ADAPTER_OFF') {
					this.$toastRef.error('请开启蓝牙')
				}
			}
		},
		async onDisconnect() {
			await this.bleStore.disconnect()
			this.device = null
		},
		async onPowerOn()  { await this._safe(() => this.bleStore.powerOn()) },
		async onPowerOff() { await this._safe(() => this.bleStore.powerOff()) },
		async onStart() {
			await this._safe(() => this.bleStore.startMoxi({
				mode: MODE.BASIC, subMode: SUB_MODE.SUB_1,
				temperature: TEMPERATURE.MID, duration: 30
			}))
		},
		async onPause() { await this._safe(() => this.bleStore.pauseMoxi()) },

		async _safe(fn) {
			try { await fn(); this.log('指令已下发') }
			catch (e) { this.log('指令失败: ' + e.message) }
		}
	}
}
</script>

<style>
.page        { flex: 1; padding: 24rpx; background-color: #f5f5f7; }
.status      { flex-direction: row; padding: 12rpx 0; }
.label       { width: 120rpx; color: #666; font-size: 28rpx; }
.value       { flex: 1; color: #222; font-size: 28rpx; }
.btn-row     { flex-direction: row; flex-wrap: wrap; margin-top: 12rpx; }
.btn         { padding: 16rpx 24rpx; margin: 8rpx; background-color: #4f8ef7; color: #fff; border-radius: 8rpx; font-size: 28rpx; }
.log-box     { flex: 1; margin-top: 24rpx; padding: 16rpx; background-color: #1e1e1e; border-radius: 8rpx; }
.log-line    { color: #b2f5b2; font-size: 24rpx; line-height: 36rpx; }
</style>