|
|
@@ -0,0 +1,220 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="pageBox">
|
|
|
+ <div class="loginBox">
|
|
|
+ <div class="loginTitle">
|
|
|
+ <p class="loginTitleP">请登录您的账号</p>
|
|
|
+ </div>
|
|
|
+ <el-form ref="form" :model="form">
|
|
|
+ <el-form-item class="loginItem">
|
|
|
+ <p class="loginItemP">账号</p>
|
|
|
+ <input class="loginInput" v-model="form.username" @blur="userRule" placeholder="请输入账号">
|
|
|
+ <p class="blurP" v-if="userBlur">账号不能为空</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="loginItem">
|
|
|
+ <p class="loginItemP">密码</p>
|
|
|
+ <input class="loginInput" v-model="form.password" @blur="passRule" placeholder="请输入密码"
|
|
|
+ :type="inputType">
|
|
|
+ <img class="imgEyes" src="../../assets/font/fluent：eye-20-regular.png" alt="" @click="changeType">
|
|
|
+ <p class="blurP" v-if="passBlur">密码不能为空</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="loginItem">
|
|
|
+ <el-checkbox v-model="rememberUser" @change="rememberNow">记住账号</el-checkbox><br>
|
|
|
+ <el-button class="loginButton" @click="loginNow">登录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { login } from '../../api/login/login.js'
|
|
|
+// import sm from 'sm-crypto';
|
|
|
+import sms from '../../utils/SmCrypto.min.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ username: "",
|
|
|
+ password: ""
|
|
|
+ },//账号密码表单
|
|
|
+ rememberUser: false,//是否记住账号
|
|
|
+ userBlur: false,//用户名验证
|
|
|
+ passBlur: false,//密码验证
|
|
|
+ inputType: "password",//密码输入框性质
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 用户验证
|
|
|
+ userRule(e) {
|
|
|
+ if (e.target._value) {
|
|
|
+ this.userBlur = false
|
|
|
+ } else {
|
|
|
+ this.userBlur = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 密码验证
|
|
|
+ passRule(e) {
|
|
|
+ if (e.target._value) {
|
|
|
+ this.passBlur = false
|
|
|
+ } else {
|
|
|
+ this.passBlur = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 登录按钮
|
|
|
+ async loginNow() {
|
|
|
+ // console.log(this.form.username, this.form.password, 'login');
|
|
|
+ if (this.form.username != '' && this.form.password != "") {
|
|
|
+ if (!this.userBlur && !this.passBlur) {
|
|
|
+ let res = await login({ login_account: this.form.username, pwd: this.form.password })
|
|
|
+ // this.$router.push("/")
|
|
|
+ console.log(res, '1');
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '账号或密码错误',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '账号或密码不能为空',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 记住账号
|
|
|
+ rememberNow(e) {
|
|
|
+ this.rememberUser = e
|
|
|
+ if (this.rememberUser) {
|
|
|
+ localStorage.setItem('username', JSON.stringify(this.form.username))
|
|
|
+ } else {
|
|
|
+ localStorage.removeItem('username')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 拿到已经保存的用户名
|
|
|
+ getSaveUser() {
|
|
|
+ let user = localStorage.getItem("username")
|
|
|
+ if (user) {
|
|
|
+ user = JSON.parse(user)
|
|
|
+ this.form.username = user
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // ，密码框小眼睛
|
|
|
+ changeType() {
|
|
|
+ if (this.inputType === 'password') {
|
|
|
+ this.inputType = 'text'
|
|
|
+ } else {
|
|
|
+ this.inputType = 'password'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ encryptPassword(password) {
|
|
|
+ return sm.sm3(password);
|
|
|
+ },
|
|
|
+ getPassWord(str){
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 通过本地使用户名显示
|
|
|
+ this.getSaveUser()
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 整个大盒子css */
|
|
|
+.pageBox {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url("../../assets/loginNewBack.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ /* background-color: #14093E; */
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* 登录盒子css */
|
|
|
+.loginBox {
|
|
|
+ width: 640px;
|
|
|
+ height: 650px;
|
|
|
+ position: absolute;
|
|
|
+ top: 140px;
|
|
|
+ right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.loginItem {
|
|
|
+ width: 432px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单内输入框css */
|
|
|
+.loginInput {
|
|
|
+ width: 432px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #dbdbdb;
|
|
|
+ background-color: transparent;
|
|
|
+ /* color: white; */
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 密码框小眼睛css */
|
|
|
+.imgEyes {
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单内标题p标签css */
|
|
|
+.loginTitleP {
|
|
|
+ width: 210px;
|
|
|
+ height: 42px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ /* color: #FFFFFF; */
|
|
|
+ line-height: 35px;
|
|
|
+ margin-left: 100px;
|
|
|
+ margin-bottom: 52px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单内p标签css */
|
|
|
+.loginItemP {
|
|
|
+ width: 40px;
|
|
|
+ height: 28px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ /* color: #FFFFFF; */
|
|
|
+ line-height: 23px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 登录按钮css */
|
|
|
+.loginButton {
|
|
|
+ width: 434px;
|
|
|
+ height: 44px;
|
|
|
+ background: blue;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ opacity: 1;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单验证p标签css */
|
|
|
+.blurP {
|
|
|
+ width: 84px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 16px;
|
|
|
+}
|
|
|
+</style>
|
“yueshang”
