|
|
@@ -1,5 +1,127 @@
|
|
|
<template>
|
|
|
- <div></div>
|
|
|
+ <!--申请已提交-->
|
|
|
+ <!--提交资料：初始化、待提交、已提交待审核、已提交审核通过-->
|
|
|
+ <!--预约办理时间：初始化、待预约、已预约-->
|
|
|
+ <!--现场办理：初始化、现场办理完成-->
|
|
|
+ <!--放款成功：初始化、已放款-->
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="header">
|
|
|
+ <h2>申请进度</h2>
|
|
|
+ <a href="tel:400-234-2344">
|
|
|
+ <img src="./image/btn_dianhua@2x.png" alt="">
|
|
|
+ <span>专属客服</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <ul class="content">
|
|
|
+ <li class="flow flow-0 has-border active">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <img src="./image/active_flow_0@2x.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <p class="title">
|
|
|
+ <span>已提交申请“中行贷”</span>
|
|
|
+ </p>
|
|
|
+ <p class="description">
|
|
|
+ <span>需求金额：</span>
|
|
|
+ <span>50万元</span>
|
|
|
+ <span>|</span>
|
|
|
+ <span>小静</span>
|
|
|
+ </p>
|
|
|
+ <p class="time">2020-12-23 19:23</p>
|
|
|
+ <p class="tip">1个工作日内会有专席客服与您取得联系</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <template v-if="true">
|
|
|
+ <li class="flow flow-1 has-border active">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <img src="./image/init_flow_1@2x.png" alt="" v-if="false">
|
|
|
+ <img src="./image/active_flow_1@2x.png" alt="" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <p class="title">
|
|
|
+ <span>提交资料</span>
|
|
|
+ <span style="font-weight: 600; color: #D73634;" v-if="false">（等待资料核对）</span>
|
|
|
+ <span style="color: #4BD863;" v-if="true">（通过审核）</span>
|
|
|
+ </p>
|
|
|
+ <router-link class="jump-attest" :to="{path: '/attest'}" v-if="false">上传资料</router-link>
|
|
|
+ <template>
|
|
|
+ <p class="description">
|
|
|
+ <span v-if="false">主贷人征信报告、房产信息凭证照片</span>
|
|
|
+ <span v-else>已上传主贷人征信报告、房产信息凭证</span>
|
|
|
+ </p>
|
|
|
+ <div class="attest-wrap">
|
|
|
+ <div v-for="i in 2" :key="i">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="time">2020-12-23 19:23</p>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="flow flow-2 has-border active">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <img src="./image/init_flow_2@2x.png" alt="" v-if="false">
|
|
|
+ <img src="./image/active_flow_2@2x.png" alt="" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <p class="title">
|
|
|
+ <span>预约办理时间</span>
|
|
|
+ </p>
|
|
|
+ <router-link class="jump-bespeak" :to="{path: '/bespeak'}" v-if="false">预约时间</router-link>
|
|
|
+ <template v-if="false">
|
|
|
+ <p class="description">
|
|
|
+ <span>您已预约：</span>
|
|
|
+ <span style="font-weight: 600;">2021-02-23 上午9:30</span>
|
|
|
+ </p>
|
|
|
+ <p class="store" style="font-weight: 600;color: #D73634;">到“文三路支行”网点办理</p>
|
|
|
+ <p class="time">2020-12-23 19:23</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="true">
|
|
|
+ <p class="description">
|
|
|
+ <span>您已预约：2021-02-23 上午9:30</span>
|
|
|
+ </p>
|
|
|
+ <p class="store">到“文三路支行”网点办理</p>
|
|
|
+ <p class="time">2020-12-23 19:23</p>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="flow flow-3 has-border init">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <img src="./image/init_flow_3@2x.png" alt="" v-if="false">
|
|
|
+ <img src="./image/active_flow_3@2x.png" alt="" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <p class="title">
|
|
|
+ <span>现场办理</span>
|
|
|
+ </p>
|
|
|
+ <p class="description">
|
|
|
+ <i class="label">现场办理完成 银行经理预计可放款</i>
|
|
|
+ <i class="value" v-for="(str, index) in '30万元'" :key="index">{{ str }}</i>
|
|
|
+ <i class="label"> ，最终以实际放款额度为准</i>
|
|
|
+ </p>
|
|
|
+ <p class="time">2020-12-23 19:23</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="flow flow-4 init">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <img src="./image/init_flow_4@2x.png" alt="" v-if="false">
|
|
|
+ <img src="./image/active_flow_4@2x.png" alt="" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <p class="title">
|
|
|
+ <span>放款成功</span>
|
|
|
+ </p>
|
|
|
+ <p class="success">成功放款金额：30万元人民币</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ <li class="fail" v-if="false">因xxxxxxx原因，未成功放款</li>
|
|
|
+ <li class="order-info border-top-1px">
|
|
|
+ <p>创建时间：2020-12-23 19:23</p>
|
|
|
+ <p>申请单号：202012337688b</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -8,6 +130,297 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px 0 91px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 343px;
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ padding-left: 8px;
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 11px 12px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 100px 0 0 100px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 29px;
|
|
|
+ height: 29px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-left: 3px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C7AC8B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 343px;
|
|
|
+ padding-top: 23px;
|
|
|
+ margin-top: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 311px;
|
|
|
+ min-height: 68px;
|
|
|
+ margin-top: 18px;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .init {
|
|
|
+ &.has-border:before {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ top: 0;
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 1px dashed #D8D8D8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ &.has-border:before {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ top: 0;
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 1px dashed #CBB091;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-0 {
|
|
|
+ .time {
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-1 {
|
|
|
+ .title {
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ padding-top: 3px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .attest-wrap {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 6px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 41px;
|
|
|
+ height: 41px;
|
|
|
+ margin-left: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: pink;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-2 {
|
|
|
+ .store {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ word-break: break-all;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-3 {
|
|
|
+ .description {
|
|
|
+ flex-flow: row wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
|
|
|
+ .value {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #D73634;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ margin-top: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flow-4 {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-wrap {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 32px;
|
|
|
+ height: 31px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-wrap {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 6px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .description {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 6px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ color: #D73634;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .jump-attest,
|
|
|
+ .jump-bespeak {
|
|
|
+ display: block;
|
|
|
+ width: 106px;
|
|
|
+ height: 44px;
|
|
|
+ margin: 20px 0 23px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
+ box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin-top: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #D73634;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success,
|
|
|
+ .fail {
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ word-break: break-all;
|
|
|
+ color: #D73634;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success {
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fail {
|
|
|
+ width: 311px;
|
|
|
+ padding-left: 8px;
|
|
|
+ margin: 12px 0 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-info {
|
|
|
+ width: 329px;
|
|
|
+ padding: 20px 0 24px;
|
|
|
+ @include border-top-1px(#E8E8E8);
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding-left: 17px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
panyong