financ-details.vue

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-27 18:07:12
 * @LastEditTime: 2019-10-22 13:38:33
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="refund" class="public-style" title="还款计划">
    <div class="top">
      <h-header :proportion="[5,1,1]" class="header">
        <div slot="left" class="h-header-btn" @click="goBase">
          <img src="@/assets/intoApproval/arrow.png" >
          <span>还款计划</span>
        </div>
      </h-header>
      <div class="top-content">
        <span class="top-tittle">总租金</span>
        <span class="num">{{ info.total_rental_sum|NumFormat }}</span>
        <div class="top-detail">
          <div class="left">
            <span class="line">保证金</span>
            <span>￥{{ info.deposit * product_num |NumFormat }}</span>
          </div>
          <div class="right">
            <span class="line">首付款</span>
            <span>￥{{ info.down_payment * product_num |NumFormat }}</span>
          </div>
        </div>
        <div class="clear" />
        <div class="top-detail">
          <div class="left">
            <span class="line">手续费</span>
            <span>￥{{ info.lease_charge * product_num |NumFormat }}</span>
          </div>
          <div class="right">
            <span class="line">合同期数</span>
            <span>{{ info.lease_times }}</span>
          </div>
        </div>
      </div>
    </div>
    <h-content>
      <table>
        <tr>
          <th />
          <th class="table-top">日期</th>
          <th class="table-top">现金流项目</th>
          <th class="table-top">应还金额</th>
        </tr>
        <tr v-for="(item,index) in lists" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ dateConverse(item.due_date) }}</td>
          <td>租金</td>
          <td>{{ item.rental * product_num |NumFormat }}</td>
        </tr>
      </table>
    </h-content>
  </h-view>
</template>
<script>
export default {
  name: 'FinancDetails',
  filters: {
    NumFormat: function (valueOrig) {
      var value = parseFloat(valueOrig).toFixed(2)
      if (!value) return '0.00'
      var intPart = Number(value) | 0 // 获取整数部分
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.split('.')
      // =2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分

        if (floatPart.length === 1) { // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat + floatPart
      }
    },
  },
  data () {
    return {
      confirm_status: this.$route.params.confirm_status,
      product_num: this.$route.params.product_num,
      info: {
        finance_amount: '',
        lease_charge: '',
        down_payment: '',
        lease_times: '',
        deposit: '',
      },
      lists: [],
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      let vm = this
      let url = process.env.basePath + 'prj_cashflow_query'
      let param = {
        project_id: window.sessionStorage.getItem('project_id'),
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          console.log(res)
          vm.lists = res.lists
          Object.assign(vm.info, res.info)
        }
      })
    },
    // goTrial () {
    //   this.$router.push({
    //     name: 'FinancingTrial',
    //   })
    // },
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
    goBase () {
      let confirmStatus
      if (this.confirm_status !== 'APPROVED') {
        confirmStatus = true
      } else {
        confirmStatus = false
      }
      window.localStorage.setItem('hasButtom', confirmStatus)
      this.$router.replace({
        name: 'ContractDetails',
        params: {
          isConfirm: true,
          hasButtom: confirmStatus,
          confirm_status: this.confirm_status,
        },
      })
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="less" scoped>
#refund {
  .clear {
    clear: both;
  }
  .header {
    background-color: rgba(0, 0, 0, 0);
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
      }
      span {
        margin-left: 16px;
        font-family: PingFangSC-Semibold;
        font-size: 17px;
        color: #ffffff;
        letter-spacing: 0.61px;
      }
    }
  }
  .top {
    width: 100%;
    height: 260px;
    background: url("../../assets/intoApproval/backtop.png") no-repeat;
    background-size: 100% 285px;
    .top-detail {
      margin-top: 12px;
      width: 260px;
      .line {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        height: 12px;
        color: rgba(255, 255, 255, 0.6);
        margin-right: 40px;
      }
      .line::before {
        content: "";
        display:inline-block;
        width:2px;
        height:12px;
        background-color: #ffffff;
        position: relative;
        left: -5px;
        top:2px;
      }
      .left {
        float: left;
        span:last-child {
          display: block;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          margin-top: 8px;
        }
      }
      .right {
        float: right;
        span:last-child {
          display: block;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          margin-top: 8px;
        }
      }
    }
    .top-content {
      width: 300px;
      margin: 0 auto;
      .top-tittle {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0;
      }
      .num {
        display: block;
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #ffffff;
        line-height: 44px;
        height: 44px;
        margin-bottom: 24px;
        margin-top: 8px;
      }
    }
  }
  table {
    width: 100%;
    text-align: center;
    .table-top {
      font-weight: bold
    }
    th {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #d9dbdf;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
    }
    th:first-child {
      width: 15%;
    }
    td:first-child {
      font-family: PingFangSC-Semibold;
      font-size: 20px;
      color: #326aaf;
    }
    td:not(:first-child) {
      border-bottom: 1px solid #d9dbdf;
    }
    td:last-child {
      font-family: PingFangSC-Semibold;
      font-size: 17px;
      color: #336bb0;
      letter-spacing: 0;
    }
    td {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
    }
  }
}
</style>