gdy_app_8/src/view/user/regWx.vue

<template>
  <div class="login-box-parent" style="background:#fff;">
    <van-nav-bar left-text="返回" @click-left="$router.push('/login')" left-arrow title="手机号验证">
      <div slot="right" @click="$router.push({ name: 'login' })" style="display:none;">登录</div>
    </van-nav-bar>

    <div class="login-box" :class="{ input_focus: input_focus }">
      <scroller>
        <div class="login-form-box" style="background-color: #fff;">
          <!-- App背景 -->
          <div class="login-form-box-bg"><icon name="login_logo_bg" class="login_logo_bg"></icon></div>
          <div style="height:0.2rem;"></div>
          <div class="login_logo"><icon name="logo" class="app_logn"></icon></div>
          <div style="padding-right: 0.32rem;text-align: right;height: 0.4rem;position: relative;" class="blue" v-if="setp == 2">
            <span @click="openActive" style="position: absolute;width: 1.6rem;z-index: 999;right: 0.32rem;">上一步</span>
          </div>
          <div class="login-form-box" style="background-color: #fff;">


            <div v-if="setp == 1"  class="setp1">
              <van-cell-group>
                <van-field class="mobile" clearable v-model="formData.tel" placeholder="请输入手机号" :error-message="mobile_error" :icon="mobile_success" type="Number">
                  <template slot="left-icon"><icon name="tel" class="login_mobile"></icon></template>
                </van-field>
                <van-field class="message" clearable v-model="formData.verify" center type="Number" placeholder="请输入短信验证码" :error-message="verify_error">
                  <template slot="left-icon"><icon name="message" class="login_message"></icon></template>
                  <van-button class="message_code" :loading="sendMsgLoading" slot="button" size="small" type="info" @click="sendMsg" :disabled="sended">{{sendMsgText}}</van-button>
                </van-field>
              </van-cell-group>
            </div>

            <div v-else>
              <van-cell-group>
                <van-field class="set_pwd" maxlength="15" type="text" v-model="formData.name" clearable placeholder="您的姓名">
                  <template slot="left-icon">
                    <icon name="user" class="login_user"></icon>
                  </template>
                </van-field>

                <van-field class="comfim_pwd" type="password" v-model="formData.password" clearable placeholder="设置密码(6-16位数字和字母结合)">
                  <template slot="left-icon">
                    <icon name="pwd" class="login_pwd"></icon>
                  </template>
                </van-field>
              </van-cell-group>
            </div>

            <div style="padding:0 0.32rem;" v-if="setp == 1">
              <van-button class="login_button" :loading="reg_loading" size="large" :disabled="!complite_btn_enable1" @click="nextReg" type="info">下一步</van-button>
            </div>

            <div style="padding:0 0.32rem;margin-top:0.5rem" v-else>
              <van-button class="login_button" :loading="reg_loading" size="large" :disabled="!complite_btn_enable" @click="sendReg" type="info">完成注册</van-button>
            </div>

          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { returnJSEncrypt } from '@/utils/auth';
export default {
  name: 'reg',
  data () {
    return {
      complite_btn_enable1: false,
      input_focus: false,
      next_loading: false,
      reg_loading: false,
      tel_error: '',
      verify_error: '',
      mobile_error: '',
      mobile_success: '',
      complite_btn_enable: false,
      login_error: false,
      login_error_msg: '',
      next_btn_enable: false,
      setp: 1,
      countdown: 90,
      sended: false,
      sendMsgText: '获取验证码',
      sendMsgLoading: false,

      formData: {
        tel: '',
        name: '',
        password: '',
        password_confirmation: '',
        verify: '',
      },
      exist:false,

    }
  },
  created () {

  },
  watch: {
    formData: {
      handler (val, oldVal) {
        let self = this
        if (val.tel != '' && val.verify != '') {
          self.complite_btn_enable1 = true
          self.next_btn_enable = true
        } else {
          self.complite_btn_enable1 = false
          self.next_btn_enable = false
        }

        if (val.password != '') {
          self.complite_btn_enable = true
        } else {
          self.complite_btn_enable = false
        }
      },
      deep: true
    }
  },
  methods: {
    openActive(){
      this.setp=1;
    },
    nextReg () {
      if (!this.checkMobile(this.formData.tel)) {
        this.$toast('请输入正确的手机号');
        return false;
      }
      if (this.formData.verify == '') {
        this.$toast('请输入验证码！');
        return false;
      }
      this.reg_loading = true
      if(this.exist){ //已有绑定
         let obj = {tel:this.formData.tel,verify:this.formData.verify};
         this.$axios('post','/api/pro/login/sms',{data: returnJSEncrypt(obj)},'v2',this.$route.query.wo_token).then(res => {
            let data=res.data.data;
            this.$toast("已绑定")
            localStorage.setItem('a-token-temp', data.token); // 保存平台账号登录的token
            localStorage.setItem('a-token-tel', data.account.tel);
            this.openUrl(data.account_site,data.invitation_wait_count);
         }).finally(() => {this.reg_loading = false})
      }else{ //未绑定
        this.setp=2;
        this.reg_loading = false
      }
    },
    openUrl(account_site, invitation_wait_count) {
     // 公司数量
      if (account_site.length > 0) {
        if (invitation_wait_count > 0) {
          this.$router.replace({ name: 'registration_experience', query: { invite: 1, iscompany: 1 } }); // 选择行业
        } else {
          this.$router.replace({ name: 'login_company_list' }); // 选择企业
        }
      } else {
        if (invitation_wait_count > 0) {
          // 待邀请数量
          this.$router.replace({ name: 'registration_experience', query: { invite: 1 } }); // 选择行业
        } else {
          this.$router.replace({name:'create_company'}) //进入体验账号
        }
      }
    },

    // 点击完成
    sendReg () {
      if (this.formData.name == '') {
        this.$toast('请输入姓名');
        return false;
      }
      if (!this.Pass_Word(this.formData.password)) {
        this.$notify({
          message: '密码格式要为6-16位数字和字母结合',
          duration: 1000,
          background: '#f44'
        })
        return false
      }
      this.reg_loading = true
      let data={
        tel:this.formData.tel,
        name:this.formData.name,
        password:this.formData.password,
        password_confirmation:this.formData.password,
        verify:this.formData.verify,
      }
      this.$axios('post','/api/pro/register',{data: returnJSEncrypt(data)},'v2',this.$route.query.wo_token).then(res => {
          this.$toast("已注册")
          let data=res.data.data;
          localStorage.setItem('a-token-temp', data.token); // 保存平台账号登录的token
          localStorage.setItem('a-token-tel', data.account.tel); // 保存平台账号登录的手机号
          this.openUrl(data.account_site,data.invitation_wait_count);
      }).finally(() => {this.reg_loading = false})
    },

    // 获取验证码
    sendMsg () {
      if (!this.checkMobile(this.formData.tel)) {
        this.$notify({
          message: '手机号码错误',
          duration: 1000,
          background: '#f44'
        })
        return false
      }
      let data = {tel: this.formData.tel,code:'accountCheck'};
      this.$axios('post', '/api/pro/ac', { data: returnJSEncrypt(data) }).then(res => {
          this.exist=res.data.data.exist //是否已注册 true-已注册 false-未注册
          this.login_reg();
      })

    },
    login_reg(){
      this.sendMsgLoading = true
      this.sended = true
      let data = { mobile:this.formData.tel,type:this.exist? 4:1};

      this.$axios('post', '/api/pro/send-sms', { data: returnJSEncrypt(data) }, 'v2').then(res => {
        this.countDownInit()
        this.$toast('已经发送，请注意查收！')
      }).finally(() => {
          this.sended = false
          this.sendMsgLoading = false
      })
    },

    // 密码正则 6-16位数字和字母
    Pass_Word (My_PassWord) {
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(My_PassWord)) {
        return false
      } else {
        return true
      }
    },

    // 手机号正则
    checkMobile (sMobile) {
      if (!/^1\d{10}$/.test(sMobile)) {
        return false
      } else {
        return true
      }
    },

    countDownInit () {
      let self = this
      self.sendMsgText = '已发送（' + self.countdown + '）'
      if (self.countdown == 0) {
        self.countdown = 90
        self.sendMsgText = '重新发送'
        self.sended = false
        return false
      } else {
        setTimeout(function () {
          self.countdown--
          self.countDownInit()
        }, 1000)
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .popup-all{
    border-radius: 0.15rem;
    background: #fff;
    width: 80%;
    text-align: center;
    font-size: 0.32rem;
    .title{
      padding: 0.2rem 0;
    }
    .content{
      font-size: 0.28rem;
      padding: 0 0.2rem;
      padding-bottom: 0.2rem;
      height: 3rem;
      overflow-y: scroll;
    }
    .footer2 div:nth-child(1){
      background-color: #ccc;
      color: #333333;
      padding: 0.24rem 0;
      font-size: 0.28rem;
    }
    .footer2 div:nth-child(2){
      background-color: #1989FA;
      color: #fff;
      padding: 0.24rem 0;
      font-size: 0.28rem;
    }
  }
.login-form-box-bg {
  position: absolute;
  top: -1rem;
  left: 0;
  width: 100%;
  height: 3.4rem;
  color: #26a2ff;
}

.input_focus.login-box {
  height: calc(100% - 0rem);
}

.login-box {
  height: calc(100% - 2rem);
  position: relative;
}

.login-box-parent .van-field__icon .van-icon {
  color: #4b0;
}

.login_logo {
  position: relative;
  display: block;
  margin: -1.05rem auto;
  width: 3.6rem;
  color: #fff;
  margin-bottom: 0rem;
  z-index: 1;
}

.setp1,
.setp2 {
  padding-bottom: 0.5rem;
}

.login-box .login-form-box .mobile {
  font-size: 0.32rem;
  margin-bottom: 0.16rem;
  padding: 0.2rem 0.32rem;
  line-height: 0.5rem;
}

.login-box .login-form-box .mobile .login_mobile {
  width: 0.37rem;
  height: 0.37rem;
  color: #b8b8b8;
  margin-top: -0.06rem;
  margin-left: -0.06rem;
  padding-right: 0rem;
  border-right: none;
}

// .login-box .field-focus .login_mobile {
//   color: #238cf9 !important;
// }

.login-box .login-form-box .message {
  font-size: 0.32rem;
  margin-bottom: 0.16rem;
  padding: 0.2rem 0.32rem;
  line-height: 0.5rem;
}

.login-box .login-form-box .message .message_code {
  font-size: 0.28rem;
  letter-spacing: 0.005rem;
  color: #1989fa;
  border: none;
  background: none;
}

.login-box .login-form-box .message .login_message {
  width: 0.37rem;
  height: 0.37rem;
  color: #b8b8b8;
  margin-top: -0.06rem;
  margin-left: -0.06rem;
  padding-right: 0rem;
  border-right: none;
}

// .login-box .field-focus .login_message {
//   color: #238cf9 !important;
// }

.login-box .login-form-box .set_pwd {
  font-size: 0.32rem;
  margin-bottom: 0.16rem;
  padding: 0.2rem 0.32rem;
  line-height: 0.5rem;
}

.login-box .login-form-box .set_pwd .login_user {
  width: 0.37rem;
  height: 0.37rem;
  color: #b8b8b8;
  margin-top: -0.06rem;
  margin-left: -0.06rem;
  padding-right: 0rem;
  border-right: none;
}

// .login-box .field-focus .login_user {
//   color: #238cf9 !important;
// }

.login-box .login-form-box .comfim_pwd {
  font-size: 0.32rem;
  margin-bottom: 0.16rem;
  padding: 0.2rem 0.32rem;
  line-height: 0.5rem;
}

.login-box .login-form-box .comfim_pwd .login_pwd {
  width: 0.37rem;
  height: 0.37rem;
  color: #b8b8b8;
  margin-top: -0.06rem;
  margin-left: -0.06rem;
  padding-right: 0rem;
  border-right: none;
}

// .login-box .field-focus .login_pwd {
//   color: #238cf9 !important;
// }

/deep/ .login-box input {
  font-size: 0.4rem !important;
  color: #1c1c1c;
  letter-spacing: 0.005rem;
}

.login-box ::-webkit-input-placeholder {
  font-size: 0.32rem;
  color: #b8b8b8 !important;
  letter-spacing: 0.005rem;
}

.login-box input:-ms-input-placeholder {
  font-size: 0.32rem;
  color: #b8b8b8 !important;
  letter-spacing: 0.005rem;
}

.login-box ::-moz-input-placeholder {
  font-size: 0.32rem;
  color: #b8b8b8 !important;
  letter-spacing: 0.005rem;
}

// .login-box .field-focus ::-webkit-input-placeholder {
//   color: #238cf9 !important;
// }

.login-box input:-ms-input-placeholder {
  color: #26a2ff !important;
}

// .login-box .field-focus ::-moz-input-placeholder {
//   color: #238cf9 !important;
// }

.login-box .van-hairline--top-bottom:after {
  border: none;
  border-bottom: 0.02rem #efefef solid;
  transform: scaleY(0.5);
  left: 0.32rem;
  right: 0.32rem;
}

.login-box .van-hairline-unset--top-bottom:after {
  border: none;
  border-bottom: 0.02rem #efefef solid;
  transform: scaleY(0.5);
  left: 0.32rem;
  right: 0.32rem;
}

.login-box .van-cell:not(:last-child):after {
  border: none;
  border-bottom: 0.02rem #efefef solid;
  transform: scaleY(0.5);
  left: 0.32rem;
  right: 0.32rem;
}

// /deep/ .login-box .field-focus:after {
//   border-bottom: 0.02rem #238cf9 solid !important;
//   transform: scaleY(.5);
//   left: 0.32rem;
//   right: 0.32rem;
// }

.login-box .login_button {
  height: 1rem;
  line-height: 0.8rem;
  border-radius: 0.04rem;
}

.login-box-parent .mint-cell.cell-last:before {
  bottom: 0;
}

.footer {
  font-size: 0.24rem;
  line-height: 1rem;
  text-align: center;
  color: #999;
  letter-spacing: 0.005rem;
}

.footer a {
  color: #1989fa;
}
</style>