307 lines
9.3 KiB
Vue
307 lines
9.3 KiB
Vue
<template>
|
||
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
||
<view class="top-view">
|
||
<view class="user-view">
|
||
<view style="width: 24%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 999999;">
|
||
<image :src="headPortraitUrl" style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode="aspectFit"></image>
|
||
</view>
|
||
<view style="width: 50%;height: 100%;display: flex;flex-direction: column;justify-content: center;z-index: 999999;">
|
||
<view style="color: #fff;font-size: 36rpx;font-weight: 600;margin-bottom: 10px;">
|
||
您好，{{userName}}
|
||
</view>
|
||
<view style="color: #fff;font-size: 26rpx;">
|
||
公职人员护照管理系统
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="handle-box">
|
||
<view class="main-box">
|
||
<view class="grid-box">
|
||
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;">
|
||
<view style="font-size: 28rpx;font-weight: 600;">快捷菜单</view>
|
||
</view>
|
||
<view class="grid-container">
|
||
<view class="grid-item" @click="navigateTo('/pages/certificateManage/certificateInfo/index')">
|
||
<view class="icon-wrapper">
|
||
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/personalInfo.png"></image>
|
||
</view>
|
||
<text class="icon-text">证件信息</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateSave/index')">
|
||
<view class="icon-wrapper">
|
||
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
|
||
</view>
|
||
<text class="icon-text">证件存证</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateTake/index')">
|
||
<view class="icon-wrapper">
|
||
<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
|
||
</view>
|
||
<text class="icon-text">证件取证</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;margin: 0 auto;height: 25vh;margin-bottom: 4vh;">
|
||
<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 style="font-size: 24rpx;color: #3888FF;">查看全部>></view>
|
||
</view>
|
||
<scroll-view style="width: 100%;height: 21vh;" @scrolltolower="onScrollTolower" scroll-y="true">
|
||
<view class="record-item" v-for="(item, index) in recordList" :key="index">
|
||
<view style="width: 15%;height: 100%;display: flex;align-items: center;">
|
||
<image src="/static/images/index/icon3.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
|
||
<!-- <image v-if="item.recordType==2" src="/static/images/index/icon4.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image> -->
|
||
</view>
|
||
<view style="width: 85%;height: 100%;padding-top: 10rpx;">
|
||
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;">
|
||
<view style="font-weight: 600;width: 60%;">姓名：{{item.name}}</view>
|
||
<view style="font-size: 20rpx;color: #333333;width: 22%;">{{item.stateName}}</view>
|
||
</view>
|
||
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;">
|
||
<view style="font-weight: 600;width: 100%;">证件编号：{{item.certificateNo}}</view>
|
||
</view>
|
||
<view style="color: #333333;font-size: 20rpx;width: 100%;font-weight: 600;display: flex;justify-content: space-between;align-items: center;">
|
||
<view>签发日期：{{item.issueDay}}</view>
|
||
<view>有效期至：{{item.issueLifespan}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view style="width: 100%;margin: 0 auto;height: 25vh;">
|
||
<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 style="font-size: 24rpx;color: #3888FF;">查看全部>></view>
|
||
</view>
|
||
<scroll-view style="width: 100%;height: 21vh;" @scrolltolower="onScrollTolower2" scroll-y="true">
|
||
<view class="record-item" v-for="(item, index) in recordList2" :key="index">
|
||
<view style="width: 15%;height: 100%;display: flex;align-items: center;">
|
||
<image src="/static/images/index/icon3.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
|
||
<!-- <image v-if="item.recordType==2" src="/static/images/index/icon4.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image> -->
|
||
</view>
|
||
<view style="width: 85%;height: 100%;padding-top: 10rpx;">
|
||
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 4rpx;">
|
||
<view style="font-weight: 600;width: 60%;">姓名：{{item.name}}</view>
|
||
<view style="font-size: 20rpx;color: #333333;width: 22%;">{{item.stateName}}</view>
|
||
</view>
|
||
<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 4rpx;">
|
||
<view style="font-weight: 600;width: 100%;">任务编号：{{item.taskNo}}</view>
|
||
</view>
|
||
<view style="color: #333333;font-size: 20rpx;width: 100%;font-weight: 600;display: flex;justify-content: space-between;align-items: center;">
|
||
<view>签发日期：{{item.issueDay}}</view>
|
||
<view>有效期至：{{item.issueLifespan}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUserInfo} from "@/api/system/user";
|
||
import { certificateRecordApi,certificateAtakeRecordApi} from "@/api/index/index.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
fontValue:uni.getStorageSync('fontSize') || 8,
|
||
headPortraitUrl:"/static/images/my/face.png",
|
||
userName: "",
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
recordList:[],
|
||
pageNum2: 1,
|
||
pageSize2: 10,
|
||
total2: 0,
|
||
recordList2:[],
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
},
|
||
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;
|
||
})
|
||
},
|
||
// 翻页
|
||
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 certificateRecordApi(params)
|
||
console.log('?? ~ getList ~ res:', res)
|
||
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 certificateAtakeRecordApi(params)
|
||
console.log('?? ~ getList ~ res:', res)
|
||
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
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fafcff;
|
||
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: 70vh;
|
||
background: rgba(255,255,255,0.3);
|
||
opacity: 0.8;
|
||
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
||
border: 1px solid #fff;
|
||
margin-top: -5vh;
|
||
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: 15vh;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.record-item{
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
}
|
||
</style>
|