| | |
| | | class="login-form" |
| | | > |
| | | <h3 class="title">无锡儿童医院智慧随访平台</h3> |
| | | |
| | | <!-- 登录方式切换 --> |
| | | <div class="login-method"> |
| | | <el-radio-group v-model="loginMethod" @change="changeLoginMethod"> |
| | | <el-radio-button label="password">密码登录</el-radio-button> |
| | | <el-radio-button label="sms">验证码登录</el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | |
| | | <!-- 用户名/手机号输入 --> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | type="text" |
| | | auto-complete="off" |
| | | placeholder="账号" |
| | | :placeholder="loginMethod === 'password' ? '账号' : '手机号'" |
| | | > |
| | | <svg-icon |
| | | slot="prefix" |
| | | icon-class="user" |
| | | class="el-input__icon input-icon" |
| | | /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon |
| | | slot="prefix" |
| | | icon-class="password" |
| | | :icon-class="loginMethod === 'password' ? 'user' : 'phone'" |
| | | class="el-input__icon input-icon" |
| | | /> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-checkbox |
| | | v-model="loginForm.rememberMe" |
| | | style="margin: 0px 0px 25px 0px" |
| | | >记住密码</el-checkbox |
| | | > |
| | | <!-- 密码登录部分 --> |
| | | <template v-if="loginMethod === 'password'"> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon |
| | | slot="prefix" |
| | | icon-class="password" |
| | | class="el-input__icon input-icon" |
| | | /> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px"> |
| | | 记住密码 |
| | | </el-checkbox> |
| | | </template> |
| | | |
| | | <!-- 验证码登录部分 --> |
| | | <template v-else> |
| | | <el-form-item prop="smsCode"> |
| | | <el-input |
| | | v-model="loginForm.smsCode" |
| | | auto-complete="off" |
| | | placeholder="短信验证码" |
| | | style="width: 60%" |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <svg-icon |
| | | slot="prefix" |
| | | icon-class="validCode" |
| | | class="el-input__icon input-icon" |
| | | /> |
| | | </el-input> |
| | | <el-button |
| | | :disabled="countdown > 0" |
| | | @click="phoneCode" |
| | | style="width: 38%; margin-left: 2%" |
| | | > |
| | | {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }} |
| | | </el-button> |
| | | </el-form-item> |
| | | </template> |
| | | |
| | | <el-form-item style="width: 100%"> |
| | | <el-button |
| | | :loading="loading" |
| | |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | <div style="float: right" v-if="register"> |
| | | <router-link class="link-type" :to="'/register'" |
| | | >立即注册1</router-link |
| | | > |
| | | <router-link class="link-type" :to="'/register'">立即注册</router-link> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | </div> |
| | | <!-- <div class="block"> |
| | | <div class="smerry"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getCodeImg } from "@/api/login"; |
| | | import { getCodeImg, phoneCode } from "@/api/login"; |
| | | import Cookies from "js-cookie"; |
| | | import { encrypt, decrypt } from "@/utils/jsencrypt"; |
| | | |
| | | export default { |
| | | name: "Login", |
| | | data() { |
| | | // 验证手机号规则 |
| | | const validatePhone = (rule, value, callback) => { |
| | | if (!value) { |
| | | callback(new Error("请输入手机号")); |
| | | } else if (!/^1[3-9]\d{9}$/.test(value)) { |
| | | callback(new Error("请输入正确的手机号")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | |
| | | return { |
| | | loginMethod: "password", // 登录方式,password或sms |
| | | countdown: 0, // 短信验证码倒计时 |
| | | timer: null, // 倒计时定时器 |
| | | codeUrl: "", |
| | | loginForm: { |
| | | username: "", |
| | | password: "", |
| | | smsCode: "", |
| | | rememberMe: false, |
| | | code: "", |
| | | orgid: "1", |
| | |
| | | loginRules: { |
| | | username: [ |
| | | { required: true, trigger: "blur", message: "请输入您的账号" }, |
| | | { validator: validatePhone, trigger: "blur", when: () => this.loginMethod === "sms" } |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", message: "请输入您的密码" }, |
| | | { required: true, trigger: "blur", message: "请输入您的密码", when: () => this.loginMethod === "password" }, |
| | | ], |
| | | // orgid: [{ required: true, trigger: "blur", message: "请选择院区" }], |
| | | smsCode: [ |
| | | { required: true, trigger: "blur", message: "请输入验证码", when: () => this.loginMethod === "sms" }, |
| | | { pattern: /^\d{6}$/, message: "验证码为6位数字", trigger: "blur", when: () => this.loginMethod === "sms" } |
| | | ], |
| | | }, |
| | | loading: false, |
| | | // 验证码开关 |
| | | captchaEnabled: true, |
| | | // 注册开关 |
| | | register: false, |
| | | redirect: undefined, |
| | | }; |
| | |
| | | created() { |
| | | this.getCode(); |
| | | this.getCookie(); |
| | | // if (localStorage.getItem('orgid')) { |
| | | // this.loginForm.orgid = localStorage.getItem('orgid'); |
| | | // } |
| | | }, |
| | | beforeDestroy() { |
| | | if (this.timer) { |
| | | clearInterval(this.timer); |
| | | } |
| | | }, |
| | | methods: { |
| | | // 切换登录方式 |
| | | changeLoginMethod() { |
| | | this.$refs.loginForm.clearValidate(); |
| | | }, |
| | | |
| | | // 发送短信验证码 |
| | | phoneCode() { |
| | | this.$refs.loginForm.validateField("username", (error) => { |
| | | if (!error) { |
| | | this.loading = true; |
| | | phoneCode({ phone: this.loginForm.username }) |
| | | .then(() => { |
| | | this.$message.success("验证码已发送"); |
| | | this.startCountdown(); |
| | | this.loading = false; |
| | | |
| | | }) |
| | | .catch(() => { |
| | | this.loading = false; |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 开始倒计时 |
| | | startCountdown() { |
| | | this.countdown = 60; |
| | | this.timer = setInterval(() => { |
| | | this.countdown--; |
| | | if (this.countdown <= 0) { |
| | | clearInterval(this.timer); |
| | | } |
| | | }, 1000); |
| | | }, |
| | | |
| | | getCode() { |
| | | getCodeImg().then((res) => { |
| | | console.log(res); |
| | |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | getCookie() { |
| | | const username = Cookies.get("username"); |
| | | const password = Cookies.get("password"); |
| | |
| | | rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), |
| | | }; |
| | | }, |
| | | |
| | | handleLogin() { |
| | | this.$refs.loginForm.validate((valid) => { |
| | | if (valid) { |
| | | this.loading = true; |
| | | if (this.loginForm.rememberMe) { |
| | | |
| | | if (this.loginMethod === "password" && this.loginForm.rememberMe) { |
| | | Cookies.set("username", this.loginForm.username, { expires: 30 }); |
| | | Cookies.set("password", encrypt(this.loginForm.password), { |
| | | expires: 30, |
| | |
| | | Cookies.remove("password"); |
| | | Cookies.remove("rememberMe"); |
| | | } |
| | | (this.loginForm.orgid = "1"), |
| | | this.$store |
| | | .dispatch("Login", this.loginForm) |
| | | .then(() => { |
| | | this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
| | | // this.$router.push({ path:"/patient/patient" }).catch(() => {}); |
| | | }) |
| | | .catch(() => { |
| | | this.loading = false; |
| | | if (this.captchaEnabled) { |
| | | this.getCode(); |
| | | } |
| | | }); |
| | | |
| | | const loginData = { |
| | | username: this.loginForm.username, |
| | | orgid: "1", |
| | | loginType: this.loginMethod |
| | | }; |
| | | |
| | | if (this.loginMethod === "password") { |
| | | loginData.password = this.loginForm.password; |
| | | } else { |
| | | console.log(this.loginForm.smsCode); |
| | | |
| | | loginData.phoneCode = this.loginForm.smsCode; |
| | | } |
| | | |
| | | this.$store |
| | | .dispatch("Login", loginData) |
| | | .then(() => { |
| | | this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
| | | }) |
| | | .catch(() => { |
| | | this.loading = false; |
| | | if (this.captchaEnabled) { |
| | | this.getCode(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }, |