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: 100%;height: 80rpx;">
		<view class="search-content">
		  <view style="width: 100%;background-color: #fff;">
		    <uni-easyinput
		      suffixIcon="search"
		      v-model="keyword"
		      placeholder="请输入人员"
		      @iconClick="searchList"
		    ></uni-easyinput>
		  </view>
		  <view class="search-icon" @click="distinguish"></view>
		</view>
		<!-- <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>
		<view v-if="!isLoading&&listData.length==0" style="width: 96%;height: 60vh;display: flex;flex-direction: column;justify-content: center;align-items: center;" >
			<image src="../../../../static/realName/noData.png" style="width: 100rpx;height: 120rpx;" mode=""></image>
			<view>暂无数据</view>
		</view>
		<u-list height="76vh" v-if="!isLoading&&listData.length>0">
			<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 { pathToBase64, base64ToPath } from 'image-tools';
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: {
	//人脸识别采集
	distinguish(){
		console.log('人脸识别采集')
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['camera'],
			success: res => {
				console.log('🚀 ~ res-拍照:', res)
				this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
					// console.log(base64)
					uni.uploadFile({
						url: config.realFileUrl+`file/getFaceRecognition`, //服务器地址
						fileType:"image",//ZFB必填,不然报错
						filePath: res.tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
						formData: {
							file:base64,
							photoType:'face',
						},
						success: (uploadFileRes) => {
							console.log(uploadFileRes)
							if(uploadFileRes.statusCode==200){
								uploadFileRes=JSON.parse(uploadFileRes.data)
								console.log(uploadFileRes)
								if(uploadFileRes.code==200){
									if(uploadFileRes.data.face){
										this.faceData=JSON.parse(uploadFileRes.data.personData)
										console.log(this.faceData)
										if(this.faceData){
											this.keyword = this.faceData.name;
											this.searchList()
										}else{
											uni.$u.toast('识别失败');
										}
									}else{
										uni.$u.toast(uploadFileRes.msg);
									}
								}else{
									uni.$u.toast(uploadFileRes.msg);
								}
							}else{
								uni.$u.toast('识别失败');
							}
						},
						fail: err => {
							uni.$u.toast('识别失败');
							console.log(err)
						}
					});
				})
			},
			fail: err => { 
			  console.log('🚀 ~ err:', err)
			}
		})
	},
	//搜索
	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}`
		})
	},
    imgToBase64(data) {
      return new Promise((resolve, reject) => {
    	pathToBase64(data)
    	  .then(base64 => {
    		resolve(base64)
    	  })
    	  .catch(error => {
    		console.error(error)
    		reject(error)
    	  })
      })
    },
	// 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #EFEFEF;
	box-sizing: border-box;
	// padding: 0 20px;
	
	.search-content {
	  display: flex;
	  align-items: center;
	  margin-top: 20rpx;
	  margin-left: 40rpx;
	  margin-right: 40rpx;
	  .search-icon {
	    width: 70rpx;
	    height: 60rpx;
	    margin-right: 40rpx;
	    margin-left: 40rpx;
	    background: url('../../../../static/realName/face.png') no-repeat;
	    background-size: 100% 100%;
	  }
	}
	
	.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>