355 lines
13 KiB
Vue
355 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>
|
||
<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 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="apply.certificateType==1">
|
||
<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
|
||
<view style="font-size: 28rpx;color: #2A2B2F;font-weight: 600;">{{apply.certificateTypeName}}</view>
|
||
<view style="color:#64686E;margin-left: 10px;font-size: 26rpx;">{{apply.certificateNo}}</view>
|
||
<view class="status-view" style="margin-left: 10px;">{{apply.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;">{{ apply.issueDay }} 至 {{ apply.issueLifespan }}</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view class="text-view" style="color: #979B9F;">姓名 </view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.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;">{{apply.deviceName||'无'}}</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view class="text-view" style="color: #979B9F;">槽位 </view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.slotNo||'无'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-view" style="color: #979B9F;">位置</view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.deviceAddr||'无'}}</view>
|
||
</view>
|
||
<view class="certificate-view2" v-if="apply.certificateType==2">
|
||
<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
|
||
<view style="font-size: 28rpx;color: #2A2B2F;font-weight: 600;">{{apply.certificateTypeName}}</view>
|
||
<view style="color:#64686E;margin-left: 10px;font-size: 26rpx;">{{apply.certificateNo}}</view>
|
||
<view class="status-view" style="margin-left: 10px;">{{apply.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;">{{ apply.issueDay }} 至 {{ apply.issueLifespan }}</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view class="text-view" style="color: #979B9F;">姓名 </view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.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;">{{apply.deviceName||'无'}}</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view class="text-view" style="color: #979B9F;">槽位 </view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.slotNo||'无'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-view" style="color: #979B9F;">位置</view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.deviceAddr||'无'}}</view>
|
||
</view>
|
||
<view class="certificate-view3" v-if="apply.certificateType==3">
|
||
<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
|
||
<view style="font-size: 28rpx;color: #2A2B2F;font-weight: 600;">{{apply.certificateTypeName}}</view>
|
||
<view style="color:#64686E;margin-left: 10px;font-size: 26rpx;">{{apply.certificateNo}}</view>
|
||
<view class="status-view" style="margin-left: 10px;">{{apply.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;">{{ apply.issueDay }} 至 {{ apply.issueLifespan }}</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view class="text-view" style="color: #979B9F;">姓名 </view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.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;">{{apply.deviceName||'无'}}</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view class="text-view" style="color: #979B9F;">槽位 </view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.slotNo||'无'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-view" style="color: #979B9F;">位置</view>
|
||
<view class="text-view" style="color: #2A2B2F;">{{apply.deviceAddr||'无'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="apply-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">
|
||
<view class="apply-info-label">计划出国（境）地点</view>
|
||
<view class="apply-info-text">{{apply.exitAddr}}</view>
|
||
</view>
|
||
<view class="apply-info">
|
||
<view class="apply-info-label">计划出国（境）日期</view>
|
||
<view class="apply-info-text">{{apply.exitTime}}</view>
|
||
</view>
|
||
<view class="apply-info">
|
||
<view class="apply-info-label">计划回国（境）日期</view>
|
||
<view class="apply-info-text">{{apply.entryTime}}</view>
|
||
</view>
|
||
<view class="apply-info">
|
||
<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">
|
||
<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="checkProcess.length-1" 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==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;display: flex;align-items: center;justify-content: space-between;">
|
||
<view @click="submitCheck(2)" style="width: 45%;height: 80rpx;margin: 20rpx auto;background: #FDCFCB;color: #E60044;border-radius: 10rpx;text-align: center;line-height: 80rpx;border: 1px solid #E60044;">
|
||
驳回
|
||
</view>
|
||
<view @click="submitCheck(1)" style="width: 45%;height: 80rpx;margin: 20rpx auto;background: #1F72EA;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 { checkCertificateApplyApi,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:0,
|
||
useType:1,
|
||
applyReason:"",
|
||
applyLocation:"",
|
||
proxyAble:1,
|
||
proxyName:"",
|
||
proxyNumber:"",
|
||
applyDetail:"",
|
||
|
||
idNumber:"",
|
||
birthday:"",
|
||
birthAddr:"",
|
||
certificateType:"",
|
||
certificateNo:"",
|
||
issueAddr:"",
|
||
issueDay:"",
|
||
issueLifespan:"",
|
||
isEle:0
|
||
},
|
||
checkProcess:[],
|
||
showPic:false,
|
||
imagerUrl:""
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.apply = JSON.parse(options.apply)
|
||
console.log(this.apply)
|
||
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
|
||
}else{
|
||
this.checkProcess = []
|
||
}
|
||
},
|
||
async submitCheck(type){ //checkState 1同意 2拒绝
|
||
let param = {
|
||
"checkId":this.apply.checkId,
|
||
"checkState":type
|
||
}
|
||
const res = await checkCertificateApplyApi(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>
|