AiToyCXWx/components/deviceBox/index.vue

<template>
	<div class="l_box box">
		<div class="l_top adfacjb">
			<div class="lt_l">{{item.alias||item.board||''}}</div>
			<div class="lt_r adfac">
				<image src="http://106.54.209.120:8188/static/wifi_on_mini.png" v-if="item.state===1"></image>
				<image src="http://106.54.209.120:8188/static/wifi_off_mini.png" v-else></image>
				<image src="http://106.54.209.120:8188/static/online_mini.png" v-if="item.state===1"></image>
				<image src="http://106.54.209.120:8188/static/offline_mini.png" v-else></image>
				<div class="ltr_zt" :class="{'zx':item.state===1,'lx':item.state===0}">{{item.state===1?'在线':'离线'}}</div>
			</div>
		</div>
		<div class="l_content">
			<div class="lc_role adfac">
				<image class="lcr_l" src="http://106.54.209.120:8188/static/avatar_default.png"></image>
				<div class="lcr_r">
					<p>{{item.agent.agentName||''}}</p>
					<div class="text">角色模板：{{item.roleModelName}}</div>
					<div class="text">绑定时间：{{item.createDate}}</div>
				</div>
			</div>
			<div class="lc_info">
				{{}}
			</div>
			<div class="lc_btns adfac">
				<div class="lcb_pre" @tap="editRole(item)">角色编辑</div>
				<div class="lcb_pre" @tap="changeWifi(item)">配置网络</div>
				<div class="lcb_pre" @tap="unbindDevice(item)">解绑设备</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			item:{
				typeof:Object
			},
			showInfo:{
				typeof:Boolean,
				default:false
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			editRole(item){
				this.$emit('editRole');
				uni.navigateTo({
					url:`/pagesRole/addRole?agentId=${item.agentId}&deviceId=${item.id}`
				})
			},
			changeWifi(item){
				uni.navigateTo({
					url:'/pagesMy/wifi'
				})
			},
			unbindDevice(item){
				uni.showModal({
					title:'温馨提示',
					content:'确定要解绑该设备吗？',
					success: (res) => {
						this.$api.post('/device/unbind',{deviceId:item.id}).then(res=>{
							if(res.data.code!==0) return this.$showToast(res.data.msg)
							this.$showToast('解绑成功');
							setTimeout(()=>{
								this.$emit('unbindSuccess')
							},1000)
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.box{
		position: relative;
		width: calc(100% - 60rpx);
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 32rpx;
		border: 1rpx solid #D9F159;
		box-sizing: border-box;
	}
	
	.l_box{
		width: 100%;
		padding: 49rpx 30rpx 40rpx;
		margin-top: 20rpx;
		.l_top{
			.lt_l{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				line-height: 40rpx;
			}
			.lt_r{
				image{
					width: 42rpx;
					height: 42rpx;
					margin-right: 34rpx;
				}
				.ltr_zt{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					line-height: 37rpx;
					padding-left: 22rpx;
					position: relative;
					&::before{
						content: '';
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						position: absolute;
						left: 0;
						top: 50%;
						margin-top: -6rpx;
					}
					&.zx{
						color: #1B50FF;
						&::before{
							background: #1B50FF;
						}
					}
					&.lx{
						color: #C7C7C7;
						&::before{
							background: #C7C7C7;
						}
					}
				}
			}
		}
		.l_content{
			border-top: 1rpx solid #E2E2E2;
			margin-top: 37rpx;
			padding-top: 36rpx;
			overflow: hidden;
			.lc_role{
				.lcr_l{
					width: 148rpx;
					height: 148rpx;
					border-radius: 50%;
				}
				.lcr_r{
					width: calc(100% - 148rpx);
					padding-left: 30rpx;
					box-sizing: border-box;
					p{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #111111;
						line-height: 32rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #7C8592;
						line-height: 24rpx;
						margin-top: 24rpx;
					}
				}
			}
			.lc_info{
				margin-top: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7C8592;
				line-height: 40rpx;
			}
			.lc_btns{
				margin-top: 62rpx;
				margin-left: -1rpx;
				overflow: hidden;
				.lcb_pre{
					width: calc(100% / 3);
					height: 37rpx;
					border-left: 1rpx solid #72832B;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #72832B;
					line-height: 37rpx;
					text-align: center;
				}
			}
		}
	}
</style>