waterElectricityMinApp/pagesAir/shareAir/shareAir.vue

<template>
	<view class="container">
		<uni-swiper-dot :info="info" :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 info" :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)">
						<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" :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 v-else class="item-air" @longpress="itemLongPress($event, 0)" :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" :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 {
				// 滚动横幅的数据
				info: [{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
					},
					{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
					},
					{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
					}
				],
				current: 0, // 开始显示第几个
				dotMode: 'round', // 显示控制点样式
				balance: 18.88, // 余额
				isList: false, // 是否显示添加的空调列表
				airs: [], // 已经添加的空调列表数据
				screenHeight: '' // 屏幕的高度
			};
		},
		onLoad() {
			let airs_selected = uni.getStorageSync('airs_selected')
			if (airs_selected.length > 0) {
				// 使用存储的列表
				this.airs = airs_selected
				// 显示添加的空调列表
				this.isList = true
			}
		},
		onShow() {
			// 从新计算高度
			this.calc_screen_height()
			// 监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
			uni.$once('selectAirs', data => {
				// console.log('监听到事件来自 selectAirs ，携带参数 airs 为：' + data.airs);
				// this.airs = []
				let arrAirs = data.airs.trim().split(',').sort()
				let airs = []
				let room = '' // 房间名
				let temp = true // 没有同名的空调
				for (var i = 0; i < arrAirs.length; i++) {
					airs = arrAirs[i].trim().split(' ')
					// room = airs[0].replaceAll('-', '')
					room = airs[0]
					for (var j = 1; j < airs.length; j++) {
						if (airs[j].trim().length > 0) {
							temp = true
							for (var k = 0; k < this.airs.length; k++) {
								if (this.airs[k].name == room + ' ' + airs[j]) {
									temp = false
									break
								}
							}
							// 没有同名的
							if (temp) {
								this.airs.push({
									name: room + ' ' + airs[j],
									info: '2P空调',
									time: '01:25:21',
									on: false
								})
							}
						}
					}
				}
				// 如果选的空调不为空，则显示添加的空调列表
				if (this.airs.length > 0) {
					// 显示添加的空调列表
					this.isList = true
				}
				// 存储空调列表
				uni.setStorageSync('airs_selected', this.airs)
				// 移除全局自定义事件监听器。
				uni.$off('selectAirs')
			})
		},
		methods: {
			// 长按事件
			itemLongPress(e, val) {
				// console.log(e, val);
				if (val == 0) {
					let index = e.currentTarget.dataset.ref
					uni.showModal({
						title: '提示',
						content: '是否删除该空调？',
						success: (res) => {
							if (res.confirm) {
								// 删除指定下标的元素
								this.airs.splice(index, 1)
								// 更新存储
								uni.setStorageSync('airs_selected', this.airs)
							}
						}
					})
				} else {
					uni.showToast({
						title: '使用中不能删除',
						icon: 'error',
						duration: 1000
					})
				}
			},
			/**
			 * 单击了启动或关闭按钮
			 */
			btn_click(e) {
				// console.log(e.currentTarget.dataset.ref);
				let index_btn = e.currentTarget.dataset.ref
				// 未获取到索引
				if (typeof index_btn === 'undefined') {
					return
				}

				if (this.airs[index_btn].on) {
					uni.showModal({
						title: '提示',
						content: '确认【关闭】空调吗？',
						success: (res) => {
							if (res.confirm) {
								// 操作【关闭】空调

								this.airs[index_btn].on = false
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '确认【启动】空调吗？',
						success: (res) => {
							if (res.confirm) {
								// 操作【启动】空调

								this.airs[index_btn].on = true
							}
						}
					});
				}
			},
			/**
			 * 滚动到顶部提示
			 */
			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) {
				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;
							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>