CommunityApp/pages/myhome/familyList.vue

<template>
<view :class="$isEmpty(user_list)?'empty-wrap':''">
<view class="nav_section" v-if="user_list!=null && user_list.length!=0">
  <view v-for="(item, index) in user_list" :key="index" class="nav_list">
    <view class="nav_section_items">
      <view class="section_image" data-aid="undefined">
        <image v-if="item.imageUri" mode="aspectFill" :src="item.imageUri">
        </image>
        <image v-if="item.imageUri==null" mode="aspectFill" src="http://139.9.103.171:1888/img/image/head.png">
        </image>
      </view>
      <view class="section_cont" data-aid="undefined">
        <view class="section_cont_sub">
          <text>姓名：{{item.name}}</text>
        </view>
        <view class="section_cont_tel">
          <text>手机：{{item.tel}}</text>
        </view>
        <view class="section_cont_tel">
          <text v-if="item.type==0">身份：业主</text>
          <text v-else-if="item.type==1">身份：成员</text>
          <text v-else-if="item.type==2">身份：租客</text>
          <text v-else-if="item.type==3">身份：访客</text>
        </view>
      </view>
    </view>
  </view>
</view>
<!-- 1-业主  业主身份才能添加房屋成员 wx:if="{{relationship==1}}" -->
<!-- <view class='submit_btn'>
  <navigator url='/pages/myHome/myHomeFamily/addMyHomeFamily/addMyHomeFamily?room_id={{room_id}}&relationship={{relationship}}'>
    <button class="ar_btn">添加成员</button>
  </navigator>
</view> -->
<view class="default" v-else>
  <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 {
      user_list: null
    };
  },
  onLoad(options) {
  	let room_id = options.room_id; //获取房间下的住户
  	console.log(room_id)
  	this.getUserByRoomId(room_id);
  },
  methods: {	  
    //获取房间下的住户
    getUserByRoomId: function (room_id) {
      let that = this;
      let params = {
		  pageSize:200,
		  pageNum:0,
		  room_id:room_id
	  };
      let operation = 'user/getUserByRoomId';
      app.globalData.postRequest(params, operation, function (res) {
        console.info("获取数据结构" + res.data.result_msg); //获取成功

        if (res.data.result_code == 1) {
          that.setData({
            user_list: res.data.list
          });
        }
      });
    }
  }
};
</script>
<style lang="scss">
page {
  overflow-y: scroll;
}

.nav_section {
  width: 100%;
  padding-bottom: 120rpx;
}
.nav_list{
  margin-top: 2rpx;
}
.nav_section_items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30rpx;
 
  position: relative;
  background: #fff;
}
.nav_section_items .section_image {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.nav_section_items .identity {
  font-size: 24rpx;
  color: #d24a58;
}

.nav_section_items .section_image image {
  width: 100%;
  height: 100%;
}

.nav_section_items .section_cont {
  width: 400rpx;
  font-size: 24rpx;
  color: #666;
  margin-left: 140rpx;
}

.nav_section_items .section_cont view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.nav_section_items .section_cont .section_cont_intro {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nav_section_items .section_cont .section_cont_sub {
  font-size: 28rpx;
  line-height: 50rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.nav_section_items .section_cont .section_cont_tel {
  font-size: 28rpx;
  color: #666;
  line-height: 50rpx;
  margin-bottom: 10rpx;
}

.nav_section_items .section_cont .section_cont_state {
  font-size: 28rpx;
}

.nav_section_items .section_edit {
  width: 80rpx;
  height: 40rpx;
  font-size: 26rpx;
  border-radius: 10rpx;
  background: #d24a58;
  line-height: 40rpx;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translate(0, -50%);
}

.building {
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  padding: 0 20rpx;
  color: #333;
  border-bottom: 2rpx solid #ddd;
}

.building image {
  width: 40rpx;
  height: 40rpx;
  vertical-align: text-top;
  margin-right: 10rpx;
}
.figure{
  color: #d24a58;
  border:1px solid #d24a58;
  border-radius: 6rpx;
  font-size: 24rpx;
  padding: 0 6rpx;
  margin-left: 10rpx;
}
.figure.renter{
  color: $base-btn-color;
  border:1px solid $base-btn-color;

}
.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>