贷款-详情页接数据

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

@@ -1,124 +1,130 @@
 <template>
-  <!--申请已提交-->
-  <!--提交资料：初始化、待提交、已提交待审核、已提交审核通过-->
-  <!--预约办理时间：初始化、待预约、已预约-->
-  <!--现场办理：初始化、现场办理完成-->
-  <!--放款成功：初始化、已放款-->
   <div class="wrapper">
     <div class="header">
       <h2>申请进度</h2>
-      <a href="tel:400-234-2344">
+      <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">
+      <!--申请已提交-->
+      <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>已提交申请“中行贷”</span>
+            <span>{{ checks[0].ruleName }}</span>
           </p>
           <p class="description">
             <span>需求金额：</span>
-            <span>50万元</span>
+            <span>{{ orderPrice / 10000 }}万元</span>
             <span>|</span>
-            <span>小静</span>
+            <span>{{ orderUserName }}</span>
           </p>
-          <p class="time">2020-12-23 19:23</p>
+          <p class="time">{{ checks[0].updatedAt }}</p>
           <p class="tip">1个工作日内会有专席客服与您取得联系</p>
         </div>
       </li>
-      <template v-if="true">
-        <li class="flow flow-1 has-border active">
+      <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="false">
+            <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>提交资料</span>
-              <span style="font-weight: 600; color: #D73634;" v-if="false">（等待资料核对）</span>
-              <span style="color: #4BD863;" v-if="true">（通过审核）</span>
+              <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="true">上传资料</router-link>
+            <router-link class="jump-attest" :to="{path: '/loan/attest/' + id}" v-if="checks[1].checkStatus === 1">
+              上传资料
+            </router-link>
             <template>
-              <p class="description">
-                <span v-if="false">主贷人征信报告、房产信息凭证照片</span>
-                <span v-else>已上传主贷人征信报告、房产信息凭证</span>
+              <p class="description" v-if="checks[1].checkStatus === 2">
+                <span v-if="checks[2].checkStatus === 0">主贷人征信报告、房产信息凭证照片</span>
+                <span v-if="checks[2].checkStatus === 1">已上传主贷人征信报告、房产信息凭证</span>
               </p>
               <div class="attest-wrap">
-                <div v-for="i in 2" :key="i">
-                  <img src="" alt="">
+                <div v-for="(item, index) in [...checks[1].checkContent1, ...checks[1].checkContent2]" :key="index">
+                  <img :src="item" alt="">
                 </div>
               </div>
-              <p class="time">2020-12-23 19:23</p>
+              <p class="time">{{ checks[1].updatedAt }}</p>
             </template>
           </div>
         </li>
-        <li class="flow flow-2 has-border active">
+        <!--预约办理时间：初始化、待预约、已预约-->
+        <li class="flow flow-2 has-border" :class="checks[2].checkStatus === 0 ? 'init' : 'active'" v-if="checks[2]">
           <div class="left-wrap">
-            <img src="./init_flow_2@2x.png" alt="" v-if="false">
+            <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>预约办理时间</span>
+              <span>{{ checks[2].ruleName }}</span>
             </p>
-            <router-link class="jump-bespeak" :to="{path: '/loan/bespeak/' + id}" v-if="true">预约时间</router-link>
+            <router-link class="jump-bespeak" :to="{path: '/loan/bespeak/' + id}" v-if="checks[2].checkStatus === 1">预约时间</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>
+              <p class="time">{{ checks[2].updatedAt }}</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>
+              <p class="time">{{ checks[2].updatedAt }}</p>
             </template>
           </div>
         </li>
-        <li class="flow flow-3 has-border init">
+        <!--现场办理：初始化、现场办理完成-->
+        <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="false">
+            <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>现场办理</span>
+              <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">2020-12-23 19:23</p>
+            <p class="time">{{ checks[3].updatedAt }}</p>
           </div>
         </li>
-        <li class="flow flow-4 init">
+        <!--放款成功：初始化、已放款-->
+        <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="false">
+            <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>放款成功</span>
+              <span>{{ checks[4].ruleName }}</span>
             </p>
             <p class="success">成功放款金额：30万元人民币</p>
           </div>
         </li>
       </template>
-      <li class="fail" v-if="false">因xxxxxxx原因，未成功放款</li>
+      <li class="fail" v-if="orderFinalStatus === 2">因xxxxxxx原因，未成功放款</li>
       <li class="order-info border-top-1px">
-        <p>创建时间：2020-12-23 19:23</p>
-        <p>申请单号：202012337688b</p>
+        <p>创建时间：{{ createdAt }}</p>
+        <p>申请单号：{{ orderNumber }}</p>
       </li>
     </ul>
   </div>
@@ -137,7 +143,13 @@
     },
     data () {
       return {
-        detailData: {},
+        orderProduceName: '',
+        orderPrice: 0,
+        orderUserName: '',
+        createdAt: '',
+        orderNumber: '',
+        orderFinalStatus: 0, // 订单最终状态: 0-进行中 1-成功 2-失败
+        commanyPhone: '',
         checks: []
       }
     },
@@ -150,7 +162,19 @@
     },
     methods: {
       funInit () {
-        getOrderDetail(this.id).then()
+        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
+          }
+        })
       }
     }
   }