nsgk_official_account_front/src/views/smsManage.vue

<template>
  <div class="app-container">
    <div class="title">
      <!-- <img style="display: block;
    margin: 0 auto;" src="../../static/images/onlineHome/yinnongLogo.jpg" alt=""> -->
    </div>
    <!-- <van-tabs v-model="active" :swipeable="true" style="margin-top:0.5rem;padding:0 10px;"> -->
      <van-form style="margin:50px 0;">
        <van-field
          v-model="formData.memberName"
          name="请输入姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="formData.idcard"
          name="请输入身份证号"
          style="margin-top: 20px"
          placeholder="请输入身份证号"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="formData.mobile"
          name="请输入手机号"
          style="margin-top: 20px"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '' }]"
        />
          <van-field
          v-model="formData.code"
          center
          clearable
          label="验证码"
          placeholder="图形验证码"
        >
          <template #button>
            <img style="width: 100px" :src="codeUrl" @click="getCode" />
          </template>
        </van-field>
        <van-field
          v-model="formData.smsCode"
          style="margin-top: 20px"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '' }]"
        >
          <template #button>
            <!-- <van-button size="mini" type="info" @click="getRegisterSmsCode" >获取验证码</van-button> -->
            <div  class="registerSmsBtn" @click="getRegisterSmsCode">{{
              computeTime > 0 ? `(${computeTime}s)已发送` : "获取短信码"
            }}</div>


          </template>
        </van-field>
        <div style="margin: 50px 16px 16px;">
          <van-button block type="info" native-type="submit" @click="registerSubmit">绑定</van-button>
        </div>
      </van-form>
  </div>
</template>
<style scoped>
  .app-container{
    background: #fff;
    height: 100vh;
  }
  .title{
    padding-top: 20%;
    width: 88%;
    margin: 0 auto;
  }
  .van-tab--active{
    font-size: .6rem;
    font-weight: bold;
  }
  .van-tabs__line{
    background:#1D6FE9;
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 0.07rem;
    bottom: 0.3rem;
  }
  .van-tabs__nav{
    padding:0
  }
  .van-tab{
    display: inline-block;
    flex: inherit;
    margin-left: 30px;
    line-height: .8rem;
  }
  .van-tab__text--ellipsis {
    overflow: auto;
  }
  .van-password-input{
    width: 50%;
    margin: 0 auto;
  }
  [class*=van-hairline]::after{
    border:none;
  }
  .van-password-input__security li{
    margin: 0 10px;
    border-bottom: 3px solid black;
  }
  .registerSmsBtn{
    color: rgb(29, 111, 233);
    font-size: 0.34rem;

  }
</style>
<script>
import { getUUID } from '@/utils'
export default {
  data() {
    return {
      showMessage:false,
      smsCodeValue:"",
      showKeyboard:false,
      formData: {
        username: "", //账号
        password: "", //密码
        code: null, //图片验证码
        uuid: null, //识别uuid
        mobile: null, //手机号
        smsCode: null, //短信验证码
        memberName:null, //身份信息
        idcard:null, //身份号码
        rememberMe:false
      },
      loading: false,
      codeUrl: "", //验证码
      isSmsLogin: false, //是否手机验证码
      computeTime: 0,
      active:1
    };
  },
  created() {
    this.getCode();
    this.reset();
  },
  methods: {
    reset(){

    },
    showPopup(){
      this.showKeyboard = !this.showKeyboard
    },
    showMessagePop(){
      this.showMessage = !this.showMessage
    },
    getCode() {
      this.formData.uuid = getUUID()
      this.codeUrl = this.$http.adornUrl(`/captcha?uuid=${this.formData.uuid}`)
    },
    getRegisterSmsCode(){
       if (!this.computeTime) {
      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(this.formData.mobile)) {
        this.$dialog.alert({
            message: '手机号格式不正确',
          });
        return false;
      }else if (this.formData.code == "") {
        this.$dialog.alert({
            message: '图片验证码不能为空',
        });
        return false;
      }
      if (this.active==2) {
        let formObj = {
          code :this.formData.code,
          mobile:this.formData.mobile,
          uuid:this.formData.uuid
        }
        getRegisterSmsCode(formObj).then((res) => {
          console.log(res)
          console.log(res.code == 200)
          if(res.code == 200) {
            this.$dialog.alert({
                message: '验证码已发送',
            });
            this.formData.uuid = res.uuid;
            this.computeTime = 60;
            this.timer = setInterval(() => {
              this.computeTime--;
              if (this.computeTime <= 0) {
                clearInterval(this.timer);
              }
            }, 1000);
          }
        }).catch((res)=>{
          if(res=='Error: 验证码已失效'){
            this.getCode()
          }
        });
      }
      }
    },
    registerSubmit(){

      //注册
      if (this.formData.memberName == "") {
        this.$dialog.alert({
            message: '姓名不能为空',
        });
        return false;
      } else if (this.formData.idcard == "") {
        this.$dialog.alert({
            message: '身份证号不能为空',
        });
        return false;
      } else if (this.formData.mobile == "") {
        this.$dialog.alert({
            message: '手机号码不能为空',
        });
        return false;
      }else if (this.formData.smsCode == "") {
        this.$dialog.alert({
            message: '短信验证码不能为空',
        });
        return false;
      }
      //registerCheck,registerOn
      console.log(this.formData)
      registerCheck(this.formData).then((res)=>{
        if(res.code == 200){
          registerOn(this.formData).then((res)=>{
            if(res.code == 200){
              //
              this.$dialog.alert({
                  message: '您的初始密码：'+res.password,
              }).then(() => {
                  this.$router.push({ path: "/yinnong/workbench" }).catch(() => {});
              });
            }
          })
        }
      })

    }
  },
};
</script>