CommunityApp/pages/open/open.vue

<template>
	<view class="page">
		<view class="" v-if="!loading">
			<view class="" v-if="$isNotEmpty(device_list)">
				<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>
				<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>
			<empty v-else></empty>
		</view>
		<loading v-else></loading>
	</view>
</template>

<script>
	import empty from "@/comps/empty.vue"
	import loading from "@/comps/loading.vue"
	var app = getApp()
	var that;
	export default {
		components:{
			empty,
			loading
		},
		data() {
			return {
				activedIndex: 0,
				device_list: [],
				loading: true,
				isOpen: false,
			};
		},
		onShow() {
			that = this
			this.getAuthDevice()
		},
		methods: {
			/**
			 * 立即开门
			 */
			openDoor() {
				let item = this.device_list[this.activedIndex]
				if (this.$isEmpty(item)) {
					this.$dialog.showModal('设备不存在')
					return
				}
				let params = {
					memberId: this.vuex_member.id,
					serialNum: item.deviceSerialNum,
					deviceFactory: item.deviceFactory,
					residentialId: item.residentialId,
					userType: 'ZH_'
				}
				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 memberId = this.vuex_member ? this.vuex_member.id : ''
				let residentialId = uni.getStorageSync("residentialId")
				if (!memberId || !residentialId) {
					this.loading=false
					return
				}
				let params = {
					id: memberId,
					residentialId
				}
				this.$http.getAuthDeviceByMemberId(params).then(res => {
					this.loading=false
					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>