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="aspectFill"></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 class="add-bg">
				<image src="../static/images/qidong.png" mode="aspectFit"></image>
			</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" class="item-air" @longpress="itemLongPress($event, 1, 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)">
							<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, 0, 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>未启用</text>
							</view>
						</view>
						<view class="item-right" @tap="btn_click(index, item.air_ip, item.name, item.info)"
							: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>
				</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: '', // 身份证号
				order_num: '', // 订单号
				// 滚动横幅的数据
				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: '' // 屏幕的高度
			};
		},
		onLoad(options) {
			// 选择绑定了的空调
			let airs_selected = uni.getStorageSync('airs_selected')
			if (airs_selected.length > 0) {
				// 使用存储的列表
				this.selectAirs = airs_selected
			}
		},
		onShow() {
			// 从新计算高度
			this.calc_screen_height()
			// 监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
			// 绑定空调
			uni.$once('selectAirs', data => {
				// console.log(data.airs);
				let arrAirs = data.airs.trim().split(',')
				for (var i = 0; i < arrAirs.length; i++) {
					let tmpAirs = arrAirs[i].split('|')
					let t = tmpAirs[1].split('-')
					let 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: '',
							on: false
						})
					}
				}
				// 如果选的空调不为空，则显示添加的空调列表
				if (this.selectAirs.length > 0) {
					// 去重
					const 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('options', 'onLoad')

			setTimeout(() => {
				uni.hideLoading();
			}, 3000)
		},
		methods: {
			/**
			 * 查询绑定的空调
			 */
			async select_banding_airs() {
				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++) {
							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
								}
							}
						}
						// 按名称排序
						tmpAirs.sort((a, b) => a.name.localeCompare(b.name))
						this.airs = tmpAirs
						// 显示添加的空调列表
						this.isList = true
					} 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();
			},
			/**
			 * 获取基本信息
			 */
			get_base_info(options, param) {
				// console.log(options);
				uni.showLoading({
					title: '加载中'
				})
				try {
					// 获取学号
					this.stu_number = this.$store.state.userInfo.card_number

					if (this.stu_number == '' || typeof(this.stu_number) == 'undefined') { // 学号不存在，可以从存储中拿用户信息
						const userinfo = uni.getStorageSync('userinfo_storage_key')
						if (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)
			},
			/**
			 * 获得code
			 */
			getCode(options, param) {
				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 (JSON.stringify(this.userinfo) === "{}") {
					return
				}
				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} val
			 */
			itemLongPress(e, val, air_ip) {
				// console.log(e, val, air_ip);
				if (val == 0) {
					let index = e.currentTarget.dataset.ref
					uni.showModal({
						title: '提示',
						content: '是否删除该空调？',
						success: (res) => {
							if (res.confirm) {
								// 解绑空调
								this.unbangding_airs(air_ip, index)
							}
						}
					})
				} else {
					uni.showToast({
						title: '使用中不能删除',
						icon: 'error',
						duration: 1000
					})
				}
			},
			/**
			 * 解绑空调
			 * @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)

					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) {
				// console.log(index, air_ip, name, info);
				let tmp = name.split('-');
				let build = tmp[1],
					floors = tmp[2],
					dom = tmp[3] + '-' + tmp[4].split(' ')[0];
				let air_name = name.split(' ')[1]
				// 未获取到索引
				if (typeof index === 'undefined') {
					return
				}

				if (this.airs[index].on) {
					uni.showModal({
						title: '提示',
						content: '确认【关闭】空调吗？',
						success: (res) => {
							if (res.confirm) {
								// 【关闭】空调
								this.close_airs(index, air_ip)
							}
						}
					});
				} 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) {
				if (this.order_num == '') {
					uni.showToast({
						title: '未获得单号'
					})
					return
				}

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

				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: this.order_num,
						clientId: air_ip
					}
				})

				console.log(res.data);
				if (res.data.code == 200) {
					uni.showToast({
						title: res.data.message
					})
					// 显示已经关闭图标
					this.airs[index].on = false
				} else {
					uni.showToast({
						title: res.data.message
					})
				}
			},
			/**
			 * 启动空调
			 * @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) {
				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
					}
				})

				console.log(res.data);
				if (res.data.code == 200) {
					uni.showToast({
						icon: 'none',
						title: res.data.message
					})
					// 显示已经开启图标
					this.airs[index].on = true
					this.order_num = res.data.order_num
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message
					})
				}
			},
			/**
			 * 滚动到顶部提示
			 */
			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: #F1F1F1;

			.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>