验证码

src/components/m-img-code/index.tsx

@@ -23,6 +23,10 @@ export default defineComponent({
     clientId: {
       type: String,
       default: 'cooleshow-student'
+    },
+    zIndex: {
+      type: Number,
+      default: 2001
     }
   },
   emits: ['close', 'sendCode'],
@@ -69,18 +73,20 @@ export default defineComponent({
         if ((this as any).code.length < 4) {
           return;
         }
-        await request.post(`/edu-app/open/verifyImgCode`, {
-          requestType: 'form',
-          hideLoading: true,
-          data: {
-            phone: this.phone,
-            code: this.code
-          }
-        });
-        await request.post(`/edu-app/open/sendSms`, {
+        // await request.post(`/edu-app/open/verifyImgCode`, {
+        //   requestType: 'form',
+        //   hideLoading: true,
+        //   data: {
+        //     phone: this.phone,
+        //     code: this.code
+        //   }
+        // });
+        // /edu-app/open/sendSms
+        await request.post(`/edu-app/open/sendSmsVerify`, {
           requestType: 'form',
           hideLoading: true,
           data: {
+            code: this.code,
             clientId: this.clientId,
             type: this.type,
             mobile: this.phone
@@ -103,6 +109,7 @@ export default defineComponent({
     return (
       <Popup
         show={this.showStatus}
+        zIndex={this.zIndex}
         class={styles.imgCodePopup}
         closeOnClickOverlay={false}
         onClose={() => {

src/views/layout/code.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, nextTick, onMounted, reactive, watch } from 'vue';
+import {
+  Teleport,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  watch
+} from 'vue';
 import styles from './login.module.less';
 import loginLogo from './images/login-logo.png';
 import {
@@ -14,6 +21,7 @@ import { useRouter } from 'vue-router';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import { setLogin } from '@/state';
+import MImgCode from '@/components/m-img-code';
 
 export default defineComponent({
   name: 'layout-code',
@@ -31,6 +39,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const router = useRouter();
     const forms = reactive({
+      imgCodeStatus: false,
       smsCode: '',
       showKeyboard: false,
       countDownStatus: true,
@@ -38,24 +47,25 @@ export default defineComponent({
       countTimer: null as any
     });
 
-    const onSendSms = async () => {
-      try {
-        await request.post('/edu-app/open/sendSms', {
-          requestType: 'form',
-          data: {
-            clientId: 'cooleshow-student',
-            type: props.isRegister ? 'REGISTER' : 'LOGIN',
-            mobile: props.phone
-          }
-        });
-        onCountDown();
-        setTimeout(() => {
-          showToast('验证码已发送');
-        }, 100);
-      } catch {
-        forms.countDownStatus = true;
-      }
-    };
+    // const onSendSms = async () => {
+    //   try {
+    //     await request.post('/edu-app/open/sendSmsVerify', {
+    //       requestType: 'form',
+    //       data: {
+    //         clientId: 'cooleshow-student',
+    //         type: props.isRegister ? 'REGISTER' : 'LOGIN',
+    //         mobile: props.phone,
+    //         code: ''
+    //       }
+    //     });
+    //     onCountDown();
+    //     setTimeout(() => {
+    //       showToast('验证码已发送');
+    //     }, 100);
+    //   } catch {
+    //     forms.countDownStatus = true;
+    //   }
+    // };
 
     const onCountDown = () => {
       forms.countDownStatus = false;
@@ -67,6 +77,7 @@ export default defineComponent({
           clearInterval(forms.countTimer);
         }
       }, 1000);
+      forms.showKeyboard = true;
     };
     const onLogin = async () => {
       try {
@@ -109,8 +120,9 @@ export default defineComponent({
 
     onMounted(() => {
       nextTick(async () => {
-        await onSendSms();
-        forms.showKeyboard = true;
+        forms.imgCodeStatus = true;
+        //   await onSendSms();
+        //   forms.showKeyboard = true;
       });
     });
     return () => (
@@ -150,7 +162,9 @@ export default defineComponent({
               <Button
                 type="primary"
                 round
-                onClick={onSendSms}
+                onClick={() => {
+                  forms.imgCodeStatus = true;
+                }}
                 class={styles.btnSend}
                 disabled={!forms.countDownStatus}>
                 重新发送
@@ -159,6 +173,21 @@ export default defineComponent({
             </div>
           </CellGroup>
         </div>
+
+        {forms.imgCodeStatus ? (
+          <Teleport to={'body'}>
+            <MImgCode
+              zIndex={2100}
+              v-model:value={forms.imgCodeStatus}
+              phone={props.phone}
+              type="REGISTER"
+              onClose={() => {
+                forms.imgCodeStatus = false;
+              }}
+              onSendCode={onCountDown}
+            />
+          </Teleport>
+        ) : null}
       </div>
     );
   }

src/views/layout/login.tsx

@@ -194,7 +194,7 @@ export default defineComponent({
           </CellGroup>
         </div>
 
-        <MPopup v-model:modelValue={this.imgCodeStatus}>
+        <MPopup v-model:modelValue={this.imgCodeStatus} destroy>
           <Code
             phone={this.username}
             isRegister={this.isRegister}