修改密码

src/components/layout/index.tsx

@@ -29,6 +29,7 @@ export default defineComponent({
     const previewItem = ref({});
     const directionType = ref('left');
     const showClass = ref(false);
+
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
@@ -420,6 +421,7 @@ export default defineComponent({
             }}
           />
         </NModal>
+
         {/* 弹窗查看 */}
         <PreviewWindow
           v-model:show={previewModal.value}

src/components/layout/modals/update-password.module.less

@@ -0,0 +1,42 @@
+.updatePassword {
+  padding: 20px;
+
+  .tips {
+    padding-bottom: 12px;
+  }
+
+
+  .phone {}
+
+  .updateBtnGroup {
+    padding: 0;
+    justify-content: center !important;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
+    }
+  }
+
+  .sendInput {
+    :global {
+      .n-input-wrapper {
+        padding-right: 0;
+      }
+    }
+
+    .sendMsg {
+      width: 128px;
+      // height: 64px;
+      background: #198cfe;
+      border-radius: 0px 8px 8px 0px;
+      font-size: 20px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 62px;
+    }
+  }
+}

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

@@ -0,0 +1,176 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './update-password.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NInput,
+  NSelect,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '/src/store/modules/users';
+import { gradeToCN } from '/src/utils/contants';
+import { sendSms, updatePassword } from '/src/views/login/api';
+export default defineComponent({
+  name: 'train-update',
+  emits: ['close', 'submit'],
+  setup(props, { emit }) {
+    const message = useMessage();
+    const userStore = useUserStore();
+    const forms = reactive({
+      mobile: userStore.getUserInfo.phone || '',
+      password: null,
+      rePassword: null,
+      clientType: 'TEACHER',
+      code: null
+    });
+
+    const gotoClassPage = () => {
+      formsRef.value.validate(async (error: any) => {
+        if (error) return;
+
+        if (forms.password !== forms.rePassword) {
+          message.error('两次密码不一致');
+          return;
+        }
+
+        await updatePassword({
+          mobile: forms.mobile,
+          password: forms.password,
+          clientType: 'TEACHER',
+          code: forms.code
+        });
+
+        message.success('更新成功');
+        emit('submit');
+      });
+    };
+
+    const formsRef = ref();
+
+    const isDisabledCode = ref(false);
+    const starTimer = ref(60);
+    const codeName = '发送短信';
+    const sendMessage = async () => {
+      if (!forms.mobile) {
+        message.error('请输入手机号');
+        return;
+      }
+      try {
+        await sendSms({
+          clientId: 'cooleshow-teacher',
+          mobile: forms.mobile,
+          type: 'LOGIN'
+        });
+        checkTimeOut();
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    const checkTimeOut = () => {
+      if (isDisabledCode.value) {
+        return;
+      }
+      isDisabledCode.value = true;
+      const tiemr = setInterval(() => {
+        starTimer.value--;
+        console.log(starTimer.value);
+        if (starTimer.value <= 0) {
+          isDisabledCode.value = false;
+          clearInterval(tiemr);
+        }
+      }, 1000);
+    };
+
+    onMounted(async () => {
+      //
+    });
+    return () => (
+      <div class={styles.updatePassword}>
+        <p class={styles.tips}>
+          检测到您尚未修改默认密码，为了您的账户安全，请重新设置登录密码
+        </p>
+        <NForm
+          labelAlign="right"
+          labelPlacement="left"
+          labelWidth={'auto'}
+          ref={formsRef}
+          model={forms}>
+          <NFormItem path="currentClass" label="手机号">
+            <p class={styles.phone}>{forms.mobile}</p>
+          </NFormItem>
+          <NFormItem
+            path="password"
+            label="新密码"
+            rule={[
+              {
+                required: true,
+                message: '请输入新密码'
+              }
+            ]}>
+            <NInput
+              v-model:value={forms.password}
+              clearable
+              placeholder={'请输入新密码'}
+            />
+          </NFormItem>
+          <NFormItem
+            path="rePassword"
+            label="再次输入"
+            rule={[
+              {
+                required: true,
+                message: '再次输入新密码'
+              }
+            ]}>
+            <NInput
+              v-model:value={forms.rePassword}
+              clearable
+              placeholder={'再次输入新密码'}
+            />
+          </NFormItem>
+          <NFormItem
+            path="code"
+            label="验证码"
+            rule={[
+              {
+                required: true,
+                message: '请输入验证码',
+                trigger: 'change'
+              }
+            ]}>
+            <NInput
+              v-model:value={forms.code}
+              placeholder={'请输入验证码'}
+              clearable
+              class={styles.sendInput}
+              maxlength={6}>
+              {{
+                suffix: () => (
+                  <NButton
+                    class={styles.sendMsg}
+                    disabled={isDisabledCode.value}
+                    onClick={() => sendMessage()}>
+                    {isDisabledCode.value ? starTimer.value + 'S' : codeName}
+                  </NButton>
+                )
+              }}
+            </NInput>
+          </NFormItem>
+          <NSpace class={styles.updateBtnGroup}>
+            <NButton
+              strong
+              type="primary"
+              round
+              onClick={() => gotoClassPage()}>
+              确认
+            </NButton>
+          </NSpace>
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/home/api.ts

@@ -17,3 +17,12 @@ export const classGroupList = (params: any) => {
     data: params
   });
 };
+
+/**
+ * 首页 - 修改密码
+ */
+export const updatePassword = (params: any) => {
+  return request.post('/edu-app/open/user/updatePassword', {
+    data: params
+  });
+};

src/views/home/index.module.less

@@ -867,4 +867,8 @@
     }
   }
 
+}
+
+.showUpdatePassword {
+  width: 514px;
 }

src/views/home/index.tsx

@@ -60,6 +60,7 @@ import { px2vw } from '/src/utils';
 import PlaceholderTone from '@/components/layout/modals/placeholderTone';
 import { state } from '/src/state';
 import PreviewWindow from '../preview-window';
+import UpdatePassword from '/src/components/layout/modals/update-password';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
   if (hours < 12) {
@@ -78,6 +79,7 @@ export default defineComponent({
     const message = useMessage();
     const router = useRouter();
     const userStore = useUserStore();
+    const showUpdatePassword = ref(false);
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
@@ -314,7 +316,12 @@ export default defineComponent({
         };
       });
       getVersion();
-      forms.showGuide = true;
+
+      if (!userStore.getUserInfo.account.updatePasswordFlag) {
+        showUpdatePassword.value = true;
+      } else {
+        forms.showGuide = true;
+      }
     });
 
     const formsRef = ref();
@@ -791,6 +798,23 @@ export default defineComponent({
         />
 
         {forms.showGuide ? <HomeGuide></HomeGuide> : null}
+
+        <NModal
+          v-model:show={showUpdatePassword.value}
+          class={['modalTitle', styles.showUpdatePassword]}
+          preset="card"
+          title={'修改密码'}
+          closable={false}
+          maskClosable={false}
+          closeOnEsc={false}>
+          <UpdatePassword
+            onSubmit={() => {
+              // 密码更新成功
+              showUpdatePassword.value = true;
+              forms.showGuide = true;
+            }}
+          />
+        </NModal>
       </div>
     );
   }

src/views/login/components/codeLogin.tsx

@@ -43,9 +43,9 @@ export default defineComponent({
     const isDisabledCode = ref(false);
     const starTimer = ref(60);
     const codeName = '发送短信';
-    const formInlineHistory = storage.get("userInfo-teacher");
+    const formInlineHistory = storage.get('userInfo-teacher');
     if (formInlineHistory) {
-      formInline.username =JSON.parse(formInlineHistory).username;
+      formInline.username = JSON.parse(formInlineHistory).username;
     }
     const handleSubmit = async () => {
       formRef.value.validate(async (errors: any) => {
@@ -53,7 +53,7 @@ export default defineComponent({
           const { username, password } = formInline;
           message.loading('登录中...');
           loading.value = true;
-          storage.set('userInfo-teacher', JSON.stringify({username}));
+          storage.set('userInfo-teacher', JSON.stringify({ username }));
           const params: FormState = {
             username,
             password,
@@ -168,6 +168,7 @@ export default defineComponent({
                 placeholder="请输入验证码"
                 inputProps={{ autocomplete: 'off' }}
                 class={styles.sendInput}
+                maxlength={6}
                 onKeydown={(e: KeyboardEvent) => {
                   if (e.code === 'Enter' || e.code === 'NumpadEnter') {
                     handleSubmit();
@@ -182,7 +183,7 @@ export default defineComponent({
                       class={styles.sendMsg}
                       disabled={isDisabledCode.value}
                       onClick={() => sendMessage()}>
-                      {isDisabledCode.value ? starTimer.value+'S' : codeName}
+                      {isDisabledCode.value ? starTimer.value + 'S' : codeName}
                     </NButton>
                   )
                 }}