APP/pages/common/addBLE/addEquip.vue

<template>
	<view class="content">
		<view class="topAnimate">
			<view class="animate center">
				<view class="animateContent">
					<view class="circle"></view>
					<view class="circle"></view>
					<view class="circle"></view>
				</view>

				<view class="imgContent center">
					<view class="img center">
						<image src="/static/images/bluetooth.png" class="titleIco" mode="aspectFit">
						</image>
					</view>

				</view>

			</view>
		</view>

		<view class="mainContent">
			<view class="p100">

				<view class="lblTitle">配对设备</view>
				<view class="list" style="margin-bottom: 30rpx;">

					<view class="item " v-for="item, index in PairEquip" v-show="PairEquip.length>0">
						<view class="leftImg ">
							<image src="/static/images/BLEAdd/device.png" class="titleIco" mode="aspectFit">
							</image>
						</view>
						<view class="centertxt ">
							<view class="name" v-text="item.name"></view>
							<view class="id" v-text="item.deviceId"></view>
						</view>
						<view class="rightIco center">
							<image src="/static/images/BLEAdd/linked.png" class="img" mode="aspectFit">
							</image>
						</view>
					</view>
					<view v-show="PairEquip.length==0" class="item center">
						<view class="noLink">无已配对设备</view>
					</view>
				</view>

				<view class="lblTitle">搜索设备</view>
				<view class="list searchList">
					<view class="item" v-on:click="Link(item,index)" v-for="item, index in EquipMents"
						v-show="!item['linkStatu']">
						<view class="leftImg ">
							<image src="/static/images/BLEAdd/device.png" class="titleIco" mode="aspectFit">
							</image>
						</view>
						<view class="centertxt ">
							<view class="name" v-text="item.name?item.name:'Unnamed'"></view>
							<view class="id" v-text="item.deviceId"></view>
						</view>
						<view class="rightIco center">
							<image :src="isItemLink(item,index)" class="img" mode="aspectFit">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<BottomSlideMenuPlus :config="Status.BottomMenu">
			<view class="openBlue">
				<view class="txt">
					当前手机蓝牙关闭,是否打开以扫描附近的蓝牙设备?
				</view>
				<view class="btns">
					<view class="btn cancel" @click="Status.BottomMenu.show=false">
						<view>取消</view>
					</view>
					<view class="ok btn" @click="gotoSetting">
						<view>开启</view>

					</view>
				</view>
			</view>
		</BottomSlideMenuPlus>
	</view>
</template>

<script>
	import ble from '../../../api/6155/BlueHelper.js';
	import request from '../../../utils/request.js';

	export default {
		data() {
			return {
				Status: {
					BottomMenu: {
						show: false,
						showHeader: false,
						menuItems: [],
						activeIndex: -1,
						bgColor: '#2a2a2a',
						itemBgColor: '#3a3a3a',
						textColor: '#ffffffde',
						textAlign: 'flex-start',
						title: '主灯模式',
						showDivider: false,
						dividerColor: '#00000000',
						dividerThickness: '0rpx',
						dividerMargin: '10rpx',
						itemHeight: '80rpx',
						type: '',
						showBtn: false,
						btnBgColor: "#bbe600",
						btnText: "确定",
						btnTextColor: "#232323de",
						showMask: true,
						maskBgColor: '#00000066',
						showClose: false
					}

				},
				PairEquip: [], //已配对设备
				EquipMents: [] //搜索出来的设备
			}
		},
		computed: {

		},
		onHide: function() {
			ble.StopSearch();
		},
		onBackPress: (e) => {
			ble.StopSearch();
			ble.disconnectDevice();
		},

		onShow: function() {
			// return;
			var these = this;
			uni.getStorage({
				key: "linkedDevices",
				success: (res) => {
					this.PairEquip = JSON.parse(res.data);
				},
				fail: (ex) => {
					this.PairEquip = [];
				}
			});

			if (process.env.UNI_PLATFORM == 'mp-weixin' ||
				process.env.UNI_PLATFORM == 'mp-alipay' ||
				process.env.UNI_PLATFORM == 'app-plus' ||
				process.env.UNI_PLATFORM == 'app'

			) {
				//打开蓝牙开始搜索设备
				ble.OpenBlue(true, () => {
						ble.StartSearch(function(arr) {

							arr = arr.devices;
							for (var i = 0; i < arr.length; i++) {

								arr[i].linkStatu = false;
								let f = these.EquipMents.find(function(v) {
									return v.deviceId == arr[i].deviceId;
								});

								if (!f) {
									these.EquipMents.push(arr[i]);
								}



							}

							console.log("设备列表：" + JSON.stringify(these.EquipMents));
						});
					},
					() => {
						these.showOpenSetting();


					}
				)



			} else {
				console.log('当前环境：' + process.env.UNI_PLATFORM + '不支持蓝牙');
			}

		},
		methods: {
			isItemLink: function(item, index) {
				let src = '/static/images/BLEAdd/noLink.png';
				if (this.PairEquip && this.PairEquip instanceof Array) {
					if (this.PairEquip.length > 0) {
						let f = this.PairEquip.find(function(v) {
							return v.deviceId == item.deviceId;
						});
						if (f) {
							src = '/static/images/BLEAdd/linked.png';
						}
					}


				}
				return src;
			},
			alert: function(title, content, callback) {
				if (!title) {
					title = '提示'
				}
				if (!content) {
					content = title;
				}

				uni.showModal({
					title: title,
					content: content,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

						if (callback) {
							callback(res);
						}
					}
				});
			},

			showOpenSetting: function() {
				this.Status.BottomMenu.show = true;
			},
			gotoSetting: function() {
				this.Status.BottomMenu.show = false;
				ble.showBluetoothGuide(false);
			},
			Link: function(item, index) {
				var these = this;
				if (process.env.UNI_PLATFORM == 'mp-weixin' ||
					process.env.UNI_PLATFORM == 'mp-alipay' ||
					process.env.UNI_PLATFORM == 'app-plus' ||
					process.env.UNI_PLATFORM == 'app'
				) {

					uni.showLoading({
						title: "正在连接",
						mask: true
					});
					setTimeout(() => {


						ble.LinkBlue(item.deviceId, function() {
							let c = these.PairEquip.find(function(v) {
								return v.deviceId == item.deviceId;
							});
							if (!c) {
								these.PairEquip.push(item);
								uni.setStorage({
									key: 'linkedDevices',
									data: JSON.stringify(these.PairEquip),
									success: () => {}
								});
							}




							// 调用绑定设备接口
							let promise = request({
								url: '/app/device/bind',
								method: 'POST',
								data: {
									deviceImei: '',
									deviceMac: item.deviceId,
									communicationMode: '1', //0是4g,1是蓝牙
								}
							});
							promise.then((res) => {
								console.log("1111" + JSON.stringify(res));
								if (res.code == 0) {

									uni.hideLoading()
									uni.showToast({
										title: res.data,
										icon: 'success'
									});
									
									
								} else {
									uni.showToast({
										title: res.msg,
									});
								}
							}).catch((ex) => {

								uni.showToast({
									title: '出现了未知的异常,操作失败',
								});
							});





						}, (ex) => {
							uni.hideLoading();
						});
					}, 0);

				} else {
					these.alert("提示", "当前平台不支持蓝牙");
				}
			}
		}
	}
</script>

<style>
	.noLink {
		text-align: center;
		width: 100%;
		font-size: 28rpx;
	}

	.content {
		background-color: #1d1d1d;
		color: #ffffffde;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}

	.p100 {
		width: 100%;
		height: 100%;
	}

	.fleft {
		float: left;
	}

	.fright {
		float: right;
	}

	.clear {
		clear: both;
	}

	.center {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.topAnimate {
		position: absolute;
		left: 0rpx;
		width: 100%;
		height: 400rpx;
		top: 20px;
		/* 距离视口顶部 20px 时固定 */
		z-index: 100;
		/* 确保元素显示在最上层 */
	}

	.animate {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.animate .animateContent {
		position: relative;
		z-index: 0;
	}

	.animate .imgContent {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
	}

	.animate .imgContent .img {
		height: 100rpx;
		width: 100rpx;
		background: #bbe600;
		border-radius: 50%;

	}

	.animate .titleIco {
		width: 36rpx;
		height: 36rpx;
	}

	.circle {
		position: absolute;
		border-radius: 50%;
		background-color: #bbe60033;
		animation: expand 3s infinite ease-out;
	}

	.circle:nth-child(2) {
		animation-delay: 1s;
	}

	.circle:nth-child(3) {
		animation-delay: 2s;
	}

	@keyframes expand {
		0% {
			width: 0;
			height: 0;
			opacity: 0.8;
			transform: translate(-50%, -50%);
		}

		100% {
			width: 18.75rem;
			height: 18.75rem;
			opacity: 0;
			transform: translate(-50%, -50%);
		}
	}

	.mainContent {
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 400rpx);
		overflow-y: scroll;
		position: absolute;
		top: 400rpx;
		left: 0rpx;
	}


	.mainContent .p100 {}

	.mainContent .lblTitle {
		color: #ffffffde;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 700;
		text-align: left;
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
	}

	.list {
		min-height: 120rpx;
	}

	.searchList {
		width: 100%;
		height: calc(100% - 186rpx);
		overflow-y: scroll;
	}

	.list .item {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 8px;
		background: #1a1a1a;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10rpx;
	}

	.list .item .leftImg {
		width: 100rpx;
		height: 70rpx;
	}

	.list .item .centertxt {
		width: calc(100% - 150rpx);
		height: 100%;
		padding-left: 10rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: flex-start;
		align-content: flex-start;

	}

	.list .item .rightIco {
		width: 50rpx;
		height: 100%;
	}


	.list .item .leftImg .titleIco {
		width: 100%;
		height: 100%;
	}

	.list .item .name {
		color: #ffffffde;
		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 50rpx;
		text-align: left;
	}

	.list .item .id {
		color: #ffffff99;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 30rpx;
		text-align: left;
	}


	.list .item .rightIco .img {
		width: 50rpx;
		height: 50rpx;
	}

	.openBlue {
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		height: auto;
	}

	.openBlue .txt {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.14rpx;
		text-align: center;
	}

	.openBlue .btns {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 50rpx;
		width: 100%;
		height: auto;
	}

	.openBlue .btn {
		border-radius: 91rpx;
		box-sizing: border-box;
		width: 25%;
		height: 60rpx;
		text-align: center;
		font-family: PingFang SC;
		font-size: 28rpx;
		letter-spacing: 12rpx;
		display: flex !important;
		align-items: center;
		letter-spacing: 0.375rem;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;

	}

	.openBlue .cancel {
		border: 1px solid rgba(255, 255, 255, 1);
		color: rgba(255, 255, 255, 1);
	}

	.openBlue .ok {
		background-color: #BBE600;
		color: #232323;

	}
</style>