YNUtdPlatform/pages/realName/workbench/dayPlan/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 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="goDetail(item)">
					<view class="content-box">
						<view class="item-text" >
							<text class="label" style="font-weight: bold;">姓名：</text>
							<text class="info">{{item.name}}</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">{{item.phone}}</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">岗位：</text>
							<text class="info">{{item.phone}}</text>
						</view>
						<view class="item-text">
							<text class="label" style="font-weight: bold;">分包：</text>
							<text class="info">{{item.subName}}</text>
						</view>
						<view class="item-text"> 
							<text class="label" style="font-weight: bold;">班组：</text>
							<text class="info">{{item.teamName}}</text>
						</view>
						 
					</view> 
					 
				</view>
			</u-list-item>
		</u-list>
	</view>
	
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		teamId:uni.getStorageSync('realNameUser').teamId,
		keyword:'',
		listData:[],
		number:0,
		isLoading:false
    }
  },
  onLoad() {
    // console.log('🚀 ~ mounted ~ mounted-index:') 
	 this.loadList()
  },
  onShow() {
	 
  },
  methods: {

	//搜索
	searchList(value){
		this.listData=[]
		this.loadList()
	},
	loadList(){
		let param={
			teamId:this.teamId,
			idNumber:this.keyword,
		}
		this.isLoading=true
		uni.request({
		  url: config.realAppUrl+'/BasePerson/selectPersonContent',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/json;charset=UTF-8;',
			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{
				this.listData=[]
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.isLoading=false
			}
		  },
		  fail: err => {
			console.log(err)
			this.isLoading=false
		  }
		})
	},
	goDetail(item){
		console.log(item)
		uni.navigateTo({
			url: `/pages/realName/workbench/dayPlan/detail?idNumber=${item.idNumber}`
		})
	},
    // 返回
    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>