ParkApp/pages/guest/open-door/open-door.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.cameraName.substr(0,1)}}</text>
						</view>
						<view class="flex justify-center align-center padding-left-20 text-lg">
							<text>{{item.cameraName}}</text>
						</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>
		</view>
	</view>
</template>

<script>
var app=getApp()
var that;
import loading from "@/components/loading/loading.vue"
export default {
	components:{
		loading
	},
	data() {
		return {
			//操作哪一项
			clickItem:'',
			
			//选中值
			door_value:'',
			//访客开门的userid为999加该访客的手机号
			userId:'',
			
			//是否已开门
			isopen:false,
			//是否展示动画
			isloading:false,
			//设备列表
			device_list:[],
		};
	},
	onLoad(options) {
		that=this
		if (this.$isEmpty(options.guestTel)) {
			this.$dialog.showModal('系统异常',false).then(res=>{
				this.$navigateBack()
			})
			return
		}
		this.userId='999'+options.guestTel
		this.fetchDeviceList()
	},
	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
		},
		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.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.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>