ParkApp/pages/device/device.vue

<template>
	<view class="page" style="position: relative;">
		<view class="content">
			<loading  isFullScreen color="#59a5f0" :active="isloading" text="开门中..."></loading>
			<view @click="open" class="device u-border-bottom" v-for="(item,index) in device_list" :key="index">
				<text>{{item.name}}</text>
				<view class="cu-btn bg-blue round sm">
					<text class="cuIcon-lock padding-right-10"></text>
					<text>开门</text>
				</view>
			</view>
		</view>
		<u-tabbar v-model="tabbarCurr"
		 :icon-size="tabbar.iconSize" 
		 :active-color="tabbar.activeColor" 
		 :mid-button-size="tabbar.MinButtonSize" 
		 :list="tabbar.list" :mid-button="true">
		 </u-tabbar>
	</view>
</template>

<script>
var app=getApp()
var that;
import loading from "@/components/loading/loading.vue"
import {tabbar} from "@/assets/js/tabbar.js"
export default {
	components:{
		loading
	},
	data() {
		return {
			//tabbar
			tabbarCurr:1,
			tabbar:tabbar,
			//是否已开门
			isopen:false,
			//是否展示动画
			isloading:false,
			//设备列表
			device_list:[
				{
					id:'3265',
					name:'德锐斯工业园大门'
				},
				{
					id:'5678',
					name:'德锐斯工业园南门'
				},
				{
					id:'1577',
					name:'德锐斯工业园北门'
				},
			]
		};
	},
	onLoad() {
		that=this
	},
	methods:{
		open(){
			//进度条加载
			this.isloading=true
			setTimeout(()=>{
				that.isloading=false
				that.isopen=true
				that.$showModel('开门成功',false)
			},2300)
		},
		/**
		 * 立即开门
		 */
		openDoor() {
			 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>
	page{
		background-color: #F1F1F1;
	}
	
	 .device{
		 background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		
		.bg-blue{
			background-color: #59a5f0;
			color: #FFFFFF;
			
		}
	}
</style>