bonus-Certificate-app/pages/verification/certificateVerification/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="certificate-list">
		<Navbar2 title="证件核验" :showRightText="false" :isBack="true"/>
		<view style="width: 100%;height: auto;background: #FFF;padding: 20rpx;">
			<u-search shape="round" placeholder="搜索"  v-model="keyword" :showAction="true" actionText="搜索" :animation="false" @custom="searchList"></u-search>
		</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 class="info-text" style="width: 100%;display: flex;padding: 10rpx 0;">
					<view style="color: #2A2B2F;font-size: 32rpx;margin-right: 20rpx;font-weight: 600;">{{item.verifyTitle}}</view>
					<view class="status-view" v-if="item.verifyState">
						<text v-if="item.verifyState==0">待核验</text>
						<text v-if="item.verifyState==1">已验证</text>
					</view>
				</view>
				<view class="info-text">任务类型：
					<text v-if="item.verifyType==1">有无证件核验</text>
					<text v-else-if="item.verifyType==2">一人多证核验</text>
					<text v-else-if="item.verifyType==3">出入境时间核验</text>
					<text v-else>无</text>
				</view>
				<view class="info-text">截止日期：{{item.endTime}}</view>
				<view class="info-text">发起时间：{{item.startTime}}</view>  
				<image v-if="item.verifyState==0" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/statusIcon1.png"></image>
				<image v-if="item.verifyResult==1" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/statusIcon3.png"></image>
				<image v-if="item.verifyResult==0" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/statusIcon4.png"></image>
				<view v-if="item.verifyState==0"  style="width: 100%;padding: 14rpx;border-top: 1px solid rgba(209,211,215,0.5);display: flex;justify-content: flex-end;">
					<view class="button-view"  @click="handleDetail(item)">核验</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> 
	</view>
</template>

<script>
import { certificateVerifyDetailListApi } from '@/api/certificateReturnManage/index.js';
 
export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		keyword:"",
		pageNum: 1,
		pageSize: 10,
		total: 0,
		infoList: [
			{name:"张三",idNumber:'23000020302030230230',time:'2025-10-09 16:23',status:1},
			{name:"张四",idNumber:'23000020302030230230',time:'2025-10-09 16:23',status:2},
			{name:"张五",idNumber:'23000020302030230230',time:'2025-10-09 16:23',status:3},
		],
		status: 'loadmore',
		isCheckAll:false,
		chosenList:[]
    }
  },
  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, 
				userId: uni.getStorageSync('userId'),
				keyWord: this.keyword
			} 
			try {
			const res = await certificateVerifyDetailListApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.total = res.total;
				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)
			}
		},
		handleDetail(item){
			this.gotoWX()
			// uni.navigateTo({
			//   url: `/pages/verification/certificateVerification/verificationDetail?pageParmas=${JSON.stringify(item)}`
			// })
		},
		gotoWX(){
			// #ifdef  APP-PLUS
			plus.share.getServices((res) => {
				const weixin = res.find(service => service.id === 'weixin');
				if (weixin) {
				  weixin.launchMiniProgram({
					id: 'gh_be6f72c67de1', // 目标小程序原始ID
					// path: 'pages/index/index?id=123', // 跳转路径（可选）
					type: 0, // 0-正式版，1-测试版，2-体验版
					success: () => console.log('跳转成功'),
					fail: (err) => console.error('跳转失败', err)
				  });
				} else {
				  uni.showToast({ title: '请安装微信', icon: 'none' });
				}
				}, (err) => {
				console.error('获取分享服务失败', err);
			});
			// #endif
		}
	}
}
</script>

<style lang="scss" scoped>
.certificate-list {
  height: 100vh; 
  background-color: #f8f8f8;
  // padding: 30rpx;
}
.info-item{
	width: 100%;
	height: auto;
	margin:20rpx 0;
	background: #fff;
	position: relative;
	padding: 10rpx 0;
}
.info-text{
	font-size: 28rpx;
	color: #64686E; 
	margin:20rpx 30rpx;
}
.button-view{
	width: 120rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	background: #F1F6FF;
	padding: 10rpx;
	text-align: center; 
	border: 1px solid #1F72EA;
	color: #1F72EA;
	margin-right: 20rpx; 
}
.status-view{
	padding: 5rpx 10rpx;
	background: #BEDAFF;
	color: #1F72EA;
	font-size: 24rpx;
	border-radius: 8rpx;
}
</style>