480 lines
14 KiB
Vue
480 lines
14 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view style="padding-top: 4vh;color: #fff;height: 13vh;display: flex;align-items: center;padding-left: 6%;">
|
|
<view style="font-size: 40rpx;font-weight: 600;">
|
|
证途通
|
|
</view>
|
|
</view>
|
|
<view class="handle-box" v-if="roles=='app_user'">
|
|
<view class="main-box">
|
|
<view class="grid-box">
|
|
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;">
|
|
<view style="font-size: 28rpx;font-weight: 600;">快捷菜单</view>
|
|
</view>
|
|
<view class="grid-container">
|
|
<view class="grid-item" @click="navigateTo('/pages/certificateManage/certificatePersonalInfo/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 100rpx;height: 100rpx;" src="@/static/images/index/iconImg1.png"></image>
|
|
</view>
|
|
<text class="icon-text">我的证件</text>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('/pages/certificateExamCenter/certificateApply/index')">
|
|
<view class="icon-wrapper">
|
|
<image style="width: 100rpx;height: 100rpx;" src="@/static/images/index/iconImg3.png"></image>
|
|
</view>
|
|
<text class="icon-text">存取证申请</text>
|
|
</view>
|
|
<view class="grid-item">
|
|
<view class="icon-wrapper" @click="navigateTo('/pages/verification/certificateVerification/index')">
|
|
<image style="width: 100rpx;height: 100rpx;" src="@/static/images/index/iconImg5.png"></image>
|
|
</view>
|
|
<text class="icon-text">证件核验</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 0 auto;height: 3vh;margin-bottom: 10rpx;">
|
|
<view class="tag-view-item">我的待办</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 0 auto;height: 55vh;margin-bottom: 1vh;">
|
|
<scroll-view v-if="tagIndex==1" style="width: 100%;height: 55vh;" scroll-y="true">
|
|
<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="goTodo(item)">
|
|
<view style="width: 80%;height: 100%;padding-top: 10rpx;">
|
|
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
|
|
<view style="font-weight: 600;width: 100%;color: #2A2B2F;font-size:26rpx">{{item.title}}</view>
|
|
</view>
|
|
<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
|
|
<view style="font-size: 20rpx;color: #979B9F;">截止日期：{{item.startTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 15%;height: auto;display: flex;justify-content: flex-end;">
|
|
<view class="status-view">进行中</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="recordList.length==0" class="flex justify-center align-center" style="height: 40vh">
|
|
<u-empty icon="../../static/images/not_order.png" text="暂无待办" textColor="#000" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="admin-box" v-else>
|
|
<view class="admin-top">
|
|
<view class="admin-top-item">
|
|
<view class="fs10">普通护照</view>
|
|
<view class="b-num">{{statisticsData.passPortNum}}</view>
|
|
<view style="display: flex;">
|
|
<view class="fs10" style="margin-right: 20rpx;color: #FCD764;">柜外：{{statisticsData.outPassPortNum}}</view>
|
|
<view class="fs10">柜内：{{statisticsData.inPassPortNum}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="admin-top-item">
|
|
<view class="fs10">港澳通行证</view>
|
|
<view class="b-num">{{statisticsData.hmcardNum}}</view>
|
|
<view style="display: flex;">
|
|
<view class="fs10" style="margin-right: 20rpx;color: #FCD764;">柜外：{{statisticsData.outHMCardNum}}</view>
|
|
<view class="fs10">柜内：{{statisticsData.inHMCardNum}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="admin-top-item">
|
|
<view class="fs10">台湾通行证</view>
|
|
<view class="b-num">{{statisticsData.taiwanNum}}</view>
|
|
<view style="display: flex;">
|
|
<view class="fs10" style="margin-right: 20rpx;color: #FCD764;">柜外：{{statisticsData.outTaiwanNum}}</view>
|
|
<view class="fs10">柜内：{{statisticsData.inTaiwanNum}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="handle-box2">
|
|
<view class="flex-box">
|
|
<view class="flex-box-item">
|
|
<view class="fs10">应备案人数</view>
|
|
<view class="b-num" style="color: #2A2B2F;">{{statisticsData.registerNum}}</view>
|
|
</view>
|
|
<view class="flex-box-item">
|
|
<view class="fs10">有证人数</view>
|
|
<view class="b-num" style="color: #00CC44;">{{statisticsData.ownNum}}</view>
|
|
</view>
|
|
<view class="flex-box-item">
|
|
<view class="fs10">无证人数</view>
|
|
<view class="b-num" style="color: #F6AB00;">{{statisticsData.unOwnNum}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 50%;display: flex;align-items: center;justify-content: space-between;margin: 0 auto;margin-bottom: 1vh;">
|
|
<view class="fs10" style="color: #34C759;">全交：{{statisticsData.storeNum}}</view>
|
|
<view class="fs10" style="color: #1F72EA;">部分上交：{{statisticsData.someStoreNum}}</view>
|
|
<view class="fs10" style="color: #1F72EA;">未交：{{statisticsData.unStoreNum}}</view>
|
|
</view>
|
|
<view class="flex-box" style="margin-bottom: 2vh;">
|
|
<view class="flex-box-item2">
|
|
<view class="fs10">证件总数</view>
|
|
<view class="b-num" style="color: #2A2B2F;">{{statisticsData.cardAllNum}}</view>
|
|
</view>
|
|
<view class="flex-box-item2">
|
|
<view class="fs10">正常</view>
|
|
<view class="b-num" style="color: #00CC44;">{{statisticsData.cardNum}}</view>
|
|
</view>
|
|
<view class="flex-box-item2">
|
|
<view class="fs10">即将过期</view>
|
|
<view class="b-num" style="color: #F6AB00;">{{statisticsData.overNum}}</view>
|
|
</view>
|
|
<view class="flex-box-item2">
|
|
<view class="fs10">已过期</view>
|
|
<view class="b-num" style="color: #E60044;">{{statisticsData.overdNum}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 0 auto;height: 3vh;margin-bottom: 10rpx;">
|
|
<view class="tag-view-item">我的待办</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 0 auto;height: 45vh;margin-bottom: 1vh;">
|
|
<scroll-view v-if="tagIndex==1" style="width: 100%;height: 45vh;" scroll-y="true">
|
|
<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="goTodo(item)">
|
|
<view style="width: 80%;height: 100%;padding-top: 10rpx;">
|
|
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
|
|
<view style="font-weight: 600;width: 100%;color: #2A2B2F;font-size:26rpx">{{item.title}}</view>
|
|
</view>
|
|
<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
|
|
<view style="font-size: 20rpx;color: #979B9F;">截止日期：{{item.startTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 15%;height: auto;display: flex;justify-content: flex-end;">
|
|
<view class="status-view">进行中</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="recordList.length==0" class="flex justify-center align-center" style="height: 40vh">
|
|
<u-empty icon="../../static/images/not_order.png" text="暂无待办" textColor="#000" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserInfo} from "@/api/system/user";
|
|
import { certificateRecordApi,certificateAtakeRecordApi,getRoutersApi,certificateStatisticsApi,toDoListApi} from "@/api/index/index.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
headPortraitUrl:"/static/images/my/face.png",
|
|
userName: "",
|
|
tagIndex:1,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
recordList:[],
|
|
pageNum2: 1,
|
|
pageSize2: 10,
|
|
total2: 0,
|
|
recordList2:[],
|
|
statisticsData:{},
|
|
roles:"app_user"
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo()
|
|
this.certificateStatistics()
|
|
},
|
|
onLoad() {
|
|
this.getList()
|
|
// this.getList2()
|
|
},
|
|
onUnload() {
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
getUserInfo().then(res => {
|
|
this.headPortraitUrl= res.user.avatar||"/static/images/my/face.png";
|
|
this.userName = res.user.userName;
|
|
this.roles = res.roles[0];
|
|
uni.setStorageSync("userId",res.user.userId)
|
|
|
|
})
|
|
},
|
|
certificateStatistics() {
|
|
certificateStatisticsApi({}).then(res => {
|
|
this.statisticsData = res.data
|
|
})
|
|
},
|
|
// 翻页
|
|
onScrollTolower(){
|
|
console.log(this.recordList.length)
|
|
if(this.total>this.recordList.length){
|
|
this.pageNum++
|
|
this.getList()
|
|
}
|
|
},
|
|
//获取列表
|
|
async getList() {
|
|
console.log('获取列表',)
|
|
let params = {
|
|
// pageNum: this.pageNum,
|
|
// pageSize: this.pageSize,
|
|
}
|
|
try {
|
|
const res = await toDoListApi(params)
|
|
console.log('?? ~ getList ~ res:', res)
|
|
this.recordList = res.data
|
|
// this.total = Number(res.total);
|
|
// if(this.pageNum==1){
|
|
// this.recordList = res.rows
|
|
// }else{
|
|
// this.recordList.push(...res.rows)
|
|
// }
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
|
|
// 翻页
|
|
onScrollTolower2(){
|
|
if(this.total2>this.recordList2.length){
|
|
this.pageNum2++
|
|
this.getList2()
|
|
}
|
|
},
|
|
//获取列表
|
|
async getList2() {
|
|
let params = {
|
|
// pageNum: this.pageNum2,
|
|
// pageSize: this.pageSize2,
|
|
}
|
|
try {
|
|
const res = await toDoListApi(params)
|
|
console.log('?? ~ getList ~ res:', res)
|
|
this.recordList2 = res.data
|
|
// this.total2 = Number(res.total);
|
|
// if(this.pageNum2==1){
|
|
// this.recordList2 = res.rows
|
|
// }else{
|
|
// this.recordList2.push(...res.rows)
|
|
// }
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
navigateTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
goTodo(item){
|
|
if(item.type==2){
|
|
uni.navigateTo({url:"/pages/certificateExamCenter/certificateExam/index"})
|
|
}
|
|
if(item.type==1){
|
|
uni.navigateTo({url:"/pages/verification/certificateVerification/index"})
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/* #ifndef APP-NVUE */
|
|
page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
// background-color: #fafcff;
|
|
background-image: url('../static/images/index/indexBg.png');
|
|
background-size: 100% 100%;
|
|
height: 100%;
|
|
}
|
|
view {
|
|
font-size: 28rpx;
|
|
line-height: inherit;
|
|
}
|
|
/* #endif */
|
|
.top-view{
|
|
width: 100%;
|
|
height: 16vh;
|
|
// background: linear-gradient( 180deg, #3888FF 0%, rgba(56,136,255,0) 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.header {
|
|
padding: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
|
|
.header-text {
|
|
font-size: 38rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.user-view{
|
|
width: 100%;
|
|
height: 10vh;
|
|
// z-index: 999999;
|
|
display: flex;
|
|
}
|
|
.handle-box{
|
|
// margin-top: 30rpx;
|
|
width: 100%;
|
|
height: 82vh;
|
|
// background: rgba(255,255,255,0.8);
|
|
// opacity: 0.7;
|
|
background: linear-gradient( 180deg, rgba(255,255,255,0.5) 0%, #FFFFFF 100%);
|
|
|
|
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
|
border: 1px solid #fff;
|
|
margin-top: 0vh;
|
|
padding: 20rpx 20rpx;
|
|
padding-top: 20rpx;
|
|
z-index: 999999;
|
|
|
|
.select-box{
|
|
width: 90%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
}
|
|
.main-box{
|
|
width: 96%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
}
|
|
.grid-box{
|
|
width: 100%;
|
|
height: 16vh;
|
|
margin: 20rpx auto;
|
|
}
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.icon-wrapper {
|
|
// width: 48px;
|
|
// height: 48px;
|
|
//border-radius: 24px;
|
|
//background: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.icon-text {
|
|
font-size: 28rpx;
|
|
color: #0F274B;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tag-view{
|
|
width: 96%;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
margin-bottom: 2vh;
|
|
}
|
|
.tag-view-item{
|
|
width: auto;
|
|
height: 100%;
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-right: 40rpx;
|
|
}
|
|
.active{
|
|
border-bottom: 4px solid #3888FF;
|
|
color: #000;
|
|
}
|
|
}
|
|
.tag-view-item{
|
|
width: auto;
|
|
height: 100%;
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-right: 40rpx;
|
|
}
|
|
.fs10{
|
|
font-size: 20rpx;
|
|
}
|
|
.b-num{
|
|
font-size: 48rpx;font-weight: 600;margin: 20rpx;
|
|
}
|
|
.admin-box{
|
|
width: auto;
|
|
height: auto;
|
|
.admin-top{
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 3vh;
|
|
}
|
|
.admin-top-item{
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #F5F5F5;
|
|
}
|
|
.handle-box2{
|
|
// margin-top: 30rpx;
|
|
width: 100%;
|
|
height: 71vh;
|
|
background: linear-gradient( 180deg, rgba(190,218,255,0.3) 0%, #FFFFFF 100%);
|
|
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
|
border: 1px solid #fff;
|
|
margin-top: 0vh;
|
|
padding: 20rpx 20rpx;
|
|
padding-top: 20rpx;
|
|
}
|
|
.flex-box{
|
|
width: 96%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.flex-box-item{
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #64686E;
|
|
}
|
|
.flex-box-item2{
|
|
width: 24%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #64686E;
|
|
}
|
|
|
|
}
|
|
|
|
.record-item{
|
|
width: 96%;
|
|
height: auto;
|
|
margin: 20rpx auto;
|
|
padding: 24rpx 20rpx;
|
|
box-shadow: 0px 1px 3px 0px rgba(31,114,234,0.15), 0px 0px 1px 0px rgba(31,114,234,0.3);
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.status-view{
|
|
padding: 5rpx 10rpx;
|
|
background: #BEDAFF;
|
|
color: #1F72EA;
|
|
font-size: 24rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
</style>
|