黄尔冬 / 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="NameBlock FormLine">
          <div class="labelBlock">
            <span>借款金额</span>        
          </div>
          <v-text-field
            v-model.number="form.amount"
            suffix="元"
            color="light-gold"
            class="BindCardInput "
            name="PhoneInput"
            placeholder="请输入借款金额"
            :error-messages="amountErrMsg"
            @input='amountCheck'
            id='AmountInput'
            single-line
          ></v-text-field>
        </div>
        <div class="BankBlock FormLine" @click="startPickerDislpay = true">
          <div class="labelBlock">
            <span>借款日期</span>        
          </div>
          <div class="pickerValueBlock" v-if="!form.start" >{{'请选择'}} 
            <v-icon class="addCardIcon">keyboard_arrow_right</v-icon>
          </div>
          <div class="pickerValueBlockValue" v-if="!!form.start" >
            <span>{{form.start}}</span>
          </div>
          <DatePicker title="请选择借款日期" 
            @pickerClose="startPickerDislpay = false"
            v-model="form.start"
            :display="startPickerDislpay"/>
        </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"
            :display="endPickerDislpay"/>
        </div>
        <div class="BankBlock FormLine" @click="ratePickerDislpay = true">
          <div class="labelBlock">
            <span>年化利率</span>        
          </div>
          <div class="pickerValueBlock" v-if="!form.rate" >{{'请选择'}} 
            <v-icon class="addCardIcon">keyboard_arrow_right</v-icon>
          </div>
          <div class="pickerValueBlockValue" v-if="!!form.rate" >
            <span>{{form.rate}}</span><span class="rateInterest">{{interest}}元</span>
          </div>
          <Picker 
            :data="rates" 
            title="请选择年化利率" 
            @pickerClose="ratePickerDislpay = false" 
            @select="rateChange"
            :display="ratePickerDislpay"/>
        </div>
        <div class="HintLine">
          本金{{displayAmount}}+利息{{interest}}=到期本息<span>{{displayAmount + interest}}</span>元
        </div>
      </v-card>
      <v-card id="IOUUsageBlock" class="IOUList" flat height="3.1rem">
        <div class="NameBlock FormLine" @click="usageDislogDisplay = true">
          <div class="labelBlock">
            <span>借款用途</span>        
          </div>
          <div class="pickerValueBlock" v-if="!form.usage" >{{'请选择'}} 
            <v-icon class="addCardIcon">keyboard_arrow_right</v-icon>
          </div>
          <div class="pickerValueBlockValue" v-if="!!form.usage" >
            {{form.usage}}
          </div>
          <BorrowUsage :display="usageDislogDisplay" @change="usageChange" @close="usageDislogDisplay = false"/>
        </div>
      </v-card>
      <v-card id="IOUTargetBlock" class="IOUList" flat height="4.2rem">
        <div class="NameBlock FormLine" >
          <div class="labelBlock">
            <span>{{role === 'borrower' ? '出借人' : '借款人'}}姓名</span>        
          </div>
          <v-text-field
            v-model="form.target"
            color="light-gold"
            class="BindCardInput "
            name="NameInput"
            placeholder="正确才能生效哦"
            :error-messages="targetErrMsg"
            @input='targetChcek'
            id='NameInput'
            single-line
          ></v-text-field>
        </div>
      </v-card>
      <div class="Agreement">
        <div 
          @click="agreement = !agreement" 
          class="AgreementCheckBox"
          :class="agreement ?  'AgreementChecked' : ''">
          <v-icon id="CheckBoxCheck" v-if="agreement">check</v-icon>
        </div>
        已阅读并同意<span class="gold--text">《借款协议》</span><span class="gold--text">《居间服务协议》</span>
      </div>
      <div class="ConfirmButtonBlock">
        <v-btn depressed id="ConfirmButton" @click.native="comfirmDialogDisplay = true">确  定</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>
      <v-dialog  v-model="comfirmDialogDisplay" persistent max-width="290">
        <v-card class="hintDialog">
          <v-card-title class="headline">提示</v-card-title>
          <v-card-text class='dialogContent'>
            <v-icon x-large class="warningIcon">warning</v-icon>
            <p class='red--text bold'>借条是为已完成的借贷行为补一张借条，作为电子凭证，请确保你们线下交易完成</p>
            <p>双方确认后借条即刻生效，要发起该借条吗？</p>
            </v-card-text>          
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="black" flat @click.native="comfirmDialogDisplay = false">不发起</v-btn>
            <v-btn color="black" flat @click.native="submitIOU">发起</v-btn>            
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-flex>
  </v-layout>
</template>

<script>
import Picker from '@/components/Picker'
import DatePicker from '@/components/DatePicker'
import BorrowUsage from '@/components/BorrowUsage'

export default {
  layout: 'lightGold',
  data:() => ({
    agreement: false,
    form: {
      amount: null,
      role: '',
      target: '',
      start: '',
      end: '',
      rate: '',
      rateValue: 0.00,
      usage: '',
      explanation: '',
      imgs: [],
    },
    rates: [[
      { text: '1%', value:0.01 },{ text: '2%', value:0.02 },{ text: '3%', value:0.03 },{ text: '4%', value:0.04 },{ text: '5%', value:0.05 },{ text: '6%', value:0.06 },
      { text: '7%', value:0.07 },{ text: '8%', value:0.08 },{ text: '9%', value:0.09 },{ text: '10%', value:0.1 },{ text: '11%', value:0.11 },{ text: '12%', value:0.12 }
      ,{ text: '13%', value:0.13 },{ text: '14%', value:0.14 },{ text: '15%', value:0.15 },{ text: '16%', value:0.16 },{ text: '17%', value:0.17 },{ text: '18%', value:0.18 },
      { text: '19%', value:0.19},{ text: '20%', value:0.2 },{ text: '21%', value:0.21 },{ text: '22%', value:0.22 },{ text: '23%', value:0.23 },{ text: '24%', value:0.24 }
    ]],
    ratePickerDislpay: false,
    ownerPickerDisplay: false,
    startPickerDislpay: false,
    endPickerDislpay: false,
    usageDislogDisplay: false,
    amountErrMsg: [],
    targetErrMsg: [],
    dialogDisplay: false,
    dialogInfo: '',
    comfirmDialogDisplay: false
  }),
  computed: {
    role () {
      return this.$route.query.role || 'creditor'
    },
    displayAmount() {
      return parseFloat(this.form.amount) || 0
    },
    interest () {
      const rate = this.form.rateValue || 0
      return Math.round(this.displayAmount * rate / 365 * this.days * 100) / 100
    },
    days () {
      if (!this.form.start || !this.form.end) return 0 
      let start = new Date(this.form.start).getTime()
      let end = new Date(this.form.end).getTime()
      let gap = (end - start) / (1000 * 60 * 60 * 24)
      return gap > 0 ? gap : 0 
    }
  },
  components: {
    Picker,
    DatePicker,
    BorrowUsage
  },
  methods: {
    showDialog(info) {
      this.dialogInfo = info
      this.dialogDisplay = true
    },
    rateChange(val, index, text) {
      this.form.rate = text[0]
      this.form.rateValue = val[0]
    },
    amountCheck() {
      this.amountErrMsg = []      
      if (typeof this.form.amount !== 'number' || this.form.amount <= 0) {
        this.amountErrMsg = ['请输入有效的借款金额']
        return false
      }
      return true
    },
    targetChcek() {
      this.targetErrMsg = []
      if (typeof this.form.target !== 'string' || this.form.target.length === 0) {
        this.targetErrMsg = ['请输入有效的姓名']
        return false
      }
      return true
    },
    usageChange(e) {
      this.form.usage = e.type
      this.form.explanation = e.explanation
      this.form.imgs = e.imgs
    },
    formCheck() {
      if (!this.amountCheck()) {
        this.showDialog('请输入有效的借款金额!')
        return false
      }
      if (!this.form.start) {
        this.showDialog('请选择借款日期!')
        return false
      }
      if (!this.form.end) {
        this.showDialog('请选择还款日期!')
        return false
      }
      if (this.days <= 0) {
        this.showDialog('还款日期最早为借款日期后一日')
        return false
      }
      if (!this.form.rate || !this.form.rateValue) {
        this.showDialog('请选择年化利率!')
        return false
      }
      if (!this.form.rate || !this.form.rateValue) {
        this.showDialog('请选择年化利率!')
        return false
      }
      if (!this.form.usage) {
        this.showDialog('请选择借款用途!')
        return false
      }
      if (!this.targetChcek()) {
        this.showDialog('请输入有效的姓名!')
        return false
      }
      if (!this.agreement) {
        this.showDialog('请阅读并同意《借款协议》及《居间服务协议》!')
        return false
      }
      return true
    },
    async submitIOU() {
      const could = this.formCheck()
      if (!could) return
      const form = new FormData()
      form.append('userId', this.$store.state.user.id)
      form.append('amount', this.form.amount)      
      form.append('role', this.role)
      form.append('target', this.form.target)
      form.append('start', this.form.start)
      form.append('end', this.form.end)
      form.append('rate', this.form.rate)
      form.append('rateValue', this.form.rateValue)
      form.append('usage', this.form.usage)
      form.append('explanation', this.form.explanation)
      for (let i = 0; i < this.form.imgs.length; i++) {
        const img = this.form.imgs[i]
        form.append(`img${i + 1}`, img)
      }
      let {data} = await this.$axios.post('/iou', form)
      if (data.success) {
        this.$store.dispatch('displayMessage', '借条创建成功')        
        this.$router.push(`borrowContent?id=${data.id}`)
      } 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>