ParkApp/pages/device/device.vue

<template>
	<view class="page" style="position: relative;">
		<view class="content">
			<loading  isFullScreen color="#59a5f0" :active="isloading" text="开门中..."></loading>
			<view @click="openDoor(item.macAddress)" class="device u-border-bottom" v-for="(item,index) in device_list" :key="index">
				<text>{{item.cameraName}}</text>
				<view class="cu-btn bg-blue round sm">
					<text class="cuIcon-lock padding-right-10"></text>
					<text>开门</text>
				</view>
			</view>
		</view>
		<u-tabbar v-model="tabbarCurr"
		 :icon-size="tabbar.iconSize" 
		 :active-color="tabbar.activeColor" 
		 :mid-button-size="tabbar.MinButtonSize" 
		 :list="tabbar.list" :mid-button="true">
		 </u-tabbar>
	</view>
</template>

<script>
var app=getApp()
var that;
import loading from "@/components/loading/loading.vue"
import {tabbar} from "@/assets/js/tabbar.js"
export default {
	components:{
		loading
	},
	data() {
		return {
			//员工id
			userId:'',
			
			//tabbar
			tabbarCurr:1,
			tabbar:tabbar,
			//是否已开门
			isopen:false,
			//是否展示动画
			isloading:false,
			//设备列表
			device_list:[]
		};
	},
	onLoad() {
		that=this
		this.fetchDeviceList()
		
		let loginType=this.$cache.get('loginType')
		if (loginType==this.$loginType.STAFF) {
			this.getUserId()
		}
		
	},
	methods:{
		/**
		 * 获取员工id
		 */
		getUserId(){
			if (this.$isEmpty(getApp().globalData.userInfo)) {
				let phone=this.$cache.get('phone')
				this.$api.enterprisestaff.page({phone:phone,examine:1}).then(res=>{
					let userInfo=res.data.records[0]
					this.userId=userInfo.id
				})
			}else{
				let userInfo=getApp().globalData.userInfo
				this.userId=userInfo.id
			}
			
		},
		fetchDeviceList(){
			this.$api.device.page().then(res=>{
				this.device_list= res.data.records
			})
		},
		open(){
			//进度条加载
			this.isloading=true
			setTimeout(()=>{
				that.isloading=false
				that.isopen=true
				that.$showModel('开门成功',false)
			},2300)
		},
		/**
		 * 立即开门
		 */
		openDoor(macAddress) {
			let params={
				userId:this.userId || 123,
				macAddress:macAddress
			}
			this.isloading=true
			setTimeout(()=>{
				this.$api.device.open(params).then(res=>{
					if (res.success) {
						this.isloading=false
						this.isopen=true
						that.$showModel('开门成功',false)
					}else{
						that.isopen=false
					}
				})
			},2300)
		},
	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #F1F1F1;
	}
	
	 .device{
		 background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		
		.bg-blue{
			background-color: #59a5f0;
			color: #FFFFFF;
			
		}
	}
</style>