LightingSystemApp-bluetooth/pages/device/device.vue

<template>
	<view class="device-container">
		<text class="title-rev">数据接收 : </text>
		<button class="bt-clear" type="primary" @click="btClearTap" hover-start-time="0">清空</button>
		<checkbox-group @change="checkScroll" class="checkbox-scroll">
			<checkbox checked="true"></checkbox>
			<text>滚动</text>
		</checkbox-group>
		<checkbox-group @change="checkRevHex" class="checkbox-rev-hex">
			<checkbox></checkbox>
			<text>Hex</text>
		</checkbox-group>
		<view class="scroll-view-container">
			<scroll-view class="scroll-view-rev" scroll-y="true" :scroll-into-view="scrollIntoView">
				<view class="view-rev-gap"></view>
				<text class="text-rev" user-select="true" selectable="true">{{textRevData}}</text>
				<view class="view-rev-gap"></view>
				<view id="scroll-view-bottom"></view>
				<view id="scroll-view-bottom2"></view>
			</scroll-view>
		</view>
		<text class="title-send">数据发送 : </text>
		<checkbox-group @change="checkSendHex" class="checkbox-send-hex">
			<checkbox></checkbox>
			<text>Hex</text>
		</checkbox-group>
		<view class="view-input-send">
			<textarea class="input-send" maxlength="-1" show-count="false" @input="inputSendData" />
		</view>
		<view class="view-bt-send">
			<button class="bt-send" type="primary" @click="btSendTap" hover-start-time="0">发送</button>
		</view>
	</view>
</template>

<script>
	// #ifdef APP
	import ecUI from '@/utils/ecUI.js'
	import ecBLE from '@/utils/ecBLE/ecBLE.js'
	// #endif   
	// #ifdef MP
	const ecUI = require('@/utils/ecUI.js')
	const ecBLE = require('@/utils/ecBLE/ecBLE.js')
	// #endif
	let ctx
	let isCheckScroll = true
	let isCheckRevHex = false
	let isCheckSendHex = false
	let sendData = ''
	export default {
		data() {
			return {
				textRevData: '',
				scrollIntoView: 'scroll-view-bottom',
			}
		},
		onLoad() {
			ctx = this
			isCheckScroll = true
			isCheckRevHex = false
			isCheckSendHex = false
			sendData = ''

			//on disconnect
			ecBLE.onBLEConnectionStateChange(() => {
				ecUI.showModal('提示', '设备断开连接')
			})
			//receive data
			ecBLE.onBLECharacteristicValueChange((str, strHex) => {
				let data =
					ctx.textRevData +
					'[' +
					ctx.dateFormat('hh:mm:ss,S', new Date()) +
					']: ' +
					(isCheckRevHex ? strHex.replace(/[0-9a-fA-F]{2}/g, ' $&') : str) +
					'\r\n'
				ctx.textRevData = data
				if (isCheckScroll) {
					if (ctx.scrollIntoView === "scroll-view-bottom") {
						ctx.scrollIntoView = "scroll-view-bottom2"
					} else {
						ctx.scrollIntoView = "scroll-view-bottom"
					}
				}
			})
		},
		onUnload() {
			ecBLE.onBLEConnectionStateChange(() => {})
			ecBLE.onBLECharacteristicValueChange(() => {})
			ecBLE.closeBLEConnection()
		},
		methods: {
			checkScroll(e) {
				if (e.detail.value.length) isCheckScroll = true
				else isCheckScroll = false
			},
			checkRevHex(e) {
				if (e.detail.value.length) isCheckRevHex = true
				else isCheckRevHex = false
			},
			checkSendHex(e) {
				if (e.detail.value.length) isCheckSendHex = true
				else isCheckSendHex = false
			},
			inputSendData(e) {
				sendData = e.detail.value
			},
			btClearTap() {
				ctx.textRevData = ''
			},
			btSendTap() {
				if (isCheckSendHex) {
					let data = sendData
						.replace(/\s*/g, '')
						.replace(/\n/g, '')
						.replace(/\r/g, '')
					if (data.length === 0) {
						ecUI.showModal('提示', '请输入要发送的数据')
						return
					}
					if (data.length % 2 != 0) {
						ecUI.showModal('提示', '数据长度只能是双数')
						return
					}
					if (data.length > 488) {
						ecUI.showModal('提示', '最多只能发送244字节')
						return
					}
					if (!new RegExp('^[0-9a-fA-F]*$').test(data)) {
						ecUI.showModal('提示', '数据格式错误，只能是0-9,a-f,A-F')
						return
					}
					ecBLE.writeBLECharacteristicValue(data, true)
				} else {
					if (sendData.length === 0) {
						ecUI.showModal('提示', '请输入要发送的数据')
						return
					}
					let tempSendData = sendData.replace(/\n/g, '\r\n')
					if (tempSendData.length > 244) {
						ecUI.showModal('提示', '最多只能发送244字节')
						return
					}
					ecBLE.writeBLECharacteristicValue(tempSendData, false)
				}
			},
			dateFormat(fmt, date) {
				var o = {
					'M+': date.getMonth() + 1, //月份
					'd+': date.getDate(), //日
					'h+': date.getHours(), //小时
					'm+': date.getMinutes(), //分
					's+': date.getSeconds(), //秒
					'q+': Math.floor((date.getMonth() + 3) / 3), //季度
					S: date.getMilliseconds(), //毫秒
				}
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(
						RegExp.$1,
						(date.getFullYear() + '').substr(4 - RegExp.$1.length)
					)
				for (var k in o)
					if (new RegExp('(' + k + ')').test(fmt)) {
						// console.log(RegExp.$1.length)
						// console.log(o[k])
						fmt = fmt.replace(
							RegExp.$1,
							RegExp.$1.length == 1 ?
							(o[k] + '').padStart(3, '0') :
							('00' + o[k]).substr(('' + o[k]).length)
						)
					}
				return fmt
			},
		}
	}
</script>

<style>
	.device-container {
		height: 100vh;
		position: relative;
	}

	.title-rev {
		position: absolute;
		top: 0px;
		left: 20px;
		line-height: 45px;
		font-size: 17px;
	}

	.bt-clear {
		position: absolute;
		top: 8px;
		right: 165px;
		width: 55px !important;
		height: 29px;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}

	.checkbox-scroll {
		position: absolute;
		top: 0;
		right: 90px;
		height: 45px;
		font-size: 15px;
		display: flex;
		align-items: center;
	}

	.checkbox-rev-hex {
		position: absolute;
		top: 0px;
		right: 20px;
		height: 45px;
		font-size: 15px;
		display: flex;
		align-items: center;
	}

	.scroll-view-container {
		position: absolute;
		top: 45px;
		left: 20px;
		right: 20px;
		padding: 0 3px 0 5px;
		background-color: #E5E5E5;
	}

	.scroll-view-rev {
		height: 150px;
		background-color: #E5E5E5;
	}

	.view-rev-gap {
		height: 5px;
	}

	.text-rev {
		font-size: 14px;
		word-break: break-all;
		font-family: Monospace;
	}

	.title-send {
		position: absolute;
		top: 200px;
		left: 20px;
		font-size: 17px;
		line-height: 45px;
	}

	.checkbox-send-hex {
		position: absolute;
		top: 200px;
		right: 20px;
		height: 45px;
		font-size: 15px;
		display: flex;
		align-items: center;
	}

	.view-input-send {
		position: absolute;
		top: 245px;
		left: 20px;
		right: 20px;
		padding: 2px 3px;
		background-color: #E5E5E5;
		overflow-x: hidden;
	}

	.input-send {
		height: 84px;
		width: 100%;
		background-color: #E5E5E5;
	}

	.view-bt-send {
		position: absolute;
		top: 370px;
		left: 20px;
		right: 20px;
		display: flex;
	}

	.bt-send {
		flex: 1;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>