CommunityApp/pages/guest/open_door.vue

<template>
	<view class="page" style="position: relative;">
		<radio-group class="block" @change="RadioChange">
			<view class="cu-list menu text-left">
				<view class="cu-item" @click="activedIndex=index" 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.deviceName}}</view>
						<u-icon size="36" name="checkmark-circle-fill" color="#2f7ff5" v-if="activedIndex==index"></u-icon>
					</label>
				</view>
			</view>
		</radio-group>
		<view class="bottom">
			<button @click="openDoor" class="cu-btn cuIcon  round  bg-white shadow1"
				style="height: 150rpx;width: 150rpx;margin-bottom: 160rpx;border: 1rpx solid #c6c6c6;">
				<text v-if="!isOpen" class="cuIcon-lock" style="font-size: 50rpx;color: #989898;"></text>
				<u-loading mode="flower" size="40" v-else></u-loading>
			</button>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	var that;
	export default {
		data() {
			return {
				guestRecordId:'',
				guestTel: '',
				memberId: '',
				residentialId: '',
				activedIndex: 0,
				device_list: [],
				isOpen:false,
			};
		},
		onLoad(options) {
			that = this
			this.guestTel = options.guestTel
			this.memberId = options.memberId
			this.residentialId = options.residentialId
			this.guestRecordId=options.guestRecordId
			this.getAuthDevice()
		},
		methods: {
			/**
			 * 立即开门
			 */
			openDoor() {
				let item=this.device_list[this.activedIndex]
				if (this.$isEmpty(item)) {
					this.$dialog.showModal('设备不存在')
					return
				}
				let params = {
					guestId: this.guestRecordId,
					serialNum: item.deviceSerialNum,
					deviceFactory: item.deviceFactory,
					residentialId: item.residentialId,
					userType: 'FK_'
				}
				this.isOpen=true
				this.$http.openDoor(params).then(res => {
					this.isOpen=false
					if (res.data.success) {
						this.$u.toast('开门成功')
					} else {
						this.$u.toast('开门失败')
					}
				}).catch(err=>{
					this.isOpen=false
				})
			},
			/**
			 * 获取设备列表
			 */
			getAuthDevice: function() {
				let params = {
					id: this.memberId,
					residentialId: this.residentialId
				}
				this.$http.getAuthDeviceByMemberId(params).then(res => {
					if (res.data.success) {
						this.device_list = res.data.data
					}
				});
			},
		}
	};
</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>