黄尔冬 / net_iou

<template>
  <v-layout id="idBind" column justify-center align-center>
    <v-flex >
      <v-card id="idBindBlock" height="40rem">
        <div class="nameBlock">
          <div class="iconBlock">
            <i aria-hidden="true" class="material-icons icon">perm_identity</i>            
          </div>
          <v-text-field
            v-model="form.name"
            color="light-gold"
            class="NameInput "
            name="NameInput"
            placeholder="请输入姓名"
            id='NameInput'
            @input='nameChcek'
            :error-messages="errorMessages"
            single-line
          ></v-text-field>
        </div>
        <div class="idNoBlock">
          <div class="iconBlock">
            <i aria-hidden="true" class="material-icons icon">code</i>
          </div>
          <v-text-field
            v-model="form.idNo"
            class="LoginInput"
            color="light-gold"
            name="idNoInput"
            id="idNoInput"
            @input="idNoCheck"       
            placeholder="请输入身份证号"
            :error-messages="idErrorMessages"
            single-line
          ></v-text-field>
        </div>
        <ImgUploader class="imgUploader" :limit='1' type='single' hint="请选择身份证正面照片" @change="idFrontChange"/>
        <ImgUploader class="imgUploader" :limit='1' type='single' hint="请选择身份证反面照片" @change="idBackChange"/>        
        <div class="ConfirmButtonBlock">
          <v-btn depressed :disabled="!couldSubmit" :loading="isLoading" @click="submitId" id="ConfirmButton">绑  定</v-btn>
        </div>
      </v-card>
    </v-flex>
    <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'>
          <p>您还没有设置交易密码，补借条等功能可能无法正常使用</p>
          </v-card-text>          
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="black" flat @click.native="$router.push($store.state.redirect || '/')">先看看</v-btn>
          <v-btn color="black" flat @click.native="$router.push('/setPassword')">去设置</v-btn>            
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog  v-model="uploadDialogDisplay" persistent max-width="290">
      <v-card class="hintDialog">
        <v-card-text class='dialogContent'>
          <v-progress-linear v-if="uploadProgress !== 100 && !updloadSuccess" v-model="uploadProgress" color="blue"></v-progress-linear>
          <v-progress-circular v-if="uploadProgress === 100 && !updloadSuccess" indeterminate color="blue"></v-progress-circular>
          <div v-if="!updloadSuccess">{{uploadProgress === 100 ? '验证中' : '上传中'}}</div>
          <div class="successHint" v-if="updloadSuccess"><v-icon large color="green">check_circle</v-icon><div>绑定成功</div></div>
        </v-card-text>          
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
import ImgUploader from '@/components/ImgUploader'
import {wechatShareSetting} from '@/helper'
import { setTimeout } from 'timers';
export default {
  data:() => ({
    form: {
      idFront: '',
      idBack: '',
      name: '',
      idNo: ''
    },
    errorMessages: [],
    idErrorMessages: [],
    codeBtnDisable: false,
    isLoading: false,
    idReg: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
    dialogDisplay: false,
    uploadDialogDisplay: false,
    uploadProgress: 0,
    updloadSuccess: false
  }),
  head:() => ({
    title: '绑定身份信息'
  }),
  computed: {
    couldSubmit () {
      return (this.form.name.length > 1 && this.idReg.test(this.form.idNo) && this.form.idFront.toString() === '[object File]' && this.form.idBack.toString() === '[object File]')
    }
  },
  components: {
    ImgUploader
  },
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
  },
  methods: {
    idFrontChange(e) {
      this.form.idFront = e[0]
    },
    idBackChange(e) {
      this.form.idBack = e[0]
    },
    nameChcek() {
      if (this.form.name.length < 2) {
        this.errorMessages = ['请输入正确的姓名']
      } else {
        this.errorMessages = []
      }
    },
    idNoCheck() {
      if (this.form.idNo.length !== 18) {
        this.idErrorMessages = ['请输入正确的身份证号']
        return
      }
      let res = this.idReg.test(this.form.idNo)
      if (res) {
        this.idErrorMessages = []
      } else {
        this.idErrorMessages = ['请输入正确的身份证号']
      }
    },
    async submitId() {
      this.isLoading = true
      const formData = new FormData()
      formData.append('userId', this.$store.state.user.id)
      formData.append('name', this.form.name)
      formData.append('idNo', this.form.idNo)
      formData.append('idFront', this.form.idFront)
      formData.append('idBack', this.form.idBack)
      this.uploadDialogDisplay = true
      const {data} = await this.$axios({
        method: 'post',
        url: '/user/bindId',
        data: formData,
        config: { headers: {'Content-Type': 'multipart/form-data' }},
        onUploadProgress: (e) => {
          const percentComplete = e.loaded / e.total // 上传的进度
          this.uploadProgress = percentComplete * 100
        }
      })
      if (data.success) {
        this.$store.commit('updateUser',{
          name: data.name,
          needIdBind: false,
        })
        this.updloadSuccess = true
        if (this.$store.state.user.needSetPassword) {
          this.dialogDisplay = true
        } else {
          setTimeout(() => {
            this.uploadDialogDisplay = false
            this.$router.replace('/')
          }, 1000)
          
        }
      } else {
        this.uploadDialogDisplay = false
        this.$store.dispatch('displayMessage', data.msg)
      }
      this.isLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
  #idBind {
    &::after {
      content: "";
      background: url('/netiou/loginBG.jpg');
      opacity: 0.14;
      background-size: cover;
      background-repeat:no-repeat;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: 1;
    }

    #idBindBlock {
      width: 87vw;
      margin-top: 1rem;
      background: $menu-grey;
      border-radius: 10px;
      padding: 1rem 0.9rem;
      z-index: 10;

      .iconBlock {
        position: absolute;
        // margin-top: 18px;
        margin-left: 1rem;

        /deep/ .icon {
          color: $light-gold;
        }
      }

      /deep/ .input-group {
        padding: 0;
      }
      
      /deep/ #NameInput {
        font-size: 1.3rem;        
        margin-left: 3rem;
        color: $light-gold;
      }
      /deep/ #idNoInput {
        font-size: 1.3rem;
        margin-left: 3rem;
        color: $light-gold;
      }

      ::-moz-placeholder { color: #9D9D9D; }
      ::-webkit-input-placeholder { color:#9D9D9D; }
      :-ms-input-placeholder { color:#9D9D9D; }
    }
    .idNoBlock {
      position: relative;

      .iconBlock {
        margin-left: 1.1rem !important;
        i {
          font-size: 1.5rem;
        }
      }

      .getCodeBlock {
        position: absolute;
        right: 0;
        top: 0;
        #getCodeBtn {
          background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
          border-radius: 4px;
          color: #484646;
          height: 2rem;
          width: 5.9rem;
          margin-right: 0;
          text-align: center;

          /deep/ .btn__content {
            padding: 0;
          }

          &.btn--disabled {
            background-image: none;
          }
        }
      }
    }
    .Agreement {
      text-align: center;
      font-size: 12px;
      color: #9D9D9D;
      font-weight: bold;
      height: 1.5rem;
      line-height: 1.5rem;
      .AgreementCheckBox {
        border: 2px solid #fff;
        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: -1px;
          top: -1px;
          font-size: 15px;
          font-weight: bold;
        }
      }
    }
    .ConfirmButtonBlock {
      width: 100%;

      #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;
        &.btn--disabled {
          background-image: none;
        }
      }
    }
  }
  .successHint {
    
    div {
      font-size: 1.5rem;
      margin: 0 1rem;
      display: inline-block;
      line-height: 36px;

    }
  }
</style>