验证码

src/components/jp-verification-literalness/jp-verification-literalness.vue

@@ -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>

src/pages/login/login.vue

@@ -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