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

154 lines
4.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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;">
<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==2" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/statusIcon4.png"></image>
<view 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){
// uni.navigateTo({
// url: `/pages/verification/certificateVerification/verificationDetail?pageParmas=${JSON.stringify(item)}`
// })
},
}
}
</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;
}
.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>