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

<template>
	<view>
		<u-navbar title="申请人列表" title-color="#101010">
			
		</u-navbar>
		<view class="search-box">
			<u-search  @custom="getApprovalList(true)"
			 
			 placeholder="搜索授权用户" bg-color="#f2f4f6" height="80" :show-action="true" v-model="keyword">
		
		
			</u-search>
		
		</view>
		
		<!-- 列表 -->
		<view class="member-list">
			<view class="item" v-for="(item,i) in list" >
				
				<view class="infos">
					<view class="name">
						{{item.createByName}}
					</view>
					<view class="tel-time">
						<span class="tel" >{{item.createByPhone}}</span>
					
					</view>
				</view>
				
				<!-- 通过 -->
				<view class="infos2" v-if="item.status==0">
					<view class="pass" @click="switchBtnApi(item,1)"  >
						通过
					</view>
					<view class="passNo" @click="switchBtnApi(item,2)"  >
						拒绝
					</view>
				</view>
				
				<!-- 已通过 -->
				<view class="passed" v-else >
					{{item.statusN}}
				</view>
				
				
				
			</view>
		</view>
		<u-divider :isnone="list.length==0"
		nonetext="暂无记录" border-color="#CFD2D5">
			已经到底了</u-divider>
		
		
	</view>
</template>

<script>
		import * as API from '@/apis/pagejs/managementList.js'
	export default {
		data() {
			return {
				keyword:"",
				pass:false,
				pageIndex: 1,
				recordsTotal: 0,
				list:[],
				
				
			}
		},
		onReady() {
			
			this.getApprovalList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		
		methods: {
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.approvalNext({
					id:node.id,
					status:key
				}).then((res) => {
					uni.hideLoading();
					this.getApprovalList(true)
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			switchBtnApi(node,key){
				uni.showModal({
					confirmColor:`${key==1?'#3CC51F':'red'}`,
					confirmText:`${key==1?'通过':'拒绝'}`,
					content: `确认是否要"${key==1?'通过':'拒绝'}"${node.createByName}`,
					title: "提示",
					success:res=> {
						if(res.confirm){
							this.switchBtnApiMethod(node,key);
						}
					}
				})
				console.log(node,key)
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getApprovalList();
			},
			getApprovalList(bl) {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.pageIndex = 1;
				}
				API.approvalList({
					pageIndex:this.pageIndex,
					pageSize:20,
					nameOrPhone:this.keyword
				}).then((res) => {
				 
					uni.hideLoading();
						this.list = [
							...this.list,
							...res.data.data
						];
						this.recordsTotal = res.data.recordsTotal;
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

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


<style lang="scss" scoped>
	
	
	.search-box {
		padding: 16rpx 32rpx;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		background-color: rgba(255,255,255,1);
	
		/deep/.u-content {
			border-radius: 8px !important;
		}
	
		;
	
		/deep/.u-search {
			position: relative
		}
	
		;
	
		/deep/.u-action {
			width: 96rpx;
			line-height: 56rpx;
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			text-align: center;
			z-index: 9999;
			position: absolute;
			right: 12rpx;
		}
	}

  // 列表
  .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);;
		      border-bottom: 1px solid #f4f4f4;
		      justify-content: space-between;
	  }
	  .photo{
		  img{
			  width: 80rpx;
			  height: 80rpx;
			  border-radius: 50px;
		  }
	  }
	  .infos2{
		  display: flex;
		  align-items: center;
		 
		justify-content: space-between;
	  }
	  .infos{
		  margin-left: 16rpx;
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
		  }
		  .tel-time{
			  
			  font-size: 24rpx;
			  margin-top: 4rpx;
			  .tel{
				  color: rgba(119,119,119,1);
			  }
			  .time{
				  color: #999999;
				  margin-left: 16rpx;
			  }
		  }
	  }
	  .pass{
		  width: 120rpx;
		  height: 56rpx;
		  line-height: 56rpx;
		  border-radius: 50px;
		  background-color: rgba(0,185,98,1);
		  color: rgba(255,255,255,1);
		  text-align: center;
		  margin-left: auto;
	  }
	  .passNo{
		 
	  		  width: 120rpx;
	  		  height: 56rpx;
	  		  line-height: 56rpx;
	  		  border-radius: 50px;
	  		  background-color: #CCCCCC ;
	  		  color: rgba(255,255,255,1);
	  		  text-align: center;
	  		  margin-left: 20rpx;
			 
	  }
	  .passed{
		  margin-left: auto;
		  color: rgba(153,153,153,1);
	  }
	 
	  
  }
 
 
  
 
 

 

 
 
</style>