<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-25 16:38:26
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-07-13 14:14:09
|
* @Description: 审批结果页面
|
-->
|
<template>
|
<div class="approval-results-page">
|
<v-navbar title="订单申请"></v-navbar>
|
<div class="steps-box">
|
<div class="steps" :style="{ width: projId == 100001 ? '70%' : '50%' }">
|
<p></p>
|
<div class="step-3">3</div>
|
<div class="step-4">4</div>
|
<div :style="{ left: '170px' }" :class="{ 'step-5': projId == 100001, 'step-6': projId == 100000 }">5</div>
|
<div class="step-6" v-if="projId == 100001">6</div>
|
</div>
|
<div class="zanwei"></div>
|
</div>
|
<!-- 审核结果 -->
|
<div class="mation-box" v-if="state == 1">
|
<p>审核中</p>
|
<p v-if="stepId==100010002">正在审核您的资料，请耐心等待</p>
|
<p v-else>正在进行大数据评估，请耐心等待</p>
|
<img src="../../../static/img/shz.png" />
|
</div>
|
<div class="mation-box" v-if="state == 2">
|
<p>审核未通过</p>
|
<p>您的资料未通过审核</p>
|
<img src="../../../static/img/shsb.png" />
|
</div>
|
<div class="mation-box" v-if="state == 3">
|
<p>审核通过</p>
|
<p>恭喜您，申请已通过！</p>
|
<img src="../../../static/img/shcg.png" />
|
</div>
|
<div class="mation-box" v-if="state == 4">
|
<p>资料重传</p>
|
<p>图片未通过审核，请重新上传</p>
|
<img src="../../../static/img/zlcc.png" />
|
</div>
|
<div class="mation-box" v-if="state == 5">
|
<p>影像资料上传</p>
|
<p>还未上传影像资料</p>
|
<img src="../../../static/img/zlcc.png" />
|
</div>
|
<template v-if="state == 1">
|
<div class="text-box" style="margin-top:20px">
|
<p v-if="stepId==100010002">提示：审核时间平均为15分钟，但在订单较多时，审核时间可能会被延长，我们会尽快为您完成审核，感谢您的理解！（退出页面不影响继续审核）</p>
|
<p v-else>提示：评估时间平均为3分钟，您可离开页面后再返回查看评估结果。若您评估结果为通过的，您可能需要根据页面提示进行下一步操作，感谢您的支持</p>
|
</div>
|
<div v-if="stepId==100010002" class="text-box">
|
<p>人工审核时间：09:00-20:00，非人工审核时间提交的订单，我们会在次日上班后第一时间处理。</p>
|
</div>
|
</template>
|
<template v-if="state == 2">
|
<div class="text-box" style="margin-top:20px">
|
<p>提示：根据目前您提供的资料和信息，我们暂时不能为您提供服务，对此我们深表遗憾，希望您能谅解，期待再次合作！</p>
|
</div>
|
</template>
|
<!-- <template v-if="state == 3">
|
<div class="our-code-box" v-if="code">
|
<p>您的分期交易验证码为</p>
|
<p>
|
<span>【</span>
|
<span class="code">{{code}}</span>
|
<span>】</span>
|
</p>
|
</div>
|
<div v-else class="our-code-box">
|
<p>订单已核销</p>
|
</div>
|
<div class="text-box" style="margin-top:20px">
|
<p>温馨提示：如您确认本次业务为您本人操作且同意按期还款，请将验证码告诉培训机构工作人员！</p>
|
</div>
|
</template> -->
|
<template v-if="state == 4">
|
<div class="text-box" style="margin-top:20px">
|
<p>提示：{{ text }}</p>
|
</div>
|
</template>
|
|
<div class="btn-box">
|
<button @click="goPage">{{ btnText }}</button>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
state: "",
|
code: "",
|
text: "",
|
timer:null,
|
stepId:"",
|
stepName:""
|
};
|
},
|
computed: {
|
btnText() {
|
console.log(this.state+'computed')
|
if (this.state == 1) {
|
return "刷新";
|
}
|
if (this.state == 2) {
|
return "返回首页";
|
}
|
if (this.state == 3) {
|
return "返回首页";
|
}
|
if (this.state == 4||this.state == 5) {
|
return "前往上传";
|
}
|
},
|
projId() {
|
return localStorage.getItem("projId");
|
},
|
},
|
watch:{
|
state(val){
|
if(val==1){
|
this.timer = setInterval(()=>{
|
this.initPage();
|
},5000)
|
}else{
|
clearInterval(this.timer);
|
}
|
}
|
},
|
created() {
|
this.initPage();
|
},
|
methods: {
|
//跳转
|
goPage() {
|
if (this.state == 1) {
|
window.location.reload(true); //强制从服务器重新加载当前页面
|
}
|
if (this.state == 2) {
|
this.$router.push("/home/index");
|
}
|
if (this.state == 3) {
|
this.$router.push("/home/index");
|
}
|
if (this.state == 4||this.state==5) {
|
//跳回资料上传页面
|
this.$router.push("/order-handling/image-upload");
|
}
|
},
|
initPage(){
|
this.$api.initAuditInfo().then(({body}) => {
|
this.state = body.auditStatus;
|
this.code = body.pickCode;
|
this.text = body.auditMsg;
|
this.stepId = body.stepId;//审核步骤 100010001-机审，100010002-人工审核
|
this.stepName = body.stepName;
|
});
|
}
|
},
|
destroyed(){
|
clearInterval(this.timer);
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.approval-results-page {
|
& {
|
min-height: 100vh;
|
}
|
.steps-box {
|
.steps {
|
width: 70%;
|
height: 65px;
|
position: relative;
|
|
p {
|
border-bottom: 1px dashed #b3b3b3;
|
height: 32px;
|
}
|
.step-3 {
|
text-align: center;
|
line-height: 30px;
|
color: #fff;
|
width: 30px;
|
height: 30px;
|
background: rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 18px;
|
top: 19px;
|
}
|
.step-4 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(113, 123, 133, 1);
|
border: 0;
|
border-radius: 50%;
|
color: #fff;
|
position: absolute;
|
left: 90px;
|
top: 19px;
|
}
|
.step-5 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
color: #fff;
|
background: rgba(113, 123, 133, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 170px;
|
top: 19px;
|
}
|
.step-6 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(81, 148, 254, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
|
border-radius: 50%;
|
position: absolute;
|
left: 240px;
|
top: 19px;
|
color: #fff;
|
}
|
.step-6-width {
|
left: 170px;
|
}
|
}
|
}
|
.mation-box {
|
& {
|
width: 343px;
|
height: 79px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
|
border-radius: 5px;
|
box-sizing: border-box;
|
padding: 16px;
|
position: relative;
|
margin: auto;
|
}
|
p:nth-of-type(1) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
margin-bottom: 10px;
|
}
|
p:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
img {
|
width: 48px;
|
height: 45px;
|
position: absolute;
|
right: 24px;
|
top: 12px;
|
}
|
}
|
.our-code-box {
|
& {
|
text-align: center;
|
margin-top: 36px;
|
}
|
p:nth-of-type(1) {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
p:nth-of-type(2) {
|
span:nth-of-type(1),
|
span:nth-of-type(3) {
|
color: #333333;
|
font-size: 14px;
|
}
|
.code {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #5194fe;
|
}
|
}
|
}
|
.text-box {
|
width: 343px;
|
margin: auto;
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
line-height: 17px;
|
p {
|
word-wrap: break-word;
|
word-break: break-all;
|
}
|
}
|
.btn-box {
|
& {
|
text-align: center;
|
margin-top: 56px;
|
}
|
button {
|
width: 320px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
