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 bleManager, {
	BLE_STATE, MODE, SUB_MODE, TEMPERATURE,
	ensureBlePrerequisite, openLocationSettings
} from '@/utils/ble'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			state: BLE_STATE.IDLE,
			device: null,
			logs: []
		}
	},
	onLoad() {
		bleManager.configure({ deviceNamePrefix: 'AJY', debug: true })

		this._unbinders = [
			bleManager.on('state', s => { this.state = s }),
			bleManager.on('connected', d => { this.device = d; this.log('已连接 ' + d.deviceId) }),
			bleManager.on('disconnected', e => { this.log('已断开 ' + (e.reason || '')) }),
			bleManager.on('reconnected', d => { this.log('自动重连成功') }),
			bleManager.on('report:GROUP_1', d => { this.log('参数组1 ' + JSON.stringify(d)) }),
			bleManager.on('report:GROUP_2', d => { this.log('参数组2 ' + JSON.stringify(d)) })
		]
	},
	onUnload() {
		this._unbinders.forEach(fn => fn && fn())
	},
	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 bleManager.init()
				const dev = await bleManager.scanAndConnect({ namePrefix: 'BT-', 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 bleManager.disconnect()
			this.device = null
		},
		async onPowerOn()  { await this._safe(() => bleManager.powerOn()) },
		async onPowerOff() { await this._safe(() => bleManager.powerOff()) },
		async onStart() {
			await this._safe(() => bleManager.startMoxi({
				mode: MODE.BASIC, subMode: SUB_MODE.SUB_1,
				temperature: TEMPERATURE.MID, duration: 30
			}))
		},
		async onPause() { await this._safe(() => bleManager.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>