CommunityApp/pages/myFamily/myFamily.vue

<template>
	<view :class="$isEmpty(user_list)||$isEmpty(apply_user_list)||$isEmpty(auditList)?'empty-wrap':''" :style="swiperCurrent==0?'':'background-color: #FFFFFF;'">
		<view class="wrap">
			<!-- <u-select v-model="show" :list="list"></u-select> -->
			<u-sticky>
				<u-tabs :list="list" font-size="29" active-color="#2f7ff5" inactive-color="#a6a6a6" bar-width="80"  :is-scroll="false" :current="current" @change="change"></u-tabs>
			</u-sticky>
			<swiper class="swiper-box" :current="swiperCurrent" @change="swiperChange" >
				<swiper-item class="swiper-item">
					<scroll-view v-if="!this.$isEmpty(user_list)" scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="cu-list menu" @click="locationShow=true">
							<view class="cu-item" >
								<view class="content">
									<text >我的房屋</text>
								</view>
								<view class="action">
									<text >{{selectLabel?selectLabel:room_list[0].name}}</text>
									<text class="cuIcon-right padding-left-10"></text>
								</view>
							</view>
						</view>
						<view class="myFamily" >
							<view class="data" v-for="(item, index) in user_list" :key="index"  style="border-bottom: 1rpx solid #b6b6b6;">
								<view class="top">
									<view class="left">
										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
										<view class="title">{{item.residentialName}}{{item.unitName}}{{item.roomName}}</view>
									</view>
								</view>
								<view class="item">
									<view class="left">
										<view  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="content" data-aid="undefined">
											<view >姓名：{{item.name}}</view>
											<view >手机：{{item.tel}}</view>
											<view >创建时间：{{item.createDate}}</view>
											<view v-if="item.type==0">身份：业主</view>
											<view v-if="item.type==1">身份：成员</view>
											<view v-if="item.type==2">身份：租户</view>
											<view v-if="item.type==3">身份：访客</view>
										</view>
									</view>
								</view>
								<view class="bottom" >
									<navigator :url="'/pages/myFamily/editFamily/editFamily?user_id=' + item.id + '&name=' + item.name + '&tel=' + item.tel + '&room_name=' + item.roomName + '&type=' + item.type + '&id_card=' + (item.idCard==null?'':item.idCard) + '&sex=' + item.sex + '&nationality=' + (item.nationality==null?'':item.nationality) + '&image_uri=' + (item.imageUri==null?'':item.imageUri) + '&passport_img_uri=' + (item.passportImgUri==null?'':item.passportImgUri) + '&entry_img_uri=' + (item.entryImgUri==null?'':item.entryImgUri)" class="cu-btn line-btn round sm margin-right-sm"  @click.stop="">
										编辑
									</navigator>
									<navigator :url="'/pages/myFamily/activateFace/activateFace?room_id=' + item.roomId + '&user_id=' + item.id + '&name=' + item.name + '&tel=' + item.tel + '&room_name=' + item.roomName + '&type=' + item.type + '&id_card=' + (item.idCard==null?'':item.idCard) + '&sex=' + item.sex + '&nationality=' + (item.nationality==null?'':item.nationality) + '&image_uri=' + (item.imageUri==null?'':item.imageUri) + '&passport_img_uri=' + (item.passportImgUri==null?'':item.passportImgUri) + '&entry_img_uri=' + (item.entryImgUri==null?'':item.entryImgUri)" class="cu-btn line-btn round sm margin-right-sm"  @click.stop="">
										人面激活
									</navigator>
									<view v-if="item.isShowDelete"  :data-user_id="item.id" class="cu-btn bg-btn sm round" @click.stop="deleteUserById">
										删除
									</view>
								</view>
								
							</view>
						</view>
					</scroll-view>
					<view class="default" v-else>
					   <image src="/static/empty.png" mode="heightFix"></image>
					  <view>
					    <text>没有相关信息</text>
					  </view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view v-if="!$isEmpty(apply_user_list)" scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="myFamily">
						  <view style="border-bottom: 1rpx solid #b6b6b6;" v-for="(item, index) in apply_user_list" :key="index" class="nav_list" hover-class="none">
						    <view class="flex">
								<view class="margin-right-10 " style="margin-top: 2rpx;">
									<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
								</view>
						    	<view class="">
									<text>{{item.residentialName}}{{item.unitName}}{{item.roomName}}</text>
						    	</view>
						    </view>
						    <view class="myFamily_items">
						      <view class="section_image" data-aid="undefined">
						        <image style="border-radius: 50%;" v-if="item.imageUri" mode="aspectFill" :src="item.imageUri">
						        </image>
						        <image style="border-radius: 50%;" 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>
						          <text class="figure renter" v-if="item.type==0">身份：业主</text>
						          <text class="figure renter" v-else-if="item.type==1">身份：成员</text>
						          <text class="figure renter" v-else-if="item.type==2">身份：租客</text>
						          <text class="figure renter" v-else-if="item.type==2">身份：访客</text>
						        </view>
						        <view class="section_cont_tel">
						          <text>手机：{{item.tel}}</text>
						        </view>
						        <view class="section_cont_tel">
						          <text>申请时间：{{item.createDate}}</text>
						        </view>
						        <view class="section_cont_tel">
						          <view class data-aid="undefined">
						            <text>状态：</text>
						            <text v-if="item.checkState==0" class="col_red">待审核</text>
						            <text v-if="item.checkState==1" class="col_red">审核通过</text>
						            <text v-if="item.checkState==2" class="col_red">审核不通过</text>
						          </view>
						          <view class="section_cont_reason" v-if="item.checkState==2">
						            <text class="reason">原因：<text class="col_red">{{item.checkOpinion}}</text> </text>
						          </view>
						        </view>
						      </view>
						      <!--审核不通过时显示 且会员有权限-->
						      <view class="section_edit" v-if="item.isShow">
						        <navigator :url="'/pages/myFamily/editApplyFamily/editApplyFamily?apply_user_id=' + item.id + '&name=' + item.name + '&tel=' + item.tel + '&room_name=' + item.roomName + '&type=' + item.type + '&id_card=' + (item.idCard==null?'':item.idCard) + '&sex=' + item.sex + '&nationality=' + item.nationality + '&image_uri=' + (item.imageUri==null?'':item.imageUri) + '&passport_img_uri=' + (item.passportImgUri==null?'':item.passportImgUri) + '&entry_img_uri=' + (item.entryImgUri==null?'':item.entryImgUri)">
						          <view class="edit_btn">编辑</view>
						        </navigator>
						      </view>
						    </view>
						  </view>
						</view>
					</scroll-view>
					<view class="default" v-else>
						<image src="/static/empty.png" mode="heightFix"></image>
					  <view>
					    <text>没有相关信息</text>
					  </view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view  v-if="!$isEmpty(auditList)" scroll-y style="height: 100%;width: 100%;">
						<view class="myFamily">
						  <view style="border-bottom: 1rpx solid #b6b6b6;" v-for="(item, index) in auditList" :key="index" class="nav_list" hover-class="none">
						    <view class="flex">
						    	<view style="width: 40rpx;height: 40rpx;padding-right: 10rpx;">
						    		<image src="http://139.9.103.171:1888/img/image/building.png"></image>
						    	</view>
						    	<view class="">
									<text>{{item.residentialName}}{{item.unitName}}{{item.roomName}}</text>
						    	</view>
						    </view>
						    <view class="myFamily_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>
						          <text class="figure renter" v-if="item.type==0">身份：业主</text>
						          <text class="figure renter" v-else-if="item.type==1">身份：成员</text>
						          <text class="figure renter" v-else-if="item.type==2">身份：租客</text>
						          <text class="figure renter" v-else-if="item.type==2">身份：访客</text>
						        </view>
						        <view class="section_cont_tel">
						          <text>手机：{{item.tel}}</text>
						        </view>
						        <view class="section_cont_tel">
						          <text>申请时间：{{item.createDate}}</text>
						        </view>
						        <view class="section_cont_tel">
						          <view class data-aid="undefined">
						            <text>状态：</text>
						            <text v-if="item.checkState==0" class="col_red">待审核</text>
						            <text v-if="item.checkState==1" class="col_red">审核通过</text>
						            <text v-if="item.checkState==2" class="col_red">审核不通过</text>
						          </view>
						          <view class="section_cont_reason" v-if="item.checkState==2">
						            <text class="reason">原因：<text class="col_red">{{item.checkOpinion}}</text> </text>
						          </view>
						        </view>
						      </view>
						      <!--审核不通过时显示 且会员有权限-->
						      <view class="section_edit">
						        <navigator :url="'/pages/myFamily/editApplyFamily/editApplyFamily?apply_user_id=' + item.id + '&name=' + item.name + '&tel=' + item.tel + '&room_name=' + item.roomName + '&type=' + item.type + '&id_card=' + (item.idCard==null?'':item.idCard) + '&sex=' + item.sex + '&nationality=' + item.nationality + '&image_uri=' + (item.imageUri==null?'':item.imageUri) + '&passport_img_uri=' + (item.passportImgUri==null?'':item.passportImgUri) + '&entry_img_uri=' + (item.entryImgUri==null?'':item.entryImgUri) + '&waitAudit=true'">
						          <view class="edit_btn">审核</view>
						        </navigator>
						      </view>
						    </view>
						  </view>
						</view>
					</scroll-view>
					<view class="default" v-else>
					<image src="/static/empty.png" mode="heightFix"></image>
					  <view>
					    <text>没有相关信息</text>
					  </view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-select z-index="9999999"  mode="single-column"  value-name="id" label-name="name" v-model="locationShow" :list="room_list" @confirm="roomChange"></u-select>
		<view style="height: 10rpx;"></view>
		<view @click="add" v-if="!$isEmpty(own_room_list)" class=" footer-fixed" >
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				添加家人
			</view>
		</view>
	</view>
</template>

<script>
//获取app实例
var app = getApp();
var util = require("../../utils/util.js");
	
export default {
	data() {
		return {
			locationShow:false,
			selectLabel:'',
	
			//房屋成员
			user_list: null,
			//申请的认证列表
			apply_user_list: null,
			//审核列表
			auditList: [],
			//房屋id集合（业主）
			room_ids: [],
		
			//当前用户业主身份的房子
			own_room_list: null,
			//当前显示住户信息下标
			room_list_index: 0,
			//复制一份user_list用于筛选房屋列表
			user_lists: [] ,
			room_list: "",
			
			list: [
				{
					name: '审核通过'
				},
				{
					name: '申请记录'
				},
				{
					name: '住户审核'
				}
			],
			current: 0,
			swiperCurrent: 0,
		};
	},
	onLoad() {
		this.initData()
	},
	onShow() {
		this.initData()
	},
	methods: {
		initData(){
			this.geRoomByMemberId();
			this.getAllApplyUserByMemberId();
			this.getAllApplyUserByRoomIds();
		},
		add(){
			uni.navigateTo({
				url:"./add/add"
			})
		},
		roomChange: function (e) {
			// 选中的房屋 id
		  let id=e[0].value
		  //选中的房屋名字
		  this.selectLabel=e[0].label
		  //选中的房屋列表的下标
		  let index= this.room_list.findIndex(value => value.id===id)
		  
		  // let index=e.detail.value
		  let list = [];
		  this.user_lists.map(item => {
		    if (this.room_list[index].name == item.roomName) {
		      list.push(item);
		    }
		  }); //拿到当前选择的房间，判断是否该显示添加家人按钮
		
		  let room_list = [];
		  room_list.push(this.room_list[index]);
		  this.ownRoomLists(room_list);
		  this.setData({
		    room_list_index: index,
		    user_list: list
		  });
		  console.log(index)
		},
		//删除我的家人
		deleteUserById: function (event) {
		  let that = this;
		  app.globalData.twoFailHint("确认删除该住户吗？", function () {
		    //住户id
		    let user_id = event.target.dataset.user_id;
		    let params = {};
		    params['member_id'] = app.globalData.member.id;
		    params['user_id'] = user_id;
		    let operation = 'user/deleteUserById';
		    app.globalData.postRequest(params, operation, function (res) {
		      console.info("获取成功" + res.data.result_msg); //删除成功
		
		      if (res.data.result_code == 1) {
		        app.globalData.autoFailHint(res.data.result_msg, function () {
		          //重新获取列表
		          that.getAllUserByMemberId();
		        });
		      } else {
		        app.globalData.oneFailHint(res.data.result_msg);
		      }
		    });
		  });
		},
		//根据会员id获取我的家人列表
		getAllUserByMemberId: function () {
		  let that = this;
		  let params = {
			  "pageNum":0,
			  "pageSize":15
		  };
		  params['member_id'] = app.globalData.member.id;
		  let operation = 'user/getAllUserByMemberId';
		  app.globalData.postRequest(params, operation, function (res) {
		    //获取成功
		    if (res.data.result_code == 1) {
		      let user_list = res.data.list; //业主身份的房子
		      let own_room_list = that.own_room_list;
		
		      for (let index in user_list) {
		        user_list[index].createDate = util.formatTime(user_list[index].createDate);
		        if (!that.$isEmpty(own_room_list)) {
		          for (let i in own_room_list) {
		            //该成员有被会员修改的权限
		            if (user_list[index].roomId == own_room_list[i].id) {
		              //显示 编辑
		              user_list[index]['isShowEdit'] = true; //自己不能删除自己   且业主身份也不能删除
		
		              if (user_list[index].type != 0) {
		                user_list[index]['isShowDelete'] = true;
		              }
		            }
		          }
		        } else {
		          if (app.globalData.member.name == user_list[index].name) {
		            //显示 编辑
		            user_list[index]['isShowEdit'] = true;
		          }
		        }
		      } //过滤掉其他小区，保留选择小区
		      let list = [];
		
		      if (uni.getStorageSync('plotName')) {
		        user_list.map(item => {
		          if (item.residentialName == uni.getStorageSync('plotName')) {
		            list.push(item);
		          }
		        });
		      } else {
		        list = user_list;
		        list = user_lists;
		      }
		      that.setData({
		        user_list: list,
		        user_lists: list
		      });
		    } else {
		      console.info("获取失败：" + res.data.result_msg);
		    }
		  });
		},
		//根据会员id获取我的申请列表
		getAllApplyUserByMemberId: function () {
		  let that = this;
		  let params = {
			  pageSize:200,
			  pageNum:0
		  };
		  params['member_id'] = app.globalData.member.id;
		  ;
		  let operation = 'applyUser/getAllApplyUserByMemberId';
		  app.globalData.postRequest(params, operation, function (res) {
		    //获取成功
		    if (res.data.result_code == 1) {
		      //业主身份的房子
		      let own_room_list = that.own_room_list;
		      let apply_user_list = res.data.list;
		      for (let index in apply_user_list) {
		        //格式化日期
		        apply_user_list[index].createDate = util.formatTime(apply_user_list[index].createDate);
		
		        if (!that.$isEmpty(own_room_list)) {
		          //有业主身份的房子
		          for (let i in own_room_list) {
		            //该成员有被会员修改的权限--审核不通过
		            if (apply_user_list[index].checkState == 2 && apply_user_list[index].roomId == own_room_list[i].id) {
		              //显示 编辑
		              apply_user_list[index]['isShow'] = true;
		            }
		          }
		        } else {
		          //没有业主身份的房子
		          if (app.globalData.member.name == apply_user_list[index].name && apply_user_list[index].checkState == 2) {
		            //显示 编辑
		            apply_user_list[index]['isShow'] = true;
		          }
		        }
		      } //过滤掉其他小区，保留选择小区
		
		
		      let list = [];
		
		      if (uni.getStorageSync('plotName')) {
		        apply_user_list.map(item => {
		          if (item.residentialName == uni.getStorageSync('plotName')) {
		            list.push(item);
		          }
		        });
		      } else {
		        list = apply_user_list;
		      }
		
		      that.setData({
		        apply_user_list: list
		      });
		    } else {
		      console.info("获取失败：" + res.data.result_msg);
		    }
		  });
		},
		//根据会员id获取我的房屋列表
		geRoomByMemberId() {
		  let that = this;
		  let params = {};
		  params['member_id'] = app.globalData.member.id;
		  console.log(params)
		  let operation = 'estate/getRoomByMemberId';
		  app.globalData.postRequest(params, operation, function (res) {
		    console.info("获取成功" + res.data.result_msg); //获取成功
		    // if (res.data.result_code == 1) {
		    //   that.setData({
		    //     room_list: res.data.list
		    //   })
		    //   app.room_list = res.data.list;
		    //   that.ownRoomList(res.data.list);
		    // }
		
		    if (res.data.result_code == 1) {
		      let list = [];
		      if (uni.getStorageSync('plotName')) {
		        if (!that.$isEmpty(that.room_ids)) {
		          that.room_ids.splice(0, that.room_ids.length);
		        }
		        res.data.list.map(item => {
		          if (item.residentialName == uni.getStorageSync('plotName')) {
		            list.push(item);
		          }
		          if (item.residentialName == uni.getStorageSync('plotName') && item.relationshipType == 0) {
		            that.room_ids.push(item.id);
		          }
		        });
		      } else {
		        list = res.data.list;
		      }
		      that.setData({
		        room_list: list,
		        room_ids: that.room_ids //获取我的房屋id集合(业主)
		
		      });
			  
		      that.getAllApplyUserByRoomIds();
		      app.globalData.room_list = list;
		      that.ownRoomList(list);
		    }
		  });
		},
		//获取审核列表
		getAllApplyUserByRoomIds: function () {
		  let that = this;
		  let params = {};
		  params['room_ids'] = that.room_ids;
		  params['check_states'] = "0";
		  let operation = 'applyUser/getAllApplyUserByRoomIds';
		  app.globalData.postRequest(params, operation, function (res) {
		    //获取成功
		    if (res.data.result_code == 1) {
		      that.setData({
		        auditList: res.data.list
		      });
		    }
		  });
		},
		//业主身份的房子
		ownRoomList: function (room_list) {
		  let own_room_list = new Array();
		
		  for (let index in room_list) {
		    //是业主身份的房子
		    if (room_list[index].relationshipType == 0) {
		      //业主
		      own_room_list.push(room_list[index]);
		    }
		  }
		
		  this.setData({
		    own_room_list: own_room_list
		  }); //不常变数据保存到全局变量
		
		  app.globalData.own_room_list = own_room_list; //家庭成员
		
		  this.getAllUserByMemberId();
		},
		ownRoomLists: function (room_list) {
		  let own_room_list = new Array();
		
		  for (let index in room_list) {
		    //是业主身份的房子
		    if (room_list[index].relationshipType == 0) {
		      //业主
		      own_room_list.push(room_list[index]);
		    }
		  }
		
		  this.setData({
		    own_room_list: own_room_list
		  }); //不常变数据保存到全局变量
		
		  app.globalData.own_room_list = own_room_list;
		},
		reachBottom() {
			
		},
		// 轮播菜单
		swiperChange(e){
			this.swiperCurrent=e.detail.current
			this.current = e.detail.current
			// this.fetchData()
		},
		change(index){
			this.swiperCurrent=index
			this.current = index;
			// this.fetchData()
		},
		fetchData(){
			let index=this.current
			if(index==0){
			  this.geRoomByMemberId();
			}else if(index==1){
			  this.getAllApplyUserByMemberId();
			}else if(index==2){
				this.getAllApplyUserByRoomIds();
			}
		}
	}
};
</script>


<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
/* pages/myHome/myHome.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.nav {
  display: flex;
  height: 80rpx;
  border-bottom: 1rpx solid #c7c7c9;
  background: #fff;
}

.nav view {
  flex: 1;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  color: #4a586a;
}

.nav view.active {
  color: $base-btn-color;
  border-bottom: 4rpx solid $base-btn-color;
}

.wrapCity {
  flex: 1;
}

.wrapCity swiper {
  height: 100%;
}

scroll-view {
  display: box;
  height: 100%;
}

.myFamily {
  width: 100%;
  padding-bottom: 100rpx;
}

.nav_list {
  padding: 20rpx;
  border-radius: 10rpx;
  background: #fff;
  margin-top: 4rpx;
}

.myFamily_items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30rpx;
  position: relative;
}


.myFamily_items .section_image {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

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

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

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

.reason{
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.myFamily_items .section_cont .section_cont_intro {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

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

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

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

.myFamily_items .section_edit {
  font-size: 24rpx;
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translate(0, -50%);
}

.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;
}
.edit_btn{
 background: $base-btn-color;
  color: #fff;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 10rpx;
  padding:0 16rpx;
  margin:6rpx;
  text-align: center;
}
.delete_btn{
 background: #d24a58;
  color: #fff;


}
.col_red{
  color: #d24a58;
}

.form_group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20rpx;
  background: #fff;
  line-height: 100rpx;
  position: relative;
  font-size: 26rpx;
  border-bottom: 2rpx solid #ddd;
  
}
.my-item .iconfont.arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 32rpx;
  vertical-align: top;
 
}
.my-item {
  width: 100%;
  position: relative;
  background: #fff;
  font-size: 28rpx;
  box-sizing: border-box;
}

.my-item .status {
  position: absolute;
  right: 35rpx;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 28rpx;
}


	.cu-btn.sm {
		padding: 0 24upx;
		font-size: 24upx;
		height: 54upx;
	}
	
	.data {
		background-color: #FFFFFF;
		width: 720rpx;
		margin:10rpx auto;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.title {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 40rpx 0 20rpx 0;
			.left {
				display: flex;
				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
				.content {
					padding-left: 30rpx;
					view{
						padding-bottom: 16rpx;
					}
				}
			}
		}
		.bottom {
			display: flex;
			margin-top: 20rpx;
			justify-content: flex-end;
			align-items: center;
		}
	}
</style>