增加注册验证码

jeecgboot-vue3-master/src/views/system/loginmini/MiniRegister.vue

@@ -29,7 +29,7 @@
                   </a-form-item>
                   <a-form-item>
                     <div class="aui-input-line">
-                      <Icon class="aui-icon" icon="ant-design:mobile-outlined" />
+                      <!-- <Icon class="aui-icon" icon="ant-design:mobile-outlined" /> -->
 <!--                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.department')" />-->
                       <JStuSelectDept   v-model:value="formData.department" :multiple="false"  />
                     </div>
@@ -79,6 +79,16 @@
                       </div>
                     </div>
                   </a-form-item>
+                  <div class="aui-inputClear">
+                        <i class="icon icon-code"></i>
+                        <a-form-item>
+                          <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
+                        </a-form-item>
+                        <div class="aui-code">
+                          <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
+                          <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
+                        </div>
+                      </div>
 <!--                  <a-form-item name="policy">-->
 <!--                    <div class="aui-flex">-->
 <!--                      <div class="aui-flex-box">-->
@@ -108,8 +118,9 @@
 </template>
 
 <script lang="ts" setup name="mini-register">
-  import { ref, reactive, unref, toRaw } from 'vue';
-  import { getCaptcha, registerStu } from '/@/api/sys/user';
+
+  import { ref, reactive, unref, toRaw,onMounted } from 'vue';
+  import { getCaptcha, registerStu,getCodeInfo } from '/@/api/sys/user';
   import { SmsEnum } from '/@/views/sys/login/useLogin';
   import { useMessage } from '/@/hooks/web/useMessage';
   import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
@@ -118,6 +129,7 @@
   import eyeGImg from '/@/assets/loginmini/icon/icon-eye-g.png';
   import JStuSelectDept from '/@/components/Form/src/jeecg/components/JStuSelectDept.vue';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import codeImg from '/@/assets/images/checkcode.png';
 
   const { t } = useI18n();
   const { notification, createErrorModal, createMessage } = useMessage();
@@ -153,7 +165,21 @@
     emit('go-back');
     initForm();
   }
+// 验证码
+const randCodeData = reactive<any>({
+    randCodeImage: '',
+    requestCodeSuccess: false,
+    checkKey: null,
+  });
+  function handleChangeCheckCode() {
+    formData.inputCode = '';
 
+    randCodeData.checkKey = 1629428467008;
+    getCodeInfo(randCodeData.checkKey).then((res) => {
+      randCodeData.randCodeImage = res;
+      randCodeData.requestCodeSuccess = true;
+    });
+  }
   /**
    * 获取手机验证码
    */
@@ -279,7 +305,10 @@
   function confirmPwdClick(value) {
     confirmPwdIndex.value = value;
   }
-
+  onMounted(() => {
+    //加载验证码
+    handleChangeCheckCode();
+  });
   defineExpose({
     initForm,
   });