trial-repay-plan.vue

<!--
 * @Author: your name
 * @Date: 2019-10-30 19:29:24
 * @LastEditTime: 2019-11-13 10:34:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 -->
<template>
  <h-view id="repay-plan-trial" 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="total">
        <div class="sum">
          <div>融资额</div>
          <p>{{ info.finance_amount | currency }}</p>
          <img src="@/assets/contractInquire/num.png" alt="">
          <h3><span>{{ info.lease_times }}期</span></h3>
        </div>
        <div class="single">
          <div><h4>保证金</h4><p>￥{{ info.deposit | currency }}</p></div>
          <div><h4>首付款</h4><p>￥{{ info.down_payment | currency }}</p></div>
          <div><h4>手续费</h4><p>￥{{ info.lease_charge | currency }}</p></div>
        </div>
      </div>
      <div class="plan-name">
        <div class="header">还款计划</div>
        <img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
      </div>
    </div>
    <h-content id="content" class="plan-content">
      <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
      <div v-for="(item,index) in repayLists" :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>{{ item.due_date.substr(0,4) }}</p>
          <span>{{ dateConverse(item.due_date).substr(5,10) }}</span>
        </div>
        <div class="name">
          <span>款项</span>
          <span>租金</span>
        </div>
        <div class="number">
          <span>应还金额</span>
          <span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">{{ item.rental |currency }}</span>
        </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 {
  name: 'RepayPlan',
  components: {
  },
  data () {
    return {
      //  已结清 black , 逾期 orange , 还款中 blue , 未还款 green
      statu: 'orange',
      info: {},
      show: false,
      height: 0,
      oldHeight: 0,
      newHeight: 0,
      repayLists: [], // 每期还款
    }
  },
  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'FinancingDetails') {
        vm.repayQuery()
      }
    })
    next()
  },
  methods: {
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
    // 根据还款期排序
    arrSort (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    showDetails () {
      if (!this.flag) {
        this.flag = true
        this.height = document.getElementsByClassName('total')[0].clientHeight
        this.oldHeight = document.getElementById('content').clientHeight
        this.newHeight = this.height + this.oldHeight
      }
      if (!this.show) {
        this.show = !this.show
        document.getElementById('content').style.height = this.newHeight + 'px'
        document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
        document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
        document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
        document.getElementById('content').style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
      } else {
        this.show = !this.show
        document.getElementById('content').style.height = this.oldHeight + 'px'
        document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
        document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
        document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
        document.getElementById('content').style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
      }
    },
    // 还款计划查询
    repayQuery () {
      let vm = this
      let url = $config.basePath + 'prd_repayment_plan'
      let param = {
        quotation_id: vm.$route.params.quotation_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.info = res.info
          vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },

}
</script>
<style lang='less'>
#repay-plan-trial {
  .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;
      }
    }
  }

  .total {
    position: relative;
    background-color: #1D3FFF;
    height: 138px;
    color: #fff;
    background-image: url(../../assets/contractInquire/background.png);
    background-size: cover;

    .sum {
    padding: 0 20px;
      div {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        padding-top: 12px;
        padding-bottom: 10px;
      }

      p {
        font-family: Verdana-BoldItalic;
        font-size: 20px;
        font-weight: 700;
        font-style: italic;
        margin-left: -4px;
      }

      img {
        width: 75px;
        position: absolute;
        right: 20px;
        top: 25px;
      }

      h3 {
        position: absolute;
        font-weight: 700;
        margin: 0;
        right: 42px;
        top: 32px;
        color: #1D3FFF;
        font-family: PingFangSC-Semibold;
        font-size: 14px;

        span {
          font-style: italic;
          margin-right: 5px;
        }
      }
    }

    .single {
      display: flex;
      margin-top: 28px;

      div {
        flex: auto;
        text-align: center;

        h4 {
          opacity: 0.8;
          margin: 0;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #FFFFFF;
          margin-bottom: 8px;
        }

        p {
          font-family: Verdana;
          font-size: 14px;
          color: #FFFFFF;
          font-weight: 700;
        }
      }
    }

  }

  .plan-name {
    position: relative;
    background-color: #1D3FFF;
    margin-top: -2px;

    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: 78px;
      display: flex;
      padding-right: 20px;
      padding-left: 10px;
      padding-top: 20px;
      margin-bottom: 10px;

      .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,.5);
        border-radius: 4px 0 4px 0;
        // width: 30px;
        padding: 1px 2px;
        height: 20px;
        color: #fff;
        font-family: PingFangSC-Semibold;
        font-size: 12px;
        letter-spacing: 1.09px;
        line-height: 20px;
        text-align: center;
      }

      .orange {
        background: rgba(253, 182, 47,.5);
      }

      .blue {
        background-color: rgba(29, 63, 255,.5);
      }

      .green {
        background-color: rgba(27, 162, 97,.5);
      }

      .time {
        // flex: 5;

        p {
          font-family: DIN-Regular;
          font-size: 12px;
          color: rgba(56,63,69,0.60);
          margin-bottom: 4px;
          margin-top: 8px;
        }

        span {
          font-family: DIN-Bold;
          font-weight: 700;
          font-size: 14px;
          color: #21254C;
        }
      }

      .name {
        // flex: 9;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #4B4A4B;
        padding-top: 20px;
        margin-left: 22px;
        span:nth-of-type(2) {
          margin-left: 8px;
        }
        span:nth-of-type(1) {
          opacity: 0.6;
        }
      }

      .number {
        // flex: 9;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #4B4A4B;
        padding-top: 20px;
        margin-left: 40px;
        span:nth-of-type(2) {
          margin-left: 8px;
        }
        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,.05);
    }

    .bl,.gr {
      background: #FFFFFF;
      box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
    }

  }

}
</style>