贷款详情页新增备份文件

htmldev/loan/src/views/loan/detail/backup-index.vue

@@ -0,0 +1,477 @@
+<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>