Sprinkler-app/page_user/lanya.vue

<template>
	<view>
		<u-navbar :is-back="true" title='添加设备' title-color="#000" :border-bottom="false" :background="bgc" 
			id="navbar">
		</u-navbar>
        <!-- 有搜索到设备 -->
		<view class="you" v-if="flags">
			<view class="topone">
			    <image src="https://api.ccttiot.com/smartmeter/img/static/ubrPcpGQEXTadkBa1gKh" mode=""></image> 扫描到以下设备，点击添加！        	
			</view>
			<view class="toptwo">
				如未找到想添加的设备，点击重新搜索
			</view>
			<view class="list">
				<view class="list_item" v-for="(item,index) in jiaohuaqi" :key="index">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ufPWKlVzDbHNflX0jUIv" mode=""></image>
					<view class="cen">
						<view class="name">
							丁丁浇花器
						</view>
						<view class="devmac">
							MAC：{{item}}
						</view>
					</view>
					<view class="add" @click="btnadd(item)">
						添加
					</view>
				</view>
			</view>
		</view>
		
		<!-- 未搜索到设备 -->
		<view class="wei" v-else>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uQ4g6A27FGtF34ebOtea" mode=""></image>
			<view class="sbname">
				搜索附近的设备失败
			</view>
			<view class="sbwz">
				搜索失败点击重新搜索注意打开蓝牙
			</view>
		</view>
		
		<!-- 点击搜索 -->
		<view class="btnss" @click="btnss" v-if="flag">
			重新搜索
		</view>
		<view class="btnss" v-else>
			重新搜索
		</view>
		
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js"); 
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					active:1,
					flag:true,
					devicesList:[],
					deviceId:'',
				    name:'',
					mac:'',
					flags:true,
					userid:'',
					arr:'',
					jiaohuaqi:[]
				}
			},
			// 分享到好友（会话）
			onShareAppMessage: function() {
				return {
					title: '绿小能',
					path: '/pages/index/index'
				}
			},
			
			// 分享到朋友圈  
			onShareTimeline: function() {
				return {
					title: '绿小能',
					query: '',
					path: '/pages/index/index'
				}
			},
			onLoad() {
				
			},
			onShow() {
				this.getinfo()
				this.btnss()
			},
			methods:{
				// 获取用户信息
				getinfo() {
					this.$u.get(`/appVerify/profile`).then((res) => {
						if (res.code == 200) {
							this.userid = res.data.userId
						}else if(res.code == 401){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
					})
				},
				// 点击添加添加绑定设备
				btnadd(e){
					console.log(e,'0101');
					let mac = e.slice(-12) 
					let data = {
						mac:mac,
						userId:this.userid,
						pre:e.slice(0,5)
					}
					this.$u.post(`/app/bandDevice`,data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 3000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},2000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							})
						}
					})
				},
				
                btnss(){
					 uni.showLoading({
					 	title: '搜索中...'
					 })
					 this.jiaohuaqi = []
					 this.flag = false
					 let that = this
					 xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent)
					 xBlufi.notifyStartDiscoverBle({
					 	'isStart': true
					 })
					 setTimeout(() => {
					 	xBlufi.notifyStartDiscoverBle({
					 		'isStart': false
					 	})
					 	if (that.devicesList.length > 0) {
							that.flags = true
							this.$u.get(`/app/device/isBand/${this.arr}`).then(res =>{
								if(res.code == 200){
									res.data.forEach(item =>{
										if(item.isBand == false){
											that.devicesList.forEach(val =>{
												if(val.name.slice(-12) == item.mac){
													that.jiaohuaqi.push(val.name)
													console.log(that.jiaohuaqi);
												}
											})
										}
									})
								}
							})
					 	}else{
							// that.flags = false
						}
						uni.hideLoading()
						that.flag = true
					 }, 3000)
				},

				// 获取附近蓝牙设备列表
				funListenDeviceMsgEvent: function(options) {
					switch (options.type) {
						case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
							if (!options.result) {

							}
							break
						case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
							if (options.result) {
								let devicesarr = []
								this.devicesList = options.data
                                options.data.forEach(item =>{
									devicesarr.push(item.name.slice(-12))
								})
								this.arr = devicesarr.join(',')
							}
							break
						case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
							console.log("连接回调：" + JSON.stringify(options))
							if (options.result) {
								{
									xBlufi.notifyInitBleEsp32({
										deviceId: this.deviceId
									})
									this.deviceIds = options.data.deviceId
									this.name = this.name
								}
							}else{
								
							}
							break
						case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:

							break;
						case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
							if (!options.result) {
								uni.showToast({
									title: '蓝牙未开启',
									icon: 'none',
									duration: 3000
								})
								this.flags = false
								return
							} else {
								
							}
							break
					}
				},
			}
		}
</script>

<style lang="less">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	.wei{
		text-align: center;
		image{
			width: 380rpx;
			height: 394rpx;
		}
		.sbname{
			font-size: 40rpx;
			color: #3D3D3D;
			margin-top: 80rpx;
			width: 100%;
			text-align: center;
		}
		.sbwz{
			font-size: 28rpx;
			color: #737B80;
			margin-top: 24rpx;
			width: 100%;
			text-align: center;
		}
	}
	.btnss{
		width: 512rpx;
		height: 92rpx;
		background: #48893B;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 92rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 106rpx;
	}
	.list{
		width: 100%;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 72rpx;
		.list_item{
			margin-top: 18rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 152rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			padding: 18rpx 30rpx;
			box-sizing: border-box;
			image{
				width: 96rpx;
				height: 94rpx;
			}
			.cen{
				.name{
					font-size: 32rpx;
					color: #50565A;
				}
				.devmac{
					font-size: 24rpx;
					color: #BDBCBC;
					margin-top: 6rpx;
				}
			}
			.add{
				width: 108rpx;
				height: 60rpx;
				background: #FFFFFF;
				border: 3rpx solid #48893B;
				filter: blur(0px);
				border-radius: 20rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #48893B;
			}
		}
	}
	page{
		width: 100%;
		padding: 20rpx 64rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
    .topone{
		font-size: 36rpx;
		color: #3D3D3D;
		display: flex;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.toptwo{
		font-size: 28rpx;
		color: #737B7F;
		margin-top: 14rpx;
		width: 100%;
		padding-left: 48rpx;
		box-sizing: border-box;
	}

</style>