From fb9dac4739e2dfac3fc985dfc8cf2599142dbde2 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Tue, 3 Aug 2021 16:02:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=99=BB=E9=99=86=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                |  66 ++++++++----
 src/components/bg-identify.vue | 183 +++++++++++++++++++++++++++++++++
 src/pages/login.vue            | 136 ++++++++++++++----------
 3 files changed, 309 insertions(+), 76 deletions(-)
 create mode 100644 src/components/bg-identify.vue

diff --git a/config/index.js b/config/index.js
index b1176b4..4ed19ad 100644
--- a/config/index.js
+++ b/config/index.js
@@ -1,19 +1,47 @@
-'use strict'
+"use strict";
 // Template version: 1.3.1
 // see http://vuejs-templates.github.io/webpack for documentation.
 
-const path = require('path')
+const path = require("path");
 
 module.exports = {
   dev: {
-
     // Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
+    assetsSubDirectory: "static",
+    assetsPublicPath: "/",
+    proxyTable: {
+      "/apaas": {
+        target: "https://apaas3.wodcloud.com/apaas/",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/apaas": "",
+        },
+      },
+      "/awecloud": {
+        target: "https://apaas3.wodcloud.com/awecloud/",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/awecloud": "",
+        },
+      },
+      "/vmap": {
+        target: "https://apaas3.wodcloud.com/vmap/",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/vmap": "",
+        },
+      },
+      "/iam": {
+        target: "https://apaas3.wodcloud.com/iam/",
+        changeOrigin: true,
+        pathRewrite: {
+          "^/iam": "",
+        },
+      },
+    },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: "localhost", // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
@@ -33,44 +61,44 @@ module.exports = {
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
+    devtool: "cheap-module-eval-source-map",
 
     // If you have problems debugging vue-files in devtools,
     // set this to false - it *may* help
     // https://vue-loader.vuejs.org/en/options.html#cachebusting
     cacheBusting: true,
 
-    cssSourceMap: true
+    cssSourceMap: true,
   },
 
   build: {
     // Template for index.html
-    index: path.resolve(__dirname, '../dist', 'iam','login', 'index.html'),
+    index: path.resolve(__dirname, "../dist", "iam", "login", "index.html"),
 
     // Paths
-    assetsRoot: path.resolve(__dirname, '../dist', 'iam','login'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/iam/login/',
+    assetsRoot: path.resolve(__dirname, "../dist", "iam", "login"),
+    assetsSubDirectory: "static",
+    assetsPublicPath: "/iam/login/",
 
     /**
-     * Source Maps 
+     * Source Maps
      */
 
     productionSourceMap: true,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: "#source-map",
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:
     // npm install --save-dev compression-webpack-plugin
     productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
+    productionGzipExtensions: ["js", "css"],
 
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  }
-}
+    bundleAnalyzerReport: process.env.npm_config_report,
+  },
+};
diff --git a/src/components/bg-identify.vue b/src/components/bg-identify.vue
new file mode 100644
index 0000000..e59ba2f
--- /dev/null
+++ b/src/components/bg-identify.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="bg-identify" @click="refreshCode">
+    <canvas :width="contentWidth" :height="contentHeight"></canvas>
+  </div>
+</template>
+<script>
+export default {
+  name: "BgIdentify",
+  model: {
+    prop: "identifyCode",
+    event: "change",
+  },
+  props: {
+    identifyCode: {
+      type: String,
+      default: "1234",
+    },
+    fontSizeMin: {
+      type: Number,
+      default: 25,
+    },
+    fontSizeMax: {
+      type: Number,
+      default: 30,
+    },
+    backgroundColorMin: {
+      type: Number,
+      default: 255,
+    },
+    backgroundColorMax: {
+      type: Number,
+      default: 255,
+    },
+    colorMin: {
+      type: Number,
+      default: 0,
+    },
+    colorMax: {
+      type: Number,
+      default: 160,
+    },
+    lineColorMin: {
+      type: Number,
+      default: 100,
+    },
+    lineColorMax: {
+      type: Number,
+      default: 255,
+    },
+    dotColorMin: {
+      type: Number,
+      default: 0,
+    },
+    dotColorMax: {
+      type: Number,
+      default: 255,
+    },
+    contentWidth: {
+      type: Number,
+      default: 150,
+    },
+    contentHeight: {
+      type: Number,
+      default: 38,
+    },
+  },
+  data() {
+    return {
+      identifyCodes: "1234567890",
+    };
+  },
+  methods: {
+    randomNum(min, max) {
+      return Math.floor(Math.random() * (max - min) + min);
+    },
+    randomColor(min, max) {
+      let r = this.randomNum(min, max);
+      let g = this.randomNum(min, max);
+      let b = this.randomNum(min, max);
+      return "rgb(" + r + "," + g + "," + b + ")";
+    },
+    drawPic() {
+      let canvas = this.$el.querySelector("canvas");
+      let ctx = canvas.getContext("2d");
+
+      ctx.textBaseline = "bottom";
+      ctx.fillStyle = this.randomColor(
+        this.backgroundColorMin,
+        this.backgroundColorMax
+      );
+      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
+
+      for (let i = 0; i < this.identifyCode.length; i++) {
+        this.drawText(ctx, this.identifyCode[i], i);
+      }
+      this.drawLine(ctx);
+      this.drawDot(ctx);
+    },
+    drawText(ctx, txt, i) {
+      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
+      ctx.font =
+        this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
+      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
+      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
+      var deg = this.randomNum(-45, 45);
+      // 修改坐标原点和旋转角度
+      ctx.translate(x, y);
+      ctx.rotate((deg * Math.PI) / 180);
+      ctx.fillText(txt, 0, 0);
+      // 恢复坐标原点和旋转角度
+      ctx.rotate((-deg * Math.PI) / 180);
+      ctx.translate(-x, -y);
+    },
+    drawLine(ctx) {
+      // 绘制干扰线
+      for (let i = 0; i < 5; i++) {
+        ctx.strokeStyle = this.randomColor(
+          this.lineColorMin,
+          this.lineColorMax
+        );
+        ctx.beginPath();
+        ctx.moveTo(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight)
+        );
+        ctx.lineTo(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight)
+        );
+        ctx.stroke();
+      }
+    },
+    drawDot(ctx) {
+      // 绘制干扰点
+      for (let i = 0; i < 80; i++) {
+        ctx.fillStyle = this.randomColor(0, 255);
+        ctx.beginPath();
+        ctx.arc(
+          this.randomNum(0, this.contentWidth),
+          this.randomNum(0, this.contentHeight),
+          1,
+          0,
+          2 * Math.PI
+        );
+        ctx.fill();
+      }
+    },
+    refreshCode() {
+      let identifyCode = "";
+
+      for (let i = 0; i < 4; i++) {
+        identifyCode += this.identifyCodes[
+          this.randomNum(0, this.identifyCodes.length)
+        ];
+      }
+
+      this.$emit("change", identifyCode);
+
+      this.$nextTick(() => {
+        this.drawPic();
+      });
+    },
+  },
+  mounted() {
+    if (this.identifyCode) {
+      this.drawPic();
+    } else {
+      this.refreshCode();
+    }
+  },
+};
+</script>
+<style scoped>
+.bg-identify {
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.bg-identify > canvas {
+  display: block;
+}
+</style>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index c74fc6c..223a80c 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -50,17 +50,20 @@
             class="yzm"
             :class="ruleFormIcon.yzm ? '' : 'icon_show'"
           >
-            <el-input
-              v-model.trim="yzms.yzm"
-              placeholder="请输入验证码"
-              :validate-event="false"
-            ></el-input>
-            <img
-              class="yzm_img"
-              title="看不清？换一张"
-              :src="imgSrc"
-              @click="getImg()"
-            />
+            <div class="yzm_ctx">
+              <el-input
+                class="yzm_ipt"
+                v-model.trim="yzms.yzm"
+                placeholder="请输入验证码"
+                :validate-event="false"
+              ></el-input>
+              <img
+                class="yzm_img"
+                title="看不清？换一张"
+                :src="imgSrc"
+                @click="getImg()"
+              />
+            </div>
           </el-form-item>
         </el-form>
         <el-form>
@@ -230,8 +233,8 @@
         <div v-if="registerActive == 1">
           <el-form
             :model="yzms"
-            :rules="yzmRules"
-            ref="yzms"
+            :rules="yzmRules1"
+            ref="yzms_1"
             class="demo-ruleForm"
           >
             <el-form-item
@@ -239,16 +242,19 @@
               :class="ruleFormIcon.yzm ? 'yzm' : 'yzm icon_show'"
             >
               <p class="item_p">验证码</p>
-              <el-input
-                v-model.trim="yzms.yzm"
-                placeholder="请输入验证码"
-                :validate-event="false"
-              ></el-input>
-              <s-identify
-                class="yzm_img"
-                :identifyCode="identifyCode"
-                @click.native="refreshCode()"
-              ></s-identify>
+              <div class="yzm_ctx">
+                <el-input
+                  class="yzm_ipt"
+                  v-model.trim="yzms.yzm"
+                  placeholder="请输入验证码"
+                ></el-input>
+
+                <bg-identify
+                  class="yzm_img"
+                  ref="bgIdentify"
+                  v-model="identifyCode"
+                />
+              </div>
             </el-form-item>
           </el-form>
         </div>
@@ -291,13 +297,15 @@
       </div>
     </div>
   </div>
-</template> 
+</template>
 <script>
 import { getCookie, clearCookie, setCookie } from "@/utils/common.js";
 import SIdentify from "@/components/sidentify";
-import CryptoJS from "crypto-js"; //加密js
+import BgIdentify from "@/components/bg-identify";
+import CryptoJS from "crypto-js"; // 加密js
+
 export default {
-  components: { SIdentify },
+  components: { SIdentify, BgIdentify },
   data() {
     var validatePass = (rule, value, callback) => {
       if (value !== this.ruleForm_0.password1) {
@@ -426,9 +434,22 @@ export default {
               callback(new Error(response.data.errMsg));
             }
           })
-          .catch(function (response) {});
+          .catch(function(response) {});
+      }
+    };
+    var validateCheckCode = (rule, value, callback) => {
+      if (value == "") {
+        callback(new Error("请输入验证码"));
+      } else {
+        if (value !== this.identifyCode) {
+          callback(new Error("验证码错误"));
+          this.refreshCode();
+        } else {
+          callback();
+        }
       }
     };
+
     return {
       form: {
         userid: "",
@@ -458,6 +479,13 @@ export default {
       yzmRules: {
         yzm: [{ validator: validateYzm }],
       },
+      identifyCode: "",
+      yzmRules1: {
+        yzm: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { validator: validateCheckCode, trigger: "blur" },
+        ],
+      },
       yzmState: false,
       ruleFormIcon: {
         userid1: true,
@@ -607,7 +635,7 @@ export default {
             this.imgSrc = response.data.data.captcha;
           }
         })
-        .catch(function (response) {});
+        .catch(function(response) {});
     },
     changePass() {
       this.visible = !this.visible;
@@ -629,8 +657,9 @@ export default {
     },
     makeCode(o, l) {
       for (let i = 0; i < l; i++) {
-        this.identifyCode +=
-          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
+        this.identifyCode += this.identifyCodes[
+          this.randomNum(0, this.identifyCodes.length)
+        ];
       }
     },
     getOrganizations() {
@@ -644,7 +673,7 @@ export default {
       let self = this;
       self.$refs["ruleForm_1"].validate((valid, obj) => {
         if (valid) {
-          self.$refs["yzms"].validate((volid_yzm, obj_yzm) => {
+          self.$refs["yzms_1"].validate((volid_yzm, obj_yzm) => {
             if (volid_yzm) {
               self.submitAll();
             } else {
@@ -762,7 +791,26 @@ export default {
   },
 };
 </script>
+
 <style scoped>
+.yzm_ctx {
+  width: 80%;
+  margin-left: 10%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.yzm_ctx .yzm_ipt {
+  width: calc(100% - 170px);
+  margin: 0 !important;
+  flex-grow: 1;
+}
+
+.yzm_ctx .yzm_img {
+  width: 150px;
+  flex-shrink: 0;
+  margin-left: 20px;
+}
 .login_backg {
   height: 100vh;
   background: url("~@/assets/image/img_bg.jpg") center center;
@@ -890,19 +938,6 @@ export default {
   cursor: pointer;
   background: url("~@/assets/image/login_eye_dis.png") no-repeat center center;
 }
-.login .yzm .el-input {
-  width: 42%;
-  margin-left: 10%;
-}
-.yzm {
-  position: relative;
-}
-.yzm .yzm_img {
-  position: absolute;
-  width: 30%;
-  margin-left: 5%;
-  cursor: pointer;
-}
 .footer_message {
   width: 500px;
   text-align: center;
@@ -970,19 +1005,6 @@ export default {
 }
 </style>
 <style>
-.login .yzm .el-input {
-  width: 40%;
-  margin-left: 10%;
-}
-.yzm {
-  position: relative;
-}
-.yzm .yzm_img {
-  position: absolute;
-  width: 30%;
-  margin-left: 5%;
-  cursor: pointer;
-}
 .login .el-input__suffix {
   font-size: 20px;
   right: 10px;
-- 
2.26.0