From 1e4a3f702623a46bcd53dbc96e235d51e0edb155 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期五, 05 八月 2022 04:13:02 +0800 Subject: [PATCH] 管理中心添加分析 --- src/views/login/components/loginForm.vue | 215 ++++++++++++++++++++++++----------------------------- 1 files changed, 96 insertions(+), 119 deletions(-) diff --git a/src/views/login/components/loginForm.vue b/src/views/login/components/loginForm.vue index ca53a63..a4b4e5a 100644 --- a/src/views/login/components/loginForm.vue +++ b/src/views/login/components/loginForm.vue @@ -11,10 +11,7 @@ class="demo-ruleForm" > <el-form-item prop="loginName"> - <el-input - v-model.trim="user.loginName" - placeholder="璇疯緭鍏ユ墜鏈哄彿 / 鐢ㄦ埛鍚�" - > + <el-input v-model.trim="user.loginName" placeholder="璇疯緭鍏ユ墜鏈哄彿 / 鐢ㄦ埛鍚�"> <i slot="prefix" class="iconfont"></i> </el-input> </el-form-item> @@ -42,9 +39,7 @@ <el-link class="cursor-register" target="_blank"> <router-link to="/Register">娉ㄥ唽</router-link> </el-link> - <el-link class="cursor-pointer" type="primary" @click="forget" - >蹇樿瀵嗙爜</el-link - > + <el-link class="cursor-pointer" type="primary" @click="forget">蹇樿瀵嗙爜</el-link> </div> </el-form> </el-tab-pane> @@ -72,12 +67,9 @@ > <i slot="prefix" class="iconfont icon-yanzhengma"></i> </el-input> - <el-button - class="code-btn" - :disabled="codeDisabled" - @click="getCode('phoneLogin')" - >{{ codeMsg }}</el-button - > + <el-button class="code-btn" :disabled="codeDisabled" @click="getCode('phoneLogin')">{{ + codeMsg + }}</el-button> </el-form-item> <el-form-item> <el-button @@ -92,9 +84,7 @@ <el-link class="cursor-register" target="_blank"> <router-link to="/Register">娉ㄥ唽</router-link> </el-link> - <el-link class="cursor-pointer" type="primary" @click="forget" - >蹇樿瀵嗙爜</el-link - > + <el-link class="cursor-pointer" type="primary" @click="forget">蹇樿瀵嗙爜</el-link> </div> </el-form> </el-tab-pane> @@ -104,18 +94,13 @@ </template> <script> -import { - tologin, - getLoginUserData, - makeVerifyCode, - getMenuPermission, -} from "@/api/login"; -import { isPhone } from "@/scripts/validate"; +import { tologin, getLoginUserData, makeVerifyCode, getMenuPermission } from "@/api/login" +import { isPhone } from "@/scripts/validate" export default { name: "login-pgae", metaInfo: { - title: "鐧诲綍椤�", + title: "鐧诲綍椤�" }, data: () => ({ activeName: "first", @@ -130,32 +115,28 @@ user: { loginName: "", password: "", - rememberMe: false, + rememberMe: false }, phone: { phoneNum: "", - verifyCode: "", + verifyCode: "" }, nullRule: {}, userRules: { - loginName: [ - { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "change" }, - ], - password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "change" }], + loginName: [{ required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "change" }], + password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "change" }] }, phoneCodeRule: { phoneNum: [{ validator: isPhone, trigger: "change" }], - verifyCode: [ - { required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "change" }, - ], + verifyCode: [{ required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "change" }] }, loading: "", - vLoading: false, + vLoading: false }), methods: { phoneLogin() { - this.nullRule = this.phoneCodeRule; + this.nullRule = this.phoneCodeRule this.$nextTick(() => { this.$refs["phoneLogin"].validate((valid) => { if (valid) { @@ -163,23 +144,23 @@ // lock: true, text: "Loading", spinner: "el-icon-loading", - background: "rgba(0, 0, 0, 0.7)", - }); + background: "rgba(0, 0, 0, 0.7)" + }) let param = { phoneNum: this.phone.phoneNum, - verifyCode: this.phone.verifyCode, - }; - this.testLogin(param); + verifyCode: this.phone.verifyCode + } + this.testLogin(param) // return false } else { - this.nullRule = {}; + this.nullRule = {} } - }); - this.nullRule = {}; - }); + }) + this.nullRule = {} + }) }, userLogin() { - this.nullRule = this.userRules; + this.nullRule = this.userRules this.$nextTick(() => { this.$refs["userLogin"].validate((valid) => { if (valid) { @@ -187,32 +168,32 @@ // lock: true, text: "Loading", spinner: "el-icon-loading", - background: "rgba(0, 0, 0, 0.7)", - }); + background: "rgba(0, 0, 0, 0.7)" + }) let param = { username: this.user.loginName, - password: this.user.password, - }; - this.testLogin(param); + password: this.user.password + } + this.testLogin(param) // return false } else { - this.nullRule = {}; + this.nullRule = {} } - }); - this.nullRule = {}; - }); + }) + this.nullRule = {} + }) }, getValidStr() { if (this.countdown > 0 && this.countdown <= 60) { - this.countdown--; + this.countdown-- if (this.countdown !== 0) { - this.codeMsg = `${this.countdown}s`; + this.codeMsg = `${this.countdown}s` } else { - clearInterval(this.timer); - this.codeMsg = "鑾峰彇楠岃瘉鐮�"; - this.countdown = 60; - this.timer = null; - this.codeDisabled = false; + clearInterval(this.timer) + this.codeMsg = "鑾峰彇楠岃瘉鐮�" + this.countdown = 60 + this.timer = null + this.codeDisabled = false } } }, @@ -233,86 +214,82 @@ this.$refs[formName].validateField("phoneNum", (res) => { if (res) { - document.querySelector(".phoneNum .el-input__inner").focus(); + document.querySelector(".phoneNum .el-input__inner").focus() } if (!this.timer && !res) { - this.codeDisabled = true; - this.getValidStr(); - this.timer = setInterval(this.getValidStr, 1000); + this.codeDisabled = true + this.getValidStr() + this.timer = setInterval(this.getValidStr, 1000) makeVerifyCode({ phoneNum: this.phone.phoneNum, type: 0 }) .then(() => { - this.gotCode = true; + this.gotCode = true }) .catch((err) => { - console.log(this.$refs[formName].fields); - this.$refs[formName].fields[0].validateState = "error"; + console.log(this.$refs[formName].fields) + this.$refs[formName].fields[0].validateState = "error" setTimeout(() => { if (document.querySelector(".el-form-item__error")) { document.querySelector(".el-form-item__error").innerHTML = - '<span class="iconfont error"></span>鎵嬫満鍙锋湭娉ㄥ唽,鎮ㄥ彲浠�<span class="colorBlue toRegister">鍘绘敞鍐�</span>'; + '<span class="iconfont error"></span>鎵嬫満鍙锋湭娉ㄥ唽,鎮ㄥ彲浠�<span class="colorBlue toRegister">鍘绘敞鍐�</span>' this.$nextTick(() => { - document - .querySelector(".toRegister") - .addEventListener("click", () => { - this.$router.push("/register"); - }); - }); + document.querySelector(".toRegister").addEventListener("click", () => { + this.$router.push("/register") + }) + }) } else { - this.$refs[formName].fields[0].validateMessage = err.data.msg; + this.$refs[formName].fields[0].validateMessage = err.data.msg } - document.querySelector(".phoneNum .el-input__inner").focus(); - }, 100); - }); + document.querySelector(".phoneNum .el-input__inner").focus() + }, 100) + }) } - }); + }) }, async testLogin(param) { tologin(param) .then((res) => { - const data = res.data; + const data = res.data const loginedInfo = { access_token: data.token_type + " " + data.access_token, - refresh_token: data.refresh_token, - }; - sessionStorage.setItem("expires_in", data.expires_in); - sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo)); + refresh_token: data.refresh_token + } + sessionStorage.setItem("expires_in", data.expires_in) + sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo)) getMenuPermission().then((rep) => { - data.userInfo.permissions = rep.data.permissions; - sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo)); - this.$router.push("/"); - }); - this.loading.close(); + data.userInfo.permissions = rep.data.permissions + sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo)) + this.$router.push("/manageCenter") + }) + this.loading.close() }) .catch((err) => { - this.loading.close(); + this.loading.close() if (err.data && err.data.msg == "楠岃瘉鐮佹湁璇�") { - this.$refs["phoneLogin"].fields[1].validateState = "error"; + this.$refs["phoneLogin"].fields[1].validateState = "error" setTimeout(() => { if (document.querySelector(".el-form-item__error")) { document.querySelector(".el-form-item__error").innerHTML = - '<span class="iconfont error"></span>楠岃瘉鐮佷笉姝g‘锛岃閲嶆柊杈撳叆'; + '<span class="iconfont error"></span>楠岃瘉鐮佷笉姝g‘锛岃閲嶆柊杈撳叆' } else { - this.$refs["phoneLogin"].fields[1].validateMessage = - err.data.msg; + this.$refs["phoneLogin"].fields[1].validateMessage = err.data.msg } - document.querySelector(".phoneNum .el-input__inner").focus(); - }, 100); + document.querySelector(".phoneNum .el-input__inner").focus() + }, 100) } else if (err.data.msg == "鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎") { - this.$refs["userLogin"].fields[1].validateState = "error"; + this.$refs["userLogin"].fields[1].validateState = "error" setTimeout(() => { if (document.querySelector(".el-form-item__error")) { document.querySelector(".el-form-item__error").innerHTML = - '<span class="iconfont error"></span>鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎'; + '<span class="iconfont error"></span>鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎' } else { - this.$refs["userLogin"].fields[1].validateMessage = - err.data.msg; + this.$refs["userLogin"].fields[1].validateMessage = err.data.msg } - document.querySelector(".phoneNum .el-input__inner").focus(); - }, 100); + document.querySelector(".phoneNum .el-input__inner").focus() + }, 100) } // this.$notify({ @@ -323,29 +300,29 @@ // offset: 57, // }); // this.$refs.pwd.focus(); - }); + }) // this.loading = false }, forget() { this.$router.push({ path: "/Register", query: { - isReset: true, - }, - }); + isReset: true + } + }) }, async getLoginUserData() { - let json = await getLoginUserData(); + let json = await getLoginUserData() if (!json.error) { // this.loading.close() - sessionStorage.setItem("userInfo", JSON.stringify(json)); + sessionStorage.setItem("userInfo", JSON.stringify(json)) this.$notify({ title: "鎻愮ず", type: "success", message: "鐧诲綍鎴愬姛锛�", duration: 2500, - offset: 57, - }); + offset: 57 + }) /* 鍒ゆ柇褰撳墠鏄惁鍦ㄧ櫥褰曢〉锛屽鏋滃湪鐧诲綍椤� */ // if (window.location.href.indexOf('/login') !== -1) { // router.push({ @@ -356,21 +333,21 @@ // }) // } // await this.getMenuList(); - this.$router.push("/Layout/ProductCenter"); - return json; + this.$router.push("/Layout/ProductCenter") + return json } else { this.$notify({ title: "鎻愮ず", type: "error", message: "鐧诲綍澶辫触锛�", duration: 2500, - offset: 57, - }); + offset: 57 + }) // this.loading.close() } - }, - }, -}; + } + } +} </script> <style lang="scss" scoped> @@ -548,4 +525,4 @@ } } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0