验证码

src/components/layout/modals/update-password.tsx

@@ -5,6 +5,7 @@ import {
   NForm,
   NFormItem,
   NInput,
+  NModal,
   NSelect,
   NSpace,
   useMessage
@@ -16,12 +17,14 @@ import { sendSms } from '/src/views/login/api';
 import { updatePassword } from '@/views/home/api';
 import openEye from '/src/views/login/images/openEye.png';
 import closeEye from '/src/views/login/images/closeEye.png';
+import SendSms from '/src/views/login/components/sendSms';
 export default defineComponent({
   name: 'train-update',
   emits: ['close', 'submit'],
   setup(props, { emit }) {
     const message = useMessage();
     const userStore = useUserStore();
+    const showSmsClass = ref(false);
     const forms = reactive({
       mobile: userStore.getUserInfo.phone || '',
       password: null,
@@ -90,12 +93,13 @@ export default defineComponent({
         return;
       }
       try {
-        await sendSms({
-          clientId: 'cooleshow-teacher',
-          mobile: forms.mobile,
-          type: 'PASSWORD'
-        });
-        checkTimeOut();
+        // await sendSms({
+        //   clientId: 'cooleshow-teacher',
+        //   mobile: forms.mobile,
+        //   type: 'PASSWORD'
+        // });
+        // checkTimeOut();
+        showSmsClass.value = true;
       } catch (e) {
         console.log(e);
       }
@@ -239,6 +243,17 @@ export default defineComponent({
             </NButton>
           </div>
         </NForm>
+
+        <NModal v-model:show={showSmsClass.value}>
+          <SendSms
+            phone={forms.mobile}
+            type="PASSWORD"
+            onClose={() => (showSmsClass.value = false)}
+            onSendCode={() => {
+              checkTimeOut();
+            }}
+          />
+        </NModal>
       </div>
     );
   }

src/views/classList/index.module.less

@@ -12,8 +12,8 @@
 }
 
 .addBtnIcon {
-  width: 16px;
-  height: 17px;
+  width: 13Px !important;
+  height: 14Px !important;
 }
 
 .addBtn {
@@ -24,10 +24,12 @@
   line-height: 41px;
   width: 144px;
   padding: 0 24px;
+  font-size: 13Px !important;
+  font-weight: bold !important;
 
   :global {
     .n-button__content {
-      font-size: 18px;
+      // font-size: 18px;
     }
   }
 }
@@ -760,4 +762,4 @@
 
 .nextWrap {
   padding: 30px 32px 0 !important;
-}
+}

src/views/login/api.ts

@@ -18,3 +18,22 @@ export const updatePassword = (params: any) => {
     data: params
   });
 };
+
+/**
+ * 图片验证码
+ */
+export const sendImgCode = (params: any) => {
+  return request.get('/edu-app/open/sendImgCode', {
+    params,
+    requestType: 'form'
+  });
+};
+/**
+ * 发送验证码
+ */
+export const sendSmsVerify = (params: any) => {
+  return request.post('/edu-app/open/sendSmsVerify', {
+    data: params,
+    requestType: 'form'
+  });
+};

src/views/login/components/codeLogin.tsx

@@ -8,13 +8,17 @@ import {
   NFormItem,
   NInput,
   NButton,
-  NInputGroup
+  NInputGroup,
+  NModal,
+  NSpace
 } from 'naive-ui';
 import { useRoute, useRouter } from 'vue-router';
 import { PageEnum } from '/src/enums/pageEnum';
 import { storage } from '@/utils/storage';
 import { useUserStore } from '/src/store/modules/users';
 import { sendSms } from '../api';
+import SendSms from './sendSms';
+import { formLight } from 'naive-ui/es/form/styles';
 interface FormState {
   username: string;
   password: string;
@@ -33,6 +37,7 @@ export default defineComponent({
     const message = useMessage();
     const loading = ref(false);
     const autoLogin = ref(true);
+    const showSmsClass = ref(false);
     const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
     const userStore = useUserStore();
     const formInline = reactive({
@@ -98,20 +103,21 @@ export default defineComponent({
     };
 
     const sendMessage = async () => {
-      if (!formInline.username) {
-        message.error('请输入手机号');
-        return;
-      }
-      try {
-        const res = await sendSms({
-          clientId: 'cooleshow-teacher',
-          mobile: formInline.username,
-          type: 'LOGIN'
-        });
-        checkTimeOut();
-      } catch (e) {
-        console.log(e);
-      }
+      // if (!formInline.username) {
+      //   message.error('请输入手机号');
+      //   return;
+      // }
+      showSmsClass.value = true;
+      // try {
+      //   const res = await sendSms({
+      //     clientId: 'cooleshow-teacher',
+      //     mobile: formInline.username,
+      //     type: 'LOGIN'
+      //   });
+      //   checkTimeOut();
+      // } catch (e) {
+      //   console.log(e);
+      // }
     };
 
     const checkTimeOut = () => {
@@ -121,7 +127,6 @@ export default defineComponent({
       isDisabledCode.value = true;
       const tiemr = setInterval(() => {
         starTimer.value--;
-        console.log(starTimer.value);
         if (starTimer.value <= 0) {
           isDisabledCode.value = false;
           clearInterval(tiemr);
@@ -212,6 +217,16 @@ export default defineComponent({
             </NButton>
           </NFormItem>
         </NForm>
+
+        <NModal v-model:show={showSmsClass.value}>
+          <SendSms
+            phone={formInline.username}
+            onClose={() => (showSmsClass.value = false)}
+            onSendCode={() => {
+              checkTimeOut();
+            }}
+          />
+        </NModal>
       </div>
     );
   }

src/views/login/components/sendSms.module.less

@@ -0,0 +1,71 @@
+.downMove {
+  width: 443px;
+  // height: 309px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  position: relative;
+  padding: 0 30px 35px;
+
+  .downMoveBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 443px;
+    height: 101px;
+  }
+
+  .closeAble {
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    top: 18px;
+    right: 20px;
+    z-index: 100;
+  }
+
+  h2 {
+    margin-top: 24px;
+    height: 33px;
+    font-size: 24px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #131415;
+    line-height: 33px;
+    text-align: center;
+    margin-bottom: 15px;
+    position: relative;
+    z-index: 99;
+  }
+
+  .smsForm {
+    padding-top: 20px;
+  }
+
+
+  .smsImg {
+    width: 100%;
+    height: 44px;
+    cursor: pointer;
+  }
+
+  .imgChange {
+    cursor: pointer;
+    display: block;
+    text-align: center;
+    font-size: 12Px;
+    color: #198CFE;
+    line-height: 17px;
+  }
+
+  .btnGroup {
+    border-top: 1px solid #F2F2F2;
+    padding-top: 25px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    width: 150px;
+    height: 44px;
+  }
+}

src/views/login/components/sendSms.tsx

@@ -0,0 +1,139 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './sendSms.module.less';
+import smsTop from '../images/sms-top.png';
+import closeAble from '../images/closeAble.png';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NGi,
+  NGrid,
+  NImage,
+  NInput,
+  NSpace
+} from 'naive-ui';
+import { sendImgCode, sendSmsVerify } from '../api';
+
+export default defineComponent({
+  name: 'sendSms',
+  props: {
+    phone: {
+      type: String,
+      default: ''
+    },
+    clientId: {
+      type: String,
+      default: 'cooleshow-teacher'
+    },
+    type: {
+      type: String,
+      default: 'LOGIN'
+    }
+  },
+  emits: ['close', 'sendCode'],
+  setup(props, { emit }) {
+    const state = reactive({
+      identifyingCode: null as any,
+      code: null as any
+    });
+    const formRef = ref();
+
+    const getSendImgCode = async () => {
+      const { data } = await sendImgCode({ phone: props.phone });
+      state.identifyingCode = data;
+    };
+
+    const onSubmit = async () => {
+      formRef.value.validate(async (errors: any) => {
+        if (errors) return;
+
+        try {
+          await sendSmsVerify({
+            code: state.code,
+            clientId: props.clientId,
+            type: props.type,
+            mobile: props.phone
+          });
+
+          emit('close');
+          emit('sendCode');
+        } catch {
+          state.code = '';
+          setTimeout(() => {
+            getSendImgCode();
+          }, 500);
+        }
+      });
+    };
+
+    onMounted(() => {
+      getSendImgCode();
+    });
+    return () => (
+      <div class={styles.downMove}>
+        <img src={smsTop} class={styles.downMoveBg} alt="" />
+        <img
+          src={closeAble}
+          class={styles.closeAble}
+          onClick={() => {
+            emit('close');
+          }}
+          alt=""
+        />
+        <h2>请输入图形验证码</h2>
+
+        <NForm class={styles.smsForm} ref={formRef} model={state}>
+          <NGrid xGap={12}>
+            <NGi span={15}>
+              <NFormItem
+                showLabel={false}
+                path="code"
+                rule={[
+                  {
+                    required: true,
+                    message: '请输入图形验证码',
+                    trigger: ['blur', 'input']
+                  }
+                ]}>
+                <NInput placeholder="图形验证码" v-model:value={state.code} />
+              </NFormItem>
+            </NGi>
+            <NGi span={9}>
+              <div onClick={getSendImgCode}>
+                <NImage
+                  class={styles.smsImg}
+                  lazy
+                  previewDisabled
+                  src={state.identifyingCode}
+                />
+              </div>
+
+              <span class={styles.imgChange} onClick={getSendImgCode}>
+                看不清？换一换
+              </span>
+            </NGi>
+          </NGrid>
+        </NForm>
+
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton
+            class={[styles.btn, styles.cancelBtn]}
+            round
+            type="default"
+            onClick={() => {
+              emit('close');
+            }}>
+            取消
+          </NButton>
+          <NButton
+            class={[styles.btn, styles.submitBtn]}
+            onClick={onSubmit}
+            round
+            type="primary">
+            确定
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/setting/components/personInfo.tsx

@@ -215,29 +215,31 @@ export default defineComponent({
                     message: '请选择城区',
                     trigger: 'change'
                   }}>
-                  {!data.loading && <NCascader
-                    bordered={!data.disabled}
-                    options={formOptions.areaList}
-                    labelField="name"
-                    valueField="code"
-                    childrenField="areas"
-                    checkStrategy="child"
-                    expandTrigger="hover"
-                    defaultValue={
-                      userStore.info.regionCode ||
-                      userStore.info.cityCode ||
-                      userStore.info.provinceCode
-                    }
-                    onUpdate:value={(
-                      val: any,
-                      option: any,
-                      pathValues: any
-                    ) => {
-                      teacherForm.provinceCode = pathValues[0]?.code;
-                      teacherForm.cityCode = pathValues[1]?.code;
-                      teacherForm.regionCode = pathValues[2]?.code;
-                    }}
-                  />}
+                  {!data.loading && (
+                    <NCascader
+                      bordered={!data.disabled}
+                      options={formOptions.areaList}
+                      labelField="name"
+                      valueField="code"
+                      childrenField="areas"
+                      checkStrategy="child"
+                      expandTrigger="hover"
+                      defaultValue={
+                        userStore.info.regionCode ||
+                        userStore.info.cityCode ||
+                        userStore.info.provinceCode
+                      }
+                      onUpdate:value={(
+                        val: any,
+                        option: any,
+                        pathValues: any
+                      ) => {
+                        teacherForm.provinceCode = pathValues[0]?.code;
+                        teacherForm.cityCode = pathValues[1]?.code;
+                        teacherForm.regionCode = pathValues[2]?.code;
+                      }}
+                    />
+                  )}
                 </NFormItem>
               </NGi>
             </NGrid>

src/views/setting/modal/forgotPassword.tsx

@@ -9,14 +9,16 @@ import {
   NInput,
   NButton,
   NInputGroup,
-  NSpace
+  NSpace,
+  NModal
 } from 'naive-ui';
 import { useRoute, useRouter } from 'vue-router';
 import { PageEnum } from '/src/enums/pageEnum';
 import { storage } from '@/utils/storage';
 import { useUserStore } from '/src/store/modules/users';
-import { sendSms  } from '../../login/api';
-import { updatePassword } from '@/views/home/api'
+import { sendSms } from '../../login/api';
+import { updatePassword } from '@/views/home/api';
+import SendSms from '../../login/components/sendSms';
 interface FormState {
   mobile: string;
   password: string;
@@ -40,11 +42,12 @@ export default defineComponent({
     const message = useMessage();
     const loading = ref(false);
     const showPwd = ref(false);
+    const showSmsClass = ref(false);
     const userStore = useUserStore();
     const formInline = reactive({
       mobile: props.phone,
       password: '',
-      code: '',
+      code: ''
       // isCaptcha: true
     });
     const isDisabledCode = ref(false);
@@ -59,7 +62,7 @@ export default defineComponent({
           try {
             await updatePassword({
               ...formInline,
-              mobile:null,
+              mobile: null,
               clientType: 'TEACHER'
             });
             message.success('修改成功');
@@ -85,12 +88,13 @@ export default defineComponent({
           if (errors) {
             return;
           }
-          checkTimeOut();
-          sendSms({
-            clientId: 'cooleshow-teacher',
-            mobile: formInline.mobile,
-            type: 'PASSWORD'
-          });
+          // checkTimeOut();
+          // sendSms({
+          //   clientId: 'cooleshow-teacher',
+          //   mobile: formInline.mobile,
+          //   type: 'PASSWORD'
+          // });
+          showSmsClass.value = true;
         },
         (rule: any) => {
           return rule.key === 'a';
@@ -226,6 +230,17 @@ export default defineComponent({
             确认修改
           </NButton>
         </NSpace>
+
+        <NModal v-model:show={showSmsClass.value}>
+          <SendSms
+            phone={formInline.mobile}
+            type="PASSWORD"
+            onClose={() => (showSmsClass.value = false)}
+            onSendCode={() => {
+              checkTimeOut();
+            }}
+          />
+        </NModal>
       </>
     );
   }

src/views/studentList/index.module.less

@@ -14,22 +14,24 @@
 }
 
 .addBtnIcon {
-  width: 16px;
-  height: 17px;
+  width: 13Px !important;
+  height: 14Px !important;
 }
 
 .addBtn {
+
   height: 43px;
   background: #198cfe;
   border-radius: 8px;
   line-height: 41px;
   width: 144px;
   padding: 0 24px;
+  font-size: 13Px !important;
+  font-weight: bold !important;
 
   :global {
     .n-button__content {
-      font-size: 18px;
-      font-weight: 600;
+      // font-size: 18px;
     }
   }
 }
@@ -585,4 +587,4 @@
       }
     }
   }
-}
+}