ParkApp/pages/device/device.vue

<template>
	<view class="page" style="position: relative;">
		<view class="content">
			<loading  isFullScreen color="#5064eb" :active="isloading" text="开门中..."></loading>
			<view @click="itemClick(item)" class="device u-border-bottom" v-for="(item,index) in device_list" :key="index">
				<view class="flex justify-between">
					<view class="flex"  style="width: 80%;">
						<view class="tag" :class="item.tagColor">
							<text>{{item.name.substr(0,1)}}</text>
						</view>
						<view class="flex justify-center align-center padding-left-20 text-lg">
							<text>{{item.name}}</text>
							<!-- <view v-if="defaultDoorValue==item.macAddress" class="margin-left-10 sm cu-tag bg-orange">
								默认
							</view> -->
						</view>
					</view>
					
					<view class="flex justify-center align-center">
						<u-radio-group size="40" active-color="#5064eb" v-model="door_value">
							<u-radio
							 @change.stop="radioChange"
								:name="item.macAddress">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				
			</view>
			
			<view class="" style="position: fixed;bottom: 15%;left: calc( 50% - 90rpx);">
				<view @click="openDoor(door_value)" class="btn-open text-center flex justify-center align-center" style="border-radius: 50%;height: 180rpx;width: 180rpx;font-size: 34rpx;">
					<text>开门</text>
				</view>
			</view>
			
			<u-action-sheet :list="actionList" v-model="actionShow" @click="actionClick"></u-action-sheet>
		</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 {
			actionList: [{
				text: '设为默认',
				subText:'默认选中该门禁'
			}, {
				text: '选中'
			}, {
				text: '开门' 
			}],
			actionShow: false,
			//操作哪一项
			clickItem:'',
			
			//默认选中值
			defaultDoorValue:'',
			//选中值
			door_value:'',
			//员工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()
		}
		      
	},
	onShow() {
		if (this.canReset) {
			let list=this.$u.deepClone(this.device_list)
			list.forEach(item=>{
				item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
			})
			this.device_list=list
		}
		this.canReset=true
	},
	methods:{
		radioChange(e){
			this.door_value=e
		},
		actionClick(index) {
			if (index==0) {
				//设为默认
				this.$cache.put('defaultDoorValue',this.clickItem)
				this.defaultDoorValue=this.clickItem
			}else if (index==1) {
				//选中
				this.door_value=this.clickItem
			}else if(index==2){
				//开门
				this.door_value=this.clickItem
				this.openDoor(this.clickItem)
			}
		},
		showAction(item){
			this.clickItem=item.macAddress;
			this.actionShow=true
			console.log(this.clickItem);
		},
		itemClick(item){
			this.door_value=item.macAddress
		},
		/**
		 * 获取员工id
		 */
		getUserId(){
			if (this.$isEmpty(getApp().globalData.userInfo)) {
				let phone=this.$cache.get('phone')
				this.$api.enterprisestaff.page({phone:phone,auditStatus:1}).then(res=>{
					let userInfo=res.data.records[0]
					this.userId=userInfo.id
				})
			}else{
				let userInfo=getApp().globalData.userInfo
				this.userId=userInfo.id
			}
			
		},
		async fetchDeviceList(){
			let res=await this.$api.device.page()
			this.device_list= res.data.records
			
			//默认选中值
			this.defaultDoorValue=this.$cache.get('defaultDoorValue')
			if (this.defaultDoorValue) {
				//如果默认选中值不为空，就选中该门禁
				this.door_value=this.defaultDoorValue
			}else{
				//如果默认选中值为空，就选中第一个门禁
				this.door_value=this.device_list[0].macAddress
			}
			
			this.device_list.forEach(item=>{
				item.tagColor='bg-'+this.ColorList[Math.floor(Math.random()*this.ColorList.length)]
			})
		},
		/**
		 * 立即开门
		 */
		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.$showModel(res.msg,false)
						this.isloading=false
						that.isopen=false
					}
				}).catch(err=>{
					this.isloading=false
					that.isopen=false
				})
			},500)
		},
	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #F1F1F1;
	}
	
	 .device{
		position: relative;
		background-color: #FFFFFF;
		padding: 35rpx;
		margin: 20rpx;
		
		.default{
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		
		.bg-blue{
			background-color: $base-color;
			color: #FFFFFF;
			
		}
	}
	
	.tag{
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		width: 80rpx;
		font-size: 32rpx;
	}
	
	.btn-open{
		background-image: linear-gradient(#557ffc,#3d4fb6);
		background-color: $base-color;
		box-shadow: 0rpx 0rpx 20rpx rgba(82, 159, 247, 0.8);
		color: #FFFFFF;
	}
</style>