CommunityApp/pages/oneButton/oneButton.vue

<template>
<view :class="$isEmpty(device_list)?'empty-wrap':''">
<view class="openButton_contain" v-if="device_list.length>0">
	<view class="padding-30" v-for="(item, index) in device_list" :key="index"  style="border-bottom: 1rpx solid #EEEEEE;display: flex;justify-content: space-between;">
		<text style="margin: 8rpx 0 0 6rpx;">{{item.name}}</text>
		<view :data-device_id="item.id" @tap="openDoor" class="cu-btn bg-red sm round " >
			立即开门
		</view>
	</view>
  <!-- <view v-for="(item, index) in device_list" :key="index" class="openButton_list">
      <view class="info">{{item.name}}</view>
	  <view class="cu-btn round sm bg-red">
		立即开门
	  </view>
      <view class="button" :data-device_id="item.id" @tap="openDoor">立即开门</view>
  </view> -->
</view>
<view class="default" v-if="$isEmpty(device_list)">
  <image src="/static/common/empty.png" mode="heightFix"></image>
  <view>
    <text>没有获取到设备信息</text>
  </view>
</view>
</view>
</template>

<script>
//获取app实例
var app = getApp();

export default {
  data() {
    return {
		isFirst:true,
      device_list: null
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // let device_list = app.device_list;
    // if (device_list){
    //   this.setData({
    //     device_list: device_list
    //   })
    // }else{
    // 如果设备列表为空--则去拉取一次
    // }
	this.isFirst=false
    this.getAuthDevice();
  },
  onShow() {
  	if(!this.isFirst){
  		this.getAuthDevice();
  	}
  },
  methods: {
    //立即开门
    openDoor: function (event) {
      let device_id = event.currentTarget.dataset.device_id;
      let that = this;
      let params = {};
      params['member_id'] = app.globalData.member.id;
      params['device_id'] = device_id;
      // let operation = 'member/openDoor';
      that.$http.openDoor(params).then(res =>{
		 app.globalData.oneFailHint(res.data.result_msg); 
      });
    },
    //获取用户的授权设备列表
    getAuthDevice: function () {
      let that = this;
      let params = {};
      params['member_id'] = app.globalData.member.id;
	  params['residential_id'] =  uni.getStorageSync("residentialId");
      // let operation = 'member/getAuthDeviceByMemberId';
      that.$http.getAuthDeviceByMemberId(params).then (res=>{
		  console.info("查询结果:" + res.data.result_msg); //获取成功
		  
		  if (res.data.result_code == 1) {
		    // let list = res.data.list;
		    // console.log(list)
		    // that.setData({
		    //   device_list: list
		    // })
		    // app.device_list = list;
		    let list = [];
		  
		    if (uni.getStorageSync('plotName')) {
		      res.data.list.map(item => {
		        if (item.name.indexOf(uni.getStorageSync('plotName')) >= 0) {
		          list.push(item);
		        }
		      });
		    } else {
		      list = res.data.list;
		    }
		  
		    that.setData({
		      device_list: list
		    });
		    app.globalData.device_list = list;
		  }
        
      });
    }
  }
};
</script>
<style lang="scss">
view,
button
{
    box-sizing: border-box;
}

.cu-btn.sm {
    padding: 0 26rpx;
    font-size: 24rpx;
    height: 54rpx;
}
	
	
page {
  overflow-y: scroll;
  background-color: #FFFFFF;
  height: 100vh;
}

.openButton_contain {
  padding-top: 30rpx;
}

.openButton_list {
  width: 100%;
  padding: 0 20rpx;
  border-bottom: 1px solid #eee;
  height: 120rpx;
  line-height: 120rpx;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}

.openButton_list .button {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translate(0, -50%);
  border: 1px solid $base;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20rpx;
  border-radius: 6rpx;
  color: #fff;
  background: $base;
}

.default {  text-align: center;  position: fixed;  left: 50%;  top: 40%;  transform: translate(-50%, -50%);}.default text{	color: #AAAAAA;}.default image {  height: 250rpx;  display: inline-block;}.empty-wrap{	background-color: #FFFFFF;	min-height: 100vh;}

</style>