newEdition/pages/bluetooth/wifi.vue

<template>
	<view class="wifi">
		<!-- 可用的WIFI -->
		<view @click="refreshList" class="wi-label">
			附近可用的WIFI <text>刷新</text>
		</view>
		
		<scroll-view scroll-y style="height: 500rpx;" class="wi-lic">
			<view v-for="(item,index) in wifiList" :key="index" @click="tanShow(item)"  class="wi-lic-li line">
				<image class="wi-wifi" src="/static/images/bluetooth-wifi.png" />
				<view class="wi-lic-1">{{item.ssid}}</view>
				<image class="wi-ri" src="/static/images/jiantop.png" />
			</view>
		</scroll-view>
		
		<!-- 可用的WIFI -->
		<view style="margin-top: 40rpx;" class="wi-label">
			手动设定WIFI
		</view>
		
		<view class="wi-lic" @click="tanShow({ssid : '', key : ''})" style="margin-bottom: 60rpx;">
			<view class="wi-lic-li">
				<view class="wi-lic-1">自定义</view>
				<image class="wi-ri" src="/static/images/jiantop.png" />
			</view>
		</view>
		
		<view style="margin-top: 40rpx;" class="wi-label">
			主wifi配置
		</view>
		<view class="wi-lic" @click="tanShow({ssid : setInfo.wifi.ssid,key : setInfo.wifi.key})">
			<view class="wi-lic-li line">
				<view class="wi-lic-1">wifi名称：{{setInfo.wifi.ssid}}</view>
			</view>
			<view class="wi-lic-li">
				<view class="wi-lic-1">wifi密码：{{setInfo.wifi.key}}</view>
			</view>
		</view>
		
		<view style="margin-top: 40rpx;" class="wi-label">
			副wifi配置
		</view>
		
		<view class="wi-lic" style="margin-bottom: 80rpx;">
			<view v-for="(item,index) in setInfo.wifi.aps" @click="tanShow(item)" class="wi-lic-li line">
				<view class="wi-lic-1">wifi名称：{{item.ssid}}</view>
				<image class="wi-ri" @click.stop="apsDel(index)" mode="widthFix" style="width: 36rpx;" src="/static/images/bluetooth-del.png" />
			</view>
		</view>
		
		<uni-popup ref="tan">
			<view class="tan">
				<view class="tan-t1">配置WIFI</view>
				<view class="tan-c1">
					<view class="tan-inp">
						<view class="tan-inp-t1"><text>*</text>WIFI名称</view>
						<input placeholder="请输入wifi名称" v-model="form.ssid" />
					</view>
					
					<view class="tan-inp">
						<view class="tan-inp-t1">WIFI密码</view>
						<input placeholder="请输入wifi密码" v-model="form.key" />
					</view>
					
					<view class="tan-btn">
						<view @click="tanHide()" class="tan-w">取消</view>
						<view @click="tanSub()" class="tan-b">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { connectBlue,sendData,setNotification,ab2hex,strToHex,closeBlue,changeIsModalShown } from "@/utils/blue.js";
	import { mapState, mapMutations } from 'vuex';
	
	export default {
		data() {
			return {
				type : 1,
				setInfo : "",
				setNum : 0,
				setZl :	[] ,
				info : "",
				form : {
					ssid : '',
					key : ''
				},
				strJson : "",
				initWifiXl : [["0xA0","0x82","0x00"],["0xA0","0x87","0x00"]], //指令合集
				wifiList : "",
				isConnectTimer : ""
			}
		},
		computed: {
		    ...mapState(['connectDev','connectState']),
		},
		onShow() {
			var that = this
			this.info = uni.getStorageSync("lyDetail")
			if (that.connectDev) {
				that.init();
				that.notifiInit();
			} else {
				uni.showModal({
					title: '提示',
					content: '蓝牙连接失败',
					cancelText: '取消',
					confirmText: '重新连接',
					success(res) {
						if (res.confirm) that.connectTO();
					}
				})
			}
		},
		onHide() {
			if (this.isConnectTimer) clearInterval(this.isConnectTimer);
		},
		onUnload() {
			if (this.isConnectTimer) clearInterval(this.isConnectTimer);
		},
		methods: {
			init() {
				uni.showLoading({
					title:"获取中...",
					icon: "none"
				})
				sendData(this.initWifiXl[0])
			},
			//刷新wifi
			refreshList() {
				uni.showLoading({
					title:"获取中...",
					icon: "none"
				})
				this.wifiList = [];
				sendData(this.initWifiXl[1])
			},
			tanSub() {
				if (!this.connectState || !this.connectDev) {
					uni.showToast({
						title: "请先连接设备",
						icon: "none"
					})
					return ;
				}

				uni.showLoading({
					title:"更新中...",
					icon: "none"
				})
				
				var that = this
				this.tanHide();
				//判断主wifi是否存在如果是主wifi进行更新
				if (!this.setInfo.wifi.ssid || this.setInfo.wifi.ssid == this.form.ssid) {
					this.setInfo.wifi.ssid = this.form.ssid
					this.setInfo.wifi.key = this.form.key
				} else {
					//判断副wifi
					let isHav = false;
					this.setInfo.wifi.aps = this.setInfo.wifi.aps.filter(v => {
						if (v.ssid == this.form.ssid) {
							v.ssid = this.form.ssid
							v.key = this.form.key
							isHav = true
						}
						return v;
					})
					
					if (!isHav) {
						if (this.setInfo.wifi.aps.length > 3) {
							uni.hideLoading();
							uni.showToast({
								title: "副wifi最多添加4个",
								icon: "none"
							})
							return ;
						}
						this.setInfo.wifi.aps.push(this.form);
					}
				}
				
				//分割
				this.syncSet();
			},
			tanShow(item) {
				this.form = {...item};

				try {
					if (this.setInfo.wifi.ssid == item.ssid) {
						this.form.ssid = item.ssid
						this.form.key = this.setInfo.wifi.key
					} 

					this.setInfo.wifi.aps.filter(v => {
						if (v.ssid == item.ssid) {
							this.form.ssid = item.ssid
							this.form.key = v.key
						}
					})

					this.$refs.tan.open();
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '数据解析错误'+JSON.stringify(this.setInfo),
						showCancel: false,
					})
				}
				
			},
			tanHide() {
				this.$refs.tan.close();
			},
			//副wifi删除
			apsDel(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除此wifi吗?',
					cancelText: '取消',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title:"更新中...",
								icon: "none"
							})
							that.setInfo.wifi.aps.splice(index,1)
							that.syncSet();
						};
					}
				})
			},
			
			//同步数据
			syncSet() {
				var that = this
				let strArray = strToHex(JSON.stringify(this.setInfo));
				let setZl = Array.from(
				  { length: Math.ceil(strArray.length / 100) },
				  (_, index) => strArray.slice(index * 100, (index + 1) * 100)
				);
				
				uni.showLoading({
					title:"更新中...",
					mask: true,
					icon: "none"
				})

				this.lxSendData(setZl,0);
			},
			
			//循环发送
			lxSendData(setZl,i) {
				var that = this
				let v = setZl[i]
				const hexNumber = (v.length + 1).toString(16).toUpperCase();
				
				let end = "0x00";
				if (i + 1 == setZl.length) end = "0x01";
				sendData([...["0xA0","0x83","0x"+hexNumber,end],...v]).then(() => {
					if (i + 1 < setZl.length) {
						that.lxSendData(setZl, i + 1);
					}
				})
			},
			
			//连接设备
			connectTO() {
				var that = this;
				connectBlue(this.info).then(() => {
					//设置设置通知
					setTimeout(() => {
						setNotification().then(() => {
							that.init();
							that.notifiInit();
						})
					},1000)
				});
			},
			notifiInit() {
				var that = this
				uni.onBLECharacteristicValueChange((res) => {
					let data = ab2hex(res.value,3);
					
					//基本设置信息
					if (data.pre[1] == "82") {
						that.strJson += data.value
						if (data.pre[3] == "01") {
							uni.hideLoading();
							that.setInfo = JSON.parse(that.strJson)
							that.strJson = "";
							//发送第二条数据
							sendData(that.initWifiXl[1])
							uni.showLoading({
								title:"扫描wifi中...",
								icon: "none"
							})
						}
					}
					//wifi扫描信息
					if (data.pre[1] == "87") {
						if (data.pre[3] == "00") {
							that.strJson += data.value
						}
						if (data.pre[3] == "01") {
							uni.hideLoading();
							that.strJson += data.value
							
							console.log("当前返回所有wifi列表",that.strJson);
							let rdd = JSON.parse(that.strJson);
							that.wifiList = rdd.Results;
							that.strJson = "";
						}
					}
					
					//命令重启
					if (data.pre[1] == "88") {
						if (data.pre[3] == "01") {
							uni.showModal({
								title: '提示',
								content: '重启失败，请手动重启设备并前往蓝牙页面重新连接',
								showCancel:false,
								confirmText: '确定',
								success(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: "/pages/bluetooth/connect"
										})
									}
								}
							})
						}

						//禁止弹窗
						changeIsModalShown();
						//循环判断是否链接成功
						uni.showLoading({
							title:"正在连接设备",
							mask: true,
							icon: "none"
						})
						
						if (that.isConnectTimer) clearInterval(that.isConnectTimer);
						let num = 0
						closeBlue().then(() => {
							that.connectTO();
							that.isConnectTimer = setInterval(() => {
								console.log("循环判断是否链接成功",that.connectDev,1222);
								if (that.connectDev) {
									clearInterval(that.isConnectTimer);
								} else {
									num++;
									if (num <= 5) {
										uni.hideLoading();
										uni.showLoading({
											title:"正在连接设备",
											mask: true,
											icon: "none"
										})
									} else {
										uni.showModal({
											title: '提示',
											content: '蓝牙连接失败,前往手动连接',
											showCancel: false,
											confirmText: '前往',
											success(res) {
												uni.redirectTo({
													url: "/pages/bluetooth/detail"
												})
											}
										})
										clearInterval(that.isConnectTimer);
									}
								}
							},2000)
						})
							
					}
					
					//配置修改
					if (data.pre[1] == "83") {
						
						
						if (data.pre[3] == "00") {
							uni.hideLoading();
							uni.showLoading({
								title:"更新成功,工牌重启中",
								mask: true,
								icon: "none"
							})
							sendData([0xA0,0x88,0x00])
						}
						
					}
					
					console.log('特性值改变:',data); // 打印接收到的数据
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.wifi {
	background-color: #F1F2F4;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	padding: 40rpx 28rpx 0;
	.wi-label {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #2671E2;
			margin-left: auto;
		}
	}
	
	.wi-lic {
		box-sizing: border-box;
		padding: 0 28rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
		.wi-lic-li {
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.wi-lic-1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			image {
				width: 28rpx;
				height: 28rpx;
			}
			.wi-wifi {
				margin-right: 14rpx;
			}
			.wi-ri {
				margin-left: auto;
				width: 14rpx;
			}
		}
		
		.line {
			border-bottom: 1rpx dashed #f5f5f5;
		}
	}
}

.tan {
	width: 86vw;
	background: #FFFFFF;
	border-radius: 24rpx;
}

.tan-t1 {
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	height: 116rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx dashed #f5f5f5;
}

.tan-c1 {
	box-sizing: border-box;
	padding: 48rpx 28rpx;
	.tan-inp {
		display: flex;
		align-items: center;
		margin-bottom: 45rpx;
		.tan-inp-t1 {
			flex-shrink: 0;
			width: 136rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			text-align: right;
			margin-right: 48rpx;
			text {
				color: #C83429;
			}
		}
		
		input {
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}
}

.tan-btn {
	display: flex;
	justify-content: center;
	margin-top: 70rpx;
	.tan-w {
		width: 191rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		border: 1rpx solid #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #333333;
		margin-right: 24rpx;
	}
	.tan-b {
		width: 191rpx;
		height: 72rpx;
		background: #2671E2;
		border-radius: 38rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 24rpx;
	}
}

</style>