CommunityApp/pages/guest/open_door.vue

<template>
	<view class="page" style="position: relative;">
		<loading  isFullScreen color="#59a5f0" :active="isloading" text="开门中..."></loading>
		<radio-group class="block" @change="RadioChange">
			<view class="cu-list menu text-left">
				<view class="cu-item" v-for="(item,index) in device_list" :key="index">
					<label class="flex justify-between align-center flex-sub">
						<view class="flex-sub margin-left-sm">{{item.name}}</view>
						<radio class="roundn blue" :class="doorValue==item.id?'checked':''" :checked="doorValue==item.id?true:false"
						 :value="item.id"></radio>
					</label>
				</view>
			</view>
		</radio-group>
		<view class="bottom">
			<button @click="open" class="cu-btn cuIcon  round  bg-white shadow1" style="height: 150rpx;width: 150rpx;margin-bottom: 160rpx;border: 1rpx solid #c6c6c6;">
				<text :class="isopen?'cuIcon-unlock':'cuIcon-lock'" :style="{'color':(isopen?'#55aa7f':'#989898')}" style="font-size: 60rpx;color: #989898;"></text>
			</button>
		</view>
	</view>
</template>

<script>
var app=getApp()
var that;
import loading from "@/comps/loading/loading.vue"
export default {
	components:{
		loading
	},
	data() {
		return {
			guestTel:'',
			
			memberId:'',
			residentialId:'',
			
			isopen:false,
			isloading:false,
			doorValue:'',
			device_list:[]
		};
	},
	onLoad(options) {
		that=this
		this.guestTel=options.guestTel
		this.memberId=options.memberId
		this.residentialId=options.residentialId
		console.log(this.memberId);
		this.getAuthDevice()
	},
	methods:{
		RadioChange(e) {
			this.doorValue = e.detail.value
		},
		open(){
			//进度条加载
			this.isloading=true
			setTimeout(()=>{
				that.openDoor()
			},2300)
		},
		/**
		 * 立即开门
		 */
		openDoor() {
			 let device_id=this.doorValue
			 let params = {};
			 params['member_id'] = this.memberId;
			 params['device_id'] = device_id;
			 params['phone']=this.guestTel
			 params['is_guest']='1'
			 let operation = 'member/openDoor';
			 app.globalData.postRequest(params, operation, function (res) {
				 that.isloading=false
				 that.isopen=true
			   app.globalData.oneFailHint(res.data.result_msg,function(){
				   that.isopen=false
			   });
			 });
		},
		/**
		 * 获取设备列表
		 */
		getAuthDevice: function () {
		  let that = this;
		  let params = {};
		  params['member_id'] = this.memberId;
		  let operation = 'member/getAuthDeviceByMemberId';
		  app.globalData.postRequest(params, operation, function (res) {
				if (res.data.result_code == 1) {
					let list=[]
				    res.data.list.map(item => {
				    	if (item.residentialId.indexOf(that.residentialId)>=0) {
				    		list.push(item);
				    	}
				    });
					that.device_list=list
					that.doorValue=list[0].id
				}
		  });
		},
	}
};
</script>

<style lang="scss" scoped>
	.bottom{
		position: fixed;
		bottom: 0;
		left: 40%;
	}
	.shadow1{
		box-shadow: 0 0  20rpx #cbcbcb
		
	}
	button:active{
		 box-shadow: 0 0  10rpx rgba(203, 203, 203, 0.2);
		 position: relative;
		 top: 2px;
	}
</style>