export default { name: "Login", components: { Loading, FooterCopyright }, data() { const validateCode = (rule, value, callback) => { if (value === "") { callback(new Error("验证码为空")); return false; } else if (value !== this.identifyCode) { callback(new Error("验证码不正确")); return false; } else { callback(); } }; //使用正则表达式验证手机号 const checkPhone = (rule, value, callback) => { if (!value) { return callback(new Error("手机号不能为空")); } else { //获取工具类中的手机号正则表达式 const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; if (phoneReg.test(value)) { callback(); } else { //如果验证输入错误就清空 this.form.phone = ""; return callback(new Error("请输入正确的手机号")); } } }; return { showLoading: false, identifyCode: "", codeBtnWord: "获取验证码", // 获取验证码按钮文字 waitTime: 61, // 获取验证码按钮失效时间 form: { phone: "", password: "", code: "", }, rules: { phone: { validator: checkPhone, // required: true, // message: "手机号", trigger: "blur", }, password: { required: true, message: "请输入密码", trigger: "blur" }, code: [ { // validator: validateCode, required: true, message: "请输入验证码", trigger: "blur", }, ], }, }; }, computed: { ...mapGetters(["userInfo", "isLogin"]), // 用于校验手机号码格式是否正确 phoneNumberStyle() { let reg = /^1[3456789]\d{9}$/; if (!reg.test(this.form.phone)) { return false; } return true; }, // 控制获取验证码按钮是否可点击 getCodeBtnDisable: { //设置按钮61s get() { if (this.waitTime === 61) { if (this.form.phone && this.phoneNumberStyle) { return false; } return true; } return true; }, // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加 set() {}, }, }, mounted() {}, methods: { ...mapActions(["userInfoSync", "setisLoginSync"]), // 获取验证码 getCode() { this.waitTime--; this.getCodeBtnDisable = true; this.codeBtnWord = `${this.waitTime}s 后获取`; let timer = setInterval(() => { if (this.waitTime > 1) { this.waitTime--; this.codeBtnWord = `${this.waitTime}s 后获取`; } else { clearInterval(timer); this.codeBtnWord = "获取验证码"; this.getCodeBtnDisable = false; this.waitTime = 61; } }, 1000); }, // 确认 onSubmit() { this.$refs.ruleForm.validate((valid) => { if (valid) { // 模拟登录 let { phone, password, code } = this.form; if (phone == "13014032506" && code == "123456") { this.userInfoSync({ phone, code }); this.setisLoginSync(true); this.$router.push("/home"); } else { this.$message.error("请检查是否填写正确"); } } else { this.$message.error("请检查是否填写完整"); console.log("error submit!!"); return false; } }); }, // 重置表单 resetForm() { this.$refs.ruleForm.resetFields(); }, goPath() { this.$router.push("/home"); }, },};

.Login { width: 100%; height: 100%; background-image: url("~@/assets/images/bg_repeat_white.png"); overflow: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; .ant-form { width: 88%; .btnCode { min-width: 36%; margin-left: 4px; } /* .disabled-style { background-color: #eeeeee; color: #cccccc; margin-left: 16px; width: calc(100% - 16px); text-align: center; padding-left: 0px; padding-right: 0px; font-size: 12px; } .code-style { margin-left: 16px; width: calc(100% - 16px); color: #606266; text-align: center; padding-left: 0px; padding-right: 0px; font-size: 10px; } */ }

.footer { padding: 30px 0; }

.container { width: 550px; min-height: 350px; border-radius: 5px; background: #fff; margin: auto; padding: 18px 40px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: space-around; align-items: center; .title { font-size: 35px; font-weight: bold; } .buns { height: 45px; padding: 0 30px; font-size: 20px; } } @media screen and (min-width: 769px) and (max-width: 1000px) { .title { font-size: 50px; text-align: center; } .container { width: 80%; } } @media screen and (max-width: 769px) { .title { font-size: 50px; text-align: center; } .container { width: 90%; } }}