develop
commit
5be20c15d3
|
|
@ -1,2 +1,2 @@
|
|||
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="https://lcny.sk797.cn/h5/static/index.97465e7b.css"></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><script src="https://lcny.sk797.cn/h5/static/js/chunk-vendors.959091ef.js"></script><script src="https://lcny.sk797.cn/h5/static/js/index.878c9622.js"></script></body></html>
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="https://lcny.sk797.cn/h5/static/index.97465e7b.css"></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><script src="https://lcny.sk797.cn/h5/static/js/chunk-vendors.959091ef.js"></script><script src="https://lcny.sk797.cn/h5/static/js/index.582c23a9.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<div :style="{height: (contentHeight+'px'),width: (contentWidth+'px')}">
|
||||
<canvas
|
||||
@tap="drawTap"
|
||||
:id="canvasId"
|
||||
:canvasId="canvasId"
|
||||
:width="contentWidth"
|
||||
:height="contentHeight"
|
||||
:style="{height: (contentHeight+'px'),width: (contentWidth+'px')}"
|
||||
></canvas>
|
||||
</div>
|
||||
</template>
|
||||
<!-- jp-verification-literalness -->
|
||||
<script>
|
||||
export default {
|
||||
name: "jp-verification-literalness",
|
||||
props: {
|
||||
securityCode:{
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
codeLength: { //验证码数量
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
contentWidth: {
|
||||
type: Number,
|
||||
default: 120,
|
||||
},
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 48,
|
||||
},
|
||||
lineLength: { //线条数
|
||||
type: Number,
|
||||
default: 8,
|
||||
},
|
||||
backgroundColor:{ // 画板背景
|
||||
type: String,
|
||||
default: 'rgb(238,226,224)',
|
||||
},
|
||||
lineColorList:{
|
||||
type: Array,
|
||||
default () {
|
||||
return ['rgba(238,0,0,.5)','rgba(0, 170, 255,.5)','rgba(0, 170, 0,.5)','rgba(0, 0, 0,.5)','rgba(153, 146, 255,.5)']
|
||||
},
|
||||
},
|
||||
colorList:{
|
||||
type: Array,
|
||||
default () {
|
||||
return ['rgb(238,0,0)','rgb(0, 170, 255)','rgb(0, 170, 0)','rgb(0, 0, 0)','rgb(153, 146, 255)']
|
||||
},
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
canvasId() {
|
||||
// #ifdef VUE2
|
||||
return `lime-signature${this._uid}`
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
return `lime-signature${this._.uid}`
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
identifyCode: '',
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
securityCode() {
|
||||
this.drawPic();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
verification(code) {
|
||||
return this.identifyCode == code;
|
||||
},
|
||||
randomNum(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
},
|
||||
getcheckCode() {
|
||||
let code = '';
|
||||
const codeLength = this.codeLength
|
||||
const random = [
|
||||
1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
|
||||
'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
|
||||
'X', 'Y', 'Z',
|
||||
];
|
||||
for (let i = 0; i < codeLength; i++) {
|
||||
let index = Math.floor(Math.random() * 34);
|
||||
code += random[index];
|
||||
}
|
||||
this.identifyCode = code;
|
||||
},
|
||||
drawTap(){
|
||||
if(this.securityCode){
|
||||
this.$emit('getCode')
|
||||
}else{
|
||||
this.drawPic();
|
||||
}
|
||||
},
|
||||
drawPic() {
|
||||
if(this.securityCode){
|
||||
this.identifyCode = this.securityCode
|
||||
}else{
|
||||
this.getcheckCode();
|
||||
}
|
||||
|
||||
let context = uni.createCanvasContext(this.canvasId, this);
|
||||
|
||||
context.setTextBaseline('bottom');
|
||||
|
||||
context.setFillStyle(this.backgroundColor);
|
||||
|
||||
context.fillRect(0, 0, this.contentWidth, this.contentHeight);
|
||||
for (let i = 0; i < this.identifyCode.length; i++) {
|
||||
this.drawText(context, this.identifyCode[i], i);
|
||||
}
|
||||
|
||||
this.drawLine(context);
|
||||
|
||||
context.draw();
|
||||
},
|
||||
drawText(context, txt, i) {
|
||||
|
||||
let a = Math.floor(Math.random()*this.colorList.length)
|
||||
context.setFillStyle(this.colorList[a]);
|
||||
|
||||
let fontSize = Math.trunc((this.contentWidth/this.identifyCode.length))
|
||||
console.log(fontSize)
|
||||
context.setFontSize(
|
||||
this.randomNum(fontSize, fontSize) + 'px SimHei'
|
||||
);
|
||||
|
||||
let x = (i) * (this.contentWidth / (this.identifyCode.length + 1)) + Math.trunc(fontSize/2);
|
||||
let y = this.randomNum(fontSize, this.contentHeight - 5);
|
||||
var deg = this.randomNum(-10, 10);
|
||||
|
||||
context.translate(x, y);
|
||||
context.rotate((deg * Math.PI) / 180);
|
||||
context.fillText(txt, 0, 0);
|
||||
|
||||
context.rotate((-deg * Math.PI) / 180);
|
||||
context.translate(-x, -y);
|
||||
},
|
||||
drawLine(context) {
|
||||
for (let i = 0; i < this.lineLength; i++) {
|
||||
let a = Math.floor(Math.random() * this.lineColorList.length)
|
||||
context.setStrokeStyle(this.lineColorList[a]);
|
||||
context.beginPath();
|
||||
let startX = this.randomNum(0, this.contentWidth);
|
||||
let startY = this.randomNum(0, this.contentHeight);
|
||||
let endX = this.randomNum(0, this.contentWidth);
|
||||
let endY = this.randomNum(0, this.contentHeight);
|
||||
context.moveTo(startX, startY);
|
||||
context.lineTo(endX, endY);
|
||||
context.stroke();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawPic();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -25,6 +25,22 @@
|
|||
v-model="password"
|
||||
/>
|
||||
</view>
|
||||
<view class="t-a">
|
||||
<text class="txt">验证码</text>
|
||||
<view class="flex flex-1">
|
||||
<input
|
||||
name="identifyCode"
|
||||
class="flex-1"
|
||||
maxlength="18"
|
||||
placeholder="请输入验证码"
|
||||
v-model="identifyCode"
|
||||
/>
|
||||
<Security
|
||||
@getCode="refreshCode"
|
||||
:securityCode="identify"
|
||||
></Security>
|
||||
</view>
|
||||
</view>
|
||||
<u-button type="primary" shape="circle" @tap="login()"
|
||||
>登 录</u-button
|
||||
>
|
||||
|
|
@ -43,15 +59,41 @@ import {
|
|||
} from '@/com/utils.js'
|
||||
import jwt from '@/api/jwt.js'
|
||||
import md5 from 'js-md5'
|
||||
import Security from '@/components/jp-verification-literalness/jp-verification-literalness.vue'
|
||||
export default {
|
||||
components: {
|
||||
Security,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
identify: '',
|
||||
username: '', //手机号码
|
||||
password: '', //密码
|
||||
identifyCode: '',
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onLoad() {
|
||||
this.makeCode()
|
||||
},
|
||||
methods: {
|
||||
randomNum(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
},
|
||||
|
||||
refreshCode() {
|
||||
this.identifyCode = ''
|
||||
this.makeCode()
|
||||
},
|
||||
|
||||
makeCode(l = 4) {
|
||||
const identifyCodes = '1234567890abcdef'
|
||||
let code = ''
|
||||
|
||||
for (let i = 0; i < l; i++) {
|
||||
code += identifyCodes[this.randomNum(0, identifyCodes.length)]
|
||||
}
|
||||
this.identify = code
|
||||
},
|
||||
//当前登录按钮操作
|
||||
login() {
|
||||
if (!this.username) {
|
||||
|
|
@ -63,9 +105,18 @@ export default {
|
|||
uni.showToast({ title: '请输入您的密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!this.identifyCode) {
|
||||
uni.showToast({ title: '请输入验证码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if(this.identifyCode != this.identify){
|
||||
uni.showToast({ title: '验证码不正确', icon: 'none' })
|
||||
return
|
||||
}
|
||||
let params = {
|
||||
username: this.username,
|
||||
password: md5(this.password),
|
||||
identifyCode: this.identifyCode,
|
||||
}
|
||||
|
||||
this.$http
|
||||
|
|
|
|||
Loading…
Reference in New Issue