jp-housekeep-manage/pages/managementList/managementList.vue

<template>
	<view>
		<u-navbar title="授权管理" title-color="#101010">
			<view slot="right" @click="deleteShow=!deleteShow">
				<img src="@/assets/img/riLine-list-settings-line.svg" alt="" />
			</view>
		</u-navbar>
		<view class="search">
			<u-search placeholder="搜索授权用户" :show-action="false"		 v-model="keyword"></u-search>
		</view>
		
		<!-- 列表 -->
		<view class="member-list">
			<view class="item" v-for="item in 15" >
				<view class="photo">
					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
				</view>
				<view class="infos">
					<view class="name">
						杨静云
					</view>
					<view class="tel">
						19729922849
					</view>
				</view>
				
				<view class="button" v-if="!deleteShow">
					权限管理
				</view>
				<!-- 单选框 -->
				<view class="radio-box" v-if="deleteShow">
				
					<label class="radio">
						<radio value="" /><text></text>
					</label>
				
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="button qr-code">
				 <img src="@/assets/img/riLine-qr-code-line 1.svg" alt="" /> 授权二维码
			</view>
			
			<view class="button list-button">
				 <img src="@/assets/img/riLine-contacts-line.svg" alt="" /> 申请人列表
				 <view class="bot">
				 	8
				 </view>
			</view>
		</view>
		<!-- 删除 -->
		<view class="delete" v-if="deleteShow" @click="deletePopup=true">
			<view class="icon">
				<img src="@/assets/img/riLine-delete-bin-7-line 1.svg" alt="" />
			</view>
			<view class="text">
				删除
			</view>
		</view>
		<!-- 删除确认弹框 -->
		<u-popup v-model="deletePopup" mode="bottom" border-radius="12">
			<view class="popup">
				<view class="headline">
					删除定时
				</view>
				<view class="hint">
					要删除选中的定时吗？
				</view>
				<view class="btn-box">
					<view class="cancel" @click="deletePopup=false">
						取消
					</view>
					<view class="confirm" >
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:"",
				deleteShow:false,
				deletePopup:false
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		padding-bottom: 100px;
	}
</style>


<style lang="scss" scoped>
	/deep/.u-slot-right {
		padding-right: 32rpx;
		padding-left: 16rpx;
		line-height: 30px;
		background-color: #fff;
		img {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	}
	
	.search{
		border-bottom: 1px solid rgba(242,242,242,1);
		background: #fff;
		padding:24rpx;
		position:sticky;
		    left: 0;
		    right: 0;
		    top: 80rpx;
		    z-index: 991;
	}

  // 列表
  .member-list{
	  background: #fff;
	  .item{
		  padding: 32rpx 0;
		  margin: 0 32rpx;
		  display: flex;
		  align-items: center;
		  border-bottom: 1px solid rgba(244,244,244,1);;
	  }
	  .photo{
		  img{
			  width: 80rpx;
			  height: 80rpx;
			  border-radius: 50px;
		  }
	  }
	  .infos{
		  margin-left: 16rpx;
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
		  }
		  .tel{
			  color: rgba(119,119,119,1);
			  font-size: 24rpx;
			  margin-top: 4rpx;
		  }
	  }
	  .button{
		  width: 144rpx;
		  height: 56rpx;
		  line-height: 56rpx;
		  border-radius: 50px;
		  background-color: rgba(22,119,255,1);
		  color: rgba(255,255,255,1);
		  text-align: center;
		  margin-left: auto;
	  }
	  .radio-box{
		  margin-left: auto;
	  }
	  
  }
 
 
  .bottom{
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #fff;
	  padding: 20rpx 32rpx;
	  display: flex;
	  justify-content: space-between;
	  img{
		  width: 40rpx;
		  height: 40rpx;
		  margin-right: 8rpx;
	  }
	  .button{
		  width: 328rpx;
		  height: 80rpx;
		  line-height: 80rpx;
		  border-radius: 4px;
		  font-size: 32rpx;
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .qr-code{
		  
		  background-color: rgba(22,119,255,1);
		  color: rgba(255,255,255,1);
		 
		  
	  }
	  .list-button{
		  background-color: rgba(222,225,228,1);
		  color: rgba(51,51,51,1);
		  position: relative;
	  }
	  .bot{
		  width: 40rpx;
		  height: 40rpx;
		  line-height: 40rpx;
		  border-radius: 10px;
		  background-color: rgba(244,60,50,1);
		  color: rgba(255,255,255,1);
		  font-size: 24rpx;
		  text-align: center;
		  position: absolute;
		  top: -10rpx;
		  right:-10rpx;
	  }
  }
 
 // 删除
.delete {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 120rpx;

		img {
			width: 48rpx;
			height: 48rpx;
		}

		.text {
			color: rgba(51, 51, 51, 1);
			font-size: 20rpx;
		}
	} 
 
 .popup {
 	padding: 32rpx;
 	text-align: center;
 
 	.headline {
 		color: rgba(16, 16, 16, 1);
 		font-size: 36rpx;
 		font-weight: bold;
 	}
 
 	.hint {
 		color: rgba(16, 16, 16, 1);
 		font-size: 32rpx;
 		margin-top: 40rpx;
 	}
 
 	.btn-box {
 		margin-top: 82rpx;
 		display: flex;
 		justify-content: space-between;
 
 		.cancel {
 			width: 328rpx;
 			line-height: 80rpx;
 			border-radius: 4px;
 			background-color: rgba(222, 225, 228, 1);
 			color: rgba(51, 51, 51, 1);
 			font-size: 32rpx;
 		}
 
 		.confirm {
 			width: 328rpx;
 			line-height: 80rpx;
 			border-radius: 4px;
 			background-color: rgba(255, 68, 68, 1);
 			color: rgba(255, 255, 255, 1);
 			font-size: 32rpx;
 		}
 	}
 }
 
 
</style>