添加图形验证码

src/layout/components/Navbar.vue

@@ -24,7 +24,10 @@
     <div class="indexlayout-top-menu">
       <!-- :class="{'active': getTopMenuActive === route.path}" -->
       <!-- el-scrollbar -->
-      <el-scrollbar class="horizontal-scrollbar" style="overflow: hidden; height: 100%">
+      <el-scrollbar
+        class="horizontal-scrollbar"
+        style="overflow: hidden; height: 100%"
+      >
         <template v-for="route in permission_routes">
           <app-link
             v-if="!route.hidden"
@@ -127,7 +130,11 @@
         content="点击查看系统日志"
         placement="bottom"
       >
-        <div class="msginfo right-position" v-permission="'/journal'" @click="gotoRecode">
+        <div
+          class="msginfo right-position"
+          v-permission="'/journal'"
+          @click="gotoRecode"
+        >
           <i class="icon_admin_message operationSize"></i>
         </div>
       </el-tooltip>
@@ -164,7 +171,11 @@
           </span>
         </el-popover>
       </div>
-      <el-dropdown class="avatar-container" trigger="hover" style="margin-left: 12px">
+      <el-dropdown
+        class="avatar-container"
+        trigger="hover"
+        style="margin-left: 12px"
+      >
         <div class="avatar-wrapper">
           <img
             v-if="$store.getters.avatar"
@@ -207,14 +218,16 @@
                 @click="onRenew"
                 v-if="
                   $helpers.permission('/ productService') &&
-                  $helpers.permission('/serviceRenew')
+                    $helpers.permission('/serviceRenew')
                 "
               >
                 立即续费
               </div>
             </div>
             <div class="serviceTime" v-if="tenantInfo.validRemaining > 0">
-              剩余{{ tenantInfo.validRemaining }}天（{{ tenantInfo.expiryDateEnd }}）到期
+              剩余{{ tenantInfo.validRemaining }}天（{{
+                tenantInfo.expiryDateEnd
+              }}）到期
             </div>
             <div class="serviceTime" v-else>已过期</div>
           </div>
@@ -242,7 +255,10 @@
             <i class="icon_admin_account userSize"></i>
             <span class="dropdown-text">账号设置</span>
           </el-dropdown-item>
-          <el-dropdown-item style="border-top: 1px solid #e5e5e5" @click.native="logout">
+          <el-dropdown-item
+            style="border-top: 1px solid #e5e5e5"
+            @click.native="logout"
+          >
             <i class="icon_admin_exit userSize"></i>
             <span class="dropdown-text">安全退出</span>
           </el-dropdown-item>
@@ -274,8 +290,8 @@
             {
               pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
               message: '密码为6-20位数字和字母组合',
-              trigger: 'blur',
-            },
+              trigger: 'blur'
+            }
           ]"
           prop="password"
         >
@@ -293,8 +309,8 @@
             {
               pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
               message: '密码为6-20位数字和字母组合',
-              trigger: 'blur',
-            },
+              trigger: 'blur'
+            }
           ]"
           prop="password2"
         >
@@ -307,7 +323,9 @@
         </el-form-item>
         <el-form-item
           label="验证码"
-          :rules="[{ required: true, message: '验证码不能为空', trigger: 'blur' }]"
+          :rules="[
+            { required: true, message: '验证码不能为空', trigger: 'blur' }
+          ]"
           prop="authCode"
           style=""
         >
@@ -315,17 +333,69 @@
             v-model.trim="resetForm.authCode"
             style="width: 180px"
             autocomplete="off"
+            :maxlength="6"
           ></el-input>
-          <el-button :disabled="isDisable" @click="getCode">{{ btnName }}</el-button>
+          <el-button :disabled="isDisable" @click="getCode">{{
+            btnName
+          }}</el-button>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="resetVisible = false" v-if="!nocloseable">取 消</el-button>
+        <el-button @click="resetVisible = false" v-if="!nocloseable"
+          >取 消</el-button
+        >
         <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
       </div>
     </el-dialog>
 
     <el-dialog
+      title="请输入图形验证码"
+      width="360px"
+      append-to-body
+      :visible.sync="smsCodeVisible"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="smsCodeForm"
+        label-position="right"
+        label-width="100px"
+        ref="smsForm"
+      >
+        <el-row :gutter="12">
+          <el-col :span="16">
+            <el-form-item
+              label-width="0"
+              :rules="[
+                { required: true, message: '图形验证码', trigger: 'blur' }
+              ]"
+              prop="code"
+            >
+              <el-input
+                v-model="smsCodeForm.code"
+                placeholder="请输入验证码"
+                :maxlength="4"
+                auto-complete="off"
+              ></el-input> </el-form-item
+          ></el-col>
+          <el-col :span="8">
+            <div @click="updateIdentifyingCode">
+              <el-image :src="identifyingCode" class="smsImg"></el-image>
+            </div>
+
+            <span @click="updateIdentifyingCode" class="imgChange">
+              看不清？换一换
+            </span>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="smsCodeVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitSendSms">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
       title="切换机构"
       width="500px"
       append-to-body
@@ -340,7 +410,9 @@
       >
         <el-form-item
           label="选择机构"
-          :rules="[{ required: true, message: '请选择机构', trigger: 'change' }]"
+          :rules="[
+            { required: true, message: '请选择机构', trigger: 'change' }
+          ]"
           prop="tenantId"
         >
           <el-select
@@ -384,15 +456,12 @@
 import qs from "qs";
 import Logo from "./Sidebar/Logo";
 import { mapGetters } from "vuex";
-// import Breadcrumb from '@/components/Breadcrumb'
-// import Hamburger from '@/components/Hamburger'
 import { resetPassword } from "@/api/buildTeam";
 import AppLink from "./Sidebar/Link";
 import { getBelongTopMenuPath } from "@/utils/permission";
-// import instructions from "./instructions";
 import { validOaUrl, validMallUrl } from "@/utils/validate";
 import { tenantInfoQueryPage } from "@/views/organManager/api";
-import Cookies from "js-cookie";
+import { sendSmsCode } from "./api";
 import axios from "axios";
 import userModel from "./modal/userModal";
 export default {
@@ -408,8 +477,13 @@ export default {
         phone: "",
         authCode: "",
         password: "",
-        password2: "",
+        password2: ""
+      },
+      smsCodeForm: {
+        code: ""
       },
+      identifyingCode: "",
+      smsCodeVisible: false,
       isDisable: false, // 是否允许发送验证码
       timerCount: 60,
       btnName: "获取验证码",
@@ -417,18 +491,18 @@ export default {
       tenantVisible: false,
       tenantName: tenantConfig.tenantName || null,
       tenantForm: {
-        tenantId: Number(tenantConfig.tenantId) || null,
+        tenantId: Number(tenantConfig.tenantId) || null
       },
       tenantList: [],
       tenantLogo: tenantConfig.tenantLogo || null,
       noReadNum: 0,
-      nocloseable: false,
+      nocloseable: false
     };
   },
 
   components: {
     AppLink,
-    userModel,
+    userModel
     // instructions,
     // Breadcrumb,
     // Hamburger
@@ -440,7 +514,7 @@ export default {
       "name",
       "positionName",
       "permission_routes",
-      "tenantInfo",
+      "tenantInfo"
     ]),
     getTopMenuActive() {
       let route = this.$route;
@@ -451,13 +525,9 @@ export default {
       // 判断是否是平台账号 true 是
       const baseTenantId = sessionStorage.getItem("baseTenantId");
       return baseTenantId < 0 ? true : false;
-    },
+    }
   },
   mounted() {
-    // this.$bus.$on("resetPwd", () => {
-    //   this.resetPassWord();
-    // });
-    console.log(this.$store.getters.pwdflag, "getpwdflag");
     if (this.$store.getters.pwdflag) {
       // this.$confirm("当前账号存在安全风险是否修改密码", "提示", {
       //   confirmButtonText: "确定",
@@ -470,7 +540,7 @@ export default {
       this.nocloseable = true;
       this.resetPassWord();
     }
-    this.$bus.$on("getShowNums", (obj) => {
+    this.$bus.$on("getShowNums", obj => {
       this.noReadNum = obj;
     });
     // 手动加入
@@ -494,7 +564,7 @@ export default {
           page: 1,
           rows: 999,
           payState: 1,
-          state: 1,
+          state: 1
         });
         this.tenantList = res.data?.rows || [];
         this.tenantVisible = true;
@@ -504,12 +574,12 @@ export default {
       this.$router.push("/productService");
     },
     submitTenant() {
-      this.$refs["tenantForm"].validate((res) => {
+      this.$refs["tenantForm"].validate(res => {
         if (res) {
           const tenantForm = this.tenantForm;
           let tenantName = null;
           let tenantLogo = null;
-          this.tenantList.forEach((item) => {
+          this.tenantList.forEach(item => {
             if (item.id == tenantForm.tenantId) {
               tenantName = item.name;
               tenantLogo = item.logo;
@@ -525,10 +595,13 @@ export default {
             tenantConfig.tenantId = tenantForm.tenantId;
             tenantConfig.tenantName = tenantName;
             tenantConfig.tenantLogo = tenantLogo;
-            sessionStorage.setItem("tenantConfig", JSON.stringify(tenantConfig));
+            sessionStorage.setItem(
+              "tenantConfig",
+              JSON.stringify(tenantConfig)
+            );
             this.$router.push({
               path: "/redirect",
-              query: this.$route.fullPath,
+              query: this.$route.fullPath
             });
             // } else {
             //     this.$router.push({
@@ -563,14 +636,14 @@ export default {
         this.$message.error("两次密码必须相同");
         return;
       }
-      this.$refs["pwdForm"].validate((res) => {
+      this.$refs["pwdForm"].validate(res => {
         if (res) {
           // 发请求
           resetPassword({
             authCode: this.resetForm.authCode,
             mobile: this.$store.getters.phone,
-            newPassword: this.resetForm.password,
-          }).then((res) => {
+            newPassword: this.resetForm.password
+          }).then(res => {
             if (res.code == 200) {
               // 修改成功
               this.$message.success("修改成功");
@@ -586,31 +659,33 @@ export default {
         this.$message.error("请输入正确的手机号");
         return;
       }
-      if (!this.isDisable) {
-        this.isDisable = true;
-        // 发请求成功后开启定时器
-        // 发送验证码
-        axios
-          .post(
-            "/api-web/code/sendSms",
-            qs.stringify({ mobile: this.$store.getters.phone })
-          )
-          .then((res) => {
-            if (res.data.code == 200) {
-              let timer = setInterval((res) => {
-                if (this.timerCount <= 0) {
-                  clearInterval(timer);
-                  this.isDisable = false;
-                  this.btnName = "获取验证码";
-                  this.timerCount = 60;
-                } else {
-                  this.timerCount--;
-                  this.btnName = `${this.timerCount}s后重试`;
-                }
-              }, 1000);
-            }
-          });
-      }
+      // if (!this.isDisable) {
+      //   this.isDisable = true;
+      //   // 发请求成功后开启定时器
+      //   // 发送验证码
+      //   axios
+      //     .post(
+      //       "/api-web/code/sendSms",
+      //       qs.stringify({ mobile: this.$store.getters.phone })
+      //     )
+      //     .then(res => {
+      //       if (res.data.code == 200) {
+      //         let timer = setInterval(res => {
+      //           if (this.timerCount <= 0) {
+      //             clearInterval(timer);
+      //             this.isDisable = false;
+      //             this.btnName = "获取验证码";
+      //             this.timerCount = 60;
+      //           } else {
+      //             this.timerCount--;
+      //             this.btnName = `${this.timerCount}s后重试`;
+      //           }
+      //         }, 1000);
+      //       }
+      //     });
+      // }
+      this.updateIdentifyingCode();
+      this.smsCodeVisible = true;
     },
     openIns() {
       // this.$refs.instructions.showInstructions();
@@ -633,6 +708,41 @@ export default {
       // 初始化未读数
       this.$bus.$emit("openChart", true);
     },
+    updateIdentifyingCode() {
+      let origin = window.location.origin;
+      this.identifyingCode = `${origin}/api-web/code/getLoginImage?phone=${
+        this.$store.getters.phone
+      }&toen=${new Date().getTime()}`;
+      console.log(this.identifyingCode, "identifyingCode");
+    },
+    // 发送验证码
+    submitSendSms() {
+      this.$refs["smsForm"].validate(async res => {
+        if (!res) return;
+        try {
+          await sendSmsCode({
+            code: this.smsCodeForm.code,
+            mobile: this.$store.getters.phone
+          });
+
+          let timer = setInterval(res => {
+            if (this.timerCount <= 0) {
+              clearInterval(timer);
+              this.isDisable = false;
+              this.btnName = "获取验证码";
+              this.timerCount = 60;
+            } else {
+              this.timerCount--;
+              this.btnName = `${this.timerCount}s后重试`;
+            }
+          }, 1000);
+          this.$message.success("验证码已发送");
+          this.smsCodeVisible = false;
+        } catch (e) {
+          console.log(e);
+        }
+      });
+    }
   },
   watch: {
     resetVisible(val) {
@@ -641,11 +751,11 @@ export default {
           phone: "",
           authCode: "",
           password: "",
-          password2: "",
+          password2: ""
         };
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -862,7 +972,8 @@ export default {
     .avatar-wrapper {
       display: flex;
       align-items: center;
-      background: url("../../assets/images/user_tips.png") no-repeat right center;
+      background: url("../../assets/images/user_tips.png") no-repeat right
+        center;
       background-size: 45%;
       width: 100%;
       .user-avatar {
@@ -956,4 +1067,19 @@ export default {
 /deep/.el-badge__content.is-fixed.is-dot {
   top: 28px !important;
 }
+
+.smsImg {
+  width: 100%;
+  height: 36px;
+  cursor: pointer;
+}
+
+.imgChange {
+  cursor: pointer;
+  display: block;
+  text-align: center;
+  font-size: 12px;
+  color: #198cfe;
+  line-height: 17px;
+}
 </style>

src/layout/components/api.js

@@ -1,14 +1,26 @@
-import request from '@/utils/request'
-import request2 from '@/utils/request2'
-import qs from 'qs'
-let api = '/api-web'
+import request from "@/utils/request";
+import request2 from "@/utils/request2";
+import qs from "qs";
+let api = "/api-web";
 
-
-export function operationLog (data) {
+export function operationLog(data) {
   return request2({
     url: api + `/operationLog/save`,
-    method: 'GET',
+    method: "GET",
     params: data,
-    data: {},
-  })
+    data: {}
+  });
+}
+
+/**
+ * 发送验证码
+ * @param {*} data
+ * @returns
+ */
+export function sendSmsCode(data) {
+  return request2({
+    url: api + `/code/sendSms`,
+    method: "POST",
+    data
+  });
 }