iot-ui-app/pages/tabbar/module/intelligent.vue

<template>
	<view class="main-content">
		<u-navbar title="智能" :is-back="false">
			<!-- #ifdef APP-PLUS -->
			<view slot="right" style="padding: 10rpx 30rpx;" @click="addDevice">
				<u-icon name="plus-circle-fill" color="#1890ff" size="60"></u-icon>
			</view>
			<!-- #endif -->
		</u-navbar>
		<!-- #ifdef MP-WEIXIN -->
		<view class="weixin-box">
			<view class="add-device" style="padding: 0 20rpx;" @click="addDevice" >
				<text style="margin-right: 10rpx;">添加设备</text>
				<u-icon name="plus-circle-fill" color="#1890ff" size="60"></u-icon>
			</view>
		</view>
		<!-- #endif -->
		<u-swiper height="300rpx" :list="navList"></u-swiper>
		<view class="area-box">
			<u-tabs :list="tabsList" font-size="36" :current="tabIndex" bg-color="" @change="tabChange"></u-tabs>
		</view>
		<view class="device-list">
			<view class="device-item" v-for="(item,index) in deviceList" :key="index" @click="goDeviceDetail(item)">
				<view class="device-img">
					<image :src="item.imgPath" mode=""></image>
				</view>
				<view class="device-name u-line-1">
					{{item.name}}
				</view>
				<view class="device-content u-line-1">
					{{item.content}}
				</view>
				<view class="device-switch" v-if="item.switchStatus" @click.stop="toggleSwitch(index)">
					<view v-if="item.switchValue" class="device-switch-bg active">
						<view class="iconfont icon-kaiguan"></view>
					</view>
					<view v-else="item.switchValue" class="device-switch-bg">
						<view class="iconfont icon-kaiguan"></view>
					</view>
				</view>
			</view>
			<u-empty :show="deviceList && deviceList.length == 0" margin-top="100" text="设备为空" mode="list" style="margin: 0 auto;"></u-empty>
		</view>
	</view>
</template>

<script>
	import data from "@/common/js/workbench.js"
	let list = [
		{
			id:1,
			imgPath:'https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-zhijia/device.png',
			name:'设备1',
			content:'客厅',
			templateType:'common',
			switchStatus:true,
			switchValue:true,
		},
		{
			id:2,
			imgPath:'https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-zhijia/air-purifier.png',
			name:'空气净化器',
			content:'客厅|3ug/m³',
			templateType:'common',
			switchStatus:true,
			switchValue:false,
		},
		{
			id:3,
			imgPath:'https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-zhijia/switch.png',
			name:'餐厅、线性灯、射灯',
			content:'客厅|关 关 关',
			templateType:'common',
			switchStatus:false,
			switchValue:false,
		},
		{
			id:4,
			imgPath:'https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-zhijia/light.png',
			name:'客厅灯',
			content:'关',
			templateType:'light',
			switchStatus:false,
			switchValue:false,
		}
	]
	let navList = [
		'https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-zhijia/login-banner.jpg',
		'https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-zhijia/battery-banner.jpg',
	]
	export default {
		data() {
			return {
				deviceList:list,
				navList,
				tabsList:data.areaTabsList,
				tabIndex:0,
			}
		},
		onLoad() {
			this.getUserData();
		},
		onShow() {
			
		},
		onReady() {
			
		},
		methods: {
			addDevice(){
				console.log("点击添加设备")
				uni.$u.toast('功能开发中');
			},
			tabChange(e){
				console.log("切换房间",e)
				this.tabIndex = e;
			},
			/**
			 * 页面初始化
			 */
			getUserData(result) { //实名检查
				this.$api.getUserInfo().then(res => {
					console.log("实名检查", res)
					if (res.code === 1) {
						this.$store.dispatch('updateUserInfo', res.data);
					} else {
						this.tui.toast(res.msg, 2000);
					}
				})
			},
			// 点击设备
			goDeviceDetail(item){
				if(item.templateType=='light'){
					uni.navigateTo({
						url:'/pages/intelligent/template/light/light1?name=' + item.name + '&id=' + item.id
					})
				}
				// else{
				// 	uni.navigateTo({
				// 		url:'/pages/webview/index'
				// 	})
				// }
				else{
					uni.navigateTo({
						url:'/pages/intelligent/template/public/public1?name=' + item.name + '&id=' + item.id
					})
				}
				
			},
			// 点击快捷按钮
			toggleSwitch(index){
				this.deviceList[index].switchValue = !this.deviceList[index].switchValue;
			}
		}
	}
</script>
<style>
	page{
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.main-content{
		padding: 20rpx;
		.weixin-box{
			margin-bottom: 10rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.add-device{
				display: flex;
				align-items: center;
			}
		}
		.area-box{
			margin: 0 -20rpx;
		}
		.device-list{
			display: flex;
			flex-wrap: wrap;
			.device-item{
				width: 345rpx;
				height: 260rpx;
				padding: 20rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;
				position: relative;
				&:nth-of-type(2n+1){
					margin-right: 20rpx;
				}
				.device-img{
					width: 150rpx;
					height: 150rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.device-name{
					font-size: 26rpx;
					line-height: 46rpx;
					font-weight: 600;
				}
				.device-content{
					font-size: 22rpx;
					line-height: 30rpx;
					font-weight: 300;
				}
				// 快捷开关
				.device-switch{
					position: absolute;
					top:0;
					right: 0;
					width: 100rpx;
					height: 100rpx;
					padding: 20rpx;
					.device-switch-bg{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 60rpx;
						background: #f0f0f0;
						.iconfont{
							font-weight: 400;
							color: #aaa;
							font-size: 40rpx;
						}
						&.active{
							background-color: #1890ff;
							.iconfont{
								color: #fff;
							}
						}
						
					}
				}
			}
		}
	}
</style>