Update new-index.tsx

src/views/activation-code/instrument-registration/new-index.tsx

@@ -15,7 +15,9 @@ import {
   computed,
   defineComponent,
   nextTick,
+  onBeforeMount,
   onMounted,
+  onUnmounted,
   reactive,
   ref
 } from 'vue';
@@ -123,8 +125,7 @@ export default defineComponent({
       nickname: '',
       currentGradeNum: '' as any,
       currentClass: '' as any,
-      gender: 1 as any,
-      registerType: null as any // 报名类型
+      gender: 1 as any
     });
 
     const btnText = computed(() => {
@@ -176,25 +177,10 @@ export default defineComponent({
 
     const phoneChangeEmptyInfo = () => {
       studentInfo.password = '';
-      studentInfo.nickname = '';
-      studentInfo.gender = 1;
-      forms.areaName = '';
-      forms.schoolName = '';
-      forms.schoolAreaId = null;
-      forms.gradeNumText = '';
-      studentInfo.currentGradeNum = null;
-      forms.currentClassText = '';
-      studentInfo.currentClass = null;
     };
 
     const checkForm = (status = true) => {
-      if (!checkPhone(studentInfo.phone)) {
-        status && showToast('请输入正确的手机号码');
-        return true;
-      } else if (!studentInfo.password) {
-        status && showToast('请输入验证码');
-        return true;
-      } else if (!studentInfo.nickname) {
+      if (!studentInfo.nickname) {
         status && showToast('请输入学生姓名');
         return true;
       } else if (![0, 1].includes(studentInfo.gender)) {
@@ -206,6 +192,12 @@ export default defineComponent({
       } else if (!studentInfo.currentClass) {
         status && showToast('请选择所在班级');
         return true;
+      } else if (!checkPhone(studentInfo.phone)) {
+        status && showToast('请输入正确的手机号码');
+        return true;
+      } else if (!studentInfo.password) {
+        status && showToast('请输入验证码');
+        return true;
       }
       return false;
     };
@@ -217,20 +209,17 @@ export default defineComponent({
           forms.submitLoading = false;
           return;
         }
-        const { data } = await request.post(
-          '/edu-app/open/instrumentRegister/save',
-          {
-            data: {
-              phone: studentInfo.phone,
-              name: studentInfo.nickname,
-              gender: studentInfo.gender,
-              schoolAreaId: forms.schoolAreaId,
-              currentGradeNum: studentInfo.currentGradeNum,
-              currentClass: studentInfo.currentClass,
-              code: studentInfo.password
-            }
+        await request.post('/edu-app/open/instrumentRegister/save', {
+          data: {
+            phone: studentInfo.phone,
+            name: studentInfo.nickname,
+            gender: studentInfo.gender,
+            schoolAreaId: forms.schoolAreaId,
+            currentGradeNum: studentInfo.currentGradeNum,
+            currentClass: studentInfo.currentClass,
+            code: studentInfo.password
           }
-        );
+        });
 
         forms.statusShow = true;
       } catch {}
@@ -293,7 +282,44 @@ export default defineComponent({
       forms.gradeList = getGradeList();
       forms.classList = classList;
       getAreaList();
+
+      // let localForm: any = localStorage.getItem('activationRegistration-form');
+      // if (localForm) {
+      //   localForm = JSON.parse(localForm);
+
+      //   studentInfo.phone = localForm.phone;
+      //   studentInfo.nickname = localForm.nickname;
+      //   studentInfo.gender = localForm.gender;
+      //   forms.schoolAreaId = localForm.school;
+      //   forms.gradeNumText = localForm.gradeNumText;
+      //   forms.provinceCode = localForm.provinceCode;
+      // }
+
+      // // 页面离开之前保存数据
+      // window.addEventListener('beforeunload', function (event) {
+      //   // 缓存数据到 localStorage
+      //   localStorage.setItem(
+      //     'activationRegistration-form',
+      //     JSON.stringify({
+      //       phone: studentInfo.phone,
+      //       name: studentInfo.nickname,
+      //       gender: studentInfo.gender,
+      //       schoolAreaId: forms.schoolAreaId,
+      //       gradeNumText: forms.gradeNumText,
+      //       schoolName: forms.schoolName,
+      //       areaName: forms.areaName,
+      //       provinceCode: forms.provinceCode,
+      //       cityCode: forms.cityCode,
+      //       regionCode: forms.regionCode,
+      //       currentClassText: forms.currentClassText,
+      //       currentGradeNum: studentInfo.currentGradeNum,
+      //       currentClass: studentInfo.currentClass,
+      //       code: studentInfo.password
+      //     })
+      //   );
+      // });
     });
+
     return () => (
       <div class={[styles['student-register']]}>
         <img src={bannerBg} class={styles.bannerBg} />
@@ -302,59 +328,6 @@ export default defineComponent({
             <Form labelAlign="left" class={styles.registerForm}>
               <Field
                 clearable={false}
-                label="联系方式"
-                placeholder="请输入手机号码"
-                type="digit"
-                required
-                autocomplete="off"
-                inputAlign="right"
-                v-model={studentInfo.phone}
-                maxlength={11}
-                onUpdate:modelValue={() => {
-                  forms.registerFlag = false;
-
-                  phoneChangeEmptyInfo();
-                }}></Field>
-
-              <Field
-                center
-                clearable={false}
-                required
-                inputAlign="right"
-                label="验证码"
-                placeholder="请输入验证码"
-                autocomplete="off"
-                type="number"
-                v-model={studentInfo.password}
-                maxlength={6}
-                onUpdate:modelValue={(val: any) => {
-                  getUserInfos();
-                }}>
-                {{
-                  button: () =>
-                    forms.countDownStatus ? (
-                      <span
-                        class={[
-                          styles.codeText,
-                          !validatePhone.value ? styles.codeTextDisabled : ''
-                        ]}
-                        onClick={onSendCode}>
-                        获取验证码
-                      </span>
-                    ) : (
-                      <CountDown
-                        ref={(el: any) => (countDownRef.value = el)}
-                        auto-start={false}
-                        class={styles.countDown}
-                        time={forms.countDownTime}
-                        onFinish={onFinished}
-                        format="ss秒后重试"
-                      />
-                    )
-                }}
-              </Field>
-              <Field
-                clearable={false}
                 required
                 inputAlign="right"
                 label="学生姓名"
@@ -473,6 +446,60 @@ export default defineComponent({
                   forms.classStatus = true;
                 }}
               />
+
+              <Field
+                clearable={false}
+                label="联系方式"
+                placeholder="请输入手机号码"
+                type="digit"
+                required
+                autocomplete="off"
+                inputAlign="right"
+                v-model={studentInfo.phone}
+                maxlength={11}
+                onUpdate:modelValue={() => {
+                  forms.registerFlag = false;
+
+                  phoneChangeEmptyInfo();
+                }}></Field>
+
+              <Field
+                center
+                clearable={false}
+                required
+                inputAlign="right"
+                label="验证码"
+                placeholder="请输入验证码"
+                autocomplete="off"
+                type="number"
+                v-model={studentInfo.password}
+                maxlength={6}
+                onUpdate:modelValue={(val: any) => {
+                  getUserInfos();
+                }}>
+                {{
+                  button: () =>
+                    forms.countDownStatus ? (
+                      <span
+                        class={[
+                          styles.codeText,
+                          !validatePhone.value ? styles.codeTextDisabled : ''
+                        ]}
+                        onClick={onSendCode}>
+                        获取验证码
+                      </span>
+                    ) : (
+                      <CountDown
+                        ref={(el: any) => (countDownRef.value = el)}
+                        auto-start={false}
+                        class={styles.countDown}
+                        time={forms.countDownTime}
+                        onFinish={onFinished}
+                        format="ss秒后重试"
+                      />
+                    )
+                }}
+              </Field>
             </Form>
           </div>
 
@@ -648,7 +675,7 @@ export default defineComponent({
           <MImgCode
             v-model:value={forms.imgCodeStatus}
             phone={studentInfo.phone}
-            type="REGISTER"
+            type="INSTRUMENT"
             onClose={() => {
               forms.imgCodeStatus = false;
             }}
@@ -666,7 +693,7 @@ export default defineComponent({
             <img class={styles.title} src={loginSuccess} />
 
             <div class={styles.content} style={{ textAlign: 'center' }}>
-              乐器发放以最终数据核定为准
+              乐器的实际发放将以基金会最终的审核结果为准。
             </div>
             <div class={styles.pBtnGroup}>
               <Button