| 1 |
- {"remainingRequest":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\test\\ssi-satoken\\ui\\src\\views\\login\\index.vue?vue&type=style&index=0&id=d3ba178c&prod&rel=stylesheet%2Fscss&lang=scss&","dependencies":[{"path":"D:\\test\\ssi-satoken\\ui\\src\\views\\login\\index.vue","mtime":1697441561764},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":1669864554855},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1697679531049},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1669864555556},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1697679535560},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1669864538178},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1697679531049}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQoubG9naW4gew0KICBkaXNwbGF5OiBmbGV4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgaGVpZ2h0OiAxMDAlOw0KICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoIi4uLy4uL2Fzc2V0cy9sb2dpbi5qcGciKTsNCiAgYmFja2dyb3VuZC1zaXplOiBjb3ZlcjsNCg0KDQogIHBvc2l0aW9uOiBmaXhlZDsNCiAgdG9wOiAwOw0KICBsZWZ0OiAwOw0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICB6LWluZGV4OiAxMDsNCiAgem9vbTogMTsNCg0KICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBib3R0b207DQoNCn0NCg0KLnRpdGxlIHsNCiAgbWFyZ2luOiAwcHggYXV0byAzMHB4IGF1dG87DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgY29sb3I6ICM3MDcwNzA7DQp9DQoNCi5sb2dpbi1mb3JtIHsNCiAgYm9yZGVyLXJhZGl1czogNnB4Ow0KICBiYWNrZ3JvdW5kOiAjZmZmZmZmOw0KICB3aWR0aDogNDAwcHg7DQogIHBhZGRpbmc6IDI1cHggMjVweCA1cHggMjVweDsNCg0KICAuZWwtaW5wdXQgew0KICAgIGhlaWdodDogMzhweDsNCg0KICAgIGlucHV0IHsNCiAgICAgIGhlaWdodDogMzhweDsNCiAgICB9DQogIH0NCg0KICAuaW5wdXQtaWNvbiB7DQogICAgaGVpZ2h0OiAzOXB4Ow0KICAgIHdpZHRoOiAxNHB4Ow0KICAgIG1hcmdpbi1sZWZ0OiAycHg7DQogIH0NCn0NCg0KLmxvZ2luLXRpcCB7DQogIGZvbnQtc2l6ZTogMTNweDsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KICBjb2xvcjogI2JmYmZiZjsNCn0NCg0KLmxvZ2luLWNvZGUgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgd2lkdGg6IDMzJTsNCiAgaGVpZ2h0OiAzOHB4Ow0KICBmbG9hdDogcmlnaHQ7DQoNCiAgaW1nIHsNCiAgICBjdXJzb3I6IHBvaW50ZXI7DQogICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTsNCiAgfQ0KfQ0KDQouZWwtbG9naW4tZm9vdGVyIHsNCiAgaGVpZ2h0OiA0MHB4Ow0KICBsaW5lLWhlaWdodDogNDBweDsNCiAgcG9zaXRpb246IGZpeGVkOw0KICBib3R0b206IDA7DQogIHdpZHRoOiAxMDAlOw0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogIGNvbG9yOiAjZmZmOw0KICBmb250LWZhbWlseTogQXJpYWw7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgbGV0dGVyLXNwYWNpbmc6IDFweDsNCn0NCg0KLmxvZ2luLWNvZGUtaW1nIHsNCiAgaGVpZ2h0OiAzOHB4Ow0KICB3aWR0aDogMTA1cHg7DQp9DQoNCi5tYWlsLWJveCB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICB3aWR0aDogMzYlOw0KICBoZWlnaHQ6IDM4cHg7DQogIGZsb2F0OiByaWdodDsNCg0KICBpbWcgew0KICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOw0KICB9DQp9DQoNCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6MA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/login","sourcesContent":["<template>\r\n <div class=\"login\">\r\n <el-form ref=\"loginForm\" :model=\"loginForm\" :rules=\"loginRules\" class=\"login-form\">\r\n <el-form-item prop=\"username\" label-width=\"80px\" label=\"账号\">\r\n <el-input\r\n v-model=\"loginForm.username\"\r\n type=\"text\"\r\n name=\"username\"\r\n auto-complete=\"off\"\r\n tabindex=\"1\"\r\n maxlength=\"20\"\r\n >\r\n <svg-icon slot=\"prefix\" icon-class=\"user\" class=\"el-input__icon input-icon\"/>\r\n </el-input>\r\n </el-form-item>\r\n <el-form-item prop=\"password\" label-width=\"80px\" label=\"密码\">\r\n <el-input\r\n v-model=\"loginForm.password\"\r\n type=\"password\"\r\n auto-complete=\"off\"\r\n tabindex=\"2\"\r\n maxlength=\"20\"\r\n >\r\n <svg-icon slot=\"prefix\" icon-class=\"password\" class=\"el-input__icon input-icon\"/>\r\n </el-input>\r\n </el-form-item>\r\n\r\n <el-form-item prop=\"verifyCode\" label-width=\"80px\" label=\"验证码\">\r\n <el-input\r\n v-model=\"loginForm.verifyCode\"\r\n auto-complete=\"off\"\r\n style=\"width: 58%\"\r\n tabindex=\"3\"\r\n maxlength=\"4\"\r\n >\r\n <svg-icon slot=\"prefix\" icon-class=\"verifyCode\" class=\"el-input__icon input-icon\"/>\r\n </el-input>\r\n <div class=\"login-code\">\r\n <img :src=\"captchaUrl\" @click=\"updateCaptcha\" class=\"login-code-img\"/>\r\n </div>\r\n </el-form-item>\r\n\r\n <el-form-item style=\"width:100%;\">\r\n <el-button\r\n :loading=\"loading\"\r\n size=\"medium\"\r\n type=\"primary\"\r\n style=\"width:100%;\"\r\n @click.native.prevent=\"handleLogin\"\r\n >\r\n <span v-if=\"!loading\">登 录</span>\r\n <span v-else>登 录 中...</span>\r\n </el-button>\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\n\r\nimport store from \"@/store\";\r\nimport {doEncrypt, doSign} from \"@/utils/smutil\";\r\nimport {debounce} from \"lodash\";\r\n\r\nexport default {\r\n name: 'Login',\r\n data() {\r\n return {\r\n loginForm: {\r\n // 用户名\r\n username: '',\r\n // 密码\r\n password: '',\r\n // 验证码\r\n verifyCode: ''\r\n },\r\n murmur: '',\r\n verifyuuid: '',\r\n // 计时器对象\r\n timer: null,\r\n // 倒数60秒\r\n counter: 60,\r\n captchaUrl: this.getCaptcha,\r\n captchaText: '',\r\n loginRules: {\r\n /* username: [{ required: true, trigger: 'blur', validator: validateUsername }],\r\n password: [{ required: true, trigger: 'blur', validator: validatePassword }]*/\r\n username: [{required: true, trigger: 'blur', message: '请输入用户名'}],\r\n password: [{required: true, trigger: 'blur', message: '请输入密码'}],\r\n verifyCode: [{required: true, trigger: 'blur', message: '请输入验证码'}, {\r\n min: 4,\r\n max: 4,\r\n message: '请输入4位验证码',\r\n trigger: 'blur'\r\n }]\r\n },\r\n loading: false,\r\n redirect: undefined\r\n }\r\n },\r\n watch: {\r\n $route: {\r\n handler: function (route) {\r\n this.redirect = route.query && route.query.redirect\r\n },\r\n immediate: true\r\n }\r\n },\r\n created() {\r\n (async () => {\r\n const f = await this.getFinger()\r\n // 指纹\r\n this.murmur = f\r\n // 加载验证码\r\n this.getCaptcha()\r\n })();\r\n },\r\n mounted() {\r\n\r\n },\r\n methods: {\r\n getFinger() {\r\n const Fingerprint2 = require('fingerprintjs2')\r\n return new Promise(resolve => {\r\n if (window.requestIdleCallback) {\r\n requestIdleCallback(function () {\r\n Fingerprint2.getV18(function (result) {\r\n resolve(result)\r\n })\r\n })\r\n } else {\r\n setTimeout(function () {\r\n Fingerprint2.getV18(function (result) {\r\n resolve(result)\r\n })\r\n }, 500)\r\n }\r\n })\r\n },\r\n // 获取验证码\r\n getCaptcha: debounce(function () {\r\n var searchParams = {\r\n murmur: this.murmur\r\n }\r\n this.$axios.get('/getVerifyCode',\r\n {params: searchParams}).then((res) => {\r\n console.log(res)\r\n this.verifyuuid = res.data.uuid\r\n this.captchaUrl = 'data:image/gif;base64,' + res.data.imgBase64;\r\n this.captchaText = res.data.captchaText\r\n }).catch((error) => {\r\n console.log('登陆页异常'+error)\r\n })\r\n }, 1000),\r\n updateCaptcha() {\r\n // 更新验证码\r\n this.getCaptcha()\r\n },\r\n handleLogin: debounce(function () {\r\n this.$refs.loginForm.validate(valid => {\r\n if (valid) {\r\n this.loading = true\r\n let verifycodetemp = this.loginForm.verifyCode\r\n if (this.captchaText.toLowerCase() != verifycodetemp.toLowerCase()) {\r\n this.$message.error('验证码录入错误!')\r\n this.updateCaptcha()\r\n this.loading = false\r\n return\r\n }\r\n // const param = new URLSearchParams()\r\n // param.append('username', this.loginForm.username)\r\n // param.append('password', this.loginForm.password)\r\n // param.append('code', this.loginForm.verifyCode)\r\n // param.append('verifyuuid', this.verifyuuid)\r\n // param.append('murmur', this.murmur)\r\n const param = {\r\n username: this.loginForm.username,\r\n password: this.loginForm.password,\r\n code: this.loginForm.verifyCode,\r\n verifyuuid: this.verifyuuid,\r\n murmur: this.murmur\r\n }\r\n this.$axios.post('/user/login', this.$qs.stringify(param)).then((res) => {\r\n localStorage.setItem('jy', res.data.token)\r\n // 清空路由菜单\r\n store.commit('SET_R', [])\r\n this.$router.push('/dashboard')\r\n this.loading = false\r\n }).catch((error) => {\r\n // 登录失败刷新验证码\r\n this.updateCaptcha()\r\n this.loginForm.verifyCode = ''\r\n this.loading = false\r\n })\r\n } else {\r\n console.log('error submit!!')\r\n return false\r\n }\r\n })\r\n }, 1000)\r\n }\r\n}\r\n</script>\r\n\r\n<style rel=\"stylesheet/scss\" lang=\"scss\">\r\n.login {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100%;\r\n background-image: url(\"../../assets/login.jpg\");\r\n background-size: cover;\r\n\r\n\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 10;\r\n zoom: 1;\r\n\r\n background-position: bottom;\r\n\r\n}\r\n\r\n.title {\r\n margin: 0px auto 30px auto;\r\n text-align: center;\r\n color: #707070;\r\n}\r\n\r\n.login-form {\r\n border-radius: 6px;\r\n background: #ffffff;\r\n width: 400px;\r\n padding: 25px 25px 5px 25px;\r\n\r\n .el-input {\r\n height: 38px;\r\n\r\n input {\r\n height: 38px;\r\n }\r\n }\r\n\r\n .input-icon {\r\n height: 39px;\r\n width: 14px;\r\n margin-left: 2px;\r\n }\r\n}\r\n\r\n.login-tip {\r\n font-size: 13px;\r\n text-align: center;\r\n color: #bfbfbf;\r\n}\r\n\r\n.login-code {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 33%;\r\n height: 38px;\r\n float: right;\r\n\r\n img {\r\n cursor: pointer;\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n.el-login-footer {\r\n height: 40px;\r\n line-height: 40px;\r\n position: fixed;\r\n bottom: 0;\r\n width: 100%;\r\n text-align: center;\r\n color: #fff;\r\n font-family: Arial;\r\n font-size: 12px;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.login-code-img {\r\n height: 38px;\r\n width: 105px;\r\n}\r\n\r\n.mail-box {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 36%;\r\n height: 38px;\r\n float: right;\r\n\r\n img {\r\n cursor: pointer;\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n</style>\r\n\r\n<!--<style rel=\"stylesheet/scss\" lang=\"scss\" scoped>-->\r\n<!--.no-autofill-pwd{-->\r\n<!-- text-security:disc!important;-->\r\n<!-- -webkit-text-security:disc!important;-->\r\n\r\n<!--}-->\r\n<!--</style>-->\r\n\r\n"]}]}
|
