|
- <template>
- <div class="bg">
- <div class="login">
- <el-form
- :model="ruleForm2"
- status-icon
- :rules="rules2"
- ref="ruleForm2"
- class="demo-ruleForm login_form"
- >
- <h1>小程序第三方管理平台</h1>
- <el-form-item class="inputs" label="" prop="username">
- <el-input
- v-model.number="ruleForm2.username"
- placeholder="请输入账号"
- ></el-input>
- </el-form-item>
- <el-form-item class="inputs" label="" prop="password">
- <el-input
- type="password"
- v-model="ruleForm2.password"
- auto-complete="off"
- placeholder="请输入密码"
- ></el-input>
- </el-form-item>
- <el-form-item class="inputs" label="" prop="captcha">
- <el-input
- v-model="ruleForm2.captcha"
- @keydown.enter.native="login('ruleForm2')"
- auto-complete="off"
- placeholder="看不清?点击图片刷新"
- >
- </el-input>
- <div class="refreImg">
- <img alt="" :src="src" @click="refreshCode" />
- </div>
- </el-form-item>
- <el-form-item>
- <el-button
- class="login-btn"
- :loading="submitButton"
- type="primary"
- @click="login('ruleForm2')"
- >登录</el-button
- >
- </el-form-item>
- </el-form>
- <div
- style="position: absolute;top: 96%;right: 2%;color: #fff;"
- id="_version"
- ></div>
- </div>
- </div>
- </template>
- <script>
- import AjaxUtil from "../../core/tool/ajaxService";
- import Util from "../../core/tool/commonUtil";
- import { configUrl } from "./../../utils/config.js";
- export default {
- extends: AjaxUtil,
- name: "Login",
- data() {
- return {
- submitButton: false,
- src: "",
- ruleForm2: {
- username: "",
- password: "",
- captcha: "",
- },
- rules2: {
- username: [
- {
- required: true,
- message: "抱歉,不能识别您输入的账号",
- trigger: "blur",
- },
- ],
- password: [
- {
- required: true,
- message: "抱歉,不能识别您输入的密码",
- trigger: "blur",
- },
- ],
- captcha: [
- {
- required: true,
- message: "抱歉,不能识别您输入的验证码",
- trigger: "blur",
- },
- ],
- },
- };
- },
- methods: {
- login: function() {
- this.submitButton = true;
- let name = this.ruleForm2.username;
- let pwd = this.ruleForm2.password;
- let captcha = this.ruleForm2.captcha;
- this.postFetch(configUrl.doLogin, {
- username: name,
- password: pwd,
- captcha: captcha,
- })
- .then((d) => {
- console.log(d);
- this.submitButton = false;
- this.showNotify(
- "success",
- "欢迎进入小程序第三方管理平台",
- "登录成功"
- );
- Util.cookie.setCookie("uname", d.data.username);
- this.$router.push({
- path: "/layout",
- });
- })
- .catch((err) => {
- this.submitButton = false;
- this.refreshCode();
- this.$message.error(err.data);
- });
- },
- refreshCode: function() {
- this.src = configUrl.captcha + "?t=" + Date();
- console.log(this.src);
- },
- },
- created() {
- this.refreshCode();
- },
- mounted() {
- let metas = document.getElementsByTagName("meta");
- let version = "";
- for (let index = 0; index < metas.length; index++) {
- if (metas[index].getAttribute("name") == "version") {
- version = metas[index].getAttribute("content");
- break;
- }
- }
- console.log(configUrl.getversion, "configUrl.getversion");
-
- this.getFetch(configUrl.getversion)
- .then((d) => {
- console.log(d, 22222);
- document.getElementById("_version").innerHTML =
- "version:" + version.substr(4) + "." + d.data.split("_")[1];
- })
- .catch((e) => {
- document.getElementById("_version").innerHTML =
- "version:" + version.substr(4);
- });
- },
- };
- </script>
-
- <style scoped>
- .qrcode {
- width: 36px;
- position: absolute;
- right: 7px;
- top: 5px;
- z-index: 1000;
- }
- #login_container {
- position: absolute;
- left: 0;
- right: 0;
- margin: auto;
- top: 0;
- bottom: 0;
- }
- .inputs {
- width: 315px;
- height: 44px;
- margin: 0 auto 22px;
- line-height: 44px;
- }
- .el-input__inner {
- font-size: 16px !important;
- color: rgb(0, 0, 0, 0.25) !important;
- padding: 0 35px !important;
- }
-
- .refreImg img {
- width: 100%;
- height: 100%;
- border-radius: 2px;
- cursor: pointer;
- }
-
- a {
- text-decoration: none;
- }
-
- .frechBox {
- display: block;
- margin-top: -10px;
- }
-
- .refreImg {
- width: 38.2%;
- height: 40px;
- /* line-height: 20px; */
- position: absolute;
- z-index: 1000;
- right: 0;
- top: -1px;
- background-color: #ededed;
- }
-
- .bg {
- background: url(../../static/images/login-bg.png) no-repeat;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-size: cover;
- }
-
- .login h1 {
- font-size: 22px;
- font-weight: 400;
- color: rgba(85, 85, 85, 1);
- line-height: 24px;
- margin-bottom: 28px;
- }
-
- .login-item {
- width: 368px;
- margin: 0 auto;
- height: 40px;
- margin-bottom: 16px;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- box-sizing: border-box;
- overflow: hidden;
- position: relative;
- }
-
- .login-item input {
- width: 100%;
- line-height: 38px;
- background: #fff;
- font-size: 16px;
- color: rgba(0, 0, 0, 0.25);
- padding: 0 0 0 36px;
- display: block;
- border: none;
- outline: none;
- }
-
- .login-btn {
- width: 315px;
- line-height: 44px;
- background: #3fc497;
- text-align: center;
- border-radius: 4px;
- font-size: 16px;
- color: #fff;
- padding: 0;
- border: none;
- cursor: pointer;
- margin: 0 auto;
- }
-
- .forgot-password {
- color: rgba(24, 144, 255, 1);
- width: 368px;
- margin: 0 auto;
- text-align: right;
- line-height: 22px;
- margin-bottom: 4px;
- }
-
- .forgot-password label {
- font-weight: 400 !important;
- font-size: 14px;
- cursor: pointer;
- margin-right: 26px;
- color: #555;
- }
-
- .el-input__inner {
- font-size: 16px !important;
- color: rgb(0, 0, 0, 0.25) !important;
- padding: 0 35px !important;
- }
- .login {
- background: #f9fafc;
- border-radius: 6px;
- overflow: hidden;
- width: 375px;
- position: relative;
- left: 50%;
- top: 50%;
- height: 340px;
- transform: translate(-50%, -50%);
- -webkit-transform: translate(-50%, -50%);
- box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.24);
- }
- </style>
|