kitchendDevice/components/bluetooth_food.vue

<template>
	<view class="weightPages">
		<view class="table">
			<view class="text">
				<image src="/static/zhong.png"></image>
				<text @click="openBluetoothAdapter">{{bleTipsText}}</text>
			</view>
			<view class="duan" @click="handleBack" v-if="isShow&&isConnection == 0">
				断开连接
			</view>
		</view>
		<!--  -->
		<view class="weight-wrap">
			<!-- 蓝牙称重 -->
			<view class="weight" @click="inputDialogToggle">
				<text class="val">{{weight == '' ? '0.0':weight}}</text>
				<text class="unit">{{unitConversion(unit)}}</text>
			</view>
		</view>
		<!--  -->
		<view class="groupbtn">
			<view class="btn danwei">
				<view class="lan border-bottom">
					<view class="right">
						<picker mode="selector" :range="unitList" range-key="name" @change="changleUnits"
							:value="unitListIndex">
							<view class="uni-input">
								单位
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="btn addbtn size14" @click="handlesub" v-if="btnType==2">保存</view>
			<view class="btn addbtn" @click="handleAddFood" v-if="btnType==1">+</view>
			<view class="btn qingling" @click="handleqingling">清零</view>
		</view>
		<!--  -->
		<view>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog mode="input" title="重量" placeholder="请输入食物重量" @close="close"
					@confirm="confirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let myTime
	let nextCnt = 0
	export default {
		data() {
			return {
				kcal: 0,
				unit: '',
				// weight: "",
				bleTipsText: "",
				inputDialog: false,
				unitList: [{
					name: "克",
					id: '00',
					unit: "g"
				}, {
					name: "盎司",
					id: "08",
					unit: "oz"
				}],
				unitListIndex: 0,
				units: ['kg', '斤', 'st:lb', 'lb', 'g', 'ml', 'Waterml',
					'milkml', 'oz', 'floz', 'lboz'
				]
			}
		},
		props: {
			weightKcal: {
				type: Number,
				default: 0 //当前测量食物每100g含的kcal
			},
			btnType: {
				type: Number,
				default: 1 //1添加食材，2保存测量
			},
		},
		computed: {
			...mapState(["bleValue", "isBluetoothTyle", "countFoodInfo"]),
			weight() {
				this.kcal = (Number(this.weightKcal) / 100 * this.bleValue.countWeight).toFixed(2)
				this.unit = this.bleValue.unit
				return this.bleValue.countWeight
			},
			isConnection() {
				this.bleTipsText = this.bleValue.bleTipsText
				return this.bleValue.isConnectStatus
			},
			isShow() {
				return this.bleValue.serviceId != '' ? true : false
			}

		},
		mounted() {
			let that = this
			uni.onBluetoothAdapterStateChange(function(res) {
				that.$store.commit("changeBluetooth", res.available);
			})
		},
		destroyed() {
			// this.isConnection = 1
			// this.closeBLEConnection()
			// this.closeBluetoothAdapter()
		},
		watch: {
			isBluetoothTyle: function() {
				let that = this
				if (!that.isBluetoothTyle) {
					that.handleBack()
				}
			},
		},
		methods: {
			// 初始化蓝牙
			openBluetoothAdapter() {
				let that = this
				if (that.isConnection == 0) return
				that.kcal = ""
				that.$store.commit('changeBluetoothValue', {
					deviceId: "",
					serviceId: "",
					notify: '',
					write: '',
					unit: "g",
					countWeight: "",
					bleTipsText: "蓝牙搜索中",
					isConnectStatus: 0,
				})
				that.$ble.openBluetoothAdapter()
			},
			
			changleUnits(e) {
				let that = this
				let name = that.unitList[e.detail.value].name
				console.log("单位切换", name, that.unit)
				if (that.isShow && that.unit != name) {
					that.handletoggleUnit(name == '盎司' ? 0x08 : 0x04)
				}
				that.unitListIndex = [e.detail.value]
				that.$store.commit('changeBluetoothValue', {
					unit: that.unitList[e.detail.value].unit
				})

			},
			handletoggleUnit(unit) {
				let that = this
				let checksum = 0;
				const bytes = [0xC5, 0x03, 0x05, 0x11]
				bytes[4] = unit
				for (let i = 0; i < bytes.length; i++) {
					checksum ^= bytes[i];
				}
				bytes[5] = checksum
				that.sendData(new Uint8Array(bytes).buffer)
			},
			handleqingling() {
				let that = this
				let str = "C503071100D0"
				let buf = new Uint8Array(str.match(/[\da-f]{2}/gi).map(function(h) {
					return parseInt(h, 16)
				}))
				that.sendData(buf.buffer)
			},
			sendData(buffer) {
				let that = this
				uni.writeBLECharacteristicValue({
					deviceId: that.bleValue.deviceId,
					serviceId: that.bleValue.serviceId,
					characteristicId: that.bleValue.write,
					value: buffer,
					success: res => {
						console.log('下发指令成功', res.errMsg)
					},
					fail: res => {
						console.log("下发指令失败", res);
					},
				})
			},
			// 保存测量结果 
			handlesub() {
				let that = this
				console.log("测量保存", that.weight, that.unit, that.kcal)
				if (Number(that.weight) > 0) {
					that.$emit("handleBle", that.weight, that.unit, that.kcal)
				} else {
					that.$tools.msg("数据异常，请清零后重新测量!")
				}
			},
			handleBack() {
				let that = this
				that.$store.commit("changeBluetoothValue", {
					bleTipsText: "连接失败，点击重新连接",
					isConnectStatus: 1
				})
				that.$ble.stopBluetoothDevicesDiscovery() //取消蓝牙搜索
				that.$ble.closeBLEConnection(that.bleValue.deviceId)
				that.$ble.closeBluetoothAdapter()
			},

			unitConversion(unit) {
				if (unit == 'kcal') {
					return '千卡'
				} else if (unit == 'g') {
					return '克'
				} else if (unit == 'lb') {
					return '磅'
				} else if (unit == 'oz') {
					return '盎司'
				}
				return unit
			},
			// 添加食物
			handleAddFood() {
				uni.navigateTo({
					url: "/pageTwo/count/search?name=早餐&time=" + this.countFoodInfo.date
				})
			},
			inputDialogToggle() {
				this.$refs.popup.open()
			},
			confirm(value) {
				console.log(value)
				this.$store.commit("changeBluetoothValue", {
					countWeight: value,
					unit: this.unitList[this.unitListIndex].unit
				})
				this.$refs.popup.close()
			},
			close() {
				this.$refs.popup.close()
			},
		},
	}
</script>

<style scoped lang="scss">
	image {
		width: 22px;
		height: 22px;
	}

	.more {
		padding: 6rpx 10rpx;
		border-radius: 12rpx;
		color: #fff;
		background-color: #f0ae43;
	}

	.weightPages {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		justify-content: space-around;

		.weight-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			color: #666;
			font-size: 16px;
			text-align: center;
			height: 60px;
			margin: 10px 0;

			.weight,
			.kcal {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 70%;
				padding: 30rpx 0;
				border-radius: 20rpx;
				background-color: #F8F8F8;
			}

			.weight {
				.val {
					font-size: 50rpx;
					color: #F0AE43;
					margin: 0 !important;
				}

				.unit {
					padding: 10rpx;
					margin-left: 30rpx;
					font-size: 28rpx;
					color: #fff;
					border-radius: 8rpx;
					background-color: #F0AE43;
				}
			}

			.kcal {
				font-size: 32rpx;

				.val {
					font-size: 50rpx;
					color: #F0AE43;
					margin: 0 !important;
				}

				.unit {
					margin-left: 20rpx;
				}
			}
		}

		.tips {
			font-size: 24rpx;
			text-align: center;
		}

		.groupbtn {
			margin-top: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 30%;
				color: $maincolor;
				text-align: center;
				height: 40px;
				line-height: 40px;
				border-radius: 10px;
				border: 1px solid $maincolor;
				background: #fff;
				margin: 0;
			}

			.addbtn {
				width: 30%;
				color: #fff;
				font-size: 45px;
				line-height: 38px;
				background: $maincolor;
			}
		}

		.table {
			width: 100%;
			font-size: 14px;
			align-items: center;
			padding: 5px 0;
			border-radius: 5px;
			display: flex;
			justify-content: space-between;

			.text {
				color: #8284f0;
				display: flex;
			}

			image {
				width: 22px;
				height: 22px;
				margin-right: 5px;
			}
		}

		.image {
			width: 1120rpx;
			height: 1120rpx;
			margin: auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.duan {
			width: fit-content;
			background: linear-gradient(-90deg, #d4f5c4, #a7d5e4 80%, );
			border-radius: 5px;
			text-align: center;
			padding: 3px 10px;
			font-size: 12px;
		}

		.tips {
			margin-top: 30rpx;
			margin-left: 30rpx;
			display: flex;
			color: #999;
		}
	}
</style>