黄尔冬 / net_iou

<template>
  <v-layout id="Login" column justify-center align-center>
    <v-flex>
      <v-card id="LoginBlock" height="18rem">
        <div class="phoneBlock">
          <div class="iconBlock">
            <i aria-hidden="true" class="material-icons icon iconfont icon-shouji"></i>            
          </div>
          <v-text-field
            v-model="form.phone"
            color="light-gold"
            class="LoginInput "
            name="PhoneInput"
            placeholder="请输入手机号"
            @input="phoneCheck"
            id='PhoneInput'
            :error-messages="errorMessages"
            single-line
          ></v-text-field>
        </div>
        <div class="VerificationCodeBlock">
          <div class="iconBlock">
            <i aria-hidden="true" class="material-icons icon iconfont icon-yanzhengma"></i>
          </div>
          <v-text-field
            v-model="form.verificationCode"
            class="LoginInput"
            color="light-gold"
            name="VerificationCodeInput"
            id="VerificationCodeInput"            
            placeholder="请输入验证码"
            single-line
          ></v-text-field>
          <div class="getCodeBlock">
            <v-btn depressed :disabled="codeBtnDisable" id="getCodeBtn" @click="sendVerificationCode">{{codeBtnString}}</v-btn>
          </div>
        </div>
        <!-- <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">《XX协议》</span>
        </div> -->
        <div class="ConfirmButtonBlock">
          <v-btn depressed :disabled="!couldSubmit" @click="bindPhone" id="ConfirmButton">绑  定</v-btn>
        </div>
      </v-card>
      <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(this.$store.state.redirect || '/')">先看看</v-btn>
            <v-btn color="black" flat @click.native="$router.push('/idBind')">去绑定</v-btn>            
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-flex>
  </v-layout>
</template>

<script>
import {wechatShareSetting} from '@/helper'
export default {
  data:() => ({
    form: {
      phone: '',
      verificationCode: '',
    },
    errorMessages: [],
    countDownTime: 60,
    codeBtnDisable: false,
    codeBtnString: '发送验证码',
    agreement: true,
    codeCountDown: {},
    phoneReg: /^1[0-9]{10}$/,
    dialogDisplay: false
  }),
  head:() => ({
    title: '绑定手机号码'
  }),
  beforeRouteLeave (to, from, next) {
    clearTimeout(this.codeCountDown)
    next()
  },
  computed: {
    couldSubmit () {
      return (this.phoneReg.test(this.form.phone) && (this.form.verificationCode.length === 4) && this.agreement)
    }
  },
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
  },
  methods: {
    displayChange(e) {
      console.log(e)
    },
    phoneCheck(e) {
      let res = this.phoneReg.test(this.form.phone)
      if (res) {
        this.errorMessages = []
      } else {
        this.errorMessages = ['请输入正确的手机号']
      }
    },
    async sendVerificationCode() {
      this.errorMessages = []
      const res =  this.phoneReg.test(this.form.phone)
      if (res) {
        this.codeBtnDisable = true
        this.codeCountDown = this.setCodeCountDown()
        const {data} = await this.$axios.get(`/getCode?phone=${this.form.phone}&userId=${this.$store.state.user.id}`)
        if (data.success) {
          this.$store.dispatch('displayMessage', '验证码已发送')
        } else {
          this.$store.dispatch('displayMessage', data.msg)
        }
      } else {
        this.errorMessages = ['请输入正确的手机号']
      }
    },
    setCodeCountDown() {
      if (this.countDownTime > 0) {
        this.countDownTime -= 1
        this.codeBtnString = `剩余${this.countDownTime} s`
        return setTimeout(this.setCodeCountDown, 1000)
      } else {
        this.codeBtnDisable = false
        this.codeBtnString = '发送验证码'
        this.countDownTime = 60
      }
    },
    async bindPhone() {
      const submitForm = Object.assign({userId: this.$store.state.user.id}, this.form)
      const {data} = await this.$axios.post(`/user/bindPhone`, submitForm)
      if (data.success) {
        this.$store.dispatch('displayMessage', '手机号绑定成功')        
        this.$store.commit('updateUser',{
          phone: data.phone,
          needPhoneBind: false,
        })
        this.dialogDisplay = true
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #Login {
    &::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;
    }

    #LoginBlock {
      width: 87vw;
      margin-top: 8.5rem;
      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/ #PhoneInput {
        font-size: 1.3rem;        
        margin-left: 2.9rem;
        color: $light-gold;
      }
      /deep/ #VerificationCodeInput {
        font-size: 1.3rem;
        margin-left: 3.2rem;
        margin-right: 6rem;
        color: $light-gold;
      }

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

      .iconBlock {
        margin-left: 1.3rem !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%;
      margin-top: 1.1rem;

      #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;
        }
      }
    }
  }
</style>