AiToyCXWx/pages/device.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='设备管理' bgColor="transparent"></cus-header>
		<block v-if="list.length">
			<div class="box" v-for="(item,index) in list" :key="index">
				<div class="name">{{item.board}}</div>
				<div class="btn" @tap="toUnBind(item)">解绑设备</div>
			</div>
		</block>
		<block v-else>
			<page-empty :height="'calc(100vh - 200px)'"></page-empty>
		</block>
		<div class="zt_btn" @tap="bindDevice">新增设备</div>
	</view>
</template>

<script>
	import pageEmpty from '@/components/pageEmpty/index.vue'
	export default {
		components:{pageEmpty},
		data(){
			return {
				agentId:'',
				list:[]
			}
		},
		onLoad(option) {
			this.agentId = option.agentId;
			this.getList();
		},
		methods:{
			getList(){
				this.$api.get(`/device/bind/${this.agentId}`).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.list = res.data.data;
				})
			},
			bindDevice(){
				uni.scanCode({
					success: (res) => {
						let result = JSON.parse(res.result);
						if(res.errMsg==='scanCode:ok'){
							this.$api.post('/device/bindAdd',{
								...result,
								"type": "",
								"userId": 0,
								"agentId": this.agentId
							}).then(res=>{
								if(res.data.code!==0) return this.$showToast(res.data.msg)
								this.$showToast('新增设备成功');
								setTimeout(()=>{
									this.getList();
								},1000)
							})
						}
					}
				})
			},
			toUnBind(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.getList();
							},1000)
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: linear-gradient( 180deg, #E0EEFF 0%, #F6FCFF 100%);
		padding: 0 30rpx 200rpx;
		box-sizing: border-box;
		
		.box{
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			.name{
				padding: 36rpx 24rpx;
				border-bottom: 1px solid #E2E2E2;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				line-height: 32rpx;
			}
			.btn{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #0066FE;
				line-height: 32rpx;
				text-align: center;
				padding: 34rpx 0;
			}
		}
		
		.zt_btn{
			position: fixed;
			bottom: 64rpx;
			width: calc(100% - 120rpx);
			left: 60rpx;
		}
	}
</style>