黄尔冬 / net_iou

<template>
  <v-layout id="CreateIOU" column justify-center align-center>
    <v-flex>
      <v-card id="IOUInfoBlock" class="IOUList" flat height="15.5rem">
        <div class="BankBlock FormLine">
          <div class="labelBlock">
            <span>借款金额</span>        
          </div>
          <div class="pickerValueBlockValue">
            <span>{{info.amount}}元</span>
          </div>
        </div>
        <div class="BankBlock FormLine">
          <div class="labelBlock">
            <span>展期开始日期</span>        
          </div>
          <div class="pickerValueBlockValue">
            <span>{{dateParse(info.endDate)}}</span>
          </div>
        </div>
        <div class="BankBlock FormLine" @click="endPickerDislpay = true">
          <div class="labelBlock">
            <span>展期结束日期</span>        
          </div>
          <div class="pickerValueBlock" v-if="!form.end" >{{'请选择'}} 
            <v-icon class="addCardIcon">keyboard_arrow_right</v-icon>
          </div>
          <div class="pickerValueBlockValue" v-if="!!form.end" >
            <span>{{form.end}}</span>
          </div>
          <DatePicker title="请选择还款日期" 
            @pickerClose="endPickerDislpay = false" 
            v-model="form.end"
            :startDate="new Date(info.endDate)"
            :display="endPickerDislpay"/>
        </div>
        <div class="BankBlock FormLine">
          <div class="labelBlock">
            <span>年化利率</span>        
          </div>
          <div class="pickerValueBlockValue">
            <span>{{info.rate * 100}}%</span>
            <span class="rateInterest">{{interest}}元</span>
          </div>
        </div>
        <div class="HintLine">
          本金{{info.amount}}+利息{{interest}}=到期本息<span>{{info.amount + interest}}</span>元
        </div>
      </v-card>
      <v-card id="IOUUsageBlock" class="IOUList" flat height="3.1rem">
        <div class="NameBlock FormLine">
          <div class="labelBlock">
            <span>借款用途</span>        
          </div>
          <div class="pickerValueBlockValue">
            {{info.usage}}
          </div>
        </div>
      </v-card>
      <v-card id="IOUTargetBlock" class="IOUList" flat height="4.2rem">
        <div class="BankBlock FormLine" >
          <div class="labelBlock">
            <span>借款人姓名</span>        
          </div>
          <div class="pickerValueBlockValue">
            <span>{{borrower}}</span>
          </div>
        </div>
      </v-card>
      <div class="ConfirmButtonBlock">
        <v-btn depressed id="ConfirmButton" :loading="isLoading" @click.native="formCheck">确认展期</v-btn>
      </div>
      <v-dialog  v-model="dialogDisplay" persistent max-width="290">
        <v-card class="hintDialog">
          <v-card-title class="headline">提示</v-card-title>
          <v-card-text class='dialogContent'>{{dialogInfo}}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="black" flat @click.native="dialogDisplay = false">知道了</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <PopUp  :display="passwordPannelDisplay" @close='passwordPannelDisplay = false'>
        <template slot="content">
          <PasswordInputer :display="passwordPannelDisplay" @passwordSubmit="submitIOU"/>
        </template>
      </PopUp>
    </v-flex>
  </v-layout>
</template>

<script>
import DatePicker from '@/components/DatePicker'
import PopUp from '@/components/PopUp'
import PasswordInputer from '@/components/PasswordInputer'
import {wechatShareSetting, dateParse, interest} from '@/helper'

export default {
  async asyncData({store, query, app, redirect}) {
    let {data} = await app.$axios.get(`/confirmedInfo?kind=credit&id=${query.id}&userId=${store.state.user.id}`)
    if (data.success) {
      return {info: data.info}
    } else {
      store.dispatch('displayMessage', data.msg)
      redirect(301, '/')
      return
    }
  },
  layout: 'lightGold',
  data:() => ({
    form: {
      end: '',
    },
    dialogDisplay: false,
    dialogInfo: '',
    endPickerDislpay: false,
    passwordPannelDisplay: false,
    isLoading: false
  }),
  head:() => ({
    title: '借条展期'
  }),
  computed: {
    borrower() {
      return (this.info.Borrower ? this.info.Borrower.name : '')
    },
    
    interest () {
      const rate = this.info.rate
      return interest(this.info.amount, rate , this.info.startDate, this.form.end)      
    }
  },
  components: {
    DatePicker,
    PopUp,
    PasswordInputer
  },
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
  },
  methods: {
    dateParse: dateParse,
    showDialog(info) {
      this.dialogInfo = info
      this.dialogDisplay = true
    },
    formCheck() {
      if (!this.form.end) {
        this.showDialog('请选择展期结束日期!')
        return false
      }
      if (new Date(this.form.end).getTime() < new Date().getTime() - 86400000) {
        this.showDialog('展期结束日期不能早于今天！')
        return false
      }
      if (new Date(this.info.endDate).getTime() > new Date(this.form.end).getTime()) {
        this.showDialog('展期结束日期最早为展期开始当日')
        return false
      }
      this.passwordPannelDisplay = true
    },
    async submitIOU(password) {
      this.isLoading = true
      this.passwordPannelDisplay = false
      let {data} = await this.$axios.post('/extendPreiod', {
        startDate: this.info.endDate,
        endDate: this.form.end,
        password: password,
        id: this.info.id,
        userId: this.$store.state.user.id
      })
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('setMessageRedirect', `confirmedCredit?id=${this.info.id}&active=2`)
        this.$store.dispatch('displayMessage', '展期发起成功')        
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #CreateIOU {

    .IOUList {
      width: 90vw;
      margin-top: 1.5rem;
      background: #FFFFFF;
      border-radius: 2px;
      padding: 0 1.3rem;

      .FormLine {
        height: 3.3rem;
        position: relative;

        .labelBlock {
          line-height: 3.3rem;
          height: 3.3rem;
          position: absolute;
          font-size: 1rem;
          font-weight: bold;
        }
        .BindCardInput {
          padding-top: 0.75rem;
        }
        .pickerValueBlock {
          padding-top: 0.75rem;
          text-align: right;
          font-size: 1rem;
          .addCardIcon {
            color: $light-gold;
          }
        }
        .pickerValueBlockValue {
          padding-top: 0.75rem;
          padding-left: 6.7rem;
          text-align: right;
          font-size: 1rem;

          .rateInterest {
            margin-left: 0.5rem;
            color: $light-gold;
          }
        }
      }
      /deep/ #AmountInput {
        margin-left: 6.7rem;
        text-align: right;        
      }
      /deep/ #NameInput {
        margin-left: 6.7rem;
        text-align: right;
      }
      .BankBlock {
        border-bottom: 1px solid rgba(0, 0, 0, .87);
      }
      .HintLine {
        font-size: 0.9rem;
        line-height: 2rem;
        text-align: right;
        color: #9D9D9D;

        span {
          color: $light-gold;
        }
      }


      ::-moz-placeholder { color: #9D9D9D; }
      ::-webkit-input-placeholder { color:#9D9D9D; }
      :-ms-input-placeholder { color:#9D9D9D; }
    }

    #IOUUsageBlock {
      margin-top: 1rem;
    }

    #IOUTargetBlock {
      margin-top: 1rem;      
    }
    .Agreement {
      text-align: center;
      font-size: 12px;
      color: #666;
      font-weight: bold;
      height: 1.5rem;
      line-height: 1.5rem;
      margin-top: 1rem;
      .AgreementCheckBox {
        border: 2px solid #666;
        color: #fff;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 1.2rem;
        transition: all 0.3s ease-in-out;
        display: inline-block;
        margin-right: 0.8rem;
        position: relative;
        top: 3px;
        &.AgreementChecked {
          background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
          border-color: #E7C78C;
        }
        #CheckBoxCheck {
          position: absolute;
          left: 0;
          font-size: 15px;
          font-weight: bold;
        }
      }
    }
    
    .ConfirmButtonBlock {
      width: 90vw;
      margin: 2.5rem auto;

      #ConfirmButton {
        color: #484646;
        background-image: linear-gradient(-213deg, #DAB269 0%, #E7C78C 92%);
        border-radius: 2px;
        width: 100%;
        height: 2.8rem;
        font-size: 18px;
        margin: auto;
        transition: 0.2s all ease-in-out;

        &:disabled {
          background-image: none;
        }
      }
    }
    
  }
  .hintDialog {
    background-color: #fff;
    color: #000;
    .headline {
      justify-content: center;
      font-weight: bold;
      padding-bottom: 0;
    }
    .dialogContent {
      justify-content: center;  
      text-align: center;

      .warningIcon {
        margin-bottom: 0.5rem;
        color: red;
        font-size: 5rem;
      }
      .bold {
        font-weight: bold;
      }

      p {
        margin-bottom: 0;
      }
    }
    .btn {
      width: 100%;
    }
  }
</style>