bonus-Certificate-app/pages/certificateReturnManage/certificateTake/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="certificate-list">
		<Navbar title="证件取证" :showRightText="false" :isBack="true"/>
		<view style="width: 94%;height: 80rpx;margin: 10rpx auto;">
			<u-search shape="square" placeholder="搜索"  v-model="keyword" :showAction="true" actionText="搜索" :animation="false" @custom="searchList"></u-search>
		</view>
		<view style="width:92%;height: 80rpx;display: flex;align-items: center;">
			<view @click="checkedAll" class="button-view" style="background: #00337A;margin-right: 10px;">全选</view>
			<view @click="handleSelfTake" class="button-view" style="background: #3989FF;margin-right: 10px;">自主取证</view>
			<view @click="handleAdminTake" class="button-view" style="background: #3989FF;margin-right: 10px;">管理员取证</view>
			<view @click="handleEmergencyTake" class="button-view" style="background: #ff4949;margin-right: 10px;">应急取证</view>
			<view @click="handleOtherTake" class="button-view" style="background: #42d885;margin-right: 10px;">他人代取</view>
		</view>
		<scroll-view style="width: 100%;height: 82vh;" @scrolltolower="onScrollTolower" scroll-y="true">	
			<view class="info-item" v-for="(item, index) in infoList" :key="index"> 
				<view style="width: 100%;height: 100%;padding-top: 10rpx;font-size: 24rpx;">
					<view class="label-box">
						<view style="width: 10%;" @click="checkSelect(item)">
							<u-checkbox-group v-model="item.checked">
								<u-checkbox :customStyle="{margin: '0rpx 10rpx'}" :label="''" :name="item.certificateNo"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="label-view" style="width: 90%;">
							<view class="label">任务编号：</view>
							<view class="text">{{item.taskNo}}</view> 
						</view> 
					</view>
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">姓名：</view>
							<view class="text">{{item.name}}</view> 
						</view> 
						<view class="label-view" style="width: 50%;">
							<view class="label">身份证号：</view>
							<view class="text">{{item.idNumber}}</view> 
						</view>   
					</view> 
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">出生日期：</view>
							<view class="text">{{item.birthday}}</view> 
						</view>  
						<view class="label-view" style="width: 50%;">
							<view class="label">出生地点：</view>
							<view class="text">{{item.birthAddr}}</view> 
						</view>  
					</view>
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">证件类型：</view>
							<view class="text">{{item.certificateTypeName}}</view> 
						</view>  
						<view class="label-view" style="width: 50%;">
							<view class="label">证件编号：</view>
							<view class="text">{{item.certificateNo}}</view> 
						</view>
					</view>
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">签发地：</view>
							<view class="text">{{item.issueAddr}}</view> 
						</view>  
						<view class="label-view" style="width: 50%;">
							<view class="label">签发日期：</view>
							<view class="text">{{item.issueDay}}</view> 
						</view>  
					</view>
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">有效期至：</view>
							<view class="text">{{item.issueLifespan}}</view> 
						</view> 
						<view class="label-view" style="width: 50%;">
							<view class="label">是否电子标签：</view>
							<view class="text">{{item.isEleName}}</view> 
						</view>  
					</view> 
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">设备编号：</view>
							<view class="text">{{item.deviceNo}}</view> 
						</view>  
						<view class="label-view" style="width: 50%;">
							<view class="label">槽位编号：</view>
							<view class="text">{{item.soltNo}}</view> 
						</view> 
					</view> 
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">验证码：</view>
							<view class="text">{{item.verificationCode}}</view> 
						</view>  
						<view class="label-view" style="width: 50%;">
							<view class="label">截止时间：</view>
							<view class="text">{{item.processDate}}</view> 
						</view> 
					</view> 
					<view class="label-box" @click="checkSelect(item)">
						<view class="label-view" style="width: 50%;">
							<view class="label">创建时间：</view>
							<view class="text">{{item.createTime}}</view> 
						</view>   
						<view class="label-view" style="width: 50%;">
							<view class="label">处理结果：</view>
							<view class="text">{{item.processStateName}}</view> 
						</view>  
					</view>  
				</view>
			</view>
			<view style="margin: 20px 0" v-if="infoList.length > 0">
				<u-loadmore :status="status" nomoreText="没有更多数据了" />
			</view>
			<view v-else class="flex justify-center align-center" style="height: 50vh">
				<u-empty icon="../../static/images/not_order.png" text="暂无数据" textColor="#000" />
			</view>
		</scroll-view> 
		
		<!-- 他人代取 -->
		<u-popup :show="showPopup " mode="center" @close="showPopup = false">
			<view style="width: 90vw;height: 25vh;">
				<view style="width: 100%;text-align: center;height: 40rpx;line-height: 40px;font-size: 30rpx;font-weight: bold;">填写代领人身份证</view>
				<view style="width: 100%;margin: 0 auto;height: 15vh;display: flex;overflow-y: auto;align-items: center;">
					<view style="width: 25%;text-align: right;">身份证号:</view>
					<view style="width: 70%;">
						<uni-easyinput type="text" v-model="otherIdNumber" maxlength="18" placeholder="请输入" />
					</view>
				</view>
				<view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;">
					<view style="width: 80%;height: 40px;line-height:40px;background:#3989FF;border-radius: 10px;text-align: center;color: #FFF;" @click="batchOtherTake">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { certificateAtakeListApi,addCertificateTakeApi } from '@/api/certificateReturnManage/index.js';

export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		keyword:"",
		pageNum: 1,
		pageSize: 10,
		total: 0,
		infoList: [],
		status: 'loadmore',
		isCheckAll:false,
		chosenList:[],
		showPopup:false,
		otherIdNumber:""
    }
  },
  onLoad() {
  	
  },
  onShow(){
	  this.getList()
  }, 
  methods: {
		//搜索
		searchList(value){
			this.pageNum=1
			this.infoList=[]
			this.getList()
		},
		// 翻页
		onScrollTolower(){
			console.log(this.infoList.length)
			if(this.total>this.infoList.length){
				this.pageNum++
				this.getList()
			}
		},
		//获取列表
		async getList() {
			console.log('获取列表')
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize, 
				keyword: this.keyword
			} 
			try {
			const res = await certificateAtakeListApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.total = res.total; 
				res.rows.forEach(item=>{
					item.checked=[]; 
				})
				if(this.pageNum==1){
					this.infoList = res.rows
				}else{
					this.infoList.push(...res.rows)
				}
				this.status = this.total == this.infoList.length ? 'nomore' : 'loadmore'
			} catch (error) {
				console.log(error)
			}
		},
		// 单选
		checkSelect(chosen){
			this.infoList.forEach(item=>{
				if(item.certificateNo==chosen.certificateNo){
					if(item.checked.length==0){
						item.checked=[item.certificateNo]
					}else{
						item.checked=[]
					}
				}
			})
		},
		// 全选
		checkedAll(){
			this.isCheckAll=!this.isCheckAll
			if(this.isCheckAll){
				this.infoList.forEach(item=>{
					item.checked=[item.certificateNo]
				}) 
			}else{
				this.infoList.forEach(item=>{
					item.checked=[]
				}) 
			}
		},
		   
		
		/** 自主取证 */
		handleSelfTake(){
			this.chosenList=[]
			this.infoList.forEach(item=>{ 
				if(item.checked.length>0){ 
					this.chosenList.push(item.certificateNo)
				} 
			})
			console.log(this.chosenList)
			if(this.chosenList.length>0){
				uni.showModal({
					title: `确认自主取证？`,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.batchSelfTake();
						}
					}
				});
			}else{
				uni.$u.toast(`未勾选任务！`)
			} 
		},
		async batchSelfTake() { 
			console.log(this.chosenList) 
			const params = {"certificateNos":this.chosenList,"type":"3"}
			try {
			const res = await addCertificateTakeApi(params)
				this.getList()
				console.log('?? ~ getList ~ res:', res) 
			} catch (error) {
				console.log(error)
			}
		},
		
		/** 管理员取证 */
		handleAdminTake(){
			this.chosenList=[]
			this.infoList.forEach(item=>{ 
				if(item.checked.length>0){ 
					this.chosenList.push(item.certificateNo)
				} 
			})
			console.log(this.chosenList)
			if(this.chosenList.length>0){
				uni.showModal({
					title: `确认管理员取证？`,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.batchAdminTake();
						}
					}
				});
			}else{
				uni.$u.toast(`未勾选任务！`)
			} 
		},
		async batchAdminTake() {  
			const params = {"certificateNos":this.chosenList,"type":"4"}
			try {
			const res = await addCertificateTakeApi(params)
				this.getList()
				console.log('?? ~ getList ~ res:', res) 
			} catch (error) {
				console.log(error)
			}
		},
		
		/** 应急取证 */
		handleEmergencyTake(){
			this.chosenList=[]
			this.infoList.forEach(item=>{ 
				if(item.checked.length>0){ 
					this.chosenList.push(item.certificateNo)
				} 
			})
			console.log(this.chosenList)
			if(this.chosenList.length>0){
				uni.showModal({
					title: `确认应急取证？`,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.batchEmergencyTake();
						}
					}
				});
			}else{
				uni.$u.toast(`未勾选任务！`)
			} 
		},
		async batchEmergencyTake() {  
			const params = {"certificateNos":this.chosenList,"type":"5"}
			try {
			const res = await addCertificateTakeApi(params)
				this.getList()
				console.log('?? ~ getList ~ res:', res) 
			} catch (error) {
				console.log(error)
			}
		},
		
		/** 他人代取 */
		handleOtherTake(){
			this.chosenList=[]
			this.infoList.forEach(item=>{ 
				if(item.checked.length>0){ 
					this.chosenList.push(item.certificateNo)
				} 
			})
			console.log(this.chosenList)
			if(this.chosenList.length>0){
				this.otherIdNumber=""
				this.showPopup=true
			}else{
				uni.$u.toast(`未勾选任务！`)
			} 
		},
		async batchOtherTake() { 
			console.log(this.chosenList)
			const regex = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
			if(this.otherIdNumber==""){
				uni.$u.toast(`身份证号不能为空`) 
			}else if(!regex.test(this.otherIdNumber)){
				uni.$u.toast(`请输入正确身份证号`) 
			}else{
				const params = {"certificateNos":this.chosenList,"type":"6"}
				try {
				const res = await addCertificateTakeApi(params)
					this.showPopup=false
					this.getList()
					console.log('?? ~ getList ~ res:', res) 
				} catch (error) {
					console.log(error)
				}
			} 
		},
	}
}
</script>

<style lang="scss" scoped>
.certificate-list {
  height: 100vh; 
  background-color: #f8f8f8;
  padding: 30rpx;
}
.info-item{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center; 
	margin: 10rpx auto;
	border-bottom: 1px solid #ccc;
}
.label-box{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
}
.label-view{
	width: 100%;
	display: flex; 
	align-items: center;
}
.label{
	font-weight: 600;
}
.text{
	
}
.button-view{
	width:15%;height:50rpx;line-height: 50rpx;text-align: center;
	color: #FFF;border-radius: 10rpx;font-size: 22rpx;
}
</style>