gdy_app_8/src/view/course/user/login.vue

<template>
  <div class="page">
    <van-nav-bar title="经销商手机号绑定"></van-nav-bar>
    <div class="buibOuter">
      <div class="bindContent">
        <div class="tit">
          <p>请完善用户信息</p>
        </div>
        <van-form>
          <van-cell-group>
            <van-field
              v-model="form.name"
              :rules="[{ required: true}]"
              placeholder="请输入用户名"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="form.mobile"
              name="pattern"
              :rules="[{ pattern}]"
              placeholder="请输入手机号"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="form.code"
              center
              clearable
              :rules="[{ required: true}]"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  :loading="sendMsgLoading"
                  style="width: 2rem;"
                  :disabled="sended"
                  @click="getYzm()"
                  >{{ sendMsgText }}</van-button
                >
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button block type="info" @click="onSubmit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { returnJSEncrypt1 } from "@/utils/auth";
import { getMobileYzm,getUSerInfo } from "../api";
import { addDealer } from "../api";
import { setWxConfig } from "../utils";
export default {
  name: "courseLogin",
  components: {},
  props: [],
  data() {
    return {
      pid: null,
      sendMsgText: "获取验证码",
      sended: false,
      countdown: 60,
      form: {
        name: "",
        mobile: "",
        code: ""
      },
      sendMsgLoading: false,
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      partternY: /\d{6}/
    };
  },
  activated(){
    this.init();
    if(this.$isWx){
      setWxConfig();
    }
  },
  created() {
    // this.init();
  },
  methods: {
    // 初始化
    init() {
      if (this.$route.query && this.$route.query.pid) {
        this.pid = this.$route.query.pid;
      }
      if(JSON.parse(localStorage.getItem("wx_user_info")).marketable){
        this.$router.push('/courseHome')
      }
    },
    // 手机号校验
    checkMobile(sMobile) {
      if (!/^1\d{10}$/.test(sMobile)) {
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    getYzm() {
      if (!this.checkMobile(this.form.mobile)) {
        this.$toast.fail("请输入正确的手机号");
        return false;
      }
      let data = { mobile: this.form.mobile.toString(), type: 1 };
      this.sendMsgLoading = true;
      getMobileYzm({ data: returnJSEncrypt1(data) })
        .then(res => {
          this.sended = true;
          this.countDownInit();
          this.$toast.success("已经发送，请注意查收！");
        })
        .finally(() => {
          this.sendMsgLoading = false;
        });
    },
    // 验证码发送倒计时
    countDownInit() {
      let self = this;
      self.sendMsgText = "已发送（" + self.countdown + "）";
      if (self.countdown == 0) {
        self.countdown = 60;
        self.sendMsgText = "重新发送";
        self.sended = false;
        return false;
      } else {
        setTimeout(function() {
          self.countdown--;
          self.countDownInit();
        }, 1000);
      }
    },
    // 注册经销商提交
    onSubmit() {
      if (this.form.name && this.checkMobile(this.form.mobile) && this.form.code) {
        let data = {
          name: this.form.name,
          mobile: this.form.mobile,
          code: this.form.code
        };
        if (this.pid != null&&this.pid!=0) {
          data.pid = this.pid;
        }
        addDealer(data).then(res => {
          this.$toast.success("注册经销商成功");
          localStorage.removeItem('wx_user_info')
          setTimeout(() => {
            this.$router.replace("/courseHome");
          }, 1000);
        });
      } else {
        this.$toast.fail("请先将信息填写完整在提交");
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import url('../utils/navBar.scss');
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
.page {
  background: url(~@/assets/images/courseLogin.png) no-repeat;
  background-size: 100% 100%;
  .buibOuter {
    width: 100%;
    height: calc(100vh - 0.92rem);
    display: flex;
    justify-content: center;
    align-items: center;
    .bindContent {
      width: 92%;
      overflow: hidden;
      border-radius: 0.15rem;
      background: #fff;
      margin: 0 auto;
      padding: 0.5rem 0.3rem;
      box-sizing: border-box;
      .tit {
        display: flex;
        justify-content: center;
        p {
          font-size: 0.32rem;
          font-weight: 600;
          line-height: 0.32rem;
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}
/deep/ .van-field__control {
  font-size: 0.28rem;
  line-height: 0.9rem;
}
</style>