bonus-Certificate-app/pages/certificateExamCenter/certificateApply/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="certificate-list">
		<Navbar2 title="存取证申请" :showRightText="true" :backGround="false" :isBack="true" :text="'新增申请'" @clickIcon="addInfo"/>
		<view class="tag-view">
			<view class="tag-view-item" @click="changeTag('')" :class="tagIndex==''?'active tag-view-item':'tag-view-item'">全部</view>
			<view class="tag-view-item" @click="changeTag(1)" :class="tagIndex==1?'active tag-view-item':'tag-view-item'">存证</view>
			<view class="tag-view-item" @click="changeTag(2)" :class="tagIndex==2?'active tag-view-item':'tag-view-item'">取证</view> 
		</view>
		<view style="width: 92%;height: 80rpx;margin: 20rpx auto;background: #FFF;">
			<u-search shape="round" placeholder="搜索"  v-model="keyWord" :showAction="true" actionText="搜索" :animation="false" @custom="searchList"></u-search>
		</view>
		<scroll-view style="width: 100%;height: 78vh;background: #F5F5F5;" @scrolltolower="onScrollTolower" scroll-y="true">
			<view class="scroll-item" v-for="(item, index) in infoList" :key="index" @click="handleEdit(item)">
				<view style="width: 100%;display: flex;margin-bottom: 10rpx;">
					<view style="color: #2A2B2F;font-size: 32rpx;margin-right: 20rpx;font-weight: 600;">{{item.userName}}的申请</view>
					<view class="status-view" v-if="item.applyType==1">存证</view>
					<view class="status-view" v-if="item.applyType==2">取证</view>
				</view>
				<!-- <view class="info-text">证件类型：{{item.certificateTypeName}}</view> -->
				<view class="info-text">证件用途：{{item.applyReasonName}}</view>
				<view class="info-text textMore">证件编号：{{item.certificateNo}}</view>
				<view class="info-text">申请时间：{{item.createTime}}</view>
				
				<image v-if="item.applyState==-1" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon.png"></image>
				<image v-if="item.applyState==0||item.applyState==1" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon1.png"></image>
				<image v-if="item.applyState==2||item.applyState==4" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon2.png"></image>
				<image v-if="item.applyState==3" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon3.png"></image>
			</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 { certificateApplyListPageApi } from '@/api/certificateExamCenter/index.js';
 
export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		tagIndex:"",
		keyWord:"",
		pageNum: 1,
		pageSize: 10,
		total: 0,
		infoList: [],
		status: 'loadmore',
    }
  },
  onLoad() {
  	
  },
  onShow(){
	  this.getList()
  }, 
  methods: {
		//搜索
		searchList(value){
			this.pageNum=1
			this.infoList=[]
			this.getList()
		},
		changeTag(index){
			this.pageNum==1
			this.tagIndex=index;
			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,
				applyType:this.tagIndex,
				userId:uni.getStorageSync("userId"),
				keyWord: this.keyWord
			} 
			try {
			const res = await certificateApplyListPageApi(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)
			}
		}, 
		handleEdit(certificate) {  
			if(certificate.applyState==-1){
				uni.navigateTo({
				  url: `/pages/certificateExamCenter/certificateApply/applyEdit?apply=${JSON.stringify(certificate)}`
				})
			}else{
				uni.navigateTo({
				  url: `/pages/certificateExamCenter/certificateApply/applyDetail?apply=${JSON.stringify(certificate)}`
				})
			} 
		},
		addInfo() {
		  uni.navigateTo({
			url: `/pages/certificateExamCenter/certificateApply/applyAdd`
		  })
		},
  }
}
</script>

<style lang="scss" scoped>
.certificate-list {
  height: 100vh;  
  // background-image: url('@/static/images/system/pageBg.png'); 
  // background-size: 100% 100%;
  background-color: #FFF;
  // padding: 40rpx;
}
.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;
}
.tag-view{
	width: 92%;
	height: 3vh; 
	margin: 20rpx auto;
	display: flex;
	align-items: self-end; 
	background: #FFF;
}
.tag-view-item{
	width: auto;
	height: auto;
	color: #64686E;
	font-size: 28rpx;
	font-weight: 600;
	margin-right: 60rpx;  
}
.active{
	border-bottom: 4px solid #3888FF;
	font-size: 32rpx;
	color: #2A2B2F;
}
.scroll-item{
	width: 100%;
	height: auto;
	margin:20rpx 0;
	background: #fff;
	padding: 20rpx 40rpx;
	position: relative;
}
.info-text{
	font-size: 28rpx;
	color: #64686E;
	margin-bottom: 16rpx;
}
.textMore{
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.status-view{
	padding: 5rpx 10rpx;
	background: #BEDAFF;
	color: #1F72EA;
	font-size: 24rpx;
	border-radius: 8rpx;
}
</style>