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 red" :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 {
			isopen:false,
			isloading:false,
			doorValue:'5678',
			device_list:[
				{
					id:'1234',
					name:'宁夏冬美小区'
				},
				{
					id:'5678',
					name:'宁夏冬美小区2'
				},
			]
		};
	},
	onLoad() {
		that=this
	},
	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'] = app.globalData.member.id;
			 params['device_id'] = device_id;
			 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
			   });
			 });
		},
	}
};
</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>