1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"remainingRequest":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\phpstudy_pro\\WWW\\travel\\admin\\src\\views\\login\\index.vue?vue&type=style&index=1&id=37dfd6fc&lang=scss&scoped=true","dependencies":[{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\src\\views\\login\\index.vue","mtime":1718070786056},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\css-loader\\dist\\cjs.js","mtime":1718764958140},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1718764960674},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":1718764958994},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1718764957182},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1718764957200},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":1718764959862}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCiRiZzojMmQzYTRiOw0KJGRhcmtfZ3JheTojODg5YWE0Ow0KJGxpZ2h0X2dyYXk6I2VlZTsNCg0KLmxvZ2luLWNvbnRhaW5lciB7DQogIG1pbi1oZWlnaHQ6IDEwMCU7DQogIHdpZHRoOiAxMDAlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiAkYmc7DQogIG92ZXJmbG93OiBoaWRkZW47DQoNCiAgLmxvZ2luLWZvcm0gew0KICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICB3aWR0aDogNTIwcHg7DQogICAgbWF4LXdpZHRoOiAxMDAlOw0KICAgIHBhZGRpbmc6IDE2MHB4IDM1cHggMDsNCiAgICBtYXJnaW46IDAgYXV0bzsNCiAgICBvdmVyZmxvdzogaGlkZGVuOw0KICB9DQoNCiAgLnRpcHMgew0KICAgIGZvbnQtc2l6ZTogMTRweDsNCiAgICBjb2xvcjogI2ZmZjsNCiAgICBtYXJnaW4tYm90dG9tOiAxMHB4Ow0KDQogICAgc3BhbiB7DQogICAgICAmOmZpcnN0LW9mLXR5cGUgew0KICAgICAgICBtYXJnaW4tcmlnaHQ6IDE2cHg7DQogICAgICB9DQogICAgfQ0KICB9DQoNCiAgLnN2Zy1jb250YWluZXIgew0KICAgIHBhZGRpbmc6IDZweCA1cHggNnB4IDE1cHg7DQogICAgY29sb3I6ICRkYXJrX2dyYXk7DQogICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTsNCiAgICB3aWR0aDogMzBweDsNCiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogIH0NCg0KICAudGl0bGUtY29udGFpbmVyIHsNCiAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQoNCiAgICAudGl0bGUgew0KICAgICAgZm9udC1zaXplOiAyNnB4Ow0KICAgICAgY29sb3I6ICRsaWdodF9ncmF5Ow0KICAgICAgbWFyZ2luOiAwcHggYXV0byA0MHB4IGF1dG87DQogICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICBmb250LXdlaWdodDogYm9sZDsNCiAgICB9DQogIH0NCg0KICAuc2hvdy1wd2Qgew0KICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICByaWdodDogMTBweDsNCiAgICB0b3A6IDdweDsNCiAgICBmb250LXNpemU6IDE2cHg7DQogICAgY29sb3I6ICRkYXJrX2dyYXk7DQogICAgY3Vyc29yOiBwb2ludGVyOw0KICAgIHVzZXItc2VsZWN0OiBub25lOw0KICB9DQoNCiAgLnRoaXJkcGFydHktYnV0dG9uIHsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgcmlnaHQ6IDA7DQogICAgYm90dG9tOiA2cHg7DQogIH0NCg0KICBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDQ3MHB4KSB7DQogICAgLnRoaXJkcGFydHktYnV0dG9uIHsNCiAgICAgIGRpc3BsYXk6IG5vbmU7DQogICAgfQ0KICB9DQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiOA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/login","sourcesContent":["<template>\r\n <div class=\"login-container\">\r\n <el-form ref=\"loginForm\" :model=\"loginForm\" :rules=\"loginRules\" class=\"login-form\" autocomplete=\"on\" label-position=\"left\">\r\n\r\n <div class=\"title-container\">\r\n <h3 class=\"title\">登陆订单中心</h3>\r\n </div>\r\n\r\n <el-form-item prop=\"username\">\r\n <span class=\"svg-container\">\r\n <svg-icon icon-class=\"user\" />\r\n </span>\r\n <el-input\r\n ref=\"username\"\r\n v-model=\"loginForm.username\"\r\n placeholder=\"Username\"\r\n name=\"username\"\r\n type=\"text\"\r\n tabindex=\"1\"\r\n autocomplete=\"on\"\r\n />\r\n </el-form-item>\r\n\r\n <el-tooltip v-model=\"capsTooltip\" content=\"Caps lock is On\" placement=\"right\" manual>\r\n <el-form-item prop=\"password\">\r\n <span class=\"svg-container\">\r\n <svg-icon icon-class=\"password\" />\r\n </span>\r\n <el-input\r\n :key=\"passwordType\"\r\n ref=\"password\"\r\n v-model=\"loginForm.password\"\r\n :type=\"passwordType\"\r\n placeholder=\"Password\"\r\n name=\"password\"\r\n tabindex=\"2\"\r\n autocomplete=\"on\"\r\n @keyup.native=\"checkCapslock\"\r\n @blur=\"capsTooltip = false\"\r\n @keyup.enter.native=\"handleLogin\"\r\n />\r\n <span class=\"show-pwd\" @click=\"showPwd\">\r\n <svg-icon :icon-class=\"passwordType === 'password' ? 'eye' : 'eye-open'\" />\r\n </span>\r\n </el-form-item>\r\n </el-tooltip>\r\n\r\n <el-button :loading=\"loading\" type=\"primary\" style=\"width:100%;margin-bottom:30px;\" @click.native.prevent=\"handleLogin\">登录</el-button>\r\n </el-form>\r\n\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { validUsername } from '@/utils/validate'\r\nimport SocialSign from './components/SocialSignin'\r\n\r\nexport default {\r\n name: 'Login',\r\n components: { SocialSign },\r\n data() {\r\n const validateUsername = (rule, value, callback) => {\r\n if (!validUsername(value)) {\r\n callback(new Error('请输入用户名'))\r\n } else {\r\n callback()\r\n }\r\n }\r\n const validatePassword = (rule, value, callback) => {\r\n if (value.length < 6) {\r\n callback(new Error('请输入密码'))\r\n } else {\r\n callback()\r\n }\r\n }\r\n return {\r\n loginForm: {\r\n },\r\n loginRules: {\r\n username: [{ required: true, trigger: 'blur', validator: validateUsername }],\r\n password: [{ required: true, trigger: 'blur', validator: validatePassword }]\r\n },\r\n passwordType: 'password',\r\n capsTooltip: false,\r\n loading: false,\r\n redirect: undefined,\r\n otherQuery: {}\r\n }\r\n },\r\n watch: {\r\n $route: {\r\n handler: function(route) {\r\n const query = route.query\r\n if (query) {\r\n this.redirect = query.redirect\r\n this.otherQuery = this.getOtherQuery(query)\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n created() {\r\n // window.addEventListener('storage', this.afterQRScan)\r\n },\r\n mounted() {\r\n if (this.loginForm.username === '') {\r\n this.$refs.username.focus()\r\n } else if (this.loginForm.password === '') {\r\n this.$refs.password.focus()\r\n }\r\n },\r\n destroyed() {\r\n // window.removeEventListener('storage', this.afterQRScan)\r\n },\r\n methods: {\r\n checkCapslock(e) {\r\n const { key } = e\r\n this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')\r\n },\r\n showPwd() {\r\n if (this.passwordType === 'password') {\r\n this.passwordType = ''\r\n } else {\r\n this.passwordType = 'password'\r\n }\r\n this.$nextTick(() => {\r\n this.$refs.password.focus()\r\n })\r\n },\r\n handleLogin() {\r\n this.$refs.loginForm.validate(valid => {\r\n if (valid) {\r\n this.loading = true\r\n this.$store.dispatch('user/login', this.loginForm)\r\n .then(() => {\r\n this.$router.push({ path: this.redirect || '/', query: this.otherQuery })\r\n this.loading = false\r\n })\r\n .catch(() => {\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 },\r\n getOtherQuery(query) {\r\n return Object.keys(query).reduce((acc, cur) => {\r\n if (cur !== 'redirect') {\r\n acc[cur] = query[cur]\r\n }\r\n return acc\r\n }, {})\r\n }\r\n // afterQRScan() {\r\n // if (e.key === 'x-admin-oauth-code') {\r\n // const code = getQueryObject(e.newValue)\r\n // const codeMap = {\r\n // wechat: 'code',\r\n // tencent: 'code'\r\n // }\r\n // const type = codeMap[this.auth_type]\r\n // const codeName = code[type]\r\n // if (codeName) {\r\n // this.$store.dispatch('LoginByThirdparty', codeName).then(() => {\r\n // this.$router.push({ path: this.redirect || '/' })\r\n // })\r\n // } else {\r\n // alert('第三方登录失败')\r\n // }\r\n // }\r\n // }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n/* 修复input 背景不协调 和光标变色 */\r\n/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */\r\n\r\n$bg:#283443;\r\n$light_gray:#fff;\r\n$cursor: #fff;\r\n\r\n@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {\r\n .login-container .el-input input {\r\n color: $cursor;\r\n }\r\n}\r\n\r\n/* reset element-ui css */\r\n.login-container {\r\n .el-input {\r\n display: inline-block;\r\n height: 47px;\r\n width: 85%;\r\n\r\n input {\r\n background: transparent;\r\n border: 0px;\r\n -webkit-appearance: none;\r\n border-radius: 0px;\r\n padding: 12px 5px 12px 15px;\r\n color: $light_gray;\r\n height: 47px;\r\n caret-color: $cursor;\r\n\r\n &:-webkit-autofill {\r\n box-shadow: 0 0 0px 1000px $bg inset !important;\r\n -webkit-text-fill-color: $cursor !important;\r\n }\r\n }\r\n }\r\n\r\n .el-form-item {\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n background: rgba(0, 0, 0, 0.1);\r\n border-radius: 5px;\r\n color: #454545;\r\n }\r\n}\r\n</style>\r\n\r\n<style lang=\"scss\" scoped>\r\n$bg:#2d3a4b;\r\n$dark_gray:#889aa4;\r\n$light_gray:#eee;\r\n\r\n.login-container {\r\n min-height: 100%;\r\n width: 100%;\r\n background-color: $bg;\r\n overflow: hidden;\r\n\r\n .login-form {\r\n position: relative;\r\n width: 520px;\r\n max-width: 100%;\r\n padding: 160px 35px 0;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n }\r\n\r\n .tips {\r\n font-size: 14px;\r\n color: #fff;\r\n margin-bottom: 10px;\r\n\r\n span {\r\n &:first-of-type {\r\n margin-right: 16px;\r\n }\r\n }\r\n }\r\n\r\n .svg-container {\r\n padding: 6px 5px 6px 15px;\r\n color: $dark_gray;\r\n vertical-align: middle;\r\n width: 30px;\r\n display: inline-block;\r\n }\r\n\r\n .title-container {\r\n position: relative;\r\n\r\n .title {\r\n font-size: 26px;\r\n color: $light_gray;\r\n margin: 0px auto 40px auto;\r\n text-align: center;\r\n font-weight: bold;\r\n }\r\n }\r\n\r\n .show-pwd {\r\n position: absolute;\r\n right: 10px;\r\n top: 7px;\r\n font-size: 16px;\r\n color: $dark_gray;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n .thirdparty-button {\r\n position: absolute;\r\n right: 0;\r\n bottom: 6px;\r\n }\r\n\r\n @media only screen and (max-width: 470px) {\r\n .thirdparty-button {\r\n display: none;\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]} |