<!--
|
* @Description:
|
* @Author: 王旭
|
* @Date: 2022-03-24 11:15:02
|
* @LastEditTime: 2023-05-15 09:57:32
|
* @LastEditors: LuLu
|
-->
|
<template>
|
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px"
|
class="login-container">
|
<h2 class="title" style="padding-left: 22px">用户登录</h2>
|
<el-form-item prop="username">
|
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号">
|
<img slot="prefix" src="../../../assets/img/login/un.png" style="width: 16px; height: 16px" alt="" />
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码">
|
<img slot="prefix" src="../../../assets/img/login/ps.png" style="width: 16px; height: 16px" alt="" />
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="captcha">
|
<el-input type="text" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码, 单击图片刷新">
|
<img slot="prefix" src="../../../assets/img/login/yz.png" style="width: 16px; height: 16px" alt="" />
|
</el-input>
|
<canvas id="c1" width="100" height="30" style="border:1px solid black" @click="draw(showNum)"></canvas>
|
|
</el-form-item>
|
<el-form-item style="width: 100%">
|
<el-button type="primary" style="
|
width: 100%;
|
background: rgba(0, 166, 226, 0.2);
|
border: 0;
|
font-size: 20px;
|
" @click.native.prevent="handleLogin" :loading="loading">登 录</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script>
|
import { mapActions } from "vuex";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
loading: false,
|
loginForm: {
|
username: "admin",
|
password: "admin",
|
captcha: "",
|
},
|
fieldRules: {
|
username: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
},
|
checked: true,
|
showNum: []
|
};
|
},
|
mounted() {
|
this.draw(this.showNum)
|
},
|
//方法集合
|
methods: {
|
// 获取vuex中Actions里的方法
|
...mapActions(["login", "GetInfo"]),
|
handleLogin() {
|
let code = this.showNum.join("")
|
if (code == this.loginForm.captcha) {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
this.loading = true;
|
this.login(this.loginForm)
|
.then(() => {
|
this.loading = false;
|
this.GetInfo().then(() => {
|
|
});
|
this.$router.push("/xianCim");
|
})
|
.catch(() => {
|
this.$message({
|
message: "账号不存在或密码输入错误！",
|
type: "error",
|
duration: 4000,
|
});
|
|
this.loading = false;
|
});
|
} else {
|
console.log("error submit!!");
|
this.$message({
|
message: "账号不存在或密码输入错误！",
|
type: "error",
|
duration: 4000,
|
});
|
|
return false;
|
}
|
});
|
} else {
|
this.$message({
|
message: "验证码错误",
|
type: "warning",
|
duration: 4000,
|
});
|
return
|
}
|
|
|
},
|
reset() {
|
this.$refs.loginForm.resetFields();
|
},
|
|
// 封装一个把随机验证码放在画布上
|
draw(showNum) {
|
// 获取canvas
|
var canvas = $("#c1")
|
var ctx = canvas[0].getContext("2d")
|
// 获取画布的宽高
|
var canvas_width = canvas.width()
|
var canvas_height = canvas.height()
|
// 清空之前绘制的内容
|
// 0,0清空的起始坐标
|
// 矩形的宽高
|
ctx.clearRect(0, 0, canvas_width, canvas_height)
|
// 开始绘制
|
// var scode = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,"
|
var scode = "1,2,3,4,5,6,7,8,9"
|
var arrCode = scode.split(",")
|
var arrLength = arrCode.length
|
for (var i = 0; i < 4; i++) {
|
var index = Math.floor(Math.random() * arrCode.length)
|
var txt = arrCode[index]//随机一个字符
|
showNum[i] = txt.toLowerCase()//转化为小写存入验证码数组
|
// 开始控制字符的绘制位置
|
var x = 10 + 20 * i //每一个验证码绘制的起始点x坐标
|
var y = 20 + Math.random() * 8// 起始点y坐标
|
|
ctx.font = "bold 20px 微软雅黑"
|
// 开始旋转字符
|
var deg = Math.random * -0.5
|
// canvas 要实现绘制内容具有倾斜的效果，必须先平移，目的是把旋转点移动到绘制内容的地方
|
ctx.translate(x, y)
|
ctx.rotate(deg)
|
// 设置绘制的随机颜色
|
ctx.fillStyle = this.randomColor()
|
ctx.fillText(txt, 0, 0)
|
|
// 把canvas复原
|
ctx.rotate(-deg)
|
ctx.translate(-x, -y)
|
|
}
|
for (var i = 0; i < 30; i++) {
|
if (i < 5) {
|
// 绘制线
|
ctx.strokeStyle = this.randomColor()
|
ctx.beginPath()
|
ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
|
ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
|
ctx.stroke()
|
}
|
// 绘制点
|
ctx.strokeStyle = this.randomColor()
|
ctx.beginPath()
|
var x = Math.random() * canvas_width
|
var y = Math.random() * canvas_height
|
ctx.moveTo(x, y)
|
ctx.lineTo(x + 1, y + 1)
|
ctx.stroke()
|
|
}
|
|
|
},
|
|
// 随机颜色
|
randomColor() {
|
var r = Math.floor(Math.random() * 256)
|
var g = Math.floor(Math.random() * 256)
|
var b = Math.floor(Math.random() * 256)
|
return `rgb(${r},${g},${b})`
|
|
}
|
|
},
|
created() { },
|
};
|
</script>
|
|
<style scoped>
|
#c1 {
|
vertical-align: middle;
|
box-sizing: border-box;
|
cursor: pointer;
|
position: absolute;
|
right: 6px;
|
top: 4px;
|
}
|
</style>
|
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类\
|
.login-container {
|
margin: 0 auto;
|
width: 80%;
|
padding: 15px 50px 35px 50px;
|
background: url("../../../assets/img/login/denglubg.png") no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
box-sizing: border-box;
|
|
.title {
|
margin: 0px auto 30px auto;
|
text-align: center;
|
color: rgba(240, 250, 254, 0.8);
|
font-weight: normal;
|
}
|
|
.remember {
|
margin: 0px 0px 35px 0px;
|
}
|
|
/deep/ .el-input__inner,
|
/deep/ .el-textarea__inner {
|
background: rgba(0, 166, 226, 0.2);
|
color: rgba(240, 250, 254, 0.8);
|
border: 0;
|
}
|
}
|
</style>
|
