gdy_app_8/src/view/user/accountVf.vue

<template>
  <div class="login-box-parent">
    <van-nav-bar title="输入验证码完成注销" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="login-box" style="background-color: #f5f5f5;">
      <scroller>
        <div class="login-form-box" style="background-color: #fff;">
          <div class="setp1">
            <van-cell-group>
              <van-cell title="手机号" v-show="account_tel != ''">{{ account_tel | mobile }}</van-cell>
              <van-field v-model="formData.origin_verify" center clearable label="验证码" placeholder="请输入短信验证码">
                <van-button style="border:none;font-size:0.28rem;" :loading="sendMsgLoading" slot="button" size="small" plain type="info" @click="sendMsg" :disabled="sended">
                  {{ sendMsgText }}
                </van-button>
              </van-field>
            </van-cell-group>
          </div>

          <div style="padding:0 0.32rem 0.2rem;"><van-button :loading="reg_loading" size="large" @click="nextReg" type="info">确定</van-button></div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { returnJSEncrypt } from '@/utils/auth';
export default {
  name: 'change_pwd',
  filters: {
    mobile(tel) {
      if (tel) {
        return tel == '' ? tel : tel.replace(tel.substring(3, 7), '****');
      }
      return '';
    }
  },
  data() {
    return {
      countdownSet: null,
      next_loading: false,
      reg_loading: false,

      mobile_error: '',
      mobile_success: '',
      complite_btn_enable: false,
      login_error: false,
      login_error_msg: '',
      next_btn_enable: false,
      userinfo: this.$userInfo(),
      account_info: this.$store.getters.account_info,
      account_tel:localStorage.getItem('a-token-tel'),
      setp: 1,
      countdown: 90,
      sended: false,
      sendMsgText: '获取验证码',
      sendMsgLoading: false,
      formData: {
        verify: '',
        origin_verify: '',
        tel: ''
      }
    };
  },
  watch: {
    formData: {
      handler(val, oldVal) {
        if (val.username != '' && val.code != '') {
          this.next_btn_enable = true;
        } else {
          this.next_btn_enable = false;
        }

        if (!this.checkMobile(val.username)) {
          this.mobile_error = '手机号格式错误';
          this.mobile_success = '';
        } else {
          this.mobile_error = '';
          this.mobile_success = 'success';
        }

        if (val.password != '' && val.password_check != '') {
          this.complite_btn_enable = true;
        } else {
          this.complite_btn_enable = false;
        }
      },
      deep: true
    }
  },
  activated(){
    // console.log(account_tel)
  },
  methods: {
    nextReg() {
      this.next_loading = true;
      let data = { tel: this.account_tel, verify: this.formData.origin_verify };
      this.$axios('post', '/api/pro/destruction', { data: returnJSEncrypt(data) }, 'v2').then(res => {
          if (res.data.code == 1) {
            this.$toast('注销成功');
            setTimeout(() => {
              this.$toast.clear();
              this.nologin();
            }, 500);
          }
        })
        .finally(() => {
          this.next_loading = false;
        });
    },
    nologin() {
      if (window.plus) {
        plus.storage.removeItem('Admin-Token');
        plus.storage.removeItem('a-token-temp');
        plus.storage.removeItem('a-token-tel');
      } else {
        localStorage.removeItem('a-token-temp');
        localStorage.removeItem('a-token-tel');
        localStorage.removeItem('Admin-Token');
      }
      this.$store.dispatch('clear_cache');
      this.$router.replace({ name: 'login' });
    },
    countDownInit() {
      this.sendMsgText = '已发送（' + this.countdown + '）';
      if (this.countdown == 0) {
        this.countdown = 90;
        this.sendMsgText = '重新发送';
        this.sended = false;
        return false;
      } else {
        this.countdownSet = setTimeout(() => {
          this.countdown--;
          this.countDownInit();
        }, 1000);
      }
    },
    checkMobile(sMobile) {
      if (!/^1[0123456789]\d{9}$/.test(sMobile)) {
        return false;
      } else {
        return true;
      }
    },

    sendMsg() {
      this.sendMsgLoading = true;
      let data = { mobile: this.account_tel, type: 7 };
      if (!this.verifyPhoneNo(data.mobile)) {
        this.$notify({
          message: '请输入正确手机号码',
          duration: 1000,
          background: '#f44'
        });
        this.sendMsgLoading = false;
        return false;
      }
      this.$axios('post', '/api/pro/send-sms', { data: returnJSEncrypt(data) }, 'v2')
        .then(res => {
          if (res.data.code == 1) {
            this.sended = true;
            this.countDownInit();
            this.$toast('已经发送，请注意查收！');
          } else {
            this.$toast(res.data.msg);
          }
        })
        .finally(() => {
          this.sendMsgLoading = false;
        });
    },

    verifyPhoneNo(value) {
      return /^1[1023456789]\d{9}$/.test(value);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login-box {
  height: calc(100% - 0.92rem);
  position: relative;
}
.login-box-parent .van-field__icon .van-icon {
  color: #4b0;
}
.login-logo {
  width: 6.52rem;
  margin: 0 auto;
  display: block !important;
  height: 3.5rem;
}
.setp1,
.setp2 {
  padding-bottom: 0.36rem;
}
.login-box-parent .mint-cell.cell-last:before {
  bottom: 0;
}
.login-box-parent /deep/ .login-form-box {
  background: transparent !important;
}
.login-box-parent .message_code /deep/ .van-field__button {
  border: none;
}
</style>