YNUtdPlatform/pages/realName/workbench/peopleLibrary/index.vue

<template>
  <view class="page">
    <u-navbar class="u-navbar" title="人员库" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<view style="width: 94%;height: 80rpx;margin: 20rpx auto;">
		<u-search shape="square" placeholder="搜索"  v-model="keyword" :showAction="true" actionText="搜索" :animation="false" @custom="searchList"></u-search>
	</view>
	<!-- <view style="padding-left: 40rpx;">
		<text style="font-size: 24rpx;color: #5193FE;">已查询{{number}}条数据</text>
	</view> -->
	<!-- 列表 -->
	<view class="list-box">
		<view style="width: 100%;height: 70vh;display: flex;align-items: center;justify-content: center;" v-if="isLoading">
			<u-loading-icon :show="true" mode="circle" text="加载中" :vertical="true"></u-loading-icon>
		</view>
		<u-list height="76vh" v-if="!isLoading">
			<u-list-item  v-for="(item, index) in listData" :key="index">
				<view class="list-item" @click="goEdit(item)">
					<view class="content-box">
						<view class="item-text" >
							<text class="label" style="font-weight: bold;">姓名：</text>
							<text class="info">{{item.name}}</text>
							<text class="info-right" style="color: green;" v-if="item.lightStatus==2">绿灯</text>
							<text class="info-right" style="color: yellow;" v-if="item.lightStatus==1">黄灯</text>
							<text class="info-right" style="color: red;" v-if="item.lightStatus==0">红灯</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">身份证：</text>
							<text class="info">{{item.idNumber}}</text>
						</view>
						<view class="item-text">
							<text class="label"style="font-weight: bold;">用工类型：</text>
							<text class="info" v-if="item.workerType==0">临时用工</text>
							<text class="info" v-if="item.workerType==1">固定用工</text>
							<text class="info" v-if="item.workerType==2">分包管理</text>
						</view>
						 
					</view> 
					 
				</view>
			</u-list-item>
		</u-list>
	</view>
	
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		keyword:'',
		listData:[],
		number:0,
		isLoading:false
    }
  },
  onLoad() {
    console.log('🚀 ~ mounted ~ mounted-index:')  
  },
  onShow() {
  },
  methods: {
	//搜索
	searchList(value){
		this.loadList()
	},
	loadList(){
		let param={
			name:this.keyword
		}
		this.isLoading=true
		uni.request({
		  url: config.realAppUrl+'/BasePerson/downloadWorkPersonQualifications',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/x-www-form-urlencoded',
			Authorization: uni.getStorageSync('realNameToken')
		  },
		  success: res => {
			console.log(res)
			res = res.data;
			if(res.code==200){
				this.listData=res.data;
				this.number=res.data.length
				this.$forceUpdate()
				this.isLoading=false
				// console.log(this.listData)
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.isLoading=false
			}
		  },
		  fail: err => {
			console.log(err)
			this.isLoading=false
		  }
		})
	},
	goEdit(item){
		console.log(item)
		uni.navigateTo({
			url: `/pages/realName/workbench/personEnter/editPeople?idNumber=${item.idNumber}&workerType=${item.workerType}`
		})
	},
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	// padding: 0 20px;
	.list-box{
		width: 90%;
		height: auto;
		// border: 1px solid #000;
		margin: 0rpx auto;
		
		.list-item{
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx 0;
			
			.content-box{
				width: 94%;
				height: auto;
				margin: 20rpx;
				// background-color: #F8F9FC;
				padding: 10rpx 0;
				
				.item-text{
					width: 95%;
					margin-left: 20rpx;
					margin-top: 15rpx;
					// display: flex;
					align-items: center;
					position: relative;
					.label{
						color: #3A3A3A;
						font-weight: 500;
					}
					.info-right{
						position: absolute;
						top: 0rpx;
						right: 40rpx;
					}
					.info{
						color: #6F6F6F;
					
					}
				}
			}
		}
	}
}
</style>