更新帮助与反馈和合同还款

src/pages/contractRepayment/refund.vue

+<!--
+ * @Author: your name
+ * @Date: 2019-10-31 09:49:57
+ * @LastEditTime: 2019-11-01 09:36:50
+ * @LastEditors: Please set LastEditors
+ * @Description: 还款
+ * @FilePath:
+ -->
+<template>
+  <h-view id="repay-plan" class="public-style">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
+        <span>融资明细</span>
+      </div>
+    </h-header>
+    <div class="center">
+      <div class="plan-name">
+        <div class="header">还款计划</div>
+      </div>
+    </div>
+    <h-content id="content" class="plan-content">
+      <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
+      <div
+        v-for="(item,index) in lists"
+        :key="index"
+        :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}"
+      >
+        <div
+          :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}"
+        >{{ index + 1 }}期</div>
+        <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt class="left" >
+        <img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt class="left" >
+        <img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt class="left" >
+        <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt class="left" >
+        <div class="time">
+          <p>{{ selectYear(item.repayment_date) }}</p>
+          <span>{{ selectMonth(item.repayment_date) }}</span>
+        </div>
+        <div class="message">
+          <p class="top">
+            现金流项目
+            <span>{{ item.cf_item_name }}</span>&nbsp; &nbsp; 支付
+            <span>{{ item.pay_method }}</span>
+          </p>
+          <div class="name">
+            <p>应还金额</p>
+            <p>已还金额</p>
+          </div>
+          <div class="number">
+            <span>{{ item.due_amount|currency }}</span>
+            <span
+              :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}"
+            >{{ item.received_amount|currency }}</span>
+          </div>
+        </div>
+
+        <img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt class="status" >
+        <img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt class="status" >
+      </div>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+      //  已结清 black , 逾期 orange , 还款中 blue , 未还款 green
+      statu: 'orange',
+      info: {},
+      lists: [
+        {
+          due_amount: '48800',
+          cf_item: '2',
+          cf_item_name: '首付款',
+          received_amount: '0',
+          pay_method: '自主还款',
+          repayment_date: '2019/10/17',
+        },
+        {
+          due_amount: '4000',
+          cf_item: '3',
+          cf_item_name: '手续费',
+          received_amount: '400',
+          pay_method: '代扣',
+          repayment_date: '2020/10/12',
+        },
+        {
+          due_amount: '400',
+          cf_item: '14',
+          cf_item_name: 'gps费用',
+          received_amount: '200',
+          pay_method: '自主还款',
+          repayment_date: '2021/10/19',
+        },
+      ],
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.getRefund()
+    })
+  },
+  methods: {
+    selectMonth (e) {
+      let arr = e.split('/')
+      return `${arr[1]}-${arr[2]}`
+    },
+    selectYear (e) {
+      return e.substring(0, 4)
+    },
+    getRefund () {
+      let vm = this
+      let url = process.env.basePath + 'con_equip_repayment_plan'
+      let param = {
+        contract_id: this.$route.params.contract_id,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.lists = res.lists
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang='less' >
+#repay-plan {
+  .h-header {
+    background-color: #1d3fff;
+    .h-header-btn {
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+      }
+
+      span {
+        font-family: PingFangSC-Semibold;
+        margin-left: 16px;
+        font-size: 17px;
+        letter-spacing: 0.61px;
+        line-height: 24px;
+      }
+    }
+  }
+
+  .plan-name {
+    position: relative;
+    background-color: #1d3fff;
+    width: 100%;
+    img {
+      position: absolute;
+      right: 30px;
+      top: 12px;
+      height: 20px;
+      transition: 0s;
+    }
+
+    .rotate {
+      transform: rotate(180deg);
+    }
+
+    .header {
+      position: relative;
+      height: 48px;
+      line-height: 48px;
+      background-color: #fff;
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #21254c;
+      font-weight: 700;
+      text-indent: 2em;
+      border-radius: 24px 0 0 0;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 16px;
+        left: 15px;
+        width: 4px;
+        height: 16px;
+        background: #1d3fff;
+      }
+    }
+  }
+
+  .plan-content {
+    background-color: #fff;
+    padding: 0px 11px;
+
+    .plan-list {
+      position: relative;
+      background-color: #f7f7f7;
+      height: 106px;
+      display: flex;
+      padding-right: 20px;
+      padding-left: 10px;
+      padding-top: 16px;
+      margin-bottom: 10px;
+      .message {
+        flex: 12;
+      }
+      .left {
+        height: 30px;
+        position: absolute;
+        left: -8px;
+        top: 24px;
+      }
+
+      .status {
+        position: absolute;
+        width: 18px;
+        right: -3px;
+        top: -5px;
+      }
+
+      .period {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(75, 74, 75, 0.5);
+        border-radius: 4px 0 4px 0;
+        width: 30px;
+        height: 15px;
+        color: #fff;
+        font-family: PingFangSC-Semibold;
+        font-size: 12px;
+        letter-spacing: 1.09px;
+        line-height: 15px;
+        text-align: center;
+      }
+
+      .orange {
+        background: rgba(253, 182, 47, 0.5);
+      }
+
+      .blue {
+        background-color: rgba(29, 63, 255, 0.5);
+      }
+
+      .green {
+        background-color: rgba(27, 162, 97, 0.5);
+      }
+      .top {
+        font-family: PingFangSC-Regular;
+        font-size: 13px;
+        color: rgba(56, 63, 69, 0.6);
+        letter-spacing: 0;
+        span {
+          margin-left: 20px;
+          font-family: PingFangSC-Regular;
+          font-size: 13px;
+          color: #4b4a4b;
+          letter-spacing: 0;
+        }
+      }
+      .time {
+        flex: 3;
+
+        p {
+          font-family: DIN-Regular;
+          font-size: 12px;
+          color: rgba(56, 63, 69, 0.6);
+          margin-bottom: 4px;
+          margin-top: 5px;
+        }
+
+        span {
+          font-family: DIN-Bold;
+          font-weight: 700;
+          font-size: 14px;
+          color: #21254c;
+        }
+      }
+
+      .name {
+        opacity: 0.6;
+        font-family: PingFangSC-Regular;
+        font-size: 13px;
+        color: #4b4a4b;
+        float: left;
+        p {
+          margin-top: 17px;
+        }
+      }
+
+      .number {
+        text-align: right;
+        font-family: PingFangSC-Regular;
+        font-size: 13px;
+        color: #4b4a4b;
+        float: right;
+        p {
+          margin-bottom: 17px;
+        }
+        span {
+          display: block;
+          margin-top: 18px;
+        }
+        span.orang {
+          color: rgb(253, 182, 47);
+          font-weight: 700;
+          font-family: PingFangSC-Semibold;
+        }
+        span.blu {
+          color: #1d3fff;
+          font-weight: 700;
+          font-family: PingFangSC-Semibold;
+        }
+        span.gree {
+          color: #1ba261;
+        }
+      }
+    }
+
+    .or {
+      background-color: rgba(253, 182, 47, 0.05);
+    }
+
+    .bl,
+    .gr {
+      background: #ffffff;
+      box-shadow: 0 1px 5px 0 rgba(219, 219, 219, 0.69);
+    }
+  }
+}
+</style>

src/pages/contractRepayment/repay-plan.vue

@@ -34,7 +34,6 @@
 <script>
 
 export default {
-  name: 'RepayPlan',
   components: {
   },
   data () {

src/pages/contractStart/add-car.vue

@@ -21,6 +21,14 @@
                 <div slot="name">发动机号</div>
                 <input slot="content" v-model="info.engine" placeholder="自动识别发动机号" >
               </item>
+              <item>
+                <div slot="name">车辆型号 </div>
+                <input slot="content" v-model="info.type" placeholder="自动识别车辆型号" >
+              </item>
+              <item>
+                <div slot="name">合格证编号 </div>
+                <input slot="content" v-model="info.number" placeholder="自动识别合格证编号" >
+              </item>
               <item>
                 <div slot="name">厂商型号</div>
                 <input
@@ -268,10 +276,12 @@ export default {
       ],
       info: {
         contract_id: '',
-        frame_number: '1',
-        engine: '1',
-        manufacturer: '1',
-        license_plate_number: '1',
+        frame_number: '',
+        engine: '',
+        manufacturer: '',
+        license_plate_number: '',
+        type: '',
+        number: '',
       },
       detail: {
         product_num: '',
@@ -621,7 +631,7 @@ export default {
     .down {
       position: relative;
       width: 314px;
-      height: 456px;
+      height: 536px;
       background-size: 301px 24.7px;
       background-color: #fff;
     }

src/pages/help/detail.vue

 <template>
   <h-view id="help-detail" class="public-style">
-    <h-header :proportion="[5,1,1]" class="header">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
         <span>帮助与反馈</span>
@@ -21,28 +21,11 @@ export default {
 </script>
 <style lang="less" scoped>
 #help-detail{
-    .header {
-    background-color: #00469c;
-    color: #ffffff;
-    .h-header-btn {
-      img {
-        width: 16px;
-        height: 16px;
-      }
-      span {
-        font-family: PingFangSC-Semibold;
-        font-size: 17px;
-        color: #ffffff;
-        letter-spacing: 0.61px;
-        margin-left: 16px;
-      }
-    }
-  }
   .my-content{
       h4{
     font-family: PingFangSC-Semibold;
 font-size: 15px;
-color: #00469C;
+color: @headerColor;
 letter-spacing: 0;
 line-height: 20px;
 margin-top:16px;
@@ -52,7 +35,7 @@ position: relative;
 h4::before{
     content:'';
     display:inline-block;
-    background-color: #00469C;
+    background-color: @headerColor;
     position: absolute;
     top:5px;
     left:24px;

src/pages/help/feedback.vue

 <template>
   <h-view id="help-detail" class="public-style">
-    <h-header :proportion="[5,1,1]" class="header">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
-        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" />
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
         <span>帮助与反馈</span>
       </div>
     </h-header>
@@ -19,19 +19,19 @@
           <span>添加图片说明</span>
           <div class="file-content">
             <div class="file">
-              <img src="@/assets/help/1.jpg" />
+              <img src="@/assets/help/1.jpg" >
             </div>
             <div class="file">
-              <img src="@/assets/help/1.jpg" />
+              <img src="@/assets/help/1.jpg" >
             </div>
             <div class="file">
-              <img src="@/assets/help/1.jpg" />
+              <img src="@/assets/help/1.jpg" >
             </div>
             <div class="file">
-              <img src="@/assets/help/1.jpg" />
+              <img src="@/assets/help/1.jpg" >
             </div>
             <div class="file">
-              <img class="photo" src="@/assets/help/photo.png" />
+              <img class="photo" src="@/assets/help/photo.png" >
             </div>
           </div>
         </div>
@@ -44,7 +44,7 @@
   </h-view>
 </template>
 <script>
-export default {};
+export default {}
 </script>
 <style lang="less" scoped>
 #help-detail {
@@ -54,28 +54,11 @@ export default {};
     color: #b4b4b5;
     letter-spacing: 0;
   }
-  .header {
-    background-color: #00469c;
-    color: #ffffff;
-    .h-header-btn {
-      img {
-        width: 16px;
-        height: 16px;
-      }
-      span {
-        font-family: PingFangSC-Semibold;
-        font-size: 17px;
-        color: #ffffff;
-        letter-spacing: 0.61px;
-        margin-left: 16px;
-      }
-    }
-  }
   .my-content {
     h4 {
       font-family: PingFangSC-Semibold;
       font-size: 15px;
-      color: #00469c;
+      color: @headerColor;
       letter-spacing: 0;
       line-height: 20px;
       margin-top: 16px;
@@ -85,7 +68,7 @@ export default {};
     h4::before {
       content: "";
       display: inline-block;
-      background-color: #00469c;
+      background-color: @headerColor;
       position: absolute;
       top: 5px;
       left: 15px;
@@ -170,7 +153,7 @@ export default {};
   }
   .bottom-button {
     color: #fff;
-    background-color: #00469c;
+    background-color: @headerColor;
   }
 }
 </style>

src/pages/help/help-list.vue

 <template>
   <h-view id="help-list" class="public-style">
-    <h-header :proportion="[5,1,1]" class="header">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
         <span>帮助与反馈</span>
@@ -166,7 +166,7 @@ export default {
           position: relative;
           font-family: PingFangSC-Regular;
           font-size: 13px;
-          color: #00469c;
+          color: @headerColor;
           letter-spacing: 0;
           line-height: 20px;
           text-indent: 8px;
@@ -180,7 +180,7 @@ export default {
         left: 0px;
         width:4px;
         height:12px;
-        background-color:#00469C;
+        background-color:@headerColor;
       }
         img{
           width: 20px;
@@ -222,7 +222,7 @@ export default {
   .bottom-button{
     font-family: PingFangSC-Regular;
 font-size: 15px;
-color: #00469C;
+color: @headerColor;
 line-height: 20px;
     img{
   width:16px;

src/pages/pay/firstPay/pay-entry.vue

@@ -27,8 +27,10 @@
             <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
           </section>
         </item>
-        <item v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`three${index}`)">
-          <div slot="name" style="flex=3"> <img :src="selectImg(item)" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})</div>
+        <item
+          v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index"
+          @click.native="isSelect(`three${index}`)">
+          <div slot="name" style="flex=3"> <img :src="selectImg(item)" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})<img v-show="item.recommand" class="push" src="@/assets/payment/push.png"></div>
           <section slot="content">
             <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt="">
             <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt="">
@@ -70,6 +72,7 @@ export default {
       money: '',
       select: 'three0',
       name: '',
+      recommand: false,
       flag: false, // 用于判断是否有农业银行卡
       lists: [],
     }
@@ -110,6 +113,7 @@ export default {
       if (e.bank_full_name.indexOf('建设') !== -1) {
         return js
       } else if (e.bank_full_name.indexOf('农业') !== -1) {
+        e.recommand = true
         return ny
       } else if (e.bank_full_name.indexOf('光大') !== -1) {
         return gd
@@ -185,6 +189,12 @@ export default {
 </script>
 <style lang='less' >
 #pay-entry {
+  .push{
+    position: absolute;
+    top:10px;
+    margin-left:10px;
+    width:35px;
+  }
   .h-header {
     background-color: #00469C;
     .h-header-btn {
@@ -257,6 +267,7 @@ export default {
             width: 30px;
             display: block;
             float: left;
+            position: relative;
             margin: 12px 8px 0 3px;
           }
         }

src/pages/pay/payment/pay-entry.vue

@@ -28,7 +28,7 @@
           </section>
         </item>
         <item v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`three${index}`)">
-          <div slot="name" style="flex=3"> <img :src="selectImg(item)" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})</div>
+          <div slot="name" style="flex=3"> <img :src="selectImg(item)" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})<img v-show="item.recommand" class="push" src="@/assets/payment/push.png"></div>
           <section slot="content">
             <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt="">
             <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt="">
@@ -121,6 +121,7 @@ export default {
       if (e.bank_full_name.indexOf('建设') !== -1) {
         return js
       } else if (e.bank_full_name.indexOf('农业') !== -1) {
+        e.recommand = true
         return ny
       } else if (e.bank_full_name.indexOf('光大') !== -1) {
         return gd

src/pages/userBind/np/bankInfo.vue

@@ -210,7 +210,8 @@ export default {
             height: 190px;
             box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
             border-radius: 6px;
-            background-size: 320px 190px;
+            background-size: 370px 240px;
+            background-position: -20px;
             .card-info {
               font-family: PingFangSC-Medium;
               color: #ffffff;

src/pages/userBind/org/bankInfo.vue

@@ -218,7 +218,8 @@ export default {
             height: 190px;
             box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
             border-radius: 6px;
-            background-size: 320px 190px;
+            background-size: 370px 240px;
+            background-position: -20px;
             .card-info {
               font-family: PingFangSC-Medium;
               color: #ffffff;

src/router/index.js

@@ -78,7 +78,7 @@ import ReimburseDetail from '@/pages/reimburseMyself/reimburse-detail'
 // 合同还款
 import ContractRepayment from '@/pages/contractRepayment/contract-repayment'
 import RepayDetails from '@/pages/contractRepayment/repay-details'
-import RepayPlan from '@/pages/contractRepayment/repay-plan'
+import RepayPlan from '@/pages/contractRepayment/refund'
 
 // 发车申请
 import StartList from '@/pages/contractStart/start-list'