waterElectricityMinApp/pagesAir/shareAir/shareAir.vue

<template>
	<view class="container">
		<uni-swiper-dot :info="imgUrl" :current="current" field="content" :mode="dotMode">
			<swiper class="swiper-box" @change="swiper_change" autoplay :interval="3000" :duration="500">
				<swiper-item v-for="(item ,index) in imgUrl" :key="index">
					<image :src="item.url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="line"></view>
		<view class="nav">
			<navigator class="btn" url="/pagesAir/stdBookMgr/stdBookMgr" hover-class="navigator-hover">
				<view class="btn-icon-tzgl">
					<image src="../static/images/tzgl.png" mode=""></image>
					<text>台账管理</text>
				</view>
				<view class="txt-right">
					<text> </text>
					<uni-icons type="forward" color="#c7c9ce" size="26"></uni-icons>
				</view>
			</navigator>
			<navigator class="btn" url="/pagesAir/accountBalance/accountBalance" hover-class="navigator-hover">
				<view class="btn-icon">
					<image src="../static/images/yhye.png" mode=""></image>
					<text>账户余额</text>
				</view>
				<view class="txt-right">
					<text>{{balance}}</text>
					<uni-icons type="forward" color="#c7c9ce" size="26"></uni-icons>
				</view>
			</navigator>
		</view>
		<view class="line"></view>
		<view class="add-air" v-if="isList === false" :style="{height: screenHeight}">
			<view class="add-content">
				<view class="add-left">
					<navigator url="../addAir/addAir" class="add-btn">
						<uni-icons type="plus" color="white" size="30"></uni-icons>
						<view>添加</view>
					</navigator>
					<view class="add-tip">
						<view class="txt-add-air">添加空调</view>
						<view class="txt-tip">点击添加设备</view>
						<view class="txt-tip">可添加多个设备</view>
					</view>
				</view>
				<view class="add-right">
					<image src="../static/images/air-pic.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="list-air" v-else>
			<scroll-view scroll-y="true" :style="{height: screenHeight}" @scrolltoupper="scroll_to_upper"
				@scrolltolower="scroll_to_lower">
				<view class="list-items" v-for="(item, index) in airs" :key="index">
					<view v-if="item.on === true" class="item-air"
						@longpress="itemLongPress($event, item.time, item.air_ip)">
						<view class="item-left">
							<view class="item-icon">
								<view class="circle1"></view>
								<view class="circle2"></view>
								<view class="circle3"></view>
							</view>
							<view class="item-title">{{item.name}}</view>
							<view class="item-info">
								<text class="item-info-left">{{item.info}}</text>
								<text>启动时间：</text><text>{{item.time}}</text>
							</view>
						</view>
						<view class="item-right"
							@tap="btn_click(index, item.air_ip, item.name, item.info, item.order_num, item.time)">
							<view class="item-btn">
								<image src="../static/images/power-off.png" mode="aspectFit"></image>
								<view class="item-txt-off">
									关闭
								</view>
							</view>
						</view>
					</view>
					<view v-else class="item-air" @longpress="itemLongPress($event, item.time, item.air_ip)"
						:ref="index">
						<view class="item-left">
							<view class="item-icon">
								<view class="circle1"></view>
								<view class="circle2"></view>
								<view class="circle3"></view>
							</view>
							<view class="item-title">{{item.name}}</view>
							<view class="item-info">
								<text class="item-info-left">{{item.info}}</text>
								<image src="../static/images/power-off.png" mode="" class="item-info-icon"></image>
								<text v-if="item.time !== ''">{{item.time}}</text>
								<text v-else>未启动</text>
							</view>
						</view>
						<view class="item-right" v-if="item.abnormal == 1"
							@tap="btn_click(index, item.air_ip, item.name, item.info, item.order_num, item.time)"
							:ref="index">
							<view class="item-btn">
								<image src="../static/images/power-on.png" mode="aspectFit"></image>
								<view class="item-txt-on">
									启动
								</view>
							</view>
						</view>
						<view class="item-right" v-else :ref="index">
							<view class="item-btn">
								<image src="../static/images/power-off.png" mode="aspectFit"></image>
								<view class="item-txt-off">
									禁用
								</view>
							</view>
						</view>
					</view>
				</view>
				<navigator url="../addAir/addAir" class="add-air-bottom">
					<uni-icons type="plus" size="30" color="#4B8DFB"></uni-icons>
					<view class="add-btn-bottom">添加</view>
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ceshi: 'air',
				userinfo: {}, // 用户信息
				stu_number: '', // 学号
				id_card: '', // 身份证号
				// 滚动横幅的数据
				imgUrl: [{
						url: this.$code_base_url + '/image/1.png'
					},
					{
						url: this.$code_base_url + '/image/2.png'
					},
					{
						url: this.$code_base_url + '/image/3.png'
					}
				],
				current: 0, // 开始显示第几个
				balance: 0.0.toFixed(2), // 余额
				airs: [], // 已经添加成功的空调列表数据
				selectAirs: [], // 已经选择的空调列表数据
				dotMode: 'round', // 显示控制点样式
				isList: false, // 是否显示添加的空调列表
				screenHeight: '', // 屏幕的高度
				options: 0,
				time_string: '未知（其他人员使用中）',
				test: this.$store.state.test
			};
		},
		onLoad(options) {
			// 系统正在维护...
			if (this.test == 'weihuzhong') {
				uni.redirectTo({
					url: '../../pages/index/index'
				})

				return;
			}

			this.options = options
			try {
				// 选择绑定了的空调
				let airs_selected = uni.getStorageSync('airs_selected')
				if (airs_selected.length > 0) {
					// 使用存储的列表
					this.selectAirs = airs_selected
				}
			} catch (e) {
				console.log('读取空调相关信息：' + e.message);
			}
		},
		onShow() {
			// 从新计算高度
			this.calc_screen_height();
			// 监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
			// 绑定空调
			var _this = this;
			uni.$once('selectAirs', data => {
				// console.log(data.sel_airs);
				// 拆分数组元素
				let tf = true;
				let arrAirs = data.sel_airs.trim().split(',');
				for (var i = 0; i < arrAirs.length; i++) {
					let tmpAirs = arrAirs[i].split('|');
					let t = tmpAirs[1].split('-');
					tf = true;
					for (var j = 0; j < _this.selectAirs.length; j++) {
						if (_this.selectAirs[j].air_ip == tmpAirs[2]) {
							tf = false;
						}
					}
					// 存在则不添加到数组和缓存
					if (true === tf) {
						_this.selectAirs.push({
							air_ip: tmpAirs[2],
							name: tmpAirs[0] + ' ' + t[0],
							info: t[1],
							time: '',
							abnormal: 1,
							on: false, // true开启了，false关闭了
							order_num: '' // 订单号
						});
					}
				}
				// 如果选的空调不为空，则显示添加的空调列表
				if (_this.selectAirs.length > 0) {
					// 去重
					var newArr = [...new Set(_this.selectAirs.map(e => JSON.stringify(e)))].map(e => JSON.parse(
						e));

					_this.selectAirs = newArr
				}
				// 存储空调列表
				uni.setStorageSync('airs_selected', _this.selectAirs)
				// 移除全局自定义事件监听器。
				// uni.$off('selectAirs')
			});

			// 获取基本信息
			this.get_base_info(this.options, 'onShow')

			setTimeout(() => {
				uni.hideLoading();
			}, 3000)
		},
		methods: {
			/**
			 * 查询绑定的空调
			 */
			async select_banding_airs() {
				uni.showLoading({
					title: '加载绑定的空调'
				});

				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/usersqueryAir.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						sfzh: this.id_card
					}
				})

				// console.log(res.data);
				if (res.data.code == 200) {
					let data = res.data.data
					if (data.length > 0) {
						this.airs = []
						let tmpAirs = []
						for (var i = 0; i < data.length; i++) {
							tmpAirs.push({
								air_ip: data[i].air_ip,
								name: data[i].school + '-' + data[i].build + '-' + data[i].floors + '-' + data[
										i].dom +
									'-' + data[i].air_name,
								info: data[i].air_config,
								time: '',
								abnormal: data[i].is_normal,
								on: data[i].is_on, // true开启了，false关闭了
								order_num: '' // 订单号
							})
							// for (var j = 0; j < this.selectAirs.length; j++) {
							// 	if (this.selectAirs[j].air_ip == data[i].air_ip) {
							// 		tmpAirs.push(this.selectAirs[j])
							// 		break
							// 	}
							// }
						}
						// 不为空
						if (tmpAirs.length > 0) {
							// 按名称排序
							tmpAirs.sort((a, b) => a.name.localeCompare(b.name));
							let _this = this;
							// 遍历状态
							for (var i = 0; i < tmpAirs.length; i++) {
								// 获取空调状态
								(function(t, tmpAirs) { // 注意这里是形参
									setTimeout(function() {
										_this.readAirsStatus(tmpAirs, t);
									}, 100 * t); // 还是0.1秒执行一次，不是累加的
								})(i, tmpAirs) // 注意这里是实参，这里把要用的参数传进去
							}

							setTimeout(() => {
								if (this.airs.length > 0) {
									// 显示添加的空调列表
									_this.isList = true;
									uni.hideLoading();
								}
							}, 500);
						}
					} else {
						// 隐藏添加的空调列表
						this.isList = false
					}
				} else if (res.data.code == 205) {
					// 隐藏添加的空调列表
					this.isList = false
				} else {
					// 隐藏添加的空调列表
					this.isList = false
					// 提示返回信息
					uni.showToast({
						title: res.data.message
					})
				}
				// 隐藏加载
				uni.hideLoading();
			},
			/**
			 * 获取绑定的空调的状态
			 * @param {Object} tmpAirs
			 * @param {Object} index
			 */
			async readAirsStatus(tmpAirs, index) {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/consumeStatus.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						air_ip: tmpAirs[index].air_ip,
						sfzh: this.id_card
					}
				})

				// console.log(res.data, tmpAirs[index].air_ip);
				if (res.data.code == 200) {
					let data = res.data;
					if (data.is_on == 1) {
						if (typeof data.order_num === 'undefined') {
							// 提示返回信息
							// uni.showToast({
							// 	icon: 'none',
							// 	title: '其他人员使用中！',
							// 	duration: 3000
							// })
							tmpAirs[index].time = this.time_string;
						} else {
							tmpAirs[index].time = data.start_time
						}
						tmpAirs[index].on = true
						tmpAirs[index].order_num = data.order_num
					} else {
						tmpAirs[index].on = false
						tmpAirs[index].time = ''
						tmpAirs[index].order_num = ''
					}
					// 更新自己绑定的空调列表
					this.airs.push(tmpAirs[index])
				} else if (res.data.code !== 200) {
					tmpAirs[index].time = res.data.message;
					// 更新自己绑定的空调列表
					this.airs.push(tmpAirs[index])
				} else {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: tmpAirs[index].air_ip + ' ' + res.data.message,
					// 	duration: 3000
					// })
					// console.log(tmpAirs[index].air_ip + ' ' + res.data.message);
				}
			},
			/**
			 * 获取基本信息
			 */
			get_base_info(options, param) {
				// console.log(options);
				uni.showLoading({
					title: '加载中',
					mask: true
				})

				// 获取学号
				this.stu_number = this.$store.state.userInfo.card_number

				try {
					if (this.stu_number == '' || typeof(this.stu_number) == 'undefined') { // 学号不存在，可以从存储中拿用户信息
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (userinfo) { // 拿学号
							this.userinfo = userinfo
							this.stu_number = userinfo.card_number
							this.id_card = userinfo.id_card
						} else { // 还没有需要跳转到首页进行获取
							uni.navigateTo({
								url: '../index/index?from=' + options.from
							})

							uni.showToast({
								icon: 'none',
								title: '学号为空，请进行授权',
								duration: 3000
							});

							return
						}
					} else { // 学号已经存在，可以从存储中拿用户信息
						this.userinfo = JSON.stringify(uni.getStorageSync('userinfo_storage_key'))
					}
				} catch (e) {
					console.log('获取基本信息：' + e.message);
				}
				// 获取code
				this.getCode(options, param)

				// if (this.id_card !== '') {
				// 	// 查询绑定的空调
				// 	this.select_banding_airs()
				// }
			},
			/**
			 * 获得code
			 */
			getCode(options, param) {
				var _this = this;
				uni.login({
					success: (res) => {
						// console.log('getCode', res);
						if (res.code) {
							if (param == 'get_user_info') {
								_this.getUserInfo(res.code)
							} else {
								// 请求服务器，获得openid
								_this.getOpenId(options, res.code)
							}
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				})
			},
			/**
			 * 请求服务器，获得openid
			 */
			async getOpenId(options, param_code) {
				if (typeof this.userinfo === 'object') {
					this.userinfo = JSON.stringify(this.userinfo)
				}
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/usersopenid.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: param_code,
						userinfo: this.userinfo
					}
				})

				// console.log(res.data);
				if (res.data.code == 200) {
					// 查询用户基本信息
					this.getCode(options, 'get_user_info')
					// 绑定成功，提示返回信息，但没必要提示
					// uni.showToast({
					// 	title: res.data.message
					// })
				} else if (res.data.code == 205) {
					// 查询用户基本信息
					this.getCode(options, 'get_user_info')
					// 用户已经存在，但没必要提示
					// uni.showToast({
					// title: res.data.message
					// })
				} else {
					// 提示返回信息
					uni.showToast({
						title: res.data.message
					})

					if (options && typeof(options.from) != 'undefined' && typeof(options.from) != '') {
						uni.navigateTo({
							url: '../index/index?from=' + options.from
						})
					} else {
						uni.redirectTo({
							url: '../index/index?from=0'
						});
					}
				}
			},
			/**
			 * 获取用户基本信息
			 * @param {Object} code
			 */
			async getUserInfo(code) {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/usersget_user.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: code
					}
				})

				// console.log(res.data);
				if (res.data.code == 200) {
					// 余额
					this.balance = res.data.data.balance.toFixed(2)
					this.id_card = res.data.data.sfzh

					// 查询绑定的空调（更新列表）
					this.select_banding_airs()
				} else {
					uni.showToast({
						title: res.data.message
					})
				}
			},
			/**
			 * 长按可解绑
			 * @param {Object} e
			 * @param {Object} time
			 * @param {Object} air_ip
			 */
			itemLongPress(e, time, air_ip) {
				// console.log(e, time, air_ip);
				var _this = this;
				var reg =
					/^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;
				var regExp = new RegExp(reg);
				if (regExp.test(time) || time == this.time_string) {
					uni.showToast({
						title: '使用中不能解绑',
						icon: 'error',
						duration: 1000
					})
				} else {
					let index = e.currentTarget.dataset.ref
					uni.showModal({
						title: '提示',
						content: '是否解绑该空调？',
						success: (res) => {
							if (res.confirm) {
								// 解绑空调
								_this.unbangding_airs(air_ip, index)
							}
						}
					});
				}
			},
			/**
			 * 解绑空调
			 * @param {Object} air_ip
			 * @param {Object} index
			 */
			async unbangding_airs(air_ip, index) {
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/usersdelAir.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						sfzh: this.id_card,
						air_ip: air_ip
					}
				});

				// console.log(res.data);
				if (res.data.code == 200) {
					// 删除指定下标的元素
					this.airs.splice(index, 1);
					uni.setStorageSync('airs_selected', this.airs);

					if (this.airs.length == 0) {
						this.isList = false;
					}

					uni.showToast({
						title: res.data.message
					})
				} else {
					uni.showToast({
						title: res.data.message
					});
				}
			},
			/**
			 * 单击了启动或关闭按钮
			 * @param {Object} e
			 */
			btn_click(index, air_ip, name, info, order_num, time) {
				// console.log(index, air_ip, name, info, order_num, time);
				var _this = this;
				// if (time === this.time_string) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '其他人员使用中，你不能关闭！',
				// 		confirmText: '好的',
				// 		showCancel: false
				// 	})
				// 	return;
				// }

				let tmp = name.split('-');
				let build = tmp[1],
					floors = tmp[2],
					dom = tmp[3] + '-' + tmp[4].split(' ')[0];
				let air_name = tmp[tmp.length - 1];
				// console.log(air_name);
				// 未获取到索引
				if (typeof index === 'undefined') {
					uni.showToast({
						title: '索引为空！',
						icon: 'none'
					});

					return;
				}
				// 获取空调名称
				if (typeof air_name === 'undefined') {
					uni.showToast({
						title: '空调名称为空！',
						icon: 'none'
					});

					return;
				}

				if (this.airs[index].on) {
					uni.showModal({
						title: '提示',
						content: '确认【关闭】空调吗？',
						success: (res) => {
							if (res.confirm) {
								// 【关闭】空调
								_this.close_airs(index, air_ip, order_num)
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '确认【启动】空调吗？',
						success: (res) => {
							if (res.confirm) {
								// 【启动】空调
								uni.login({
									success: (res) => {
										// console.log('getCode', res);
										if (res.code) {
											// 调用接口，开启空调
											_this.open_airs(res.code, index, air_ip, build, floors,
												dom, info, air_name)
										} else {
											uni.showToast({
												title: res.errMsg,
												icon: 'none'
											});
										}
									}
								})
							}
						}
					});
				}
			},
			/**
			 * 关闭空调
			 * @param {Object} index
			 * @param {Object} air_ip
			 */
			async close_airs(index, air_ip, order_num) {
				// console.log(index, air_ip, order_num);
				if (order_num == '') {
					uni.showToast({
						title: '未获得单号'
					})
					return
				}

				if (this.id_card == '') {
					uni.showToast({
						title: '未获得身份证号'
					})
					return
				}

				uni.showLoading({
					title: '关闭中...',
					mask: true
				});

				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/consumeend.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						sfzh: this.id_card,
						order_num: order_num,
						air_ip: air_ip
					}
				})

				if (typeof(res.data) === 'undefined') {
					uni.showToast({
						title: '请求超时！',
						duration: 3000,
						success() {
							setTimeout(() => {
								uni.hideLoading();
							}, 1000);
						}
					});
				} else {
					// console.log(res.data)
					if (res.data.code == 200) {
						// 显示已经关闭图标
						this.airs[index].on = false
						this.airs[index].time = '未启动'
						uni.showToast({
							title: '关闭成功！',
							duration: 2000,
							success() {
								setTimeout(() => {
									uni.hideLoading();
								}, 1000);
							}
						});
					} else {
						if (res.data.message == '该订单已结算，请勿重复结算') {
							// 显示已经关闭图标
							this.airs[index].on = false
						}
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000,
							success() {
								setTimeout(() => {
									uni.hideLoading();
								}, 1000);
							}
						})
					}
				}
			},
			/**
			 * 启动空调
			 * @param {Object} code
			 * @param {Object} index
			 * @param {Object} air_ip
			 * @param {Object} build
			 * @param {Object} floors
			 * @param {Object} dom
			 * @param {Object} air_config
			 */
			async open_airs(code, index, air_ip, build, floors, dom, air_config, air_name) {
				// console.log(code, index, air_ip, build, floors, dom, air_config, air_name);
				uni.showLoading({
					title: '开启中...',
					mask: true
				});
				const res = await this.$myRequest({
					host: this.ceshi,
					url: '/airManage/consumestart.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code: code,
						air_ip: air_ip,
						build: build,
						floors: floors,
						dom: dom,
						air_config: air_config,
						air_name: air_name
					}
				})

				if (typeof(res.data) === 'undefined') {
					uni.showToast({
						title: '请求超时！',
						duration: 3000,
						success() {
							setTimeout(() => {
								uni.hideLoading();
							}, 1000);
						}
					});
				} else {
					// console.log(res.data);
					if (res.data.code == 200) {
						let _this = this;
						// 获取订单号
						this.airs[index].order_num = res.data.order_num
						uni.showToast({
							title: '开启成功！',
							duration: 2000,
							success() {
								// 将开启按钮变成关闭按钮
								_this.airs[index].on = true;
								_this.airs[index].time = res.data.start_time;
								setTimeout(() => {
									uni.hideLoading();
								}, 1000);
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000,
							success() {
								setTimeout(() => {
									uni.hideLoading();
								}, 1000);
							}
						})
					}
				}
			},
			/**
			 * 滚动到顶部提示
			 */
			scroll_to_upper() {
				uni.showToast({
					title: '到顶了！',
					icon: 'none',
					duration: 500
				})
			},
			/**
			 * 滚动到底部提示
			 */
			scroll_to_lower() {
				uni.showToast({
					title: '到底了！',
					icon: 'none',
					duration: 500
				})
			},
			/**
			 * 轮播图发生改变
			 * @param {Object} e
			 */
			swiper_change(e) {
				// console.log(e.detail.current);
				this.current = e.detail.current;
			},
			/**
			 * 计算屏幕的高度, 适配屏幕的高度
			 */
			calc_screen_height() {
				uni.getSystemInfo({
					success: res => {
						let h = 0;
						if (this.isList === true) {
							h = ((res.screenHeight * (750 / res.windowWidth)) - 640) //将px 转换rpx
						} else {
							h = ((res.screenHeight * (750 / res.windowWidth)) - 740) //将px 转换rpx
						}
						this.screenHeight = Math.floor(h) + 'rpx'
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-family: "Microsoft YaHei-3970(82674968)";
		width: 730rpx;
		padding: 10rpx;

		.swiper-box {
			height: 150px;
			width: 100%;
		}

		swiper-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;

			image {
				height: 100%;
				width: 100%;
				border-radius: 8rpx;
			}
		}

		.line {
			height: 20rpx;
		}

		.nav {
			display: flex;
			justify-content: space-between;

			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 338rpx;
				height: 100rpx;
				padding: 5rpx 10rpx;
				border-radius: 8rpx;
				background-color: #eaefff;

				.btn-icon-tzgl {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						padding: 10rpx;
					}
				}

				.btn-icon {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.txt-right {
					display: flex;
					align-items: center;
				}
			}
		}

		.add-air {
			border-radius: 8rpx;
			padding: 60rpx 10rpx;
			background-color: #ffffff;

			.add-content {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 20rpx;

				.add-left {
					display: flex;

					.add-btn {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
						width: 120rpx;
						height: 120rpx;
						border-radius: 20rpx;
						background-color: #2979ff;
						color: #ffffff;
					}

					.add-tip {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.txt-add-air {
							font-size: 40rpx;
							font-weight: bold;
						}

						.txt-tip {
							font-size: 20rpx;
							color: #8f939c;
						}
					}
				}

				.add-right {
					width: 300rpx;
					height: 100rpx;
					border-radius: 10rpx;

					image {
						width: 300rpx;
						height: 100rpx;
					}
				}
			}

			.add-bg {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 90rpx;

				image {
					width: 400rpx;
					height: 400rpx;
				}
			}
		}

		.list-air {
			border-radius: 8rpx;
			padding: 10rpx 10rpx;
			background-color: #e9e9eb;

			.list-items {
				display: flex;
				flex-direction: column;

				.item-air {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 20rpx;
					border-bottom: 1px solid #c3c8d4;

					.item-left {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.item-icon {
							display: flex;
							align-items: center;

							.circle1 {
								width: 16rpx;
								height: 16rpx;
								border-radius: 8rpx;
								background-color: #18bc37;
							}

							.circle2 {
								width: 12rpx;
								height: 12rpx;
								border-radius: 6rpx;
								background-color: #18bc37;
								margin: 0 10rpx;
							}

							.circle3 {
								display: inline-block;
								width: 8rpx;
								height: 8rpx;
								border-radius: 4rpx;
								background-color: #18bc37;
							}
						}



						.item-title {
							font-size: 32rpx;
							font-weight: bold;
							padding-bottom: 12rpx;
						}

						.item-info {
							display: flex;
							color: #8f939c;

							.item-info-left {
								padding-right: 20rpx;
							}

							.item-info-icon {
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
							}
						}
					}

					.item-right {

						.item-btn {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-left: 20rpx;
							width: 100rpx;
							height: 100rpx;
							border: 1px solid #d9deeb;
							border-radius: 50rpx;
							box-shadow: 4rpx 4rpx 5rpx #c8cdd8;
							background-image: linear-gradient(-45deg, #F2F4F2, #DFDFDF);

							image {
								width: 50rpx;
								height: 50rpx;
							}

							.item-txt-on {
								font-size: 24rpx;
								font-weight: bold;
								color: #4B8DFB;
							}

							.item-txt-off {
								font-size: 24rpx;
								font-weight: bold;
								color: #8A8A8A;
							}
						}
					}
				}
			}

			.add-air-bottom {
				display: flex;
				justify-content: center;
				margin: 20rpx 0;
				padding: 20rpx 0;
				width: 160rpx;
				border-radius: 10rpx;

				.add-btn-bottom {
					font-size: 40rpx;
					color: #4B8DFB;
					padding-left: 8rpx;
				}
			}
		}
	}
</style>