|
|
@@ -1,477 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="wrapper">
|
|
|
- <div class="header">
|
|
|
- <h2>申请进度</h2>
|
|
|
- <a :href="'tel:' + commanyPhone">
|
|
|
- <img src="./image/btn_dianhua@2x.png" alt="">
|
|
|
- <span>专属客服</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <ul class="content">
|
|
|
- <!--申请已提交-->
|
|
|
- <li class="flow flow-0 has-border active" v-if="checks[0]">
|
|
|
- <div class="left-wrap">
|
|
|
- <img src="./image/active_flow_0@2x.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="right-wrap">
|
|
|
- <p class="title">
|
|
|
- <span>{{ checks[0].ruleName }}</span>
|
|
|
- </p>
|
|
|
- <p class="description">
|
|
|
- <span>需求金额：</span>
|
|
|
- <span>{{ orderPrice / 10000 }}万元</span>
|
|
|
- <span>|</span>
|
|
|
- <span>{{ orderUserName }}</span>
|
|
|
- </p>
|
|
|
- <p class="time">{{ checks[0].updatedAt }}</p>
|
|
|
- <p class="tip">1个工作日内会有专席客服与您取得联系</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <template v-if="orderFinalStatus !== 2">
|
|
|
- <!--提交资料：初始化、待提交、已提交待审核、已提交审核通过 checkStatus: 0-初始化 1-进行中 2-成功 3-失败-->
|
|
|
- <li class="flow flow-1 has-border" :class="checks[1].checkStatus === 0 ? 'init' : 'active'" v-if="checks[1]">
|
|
|
- <div class="left-wrap">
|
|
|
- <img src="./image/init_flow_1@2x.png" alt="" v-if="checks[1].checkStatus === 0">
|
|
|
- <img src="./image/active_flow_1@2x.png" alt="" v-else>
|
|
|
- </div>
|
|
|
- <div class="right-wrap">
|
|
|
- <p class="title">
|
|
|
- <span>{{ checks[1].ruleName }}</span>
|
|
|
- <template v-if="checks[1].checkStatus === 2">
|
|
|
- <!--提交资料状态码2 && 预约办理状态吗 0 等待审核-->
|
|
|
- <span style="font-weight: 600; color: #D73634;" v-if="checks[2].checkStatus === 0">（等待资料核对）</span>
|
|
|
- <!--提交资料状态码2 && 预约办理状态吗 1 已审核-->
|
|
|
- <span style="color: #4BD863;" v-if="checks[2].checkStatus === 1">（通过审核）</span>
|
|
|
- </template>
|
|
|
- </p>
|
|
|
- <router-link class="jump-attest" :to="{path: '/loan/attest/' + id}" v-if="checks[1].checkStatus === 1">
|
|
|
- 上传资料
|
|
|
- </router-link>
|
|
|
- <template>
|
|
|
- <p class="description" v-if="checks[1].checkStatus === 2">
|
|
|
- <span>{{ checks[1].checkRemark }}</span>
|
|
|
- </p>
|
|
|
- <div class="attest-wrap">
|
|
|
- <div v-for="(item, index) in [...checks[1].checkContent1, ...checks[1].checkContent2]" :key="index">
|
|
|
- <img :src="item" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <p class="time">{{ checks[1].updatedAt }}</p>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <!--预约办理时间：初始化、待预约、已预约-->
|
|
|
- <li class="flow flow-2 has-border" :class="checks[2].checkStatus === 0 ? 'init' : 'active'" v-if="checks[2]">
|
|
|
- <div class="left-wrap">
|
|
|
- <img src="./image/init_flow_2@2x.png" alt="" v-if="checks[2].checkStatus === 0">
|
|
|
- <img src="./image/active_flow_2@2x.png" alt="" v-else>
|
|
|
- </div>
|
|
|
- <div class="right-wrap">
|
|
|
- <p class="title">
|
|
|
- <span>{{ checks[2].ruleName }}</span>
|
|
|
- </p>
|
|
|
- <router-link class="jump-bespeak" :to="{path: '/loan/bespeak/' + id}" v-if="checks[2].checkStatus === 1">
|
|
|
- 预约时间
|
|
|
- </router-link>
|
|
|
- <template v-if="checks[2].checkStatus === 1">
|
|
|
- <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">{{ checks[2].updatedAt }}</p>
|
|
|
- </template>
|
|
|
- <template v-if="checks[2].checkStatus === 2">
|
|
|
- <p class="description">
|
|
|
- <span>您已预约：2021-02-23 上午9:30</span>
|
|
|
- </p>
|
|
|
- <p class="store">到“文三路支行”网点办理</p>
|
|
|
- <p class="time">{{ checks[2].updatedAt }}</p>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <!--现场办理：初始化、现场办理完成-->
|
|
|
- <li class="flow flow-3 has-border" :class="checks[3].checkStatus === 0 ? 'init' : 'active'" v-if="checks[3]">
|
|
|
- <div class="left-wrap">
|
|
|
- <img src="./image/init_flow_3@2x.png" alt="" v-if="checks[3].checkStatus === 0">
|
|
|
- <img src="./image/active_flow_3@2x.png" alt="" v-else>
|
|
|
- </div>
|
|
|
- <div class="right-wrap">
|
|
|
- <p class="title">
|
|
|
- <span>{{ checks[3].ruleName }}</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">{{ checks[3].updatedAt }}</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <!--放款成功：初始化、已放款-->
|
|
|
- <li class="flow flow-4" :class="checks[4].checkStatus === 0 ? 'init' : 'active'" v-if="checks[4]">
|
|
|
- <div class="left-wrap">
|
|
|
- <img src="./image/init_flow_4@2x.png" alt="" v-if="checks[4].checkStatus === 0">
|
|
|
- <img src="./image/active_flow_4@2x.png" alt="" v-else>
|
|
|
- </div>
|
|
|
- <div class="right-wrap">
|
|
|
- <p class="title">
|
|
|
- <span>{{ checks[4].ruleName }}</span>
|
|
|
- </p>
|
|
|
- <p class="success">成功放款金额：30万元人民币</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </template>
|
|
|
- <li class="fail" v-if="orderFinalStatus === 2">因xxxxxxx原因，未成功放款</li>
|
|
|
- <li class="order-info border-top-1px">
|
|
|
- <p>创建时间：{{ createdAt }}</p>
|
|
|
- <p>申请单号：{{ orderNumber }}</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { getOrderDetail } from './api'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'backup-detail',
|
|
|
- props: {
|
|
|
- id: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- orderProduceName: '',
|
|
|
- orderPrice: 0,
|
|
|
- orderUserName: '',
|
|
|
- createdAt: '',
|
|
|
- orderNumber: '',
|
|
|
- orderFinalStatus: 0, // 订单最终状态: 0-进行中 1-成功 2-失败
|
|
|
- commanyPhone: '',
|
|
|
- checks: []
|
|
|
- }
|
|
|
- },
|
|
|
- created () {
|
|
|
- this.funInit()
|
|
|
- },
|
|
|
- async mounted () {
|
|
|
- await this.$nextTick()
|
|
|
- this.$refreshTitle('进度查询')
|
|
|
- },
|
|
|
- methods: {
|
|
|
- funInit () {
|
|
|
- getOrderDetail(this.id).then(res => {
|
|
|
- if (res.status) {
|
|
|
- const { orderProduceName, orderPrice, orderUserName, createdAt, orderNumber, orderFinalStatus, commanyPhone, checks } = res.data
|
|
|
- this.orderProduceName = orderProduceName
|
|
|
- this.orderPrice = orderPrice
|
|
|
- this.orderUserName = orderUserName
|
|
|
- this.createdAt = createdAt
|
|
|
- this.orderNumber = orderNumber
|
|
|
- this.orderFinalStatus = orderFinalStatus
|
|
|
- this.commanyPhone = commanyPhone
|
|
|
- this.checks = checks
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<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
