src/renderer/src/views/login/index.vue

@@ -37,8 +37,8 @@
         <el-form-item label="手机号" prop="username">
           <el-input  v-model="ruleForm.username" placeholder="请输入手机号" />
         </el-form-item>
-        <el-form-item label="验证码"  prop="smsCode">
-          <el-input style="width:185px"  v-model="ruleForm.smsCode" placeholder="请输入验证码" /><el-button :disabled="codeName!='发送验证码'" type="primary" @click="sendyzm">{{ codeName }}</el-button>
+        <el-form-item label="验证码"  prop="smsCode" style="display: flex">
+          <el-input style="width:185px"  v-model="ruleForm.smsCode" placeholder="请输入验证码" /><el-button style="margin-left:10px;width:100px"  type="primary" @click="sendyzm">发送验证码</el-button>
         </el-form-item>
         <el-form-item label="密码" prop="password" >
           <el-input  autocomplete="on" type="password" v-model="ruleForm.password" placeholder="请输入密码" />
@@ -58,10 +58,27 @@
     <el-progress :text-inside="true" :stroke-width="22" :percentage="downloadProp" :show-text="false"
       status="success" />
   </el-dialog>
+  <el-dialog
+        v-model="isImg"
+        title="人机验证"
+        width="500"
+        style=" -webkit-app-region: no-drag;"
+      >
+        <span>根据图片回答相关问题</span>
+        <div style="display: flex;align-items: center;;margin-top:30px">
+          <img :src="isPeopleImg" style="width:200px;height:60px;cursor: pointer;" alt="" srcset="" @click="refreshImg">
+          <el-input v-model="ruleForm.imgCode"  style="width: 250px;height:40px;margin-left:20px" placeholder="请根据图片填入答案" />
+        </div>
+        <div style="display: flex;justify-content: center;margin-top:30px">
+          <el-button  type="primary" @click="sbmitImg">确定</el-button>
+        </div>
+      </el-dialog>
   <!--选择学科-->
   <SelectSubject v-model="isSubject" :login-data="loginForm" />
   <!--注册弹框-->
   <Register ref="RegModel"></Register>
+  
+  
 </template>
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
@@ -73,7 +90,7 @@ import WindowTools from '@/components/window-tools/index.vue'
 import SelectSubject from '@/components/select-subject/index.vue'
 import Register from './components/Register.vue'
 import { sessionStore } from '@/utils/store'
-import {sendcode,instructorregister} from '@/api/login'
+import {sendcode,instructorregister,getCodeImg} from '@/api/login'
 
 const { session } = require('@electron/remote')
 const downloadProp = ref(0)
@@ -88,6 +105,11 @@ const isRegister = ref(true)
 const ruleFormRef = ref(null)
 const codeName=ref('发送验证码')
 const timer=ref(null)
+const isImg=ref(false)
+const isPeopleImg=ref(null)
+const type=ref(1) // 1注册 2找回密码
+const resImg = reactive({ imgData: {} });
+
 //表单
 const loginForm = reactive({
   username: '',
@@ -118,14 +140,48 @@ const gotoreRegister=()=>{
   }
   isRegister.value=false
 }
+// 刷新
+const refreshImg=()=>{
+  getCodeImg().then(res=>{
+    isPeopleImg.value='data:image/jpg;base64,'+res.img
+    resImg.imgData=res
+  })
+}
+// 提交人机验证
+const sbmitImg=()=>{
+   if(ruleForm.imgCode){
+    // {mobile:ruleForm.phoneNumber,code:ruleForm.imgCode,uuid:resImg.imgData.uuid}
+    const { username:username,imgCode:code } = ruleForm
+    const params = {
+      username, code,
+      uuid: resImg.imgData.uuid,
+      source:4
+    }
+    sendcode(params).then(res=>{
+      if(res.code==200){
+        ElMessage.success('短信发送成功')
+        ruleForm.Code=res.data
+        isImg.value=false
+      }
+
+    })
+   }else{
+    ElMessage.error('请根据图片输入验证码')
+   }
+  //
+}
 // 发送验证码
 const sendyzm=()=>{
   if(ruleForm.username){
     const pattern = /^1[3-9]\d{9}$/;
     if( pattern.test(ruleForm.username) ){
-      sendcode({username:ruleForm.username, source: '4'}).then(res=>{
+      
+      getCodeImg().then(res=>{
           if(res.code==200){
-            ElMessage.success('消息发送成功')
+            ruleForm.imgCode=null
+            isPeopleImg.value='data:image/jpg;base64,'+res.img
+            isImg.value=true
+            resImg.imgData=res
             codeName.value=60
             timer.value=setInterval(()=>{
               codeName.value--