| | |
| | | <template> |
| | | <el-form |
| | | class="login-form" |
| | | status-icon |
| | | :rules="loginRules" |
| | | ref="loginForm" |
| | | :model="loginForm" |
| | | label-width="0" |
| | | > |
| | | <el-form-item prop="username"> |
| | | <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0"> |
| | | <!-- <el-form-item prop="username"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | |
| | | > |
| | | <i slot="prefix" class="icon-yonghu" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | <el-form-item prop="phone"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.phone" |
| | | auto-complete="off" |
| | | :placeholder="$t('login.phone')" |
| | | > |
| | | <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.phone" auto-complete="off" |
| | | :placeholder="$t('login.phone')"> |
| | | <i slot="prefix" class="el-icon-phone-outline" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.password" |
| | | auto-complete="off" |
| | | show-password |
| | | :placeholder="$t('login.password')" |
| | | > |
| | | <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.password" auto-complete="off" |
| | | show-password :placeholder="$t('login.password')"> |
| | | <i slot="prefix" class="icon-mima" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item prop="password2"> |
| | | <el-input |
| | | size="small" |
| | | @keyup.enter.native="handleLogin" |
| | | v-model="loginForm.password2" |
| | | auto-complete="off" |
| | | show-password |
| | | :placeholder="$t('login.password2')" |
| | | > |
| | | <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.password2" auto-complete="off" |
| | | show-password :placeholder="$t('login.password2')"> |
| | | <i slot="prefix" class="icon-mima" /> |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="z-login-submit-prv"> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click.native.prevent="handleLogin" |
| | | class="z-login-submit" |
| | | >{{ $t("login.zc") }} |
| | | <el-button size="small" type="primary" @click.native.prevent="handleLogin" |
| | | class="z-login-submit">{{ $t("login.zc") }} |
| | | </el-button> |
| | | <el-button size="small" @click.native.prevent="gbs" class="z-login-submit" |
| | | >{{ $t("login.gb") }} |
| | | <el-button size="small" @click.native.prevent="gbs" class="z-login-submit">{{ $t("login.gb") }} |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | |
| | | <script> |
| | | import { isvalidatemobile } from "@/util/validate"; |
| | | import { mapGetters } from "vuex"; |
| | | import { zc } from "@/api/system/user"; |
| | | import { |
| | | isvalidatemobile |
| | | } from "@/util/validate"; |
| | | import { |
| | | mapGetters |
| | | } from "vuex"; |
| | | import { |
| | | zc |
| | | } from "@/api/system/user"; |
| | | |
| | | export default { |
| | | name: "codelogin", |
| | | data() { |
| | | const validatePass = (rule, value, callback) => { |
| | | if (value === "") { |
| | | callback(new Error("请输入密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass2 = (rule, value, callback) => { |
| | | if (value === "") { |
| | | callback(new Error("请再次输入密码")); |
| | | } else if (value !== this.loginForm.password) { |
| | | callback(new Error("两次输入密码不一致!")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePhone = (rule, value, callback) => { |
| | | if (isvalidatemobile(value)[0]) { |
| | | callback(new Error(isvalidatemobile(value)[1])); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateCode = (rule, value, callback) => { |
| | | if (value.length !== 4) { |
| | | callback(new Error("请输入4位数的验证码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | msgText: "", |
| | | msgTime: "", |
| | | dic: [], |
| | | msgKey: false, |
| | | loginForm: { |
| | | username: "", |
| | | phone: "", |
| | | password: "", |
| | | password2: "", |
| | | }, |
| | | value: "", |
| | | options: [], |
| | | loginRules: { |
| | | phone: [{ required: true, trigger: "blur", validator: validatePhone }], |
| | | code: [{ required: true, trigger: "blur", validator: validateCode }], |
| | | password: [ |
| | | { required: true, validator: validatePass, trigger: "blur" }, |
| | | ], |
| | | password2: [ |
| | | { required: true, validator: validatePass2, trigger: "blur" }, |
| | | ], |
| | | username: [ |
| | | { required: true, message: "请输入用户名", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | passwordType: "password", |
| | | passwordTypes: "password2", |
| | | }; |
| | | }, |
| | | created() { |
| | | this.msgText = this.config.MSGINIT; |
| | | this.msgTime = this.config.MSGTIME; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["tagWel"]), |
| | | config() { |
| | | export default { |
| | | name: "codelogin", |
| | | data() { |
| | | const validatePass = (rule, value, callback) => { |
| | | if (value === "") { |
| | | callback(new Error("请输入密码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePass2 = (rule, value, callback) => { |
| | | if (value === "") { |
| | | callback(new Error("请再次输入密码")); |
| | | } else if (value !== this.loginForm.password) { |
| | | callback(new Error("两次输入密码不一致!")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validatePhone = (rule, value, callback) => { |
| | | if (isvalidatemobile(value)[0]) { |
| | | callback(new Error(isvalidatemobile(value)[1])); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | const validateCode = (rule, value, callback) => { |
| | | if (value.length !== 4) { |
| | | callback(new Error("请输入4位数的验证码")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | return { |
| | | MSGINIT: this.$t("login.msgText"), |
| | | MSGSCUCCESS: this.$t("login.msgSuccess"), |
| | | MSGTIME: 60, |
| | | msgText: "", |
| | | msgTime: "", |
| | | dic: [], |
| | | msgKey: false, |
| | | loginForm: { |
| | | username: "", |
| | | account: "", |
| | | phone: "", |
| | | password: "", |
| | | password2: "", |
| | | }, |
| | | value: "", |
| | | options: [], |
| | | loginRules: { |
| | | phone: [{ |
| | | required: true, |
| | | trigger: "blur", |
| | | validator: validatePhone |
| | | }], |
| | | code: [{ |
| | | required: true, |
| | | trigger: "blur", |
| | | validator: validateCode |
| | | }], |
| | | password: [{ |
| | | required: true, |
| | | validator: validatePass, |
| | | trigger: "blur" |
| | | }, ], |
| | | password2: [{ |
| | | required: true, |
| | | validator: validatePass2, |
| | | trigger: "blur" |
| | | }, ], |
| | | username: [{ |
| | | required: true, |
| | | message: "请输入用户名", |
| | | trigger: "blur" |
| | | }, ], |
| | | }, |
| | | passwordType: "password", |
| | | passwordTypes: "password2", |
| | | }; |
| | | }, |
| | | }, |
| | | props: [], |
| | | methods: { |
| | | ergodicData(val) { |
| | | var arr = []; |
| | | arr.push({ |
| | | label: val[0].title, |
| | | value: val[0].value, |
| | | id: val[0].id, |
| | | parent_id: val[0].parent_id, |
| | | }); |
| | | if (val.length > 1) { |
| | | val.forEach((item, index) => { |
| | | if (index > 0) { |
| | | var ind = true; |
| | | var arrInd = 0; |
| | | arr.forEach((it, i) => { |
| | | if (item.parent_id == it.id) { |
| | | ind = false; |
| | | arrInd = i; |
| | | return; |
| | | } |
| | | }); |
| | | if (ind == false) { |
| | | if (arr[arrInd].children && arr[arrInd].children.length > 0) { |
| | | arr[arrInd].children.push({ |
| | | label: item.title, |
| | | value: item.value, |
| | | id: item.id, |
| | | parent_id: item.parent_id, |
| | | }); |
| | | } else { |
| | | arr[arrInd].children = []; |
| | | arr[arrInd].children.push({ |
| | | label: item.title, |
| | | value: item.value, |
| | | id: item.id, |
| | | parent_id: item.parent_id, |
| | | }); |
| | | } |
| | | } else { |
| | | arr.push({ |
| | | label: item.title, |
| | | value: item.value, |
| | | id: item.id, |
| | | parent_id: item.parent_id, |
| | | }); |
| | | } |
| | | } |
| | | created() { |
| | | this.msgText = this.config.MSGINIT; |
| | | this.msgTime = this.config.MSGTIME; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["tagWel"]), |
| | | config() { |
| | | return { |
| | | MSGINIT: this.$t("login.msgText"), |
| | | MSGSCUCCESS: this.$t("login.msgSuccess"), |
| | | MSGTIME: 60, |
| | | }; |
| | | }, |
| | | }, |
| | | props: [], |
| | | methods: { |
| | | ergodicData(val) { |
| | | var arr = []; |
| | | arr.push({ |
| | | label: val[0].title, |
| | | value: val[0].value, |
| | | id: val[0].id, |
| | | parent_id: val[0].parent_id, |
| | | }); |
| | | } |
| | | if (val.length > 1) { |
| | | val.forEach((item, index) => { |
| | | if (index > 0) { |
| | | var ind = true; |
| | | var arrInd = 0; |
| | | arr.forEach((it, i) => { |
| | | if (item.parent_id == it.id) { |
| | | ind = false; |
| | | arrInd = i; |
| | | return; |
| | | } |
| | | }); |
| | | if (ind == false) { |
| | | if (arr[arrInd].children && arr[arrInd].children.length > 0) { |
| | | arr[arrInd].children.push({ |
| | | label: item.title, |
| | | value: item.value, |
| | | id: item.id, |
| | | parent_id: item.parent_id, |
| | | }); |
| | | } else { |
| | | arr[arrInd].children = []; |
| | | arr[arrInd].children.push({ |
| | | label: item.title, |
| | | value: item.value, |
| | | id: item.id, |
| | | parent_id: item.parent_id, |
| | | }); |
| | | } |
| | | } else { |
| | | arr.push({ |
| | | label: item.title, |
| | | value: item.value, |
| | | id: item.id, |
| | | parent_id: item.parent_id, |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | return arr; |
| | | }, |
| | | return arr; |
| | | }, |
| | | |
| | | clearValidate(formName) { |
| | | this.$refs[formName].clearValidate(); |
| | | }, |
| | | refreshCode(row) { |
| | | zc(row.username, row.password, row.phone).then((res) => { |
| | | clearValidate(formName) { |
| | | this.$refs[formName].clearValidate(); |
| | | }, |
| | | refreshCode(row) { |
| | | zc(row).then((res) => { |
| | | this.loginForm.username = ""; |
| | | this.loginForm.phone = ""; |
| | | this.loginForm.password = ""; |
| | | this.loginForm.password2 = ""; |
| | | this.$notify({ |
| | | title: "注册成功", |
| | | type: "warning", |
| | | }); |
| | | }); |
| | | var z = document.querySelector(".z"); |
| | | z.style.display = "none"; |
| | | this.clearValidate("loginForm"); |
| | | this.clearValidate("loginForm"); |
| | | }, |
| | | gb() { |
| | | this.loginForm.username = ""; |
| | | this.loginForm.phone = ""; |
| | | this.loginForm.password = ""; |
| | | this.loginForm.password2 = ""; |
| | | this.$notify({ |
| | | title: "注册成功", |
| | | type: "warning", |
| | | }); |
| | | }); |
| | | var z = document.querySelector(".z"); |
| | | z.style.display = "none"; |
| | | this.clearValidate("loginForm"); |
| | | this.clearValidate("loginForm"); |
| | | }, |
| | | gb() { |
| | | this.loginForm.username = ""; |
| | | this.loginForm.password = ""; |
| | | this.loginForm.password2 = ""; |
| | | var zs = document.querySelector(".z"); |
| | | zs.style.display = "none"; |
| | | this.clearValidate("loginForm"); |
| | | }, |
| | | handleSend() { |
| | | if (this.msgKey) return; |
| | | this.msgText = this.msgTime + this.config.MSGSCUCCESS; |
| | | this.msgKey = true; |
| | | const time = setInterval(() => { |
| | | this.msgTime--; |
| | | var zs = document.querySelector(".z"); |
| | | zs.style.display = "none"; |
| | | this.clearValidate("loginForm"); |
| | | }, |
| | | handleSend() { |
| | | if (this.msgKey) return; |
| | | this.msgText = this.msgTime + this.config.MSGSCUCCESS; |
| | | if (this.msgTime === 0) { |
| | | this.msgTime = this.config.MSGTIME; |
| | | this.msgText = this.config.MSGINIT; |
| | | this.msgKey = false; |
| | | clearInterval(time); |
| | | } |
| | | }, 1000); |
| | | this.msgKey = true; |
| | | const time = setInterval(() => { |
| | | this.msgTime--; |
| | | this.msgText = this.msgTime + this.config.MSGSCUCCESS; |
| | | if (this.msgTime === 0) { |
| | | this.msgTime = this.config.MSGTIME; |
| | | this.msgText = this.config.MSGINIT; |
| | | this.msgKey = false; |
| | | clearInterval(time); |
| | | } |
| | | }, 1000); |
| | | }, |
| | | showPassword() { |
| | | this.passwordType === "" ? |
| | | (this.passwordType = "password") : |
| | | (this.passwordType = ""); |
| | | }, |
| | | showPasswords() { |
| | | this.passwordType === "" ? |
| | | (this.passwordType = "password2") : |
| | | (this.passwordType = ""); |
| | | }, |
| | | handleLogin() { |
| | | this.$refs.loginForm.validate((valid) => { |
| | | console.log(valid); |
| | | if (valid) { |
| | | this.loginForm.account = this.loginForm.phone |
| | | this.refreshCode(this.loginForm); |
| | | this.message("dahsiofhiusa"); |
| | | return Promise.reject(new Error("注册成功,待审核")); |
| | | } |
| | | }); |
| | | }, |
| | | gbs() { |
| | | this.gb(); |
| | | }, |
| | | }, |
| | | showPassword() { |
| | | this.passwordType === "" |
| | | ? (this.passwordType = "password") |
| | | : (this.passwordType = ""); |
| | | }, |
| | | showPasswords() { |
| | | this.passwordType === "" |
| | | ? (this.passwordType = "password2") |
| | | : (this.passwordType = ""); |
| | | }, |
| | | handleLogin() { |
| | | this.$refs.loginForm.validate((valid) => { |
| | | console.log(valid); |
| | | if (valid) { |
| | | this.refreshCode(this.loginForm); |
| | | this.message("dahsiofhiusa"); |
| | | return Promise.reject(new Error("注册成功,待审核")); |
| | | } |
| | | }); |
| | | }, |
| | | gbs() { |
| | | this.gb(); |
| | | }, |
| | | }, |
| | | }; |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | .msg-text { |
| | | display: block; |
| | | width: 40px; |
| | | font-size: 12px; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | } |
| | | .msg-text { |
| | | display: block; |
| | | width: 40px; |
| | | font-size: 12px; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .msg-text.display { |
| | | color: #ccc; |
| | | } |
| | | .msg-text.display { |
| | | color: #ccc; |
| | | } |
| | | |
| | | .z-login-submit-prv { |
| | | margin-top: 20px; |
| | | padding: 0 10%; |
| | | box-sizing: border-box; |
| | | } |
| | | .z-login-submit-prv { |
| | | margin-top: 20px; |
| | | padding: 0 10%; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .z-login-submit-prv > div { |
| | | width: 80%; |
| | | display: flex; |
| | | } |
| | | .z-login-submit-prv>div { |
| | | width: 80%; |
| | | display: flex; |
| | | } |
| | | |
| | | .z-login-submit { |
| | | flex: 1; |
| | | height: 45px; |
| | | border: 1px solid #409eff; |
| | | background: none; |
| | | font-size: 18px; |
| | | letter-spacing: 2px; |
| | | font-weight: 300; |
| | | color: #409eff; |
| | | cursor: pointer; |
| | | font-family: "neo"; |
| | | -webkit-transition: 0.25s; |
| | | transition: 0.25s; |
| | | } |
| | | .z-login-submit { |
| | | flex: 1; |
| | | height: 45px; |
| | | border: 1px solid #409eff; |
| | | background: none; |
| | | font-size: 18px; |
| | | letter-spacing: 2px; |
| | | font-weight: 300; |
| | | color: #409eff; |
| | | cursor: pointer; |
| | | font-family: "neo"; |
| | | -webkit-transition: 0.25s; |
| | | transition: 0.25s; |
| | | } |
| | | </style> |