365 lines
13 KiB
Vue
365 lines
13 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<Navbar2 title="存取证申请" :showRightText="false" :isBack="false" :goTo="'/pages/certificateExamCenter/certificateApply/index'"/>
|
|
<view class="apply-view">
|
|
<view style="width: 100%;display: flex;margin-bottom: 10rpx;">
|
|
<view style="color: #2A2B2F;font-size: 32rpx;margin-right: 20rpx;font-weight: 600;">{{apply.name}}提交的申请</view>
|
|
<view class="status-view" v-if="apply.applyType==1">存证</view>
|
|
<view class="status-view" v-if="apply.applyType==2">取证</view>
|
|
</view>
|
|
<view class="info-text">证件编号：{{apply.certificateNo}}</view>
|
|
<view class="info-text">申请时间：{{apply.createTime}}</view>
|
|
|
|
<!-- <image style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon1.png"></image> -->
|
|
<!-- <image v-if="item.status==2" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon2.png"></image>
|
|
<image v-if="item.status==3" style="width: 120rpx;height: 120rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/examIcon3.png"></image> -->
|
|
</view>
|
|
<view class="apply-view">
|
|
<view style="color: #2A2B2F;font-size: 32rpx;margin-right: 20rpx;font-weight: 600;">证件</view>
|
|
<view v-for="(item,index) in certificateList" :key="index" class="certificate-box">
|
|
<!-- <image style="width: 140rpx;height: 140rpx;position: absolute;top:30%;right: 5%;" src="/static/images/system/statusIcon1.png"></image> -->
|
|
<view class="certificate-view1" v-if="item.certificateType==1">
|
|
<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
|
|
<view style="font-size: 28rpx;color: #2A2B2F;font-weight: 600;">{{item.certificateTypeName}}</view>
|
|
<view style="color:#64686E;margin-left: 10px;font-size: 26rpx;">{{item.certificateNo}}</view>
|
|
<view class="status-view" style="margin-left: 10px;">{{item.stateName}}</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 10rpx 0;display: flex;align-items: center;">
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">有效期</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{ item.issueDay }} 至 {{ item.issueLifespan }}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">姓名 </view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 10rpx 0;display: flex;align-items: center;">
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">证件柜</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.deviceName||'无'}}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">槽位 </view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.slotNo||'无'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="text-view" style="color: #979B9F;">位置</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.deviceAddr||'无'}}</view>
|
|
</view>
|
|
<view class="certificate-view2" v-if="item.certificateType==2">
|
|
<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
|
|
<view style="font-size: 28rpx;color: #2A2B2F;font-weight: 600;">{{item.certificateTypeName}}</view>
|
|
<view style="color:#64686E;margin-left: 10px;font-size: 26rpx;">{{item.certificateNo}}</view>
|
|
<view class="status-view" style="margin-left: 10px;">{{item.stateName}}</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 10rpx 0;display: flex;align-items: center;">
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">有效期</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{ item.issueDay }} 至 {{ item.issueLifespan }}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">姓名 </view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 10rpx 0;display: flex;align-items: center;">
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">证件柜</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.deviceName||'无'}}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">槽位 </view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.slotNo||'无'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="text-view" style="color: #979B9F;">位置</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.deviceAddr||'无'}}</view>
|
|
</view>
|
|
<view class="certificate-view3" v-if="item.certificateType==3">
|
|
<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
|
|
<view style="font-size: 28rpx;color: #2A2B2F;font-weight: 600;">{{item.certificateTypeName}}</view>
|
|
<view style="color:#64686E;margin-left: 10px;font-size: 26rpx;">{{item.certificateNo}}</view>
|
|
<view class="status-view" style="margin-left: 10px;">{{item.stateName}}</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 10rpx 0;display: flex;align-items: center;">
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">有效期</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{ item.issueDay }} 至 {{ item.issueLifespan }}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">姓名 </view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;margin: 10rpx 0;display: flex;align-items: center;">
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">证件柜</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.deviceName||'无'}}</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="text-view" style="color: #979B9F;">槽位 </view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.slotNo||'无'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="text-view" style="color: #979B9F;">位置</view>
|
|
<view class="text-view" style="color: #2A2B2F;">{{item.deviceAddr||'无'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-view">
|
|
<view class="apply-info" v-if="apply.applyType==1">
|
|
<view class="apply-info-label">证件柜</view>
|
|
<view class="apply-info-text">
|
|
<text>{{apply.deviceName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="apply-info">
|
|
<view class="apply-info-label">证件用途</view>
|
|
<view class="apply-info-text">
|
|
<text v-if="apply.applyReason==1">公事</text>
|
|
<text v-if="apply.applyReason==2">私事</text>
|
|
</view>
|
|
</view>
|
|
<view class="apply-info">
|
|
<view class="apply-info-label">事由</view>
|
|
<view class="apply-info-text">{{apply.applyDetail}}</view>
|
|
</view>
|
|
<view class="apply-info" v-if="apply.applyType==2">
|
|
<view class="apply-info-label">计划出国（境）地点</view>
|
|
<view class="apply-info-text">{{apply.exitAddr}}</view>
|
|
</view>
|
|
<view class="apply-info" v-if="apply.applyType==2">
|
|
<view class="apply-info-label">计划出国（境）日期</view>
|
|
<view class="apply-info-text">{{apply.exitTime}}</view>
|
|
</view>
|
|
<view class="apply-info" v-if="apply.applyType==2">
|
|
<view class="apply-info-label">计划回国（境）日期</view>
|
|
<view class="apply-info-text">{{apply.entryTime}}</view>
|
|
</view>
|
|
<view class="apply-info" v-if="apply.applyType==2">
|
|
<view class="apply-info-label">允许他人代办</view>
|
|
<view class="apply-info-text">
|
|
|
|
<text v-if="apply.isThrid==1">是</text>
|
|
<text v-if="apply.isThrid==2">否</text>
|
|
</view>
|
|
</view>
|
|
<view class="apply-info" v-if="apply.isThrid==1">
|
|
<view class="apply-info-label">代办人姓名</view>
|
|
<view class="apply-info-text">{{apply.thridIdName}}</view>
|
|
</view>
|
|
<view class="apply-info" v-if="apply.isThrid==1">
|
|
<view class="apply-info-label">代办人身份证号</view>
|
|
<view class="apply-info-text">{{apply.thridIdNumber}} </view>
|
|
</view>
|
|
<view class="apply-info">
|
|
<view class="apply-info-label">备注</view>
|
|
<view class="apply-info-text">{{apply.remark}}</view>
|
|
</view>
|
|
<view class="apply-info" style="height: 120px;">
|
|
<view class="apply-info-label">附件</view>
|
|
<view class="apply-info-text">
|
|
<view class="img-box" v-if="apply.fileUrl!=''">
|
|
<view style="width: 110rpx;height: 110rpx;margin-right: 20rpx;" v-for="(imgItem,imgIndex) in apply.fileUrl.split(',')" :key="imgIndex">
|
|
<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;" @click="opePopup(imgItem)"></image>
|
|
</view>
|
|
</view>
|
|
<text v-else>无附件</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="width: 100%;background: #fff;padding: 20rpx;">
|
|
<view style="font-weight: 600;">流程</view>
|
|
<u-steps :current="currentIndex" direction="column" style="margin: 20rpx;">
|
|
<u-steps-item v-for="(item,index) in checkProcess" :key="index" :title="item.createBy+' '+item.processName">
|
|
<view slot="desc">
|
|
<text v-if="item.checkState==0" style="color: #000;">未处理</text>
|
|
<text v-if="item.checkState==1" style="color: rgb(31, 114, 234);">同意</text>
|
|
<text v-if="item.checkState==2" style="color: rgb(230, 0, 68);">拒绝</text>
|
|
<text style="margin-left: 20rpx;font-size: 24rpx;">{{item.createTime}}</text>
|
|
</view>
|
|
</u-steps-item>
|
|
</u-steps>
|
|
</view>
|
|
|
|
<view style="width: 100%;padding: 20rpx;margin: 40rpx auto;background: #fff;" v-if="apply.applyState==0">
|
|
<view @click="submitRevoke" style="width: 92%;height: 80rpx;margin: 20rpx auto;background: #E60044;color: #fff;border-radius: 10rpx;text-align: center;line-height: 80rpx;" >
|
|
撤销申请
|
|
</view>
|
|
</view>
|
|
|
|
<u-popup :show="showPic" mode="center" @close="showPic=false">
|
|
<image :src="imagerUrl" mode="aspectFit" style="height: 99vh;width: 99vw;" @click="showPic=false"></image>
|
|
</u-popup>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { revokeCertificateApplyApi,checkProcessCertificateApplyApi } from '@/api/certificateExamCenter/index.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
show:false,
|
|
// 单选数据源
|
|
checkBoxLocalData: [{text: '存证',value: 1}, {text: '取证',value: 0}],
|
|
checkBoxLocalData2: [{text: '公事',value: 1}, {text: '私事',value: 2}],
|
|
checkBoxLocalData3: [{text: '是',value: 1}, {text: '否',value: 2}],
|
|
isSumbit:false,
|
|
apply:{
|
|
applyType:1,
|
|
applyReason:1,
|
|
applyLocation:"",
|
|
isThrid:1,
|
|
thridId:"",
|
|
thridName:"",
|
|
thridIdNumber:"",
|
|
applyDetail:"",
|
|
exitAddr:"",
|
|
exitTime:"",
|
|
entryTime:"",
|
|
remark:"",
|
|
certificateNos:[],
|
|
},
|
|
checkProcess:[],
|
|
currentIndex:0,
|
|
showPic:false,
|
|
imagerUrl:"",
|
|
certificateList:[]
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.apply = JSON.parse(options.apply)
|
|
console.log(this.apply)
|
|
this.certificateList = this.apply.details;
|
|
console.log(this.certificateList)
|
|
this.getCheckProcess()
|
|
},
|
|
methods: {
|
|
async getCheckProcess(){
|
|
let param = {
|
|
"checkId":this.apply.checkId
|
|
}
|
|
const res = await checkProcessCertificateApplyApi(param);
|
|
console.log("getCheckProcess",res)
|
|
if(res.code==200){
|
|
this.checkProcess = res.data||[];
|
|
let index = res.data.findIndex(v=>v.checkState==0)
|
|
if(index==-1){
|
|
this.currentIndex = 3
|
|
}else{
|
|
this.currentIndex = index
|
|
}
|
|
}else{
|
|
this.checkProcess = []
|
|
}
|
|
},
|
|
async submitRevoke(){
|
|
let param = {
|
|
"checkId":this.apply.checkId
|
|
}
|
|
const res = await revokeCertificateApplyApi(param);
|
|
if(res.code==200){
|
|
uni.$u.toast(`操作成功！`)
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
this.isSumbit=false
|
|
},500)
|
|
}else{
|
|
this.isSumbit=false
|
|
uni.$u.toast(`操作失败！`)
|
|
}
|
|
},
|
|
opePopup(item){
|
|
this.imagerUrl = item;
|
|
this.showPic = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
.apply-view{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 40rpx auto;
|
|
background: #FFF;
|
|
padding: 20rpx;
|
|
}
|
|
.apply-item{
|
|
width: 100%;
|
|
height: 80px;
|
|
padding: 20rpx;
|
|
background: #FFF;
|
|
border-bottom: 1px solid rgba(209,211,215,0.5);
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.certificate-box{
|
|
width: 96%;
|
|
// height: 420rpx;
|
|
margin: 20rpx auto;
|
|
position: relative;
|
|
}
|
|
.certificate-view1{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20rpx;
|
|
background-image: url('@/static/images/system/certificate1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.certificate-view2{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20rpx;
|
|
background-image: url('@/static/images/system/certificate2.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.certificate-view3{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20rpx;
|
|
background-image: url('@/static/images/system/certificate3.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.status-view{
|
|
padding: 5rpx 10rpx;
|
|
background: #BEDAFF;
|
|
color: #1F72EA;
|
|
font-size: 24rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.text-view{
|
|
margin-bottom: 10rpx;font-size: 28rpx;
|
|
}
|
|
|
|
.apply-info{
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.apply-info-label{
|
|
color: #64686E;
|
|
font-size: 24rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.apply-info-text{
|
|
color: #2A2B2F;
|
|
font-size: 28rpx;
|
|
}
|
|
.img-box{
|
|
width: 94%;
|
|
margin: 10px auto;
|
|
display: flex;
|
|
align-items: center;
|
|
height: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|