smartmeter-app/pages/wifilist/index.vue

<template>
	<view>
		<!-- 样式 -->
		<view class="container" style="margin-top: 100rpx;">
			<view class="device">
				<span class="device-list-title">WIFI选择</span>
			</view>
			<view class="flex-row items-center flex-1 group">
				<text class="text_3 ml-3">请选择您需要连接的wifi名称</text>
			</view>

			<!-- wifi列表 -->
			<view class="wifilist">
				<view class="bd" v-for="(item,index) in list" :key="index" @click="btnqhwifi(index,item)"
					v-if="signalStrengthflag">
					<view class="bdbox">
						<view class="box">
							<ul>
								<li
									v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 1 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 30">
									<image src="https://api.ccttiot.com/smartmeter/img/static/uTvQ7JtgSsBsTY99SKrF" mode=""></image>
								</li>
								<li
									v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 29 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 51">
									<image src="https://api.ccttiot.com/smartmeter/img/static/uXM3mk2pJi73XeM9mVqG" mode=""></image>
								</li>
								<li
									v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 50 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 70">
									<image src="https://api.ccttiot.com/smartmeter/img/static/uTTcLsrjxpw5asCMUZtR" mode=""></image>
								</li>
								<li
									v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 69">
									<image src="https://api.ccttiot.com/smartmeter/img/static/uOa0lsRfyLqH7CEYrgXx" mode=""></image>
								</li>
							</ul>
						</view>

						<view class="content">
							<view class="bt">{{item.SSID}}</view>
							<view class="wz" style="color: #8883F0 ;">{{item.BSSID}}</view>
						</view>
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uLrArPv3OrIodtWZ3gri" mode="" class="pictwo" v-if="indexs == index">
					</image>
				</view>
			</view>
			<view class="button" @click="btnxyb">下一步</view>
			<view  class="buttons" @click="btnsd">手动输入WIFI</view>
		</view>

	</view>
</template>
<script>
	// import jpSelect from '@/components/jp-select/jp-select.vue';
	// var xBlufi = require("../../../utils/blufi/xBlufi.js");
	export default {
		// components: {
		// 	jpSelect
		// },nin
		data() {
			return {
				options: {},
				optionsobj: {},
				version: '2.0',
				name: '',
				connectedDeviceId: '',
				connected: true,
				deviceInfo: null,
				isInitOK: false,
				password: '',
				customData: '',
				ble_data: '',
				wifiList: "",
				item: '',
				textwb: '重新扫描',
				list: [{
					BSSID: '',
					SSID: ''
				}],
				picflag: false,
				indexs: -1,
				wififlag: true, //wifi列表flag
				videoflag: false, //视频flag
				ssid: '', //wifi名称
				signalStrengthflag: false,
				objlist: {}
			};
		},

		// components: {},
		props: {},
		onShow: function(options) {
			// 判断手机是什么型号
			let systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'android') {
				// 当前设备是 Android  
				var that = this
				wx.startWifi({
					success: function() {
						// Wi-Fi 模块初始化成功  
						console.log('Wi-Fi 模块已初始化');
						// 在这里可以调用 wx.getWifiList  
						wx.getWifiList({
							success: function(res) {
								// 获取 Wi-Fi 列表成功  
								console.log('获取 Wi-Fi 列表成功:', res);
								// 在这里可以处理 Wi-Fi 列表数据  
								wx.onGetWifiList(function(res) {
									// 这里是监听获取到 Wi-Fi 列表后的回调函数  
									console.log('监听到获取到 Wi-Fi 列表:', res.wifiList);
									that.wifiList = res.wifiList
									// 升序排序
									that.wifiList.sort(function(a, b) {
										return b.signalStrength - a
											.signalStrength;
									});
									// 去重
									for (var i = 0; i < that.wifiList.length; i++) {
										for (var j = i + 1; j < that.wifiList
											.length; j++) {
											if (that.wifiList[i].SSID == that.wifiList[
													j]
												.SSID) {
												that.wifiList.splice(j, 1);
												j--
											}
										}
									}
									that.signalStrengthflag = true
									that.list = that.wifiList
									console.log(that.list, '1010'); //在这里提取列表数据
								});
							},
							fail: function(err) {
								// 获取 Wi-Fi 列表失败  
								console.error('获取 Wi-Fi 列表失败:', err);
							}
						});
					},
					fail: function(err) {
						// 初始化失败  
						console.error('Wi-Fi 初始化失败:', err);
					}
				});
			} else if (systemInfo.platform === 'ios') {
				// 当前设备是 iOS  

			}
		},
		onLoad: function(option) {
			// 传过来的蓝牙信息
			this.objlist = option
             console.log(this.objlist,'listlist')
			var that = this
			wx.startWifi({
				success: function() {
					// Wi-Fi 模块初始化成功  
					console.log('Wi-Fi 模块已初始化');
					// 在这里可以调用 wx.getWifiList  
					wx.getWifiList({
						success: function(res) {
							// 获取 Wi-Fi 列表成功  
							console.log('获取 Wi-Fi 列表成功:', res);
							// 在这里可以处理 Wi-Fi 列表数据  
							wx.onGetWifiList(function(res) {
								// 这里是监听获取到 Wi-Fi 列表后的回调函数  
								console.log('ios监听到获取到 Wi-Fi 列表:', res.wifiList);
								that.wifiList = res.wifiList
								// 降序排序
								that.wifiList.sort(function(a, b) {
									return b.signalStrength - a.signalStrength;
								});
								// 去重
								for (var i = 0; i < that.wifiList.length; i++) {
									for (var j = i + 1; j < that.wifiList
										.length; j++) {
										if (that.wifiList[i].SSID == that.wifiList[j]
											.SSID) {
											that.wifiList.splice(j, 1);
											j--
										}
									}
								}
								that.signalStrengthflag = true
								that.list = that.wifiList
								console.log(that.list, '1010'); //在这里提取列表数据
							});
						},
						fail: function(err) {
							// 获取 Wi-Fi 列表失败  
							console.error('获取 Wi-Fi 列表失败:', err);
						}
					});
				},
				fail: function(err) {
					// 初始化失败  
					console.error('Wi-Fi 初始化失败:', err);
				}
			});
		},
		onUnload: function() {
			console.log("unload返回 ");
			let that = this;
		},
		methods: {
			// 点击判断索引是否相同显示图片
			btnqhwifi(index, item) {
				this.indexs = index
				// console.log(item.SSID)
				this.ssid = item.SSID
			},
			// 点击进行下一步
			btnxyb() {
				console.log('panduan1',this.indexs);
				if (this.indexs == -1) {
					uni.showToast({
						title: '请选择需要连接的wifi',
						icon: 'none',
						duration: 3000
					});
				} else {
					console.log('panduan2');
					uni.navigateTo({
						url: '/pages/wifijoint/index?ssid=' + JSON.stringify(this.ssid) + '&objlist=' + JSON.stringify(this.objlist)
					})
				}
			},
			btnsd() {
				this.ssid = ''
				uni.navigateTo({
					url: '/pages/wifijoint/index?objlist=' + JSON.stringify(this.objlist) + '&ssid=' + JSON.stringify(this.ssid)
				})
			},

		},

	};
</script>

<style lang="less">
	//wifi信号强度显示 
	.wifiactive {
		background-color: limegreen !important;
	}

	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.box {
		margin-right: 30rpx;
		height: 100%;
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}

	ul {
		position: relative;
		width: 100%;
		height: 100%;
	}

	li {

		// width: 8rpx;
		// position: absolute;
		// bottom: 0;
		// border-radius: 10px;
		// background: rgba(0, 0, 0, .5);
		image {
			display: inline-block;
			margin-top: 10rpx;
			// padding-left: 30rpx;
			// box-sizing: border-box;
			width: 50rpx;
			height: 46rpx;
		}
	}

	// ul li:nth-child(1) {
	// 	height: 10rpx;
	// 	left: 0px;
	// }

	// ul li:nth-child(2) {
	// 	height: 20rpx;
	// 	left: 10px;
	// }

	// ul li:nth-child(3) {
	// 	height: 30rpx;
	// 	left: 20px;
	// }

	// ul li:nth-child(4) {
	// 	height: 40rpx;
	// 	left: 30px;
	// }

	// ul li:nth-child(5) {
	// 	height: 50rpx;
	// 	left: 40px;
	// }

	// ul li:nth-child(6) {
	// 	height: 60rpx;
	// 	left: 50px;
	// }





	// 点击关闭弹出弹窗提示
	.tanctitle {
		width: 500rpx;
		background-color: #fff;
		margin: auto;
		position: fixed;
		top: 35%;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;

		.title {
			margin-top: 20rpx;
			font-size: 16px;
			font-weight: 700;
		}

		.anniu {
			margin-top: 50rpx;
			display: flex;
			border-top: 1px solid #ccc;
			height: 60rpx;
			line-height: 60rpx;

			.btnqx {
				width: 50%;
				text-align: center;
				border-right: 1px solid #ccc;
			}

			.btnqd {
				width: 50%;
				text-align: center;
			}
		}
	}



	.page {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.wz {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-bottom: 10rpx;

			.title {
				font-size: 18px;
				font-weight: 700;
			}

			.bg {
				display: inline-block;
				border-radius: 10rpx;
				padding: 5rpx 10rpx;
				box-sizing: border-box;
				background-color: red;
				color: #fff;
			}
		}

		.wifivideo {
			width: 100%;

			video {
				width: 100%;
				height: 90vh;
			}
		}
	}

	.active {
		background: rgba(240, 252, 251, 1);
	}

	.bdbox {
		display: flex;
	}

	.wifilist {
		margin-top: 80rpx;

		.bd {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 148rpx;
			// line-height: 148rpx;
			padding-top: 45rpx;
			box-sizing: border-box;
			padding-left: 60rpx;
			padding-right: 60rpx;
			box-shadow: 0 0 10px rgba(0, 0, 0, .1);
			border-radius: 10rpx;
			margin-top: 50rpx;

			.picone {
				width: 58rpx;
				height: 42rpx;
				margin-top: 10rpx;
			}

			.pictwo {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
			}

			.content {
				margin-left: 30rpx;

				view {
					height: 40rpx;
				}

				.wz {
					color: rgba(189, 188, 188, 1);
					font-size: 12px;
				}

				.bt {
					color: rgba(80, 86, 90, 1);
					font-size: 16px;
				}
			}
		}
	}





	.device-list-title {
		color: #50565a;
		font-size: 96rpx;
		font-family: SourceHanSansCN;
		margin-top: 100rpx;
	}

	.text_3 {
		margin-top: 10rpx;
		color: rgba(119, 128, 141, 1);
		font-size: 28rpx;
	}

	.container {
		/* padding-top: 30rpx !important; */
		padding: 0 30rpx 380rpx 30rpx !important;
		align-items: center;
	}

	.button {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		padding: 10rpx 0;
		height: 96rpx;
		box-sizing: border-box;
		background-color: #8883F0  !important;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		font-weight: 700;
		font-size: 20px;
		width: 90%;
		color: #FFFFFF;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 200rpx;
		height: 96rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		background-color: #8883F0  !important;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		font-weight: 700;
		font-size: 20px;
		width: 90%;
		color: #FFFFFF;
	}
</style>