添加验证码功能

src/components/col-img-code/index.module.less

@@ -1,45 +1,45 @@
-.imgCode {
-  padding: 16px;
-
-  .codeTitle {
-    text-align: center;
-    font-size: 16px;
-    color: #4F4F4F;
-    margin: 0;
-    padding-bottom: 16px;
-  }
-
-  .img {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .imgChange {
-    display: block;
-    color: #AAAAAA;
-    font-size: 12px;
-    text-align: center;
-    padding-top: 5px;
-  }
-
-  .field {
-    background: #F4F4F4;
-    padding: 10px 12px !important;
-  }
-}
-
-.imgCodePopup {
-  width: 90%;
-  border-radius: 5px;
-  overflow: inherit;
-
-  :global {
-    .van-popup__close-icon {
-      top: -37px !important;
-      right: 0 !important;
-      font-size: 25px;
-      color: #fff;
-    }
-  }
-}
+.imgCode {
+  padding: 16px;
+
+  .codeTitle {
+    text-align: center;
+    font-size: 16px;
+    color: #4F4F4F;
+    margin: 0;
+    padding-bottom: 16px;
+  }
+
+  .img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .imgChange {
+    display: block;
+    color: #AAAAAA;
+    font-size: 12px;
+    text-align: center;
+    padding-top: 5px;
+  }
+
+  .field {
+    background: #F4F4F4;
+    padding: 10px 12px !important;
+  }
+}
+
+.imgCodePopup {
+  width: 90%;
+  border-radius: 5px;
+  overflow: initial;
+
+  :global {
+    .van-popup__close-icon {
+      top: -37px !important;
+      right: 0 !important;
+      font-size: 25px;
+      color: #fff;
+    }
+  }
+}

src/student/invite-teacher/invite-code/index.tsx

@@ -1,6 +1,7 @@
 import ColHeader from '@/components/col-header'
 import request from '@/helpers/request'
 import { setAuth } from '@/helpers/utils'
+import ImgCode from '@/components/col-img-code'
 import { Button, NumberKeyboard, PasswordInput, Toast } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
@@ -17,10 +18,11 @@ export default defineComponent({
   data() {
     return {
       smsCode: '',
-      showKeyboard: true,
+      showKeyboard: false,
       countDownStatus: true,
       countDownTime: 120, // 倒计时时间
-      countTimer: null as any
+      countTimer: null as any,
+      imgCodeStatus: false
     }
   },
   watch: {
@@ -32,7 +34,8 @@ export default defineComponent({
   },
   async mounted() {
     this.$nextTick(async () => {
-      await this.onSendSms()
+      // await this.onSendSms()
+      this.imgCodeStatus = true
     })
   },
   unmounted() {
@@ -69,7 +72,7 @@ export default defineComponent({
     },
     async onLogin() {
       try {
-        let res = await request.post('/api-auth/smsLogin', {
+        const res = await request.post('/api-auth/smsLogin', {
           requestType: 'form',
           data: {
             clientId: 'student',
@@ -130,6 +133,17 @@ export default defineComponent({
             </Button>
           </div>
         </div>
+
+        {this.imgCodeStatus ? (
+          <ImgCode
+            v-model:value={this.imgCodeStatus}
+            phone={this.$props.phone}
+            onClose={() => {
+              this.imgCodeStatus = false
+            }}
+            onSendCode={this.onCountDown}
+          />
+        ) : null}
       </>
     )
   }

src/views/tenantStudentRejest/index.tsx

@@ -17,6 +17,7 @@ import {
   Overlay,
   Dialog
 } from 'vant'
+import ImgCode from '@/components/col-img-code'
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import bg from './images/bg.png'
@@ -32,6 +33,7 @@ import studentSuccess from './images/studentSuccess.png'
 import request from '@/helpers/request'
 import dayjs from 'dayjs'
 import { removeAuth } from '@/helpers/utils'
+import { state } from '@/helpers/helpState'
 export default defineComponent({
   name: 'tenantStudentRejest',
   setup() {
@@ -220,17 +222,18 @@ export default defineComponent({
         Toast('手机号码格式不正确')
         return
       }
-      await request.post('/api-student/code/sendSmsCode', {
-        requestType: 'form',
-        data: {
-          mobile: forms.phone,
-          type: 'REGISTER'
-        }
-      })
-      onCountDown()
-      setTimeout(() => {
-        Toast('验证码已发送')
-      }, 100)
+      // await request.post('/api-student/code/sendSmsCode', {
+      //   requestType: 'form',
+      //   data: {
+      //     mobile: forms.phone,
+      //     type: 'REGISTER'
+      //   }
+      // })
+      // onCountDown()
+      // setTimeout(() => {
+      //   Toast('验证码已发送')
+      // }, 100)
+      data.imgCodeStatus = true
     }
 
     const onCountDown = () => {
@@ -566,6 +569,17 @@ export default defineComponent({
               </div>
             </div>
           </Popup>
+
+          {data.imgCodeStatus ? (
+            <ImgCode
+              v-model:value={data.imgCodeStatus}
+              phone={forms.phone}
+              onClose={() => {
+                data.imgCodeStatus = false
+              }}
+              onSendCode={onCountDown}
+            />
+          ) : null}
         </div>
       </>
     )

src/views/tenantTeacherRejest/index.tsx

@@ -16,6 +16,7 @@ import {
   DatetimePicker,
   Overlay
 } from 'vant'
+import ImgCode from '@/components/col-img-code'
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import bg from './images/teacherBg.png'
@@ -144,17 +145,18 @@ export default defineComponent({
         Toast('手机号码格式不正确')
         return
       }
-      await request.post('/api-student/code/sendSmsCode', {
-        requestType: 'form',
-        data: {
-          mobile: forms.phone,
-          type: 'REGISTER'
-        }
-      })
-      onCountDown()
-      setTimeout(() => {
-        Toast('验证码已发送')
-      }, 100)
+      // await request.post('/api-student/code/sendSmsCode', {
+      //   requestType: 'form',
+      //   data: {
+      //     mobile: forms.phone,
+      //     type: 'REGISTER'
+      //   }
+      // })
+      // onCountDown()
+      // setTimeout(() => {
+      //   Toast('验证码已发送')
+      // }, 100)
+      data.imgCodeStatus = true
     }
     const onCountDown = () => {
       data.sendMsg = '60s'
@@ -352,6 +354,17 @@ export default defineComponent({
             </div>
           </div>
         </Overlay>
+
+        {data.imgCodeStatus ? (
+          <ImgCode
+            v-model:value={data.imgCodeStatus}
+            phone={forms.phone}
+            onClose={() => {
+              data.imgCodeStatus = false
+            }}
+            onSendCode={onCountDown}
+          />
+        ) : null}
       </>
     )
   }