saas_manager/pages/login/register.vue

<template>
  <view class="regpage">
    <view class="regpage-title">注册账号</view>
    <view class="login_box">
      <u-form :model="form" ref="uForm" labelWidth="160">
        <u-form-item prop="tel" ref="tel" label="+86"
          ><u-input
            v-model="form.tel"
            border="bottom"
            type="number"
            maxlength="11"
            placeholder-style="color:#999999"
            placeholder="请输入手机号码"
        /></u-form-item>
        <u-form-item prop="code" label="验证码">
          <u-input
            label="+86"
            v-model="form.code"
            type="number"
            border="bottom"
            placeholder-style="color:#999999"
            placeholder="请输入验证码"
          >
            <template slot="suffix">
              <u-code
                ref="uCode"
                @change="codeChange"
                seconds="60"
                changeText="X秒重新获取"
              ></u-code>
              <u-button size="mini" @click="getCode">{{ codeTips }}</u-button>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="realname" label="姓名"
          ><u-input
            v-model="form.realname"
            border="bottom"
            placeholder-style="color:#999999"
            placeholder="请输入姓名" /></u-form-item
        ><u-form-item prop="idcard" label="身份证号"
          ><u-input
            v-model="form.idcard"
            border="bottom"
            placeholder-style="color:#999999"
            placeholder="请输入身份证号码"
        /></u-form-item>
        <u-form-item prop="pwd" label="登录密码"
          ><u-input
            v-model="form.pwd"
            type="password"
            border="bottom"
            placeholder-style="color:#999999"
            placeholder="请输入登录密码"
        /></u-form-item>
      </u-form>
    </view>
    <u-button
      :disabled="isUse"
      class="c_btn"
      text="注册"
      @click="submit"
    ></u-button>
  </view>
</template>

<script>
import { encryptor } from "@/common/jse";
import { registerUser, registerSms, accountLogin } from "@/utils/login";
export default {
  data() {
    return {
      form: {
        code: "",
        tel: "",
        pwd: "",
        realname: "",
        idcard: "",
      },
      codeTips: "",
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码格式不正确",
            trigger: ["change"],
          },
        ],
        pwd: [
          {
            pattern:
              /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/,
            min: 8,
            max: 16,
            required: true,
            message: "密码由8-16位、大小写字母、符号组成",
            trigger: ["change"],
          },
        ],
        realname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change"],
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["change"],
          },
        ],
        idcard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: "身份证号不正确",
            trigger: ["change", "blur"],
          },
        ],
      },
      isUse: false,
      isBack: false,
    };
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          this.isUse = true;
          registerUser(this.form).then(
            (res) => {
              this.isUse = false;
              uni.showModal({
                title: "提示",
                content: "注册成功",
                showCancel: false,
                success: (resst) => {
                  accountLogin({
                    account: this.form.tel,
                    pwd: encryptor(this.form.pwd),
                  }).then((data) => {
                    this.$store.commit("LOGIN_CB", data);
                    this.$store.dispatch("getUserInfo").then((res) => {
                      uni.navigateTo({
                        url: "/pages/index/index",
                      });
                    });
                  });
                },
              });
            },
            (err) => {
              this.isUse = false;
            }
          );
        })
        .catch((errors) => {
          console.log(errors);
        });
    },
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        this.$refs.uForm.validateField("tel", (res) => {
          if (res.length) {
            return;
          }
          let datas = { tel: this.form.tel };
          registerSms(datas).then(
            (res) => {
              this.$u.toast("验证码已发送");
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            },
            (err) => {
              console.log(err);
            }
          );
        });
      }
    },
  },
  onLoad(option) {
    this.$nextTick(() => {
      this.$refs.uForm.setRules(this.rules);
    });
    this.isBack = option.isBack;
  },
};
</script>

<style scoped lang="scss">
.regpage {
  padding: 0 48rpx;
  .regpage-title {
    font-weight: bold;
    color: #222222;
    font-size: 48rpx;
    margin: 96rpx 0;
  }
}

.login_box {
  margin-bottom: 100rpx;
}
</style>