فهرست منبع

Merge branch 'iteration-20240403-apply' into jenkins-test

lex 1 سال پیش
والد
کامیت
52e36566f7

+ 1 - 1
src/components/m-sticky/index.tsx

@@ -70,7 +70,7 @@ export default defineComponent({
       // resize.observe(divRef.value);
 
       try {
-        useResizeObserver(div2Ref.value, (entries: any) => {
+        useResizeObserver(divRef.value, (entries: any) => {
           const entry = entries[0];
           const { height } = entry.contentRect;
           if (Math.abs(height - forms.heightV) > 1) {

+ 1 - 1
src/router/router-root.ts

@@ -21,7 +21,7 @@ export default [
     name: 'register-member',
     component: () => import('@/views/student-register/register-member'),
     meta: {
-      title: '音乐数字课堂学生报名'
+      title: '音乐数字课堂学生注册'
     }
   },
   {

BIN
src/views/student-register/images/new/banner-bg2.png


BIN
src/views/student-register/images/new/title-7.png


+ 6 - 4
src/views/student-register/index.module.less

@@ -87,7 +87,7 @@
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
-  padding: 12px 14px calc(15px + env(safe-area-inset-bottom)) 12px;
+  padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) 12px;
   background: #FFFFFF;
   box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
   border-radius: 18px 18px 0px 0px;
@@ -277,7 +277,7 @@
 
 .registerForm {
   // background: #FFFFFF;
-  border-radius: 16px;
+  // border-radius: 16px;
   border-radius: 18px;
   // margin: 0 12px;
   overflow: hidden;
@@ -409,15 +409,16 @@
   }
 
   .memberNumer {
+
     margin: 14px 12px 0;
     background: #E8F8FF;
     border-radius: 8px;
     padding: 8px 0 8px 10px;
     display: flex;
     align-items: center;
-    font-weight: 600;
+    // font-weight: 600;
     font-size: 13px;
-    color: #2B85FF;
+    color: #131415;
     line-height: 18px;
 
     .iconGift {
@@ -430,6 +431,7 @@
       font-size: 15px;
       color: #F62C2C;
       padding: 0 5px;
+      font-weight: 600;
     }
   }
 }

+ 74 - 43
src/views/student-register/index.tsx

@@ -178,7 +178,9 @@ export default defineComponent({
       instrumentCode: null as any, // 乐器编码
       activeOverTime: 0, // 活动结束时间
       activeOverStatus: true, // 活动是否结束 默认已结束
+      gradePopupShow: false,
       gradePopupIndex: [] as any, // 年级下拉索引
+      classPopupShow: false,
       classPopupIndex: [] as any // 班级下拉索引
     });
 
@@ -709,7 +711,7 @@ export default defineComponent({
           changeTipStatus(true, false);
         } else {
           forms.isRegister = 'create';
-          changeTipStatus(true, false);
+          changeTipStatus(false, false);
           forms.studentItem = [];
         }
       } catch {
@@ -1221,7 +1223,11 @@ export default defineComponent({
           )}
 
           <div
-            class={[styles.studentSection, styles.studentSectionForm]}
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              styles.noSendDay
+            ]}
             // style={{ display: 'none' }}
           >
             <div class={styles.title3}></div>
@@ -1666,52 +1672,72 @@ export default defineComponent({
           round
           safeAreaInsetBottom
           lazyRender={false}
-          class={'popupBottomSearch'}>
-          <Picker
-            showToolbar
-            v-model={forms.gradePopupIndex}
-            columns={forms.gradeList}
-            onCancel={() => (forms.gradeStatus = false)}
-            onConfirm={(val: any) => {
-              const selectedOption = val.selectedOptions[0];
-              studentInfo.extra.currentGradeNum = selectedOption.value;
-              forms.gradeNumText = selectedOption.text;
-              forms.gradeStatus = false;
-              if (['SCHOOL', 'GRADE'].includes(forms.schoolInstrumentSetType)) {
-                forms.instrumentCode = selectedOption.instrumentCode;
-              }
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.gradePopupShow = true;
+          }}
+          onClosed={() => {
+            forms.gradePopupShow = false;
+          }}>
+          {forms.gradePopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.gradePopupIndex}
+              columns={forms.gradeList}
+              onCancel={() => (forms.gradeStatus = false)}
+              onConfirm={(val: any) => {
+                const selectedOption = val.selectedOptions[0];
+                studentInfo.extra.currentGradeNum = selectedOption.value;
+                forms.gradeNumText = selectedOption.text;
+                forms.gradeStatus = false;
+                if (
+                  ['SCHOOL', 'GRADE'].includes(forms.schoolInstrumentSetType)
+                ) {
+                  forms.instrumentCode = selectedOption.instrumentCode;
+                }
 
-              if (forms.schoolInstrumentSetType === 'CLASS') {
-                forms.classList = selectedOption.classList;
-              }
-              if (['CLASS', 'GRADE'].includes(forms.schoolInstrumentSetType)) {
-                forms.currentClassText = '';
-                studentInfo.extra.currentClass = '';
-              }
-            }}
-          />
+                if (forms.schoolInstrumentSetType === 'CLASS') {
+                  forms.classList = selectedOption.classList;
+                }
+                if (
+                  ['CLASS', 'GRADE'].includes(forms.schoolInstrumentSetType)
+                ) {
+                  forms.currentClassText = '';
+                  studentInfo.extra.currentClass = '';
+                }
+              }}
+            />
+          )}
         </Popup>
         {/* 班级 */}
         <Popup
           v-model:show={forms.classStatus}
           position="bottom"
           round
-          class={'popupBottomSearch'}>
-          <Picker
-            showToolbar
-            v-model={forms.classPopupIndex}
-            columns={forms.classList}
-            onCancel={() => (forms.classStatus = false)}
-            onConfirm={(val: any) => {
-              const selectedOption = val.selectedOptions[0];
-              studentInfo.extra.currentClass = selectedOption.value;
-              forms.currentClassText = selectedOption.text;
-              forms.classStatus = false;
-              if (['CLASS'].includes(forms.schoolInstrumentSetType)) {
-                forms.instrumentCode = selectedOption.instrumentCode;
-              }
-            }}
-          />
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.classPopupShow = true;
+          }}
+          onClosed={() => {
+            forms.classPopupShow = false;
+          }}>
+          {forms.classPopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.classPopupIndex}
+              columns={forms.classList}
+              onCancel={() => (forms.classStatus = false)}
+              onConfirm={(val: any) => {
+                const selectedOption = val.selectedOptions[0];
+                studentInfo.extra.currentClass = selectedOption.value;
+                forms.currentClassText = selectedOption.text;
+                forms.classStatus = false;
+                if (['CLASS'].includes(forms.schoolInstrumentSetType)) {
+                  forms.instrumentCode = selectedOption.instrumentCode;
+                }
+              }}
+            />
+          )}
         </Popup>
 
         {/* 已经购买过样品 */}
@@ -1856,7 +1882,12 @@ export default defineComponent({
               onSubmit();
             } else if (otherParams.otherType === 'limit') {
               // 人数超限制
-              changeTipStatus(true, false);
+              changeTipStatus(
+                forms.isRegister === 'create' && !forms.studentItem.userId
+                  ? false
+                  : true,
+                false
+              );
             }
           }}
         />
@@ -1899,7 +1930,7 @@ export default defineComponent({
                 changeTipStatus(true, false);
               } else {
                 forms.isRegister = 'create';
-                changeTipStatus(true, false);
+                changeTipStatus(false, false);
                 studentInfo.extra.nickname = '';
                 studentInfo.extra.currentGradeNum = '';
                 studentInfo.extra.currentClass = '';

+ 11 - 1
src/views/student-register/modal/select-student/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 import styles from './index.module.less';
 import { Button, Cell, Icon, Image, Radio, RadioGroup } from 'vant';
 import checkBoxActive from '../../images/new/icon-n-1.png';
@@ -20,6 +20,16 @@ export default defineComponent({
   setup(props, { emit }) {
     const radioChecked = ref();
 
+    // 变化时
+    watch(
+      () => props.studentItem,
+      () => {
+        if (props.studentItem && props.studentItem.userId) {
+          radioChecked.value = props.studentItem.userId;
+        }
+      }
+    );
+
     onMounted(() => {
       if (props.studentItem && props.studentItem.userId) {
         radioChecked.value = props.studentItem.userId;

+ 309 - 46
src/views/student-register/register-member/index.module.less

@@ -1,98 +1,257 @@
 .registerModal {
-  background: #FFF4E2;
-  overflow: hidden;
   min-height: 100vh;
-}
+  // background: #FFF4E2;
+  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
+  overflow: hidden;
+  position: relative;
 
-.memberNumer {
-  margin: 12px 12px 0;
-  background: linear-gradient(90deg, #FF8633 0%, #FFB047 100%);
-  border-radius: 10px;
-  padding: 12px 0 12px 16px;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  color: #fff;
-  font-weight: bold;
+  --k-font-primary: #007AFE;
 
-  .iconGift {
-    width: 20px;
-    height: 20px;
-    margin-right: 6px;
+  .studentRegisterContainer {
+    padding-top: 137px;
+    background: url('../images/new/banner-bg2.png') no-repeat top center;
+    background-size: contain;
   }
 }
 
-.infoTitle {
-  width: 315px;
-  height: 31px;
-  display: block;
-  margin: 14px auto 10px;
+
+.studentSection {
+  margin: 0 14px 12px;
+  padding: 12px 15px;
+  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  border-radius: 16px;
+  border: 2px solid #FFFFFF;
+
+  &.studentSectionForm {
+    padding: 12px 0;
+    background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 20%);
+  }
+
+  &.noSendDay {
+    padding-bottom: 0;
+  }
+
+  .title1,
+  .title3 {
+    width: 212px;
+    height: 22px;
+    background: url('../images/new/title-7.png') no-repeat center;
+    background-size: contain;
+    margin: 0 auto;
+  }
+
+  // .title2 {
+  //   width: 248px;
+  //   height: 22px;
+  //   background: url('../images/new/title-4.png') no-repeat center;
+  //   background-size: contain;
+  //   margin: 0 auto;
+  // }
+
+  .title3 {
+    background: url('../images/new/title-6.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .goodsGroup {
+    display: flex;
+    align-items: center;
+    margin-top: 29px;
+  }
+
 }
 
 .registerForm {
-  background: #FFFFFF;
-  box-shadow: 0px 1px 6px 0px #F0D8C8;
+  // background: #FFFFFF;
+  // border-radius: 16px;
   border-radius: 18px;
-  margin: 12px 12px 0;
+  // margin: 0 12px;
   overflow: hidden;
 
+  .selectStudentGroup {
+    background: #EDF6FD;
+    border-radius: 8px;
+    margin: 20px 14px 0;
+    padding: 8px 0;
+    font-weight: 600;
+    font-size: 16px;
+    color: #1189FF;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .studentIcon {
+      display: inline-block;
+      margin-right: 6px;
+      width: 20px;
+      height: 20px;
+      background: url('../images/new/icon-n-5.png') no-repeat center;
+      background-size: contain;
+
+      &.selectStudentGroupChecked {
+        span::after {
+          transform: rotate(180deg);
+        }
+      }
+
+      &.studentIconAdd {
+        background: url('../images/new/icon-n-4.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        display: inline-block;
+        content: '';
+        width: 9px;
+        height: 5px;
+        margin-left: 5px;
+        background: url('../images/new/icon-n-6.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  :global {
+    .van-cell {
+      background-color: transparent;
+    }
+  }
+
+  .fieldTipsGroup {
+    margin: 0 14px 0;
+    padding-bottom: 9px;
+  }
+
+  .fieldTips {
+    font-size: 13px;
+    color: #EC763B;
+    line-height: 18px;
+    background: #FFF8EB;
+    border-radius: 4px;
+    padding: 4px 10px;
+  }
+
   .tips {
     display: inline-block;
-    padding-left: 5px;
-    padding-top: 4px;
+    // padding-left: 5px;
+    // padding-top: 2px;
     font-size: 12px;
     font-weight: 400;
     color: #777;
     line-height: 17px;
   }
 
+  .username {
+    padding-bottom: 8px !important;
+
+    :global {
+      .van-field__label {
+        display: flex;
+        align-items: center;
+        width: 170px;
+      }
+    }
+  }
+
+  .countDown {
+    min-width: 80px;
+    text-align: center;
+    font-size: 14px;
+    color: #A0D0FF;
+  }
+
   :global {
     .van-cell {
-      padding: 14px 14px;
-
+      padding: 18px 14px;
     }
 
+
     .van-field__label {
       font-size: 16px;
-      font-weight: 600;
-      color: #5B2C03;
+      color: #666666;
       line-height: 22px;
-      margin-bottom: 8px;
     }
 
     .van-field__control {
       font-size: 16px;
+      color: #131415;
     }
   }
 
   .codeText {
-    color: #FFCF7C;
+    color: #1189FF;
     font-size: 14px;
+
+    // &.codeTextDisabled {
+    //   color: #ccc;
+    // }
+  }
+
+  .memberNumer {
+    margin: 14px 12px 0;
+    background: #E8F8FF;
+    border-radius: 8px;
+    padding: 8px 0 8px 10px;
+    display: flex;
+    align-items: center;
     font-weight: 600;
+    font-size: 13px;
+    color: #2B85FF;
+    line-height: 18px;
+
+    .iconGift {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
 
-    &.codeTextDisabled {
-      color: #ccc;
+    span {
+      font-size: 15px;
+      color: #F62C2C;
+      padding: 0 5px;
     }
   }
 }
 
-.submitBtn {
-  margin: 16px 12px 22px;
-  width: calc(100% - 24px);
-  height: 46px;
-  border-radius: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #5B2C03 !important;
-  line-height: 22px;
+.paymentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) 12px;
+  background: #FFFFFF;
+  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  border-radius: 18px 18px 0px 0px;
+
+  .traditionBtn {
+    flex: 1;
+    text-align: center;
+
+    :global {
+      .van-button {
+        width: 100%;
+        max-width: 325px;
+      }
+    }
+  }
 }
 
 .radioSection {
   position: relative;
   min-width: 32px;
   justify-content: center;
-  padding-left: 14px;
-  padding-right: 14px;
+  width: 52px;
+  height: 24px;
+  background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+  border-radius: 6px;
+  margin-left: 12px;
 }
 
 .radioItem {
@@ -106,4 +265,108 @@
 
 .radioSection+.radioSection {
   margin-left: 12px;
+}
+
+.giftTips {
+  background: #E8F8FF;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  line-height: 18px;
+  color: #131415;
+  margin: 14px;
+  padding: 6px 4px 6px 10px;
+
+  >img {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+
+  i {
+    font-style: normal;
+    font-size: 15px;
+    color: #FD2C55;
+    display: inline-block;
+    margin: 0 3px;
+    font-weight: 600;
+
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.agreeColumn {
+  margin: 16px 14px;
+  display: flex;
+  align-items: center;
+
+  >img {
+    width: 14px;
+    height: 14px;
+    margin-right: 6px;
+  }
+
+  >p {
+    font-size: 13px;
+    color: #3C3C3C;
+
+    i {
+      font-style: normal;
+      color: #247FFA;
+      display: inline-block;
+    }
+  }
+}
+
+.username {
+  padding-bottom: 8px !important;
+
+  :global {
+    .van-cell {
+      &:after {
+        border-bottom: 1px solid transparent !important;
+      }
+    }
+
+    .van-field__label {
+      display: flex;
+      align-items: center;
+      width: 170px;
+    }
+  }
+}
+
+.fieldTipsGroup {
+  margin: 0 14px 0;
+  padding-bottom: 9px;
+}
+
+.fieldTips {
+  font-size: 13px;
+  color: #EC763B;
+  line-height: 18px;
+  background: #FFF8EB;
+  border-radius: 4px;
+  padding: 4px 10px;
+}
+
+.codeText {
+  color: #1189FF;
+  font-size: 14px;
+
+  // &.codeTextDisabled {
+  //   color: #ccc;
+  // }
+}
+
+.countDown {
+  min-width: 80px;
+  text-align: center;
+  font-size: 14px;
+  color: #A0D0FF;
 }

+ 542 - 193
src/views/student-register/register-member/index.tsx

@@ -27,10 +27,12 @@ import { browser, checkPhone } from '@/helpers/utils';
 import request from '@/helpers/request';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
 import { setLoginInit, state } from '@/state';
-import iconGift from '../images/icon-gift.png';
+// import iconGift from '../images/icon-gift.png';
+import vipGiftIcon from '../images/vip-gift-icon.png';
 import { useRoute, useRouter } from 'vue-router';
 import MSticky from '@/components/m-sticky';
 import MMessageTip from '@/components/m-message-tip';
+import SelectStudent from '../modal/select-student';
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
   classList.push({ text: i + '班', value: i });
@@ -39,7 +41,7 @@ for (let i = 1; i <= 40; i++) {
 export default defineComponent({
   name: 'register-modal',
   emits: ['close', 'submit'],
-  setup(props, { emit }) {
+  setup() {
     const route = useRoute();
     const router = useRouter();
     const studentRegisterStore = useStudentRegisterStore();
@@ -86,6 +88,13 @@ export default defineComponent({
       loading: false,
       schoolId: route.query.sId as any,
       details: {} as any,
+      multi_user_limit: 1, // 限制注册学生数量
+      showSelectStudent: false, // 选择学生
+      studentList: [], // 手机号关联学生列表
+      studentItem: {} as any, // 选择的学生
+      isRegister: 'create' as 'create' | 'update' | '', // 是否注册学生
+      isTipRegister: true, // 是否显示名字不一致 - 默认显示
+      isChangeSchool: false, // 是否切换学校
       gradeYear: null,
       schoolType: null,
       giftVipDay: null,
@@ -93,10 +102,28 @@ export default defineComponent({
       showButton: false,
       showMessage: '请使用微信打开',
       showOtherSchool: false,
-      showOtherMessage: ''
+      showOtherMessage: '',
+      gradePopupShow: false,
+      gradePopupIndex: [] as any, // 年级下拉索引
+      classPopupShow: false,
+      classPopupIndex: [] as any // 班级下拉索引
+    });
+    const otherParams = reactive({
+      showOtherSchool: false,
+      showOtherMessage: '',
+      /**  limit 超限制,change 更换学生,nickname 名称不一致  */
+      otherType: '' as 'limit' | 'change' | 'nickname',
+      showCancelButton: true,
+      cancelButtonColor: '',
+      cancelButtonText: '取消',
+      showConfirmButton: true,
+      confirmButtonColor: '',
+      confirmButtonText: '确定',
+      messageAlign: 'left' as 'center' | 'left' | 'right'
     });
     const studentInfo = reactive({
       autoRegister: true,
+      multiUser: true, // 是否为多用户
       client_id: 'cooleshow-student',
       client_secret: 'cooleshow-student',
       extra: {
@@ -137,36 +164,31 @@ export default defineComponent({
       countDownRef.value.reset();
     };
 
-    const onSubmit = async (isRegister = false) => {
+    const onSubmit = async () => {
       try {
-        if (checkForm()) return;
+        if (checkForm() || checkSubmit()) return;
         forms.loading = true;
-        if (!isRegister) {
-          const checkSchool = await request.get(
-            `/edu-app/open/student/studentSchool?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
-          );
-          if (checkSchool.data?.schoolId !== forms.schoolId) {
-            forms.showOtherSchool = true;
-            forms.showOtherMessage = `您已绑定【${
-              forms.details.name || ''
-            }】,提交后将更换到【${
-              checkSchool.data?.schoolName
-            }】,是否确认提交?`;
-            return;
-          }
+        const { extra, loginType, autoRegister, password, multiUser, ...res } =
+          studentInfo;
+        let tLoginType = loginType,
+          tAutoRegister = autoRegister,
+          tPassword = password,
+          tMultiUser = multiUser;
+        if (forms.isRegister === 'update') {
+          tLoginType = 'TOKEN';
+          tAutoRegister = false;
+          tPassword = forms.studentItem.token;
+          tMultiUser = false;
         }
-
-        await request.get('/edu-app/open/student/schoolQuery', {
-          params: {
-            schoolId: forms.schoolId,
-            mobile: studentInfo.username
-          }
-        });
-        const { extra, ...res } = studentInfo;
+        // const { extra, ...res } = studentInfo;
         const result = await request.post('/edu-app/userlogin', {
           hideLoading: false,
           requestType: 'form',
           data: {
+            loginType: tLoginType,
+            autoRegister: tAutoRegister,
+            password: tPassword,
+            multiUser: tMultiUser,
             ...res,
             extra: JSON.stringify({
               ...extra,
@@ -185,10 +207,18 @@ export default defineComponent({
         } else {
           setTimeout(() => {
             showToast('报名成功');
-            router.push('/download');
+            // router.push('/download');
           }, 100);
+          setTimeout(() => {
+            if (browser().weixin) {
+              // 关闭微信
+              (window as any).WeixinJSBridge.call('closeWindow');
+            }
+          }, 1000);
         }
       } catch {
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
       } finally {
         forms.loading = false;
       }
@@ -214,6 +244,118 @@ export default defineComponent({
       return false;
     };
 
+    const getUserInfos = async () => {
+      if (
+        studentInfo.password.length !== 6 ||
+        !checkPhone(studentInfo.username)
+      ) {
+        return;
+      }
+      try {
+        const { data } = await request.get(
+          `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
+        );
+        forms.studentList = data || [];
+
+        if (forms.studentList.length > 0) {
+          const firstStudent: any = forms.studentList[0];
+          forms.studentItem = firstStudent;
+          studentInfo.extra.nickname = firstStudent.nickname;
+          const tempGrade: any = gradeList.value[0] || [];
+          tempGrade?.forEach((i: any) => {
+            if (i.value === firstStudent.currentGradeNum) {
+              forms.gradeNumText = i.text;
+              studentInfo.extra.currentGradeNum = firstStudent.currentGradeNum;
+            }
+          });
+          classList.forEach((i: any) => {
+            if (i.value === firstStudent.currentClass) {
+              forms.currentClassText = i.text;
+              studentInfo.extra.currentClass = firstStudent.currentClass;
+            }
+          });
+          studentInfo.extra.gender = firstStudent.gender;
+
+          forms.isRegister = 'update';
+          changeTipStatus(true, false);
+        } else {
+          forms.isRegister = 'create';
+          changeTipStatus(true, false);
+          forms.studentItem = [];
+        }
+      } catch {
+        //
+      }
+    };
+
+    // 格式化提示状态
+    const changeTipStatus = (register: boolean, school: boolean) => {
+      forms.isTipRegister = register;
+      forms.isChangeSchool = school;
+    };
+
+    //
+    const checkSubmit = () => {
+      const { extra } = studentInfo;
+      if (
+        forms.studentItem.nickname !== extra.nickname &&
+        forms.isTipRegister
+      ) {
+        otherParams.showOtherMessage =
+          '学生姓名与上次提交信息不一致,请确认修改学生信息或创建新的学生账号';
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = true;
+        otherParams.cancelButtonColor =
+          'linear-gradient( 224deg, #3FE1E6 0%, #00CDD4 100%)';
+        otherParams.cancelButtonText = '新建学生';
+        otherParams.confirmButtonColor =
+          'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+        otherParams.confirmButtonText = '修改信息';
+        otherParams.otherType = 'nickname';
+        otherParams.messageAlign = 'left';
+        return true;
+      }
+
+      // 判断新建学员是否上限了
+      if (
+        forms.isRegister === 'create' &&
+        forms.studentList.length >= forms.multi_user_limit
+      ) {
+        otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = false;
+        otherParams.confirmButtonColor =
+          'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+        otherParams.confirmButtonText = '我知道了';
+        otherParams.otherType = 'limit';
+        otherParams.messageAlign = 'center';
+        return true;
+      }
+
+      // 判断是否为同一个学校
+      if (
+        forms.studentItem.schoolId !== forms.details.id &&
+        !forms.isChangeSchool &&
+        forms.isRegister === 'update'
+      ) {
+        otherParams.showOtherMessage = `您已绑定【${
+          forms.details.name || ''
+        }】,提交后将更换到【${
+          forms.studentItem?.schoolName
+        }】,是否确认提交?`;
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = true;
+        otherParams.cancelButtonColor = '';
+        otherParams.cancelButtonText = '取消';
+        otherParams.confirmButtonColor = '';
+        otherParams.confirmButtonText = '确定';
+        otherParams.otherType = 'change';
+        otherParams.messageAlign = 'left';
+        return true;
+      }
+      return false;
+    };
+
     const getRegisterGoods = async () => {
       try {
         const { data } = await request.get('/edu-app/open/school/detail', {
@@ -241,12 +383,34 @@ export default defineComponent({
       } catch {}
     };
 
-    onMounted(() => {
-      getRegisterGoods();
+    onMounted(async () => {
+      try {
+        // 获取支付类型
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamNameList',
+          {
+            requestType: 'form',
+            params: {
+              paramNames: 'multi_user_limit'
+            }
+          }
+        );
+        if (data && Array.isArray(data)) {
+          data.forEach((item: any) => {
+            if (item.paramName === 'multi_user_limit') {
+              forms.multi_user_limit = item.paramValue
+                ? Number(item.paramValue)
+                : 1;
+            }
+          });
+        }
+
+        await getRegisterGoods();
+      } catch {}
     });
     return () => (
       <div class={styles.registerModal}>
-        {forms.giftVipDay ? (
+        {/* {forms.giftVipDay ? (
           <div class={styles.memberNumer}>
             <img src={iconGift} class={styles.iconGift} />
 
@@ -257,130 +421,214 @@ export default defineComponent({
           </div>
         ) : (
           ''
-        )}
-
-        <Form labelAlign="top" class={styles.registerForm}>
-          <Field
-            clearable
-            label="学生姓名"
-            placeholder="请输入学生姓名"
-            autocomplete="off"
-            maxlength={14}
-            v-model={studentInfo.extra.nickname}
-          />
-          <Field
-            clearable
-            label="学生性别"
-            placeholder="请选择性别"
-            autocomplete="off"
-            // v-model={studentInfo.extra.nickname}
-          >
-            {{
-              input: () => (
-                <RadioGroup
-                  checked-color="#ffcb75"
-                  v-model={studentInfo.extra.gender}
-                  direction="horizontal">
-                  <Tag
-                    size="large"
-                    type="primary"
-                    color={
-                      !(studentInfo.extra.gender === 1) ? '#EAEAEA' : '#ffcb75'
-                    }
-                    textColor={
-                      !(studentInfo.extra.gender === 1) ? '#AAA' : '#5B2C03'
-                    }
-                    class={styles.radioSection}
-                    round>
-                    <Radio class={styles.radioItem} name={1}></Radio>男
-                  </Tag>
-                  <Tag
-                    size="large"
-                    type="primary"
-                    color={
-                      !(studentInfo.extra.gender === 0) ? '#EAEAEA' : '#ffcb75'
-                    }
-                    textColor={
-                      !(studentInfo.extra.gender === 0) ? '#AAA' : '#5B2C03'
-                    }
-                    class={styles.radioSection}
-                    round>
-                    <Radio class={styles.radioItem} name={0}></Radio>女
-                  </Tag>
-                </RadioGroup>
-              )
-            }}
-          </Field>
-          <Field
-            clearable
-            label="所在年级"
-            placeholder="请选择年级"
-            isLink
-            readonly
-            clickable={false}
-            modelValue={forms.gradeNumText}
-            onClick={() => (forms.gradeStatus = true)}
-          />
-          <Field
-            clearable
-            label="所在班级"
-            placeholder="请选择班级"
-            isLink
-            readonly
-            clickable={false}
-            modelValue={forms.currentClassText}
-            onClick={() => (forms.classStatus = true)}
-          />
-          <Field
-            clearable
-            label="联系方式(直接监护人)"
-            placeholder="请输入手机号码"
-            type="tel"
-            autocomplete="off"
-            v-model={studentInfo.username}
-            maxlength={11}>
-            {{
-              label: () => (
-                <div>
-                  联系方式
-                  {/* (直接监护人) */}
-                  <p class={styles.tips}>手机号是音乐数字课堂的唯一登录账户</p>
+        )} */}
+        <div class={styles.studentRegisterContainer}>
+          <div
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              styles.noSendDay
+            ]}>
+            <div class={styles.title3}></div>
+            <Form labelAlign="left" class={styles.registerForm}>
+              <Field
+                clearable={false}
+                label="联系方式(直接监护人)"
+                placeholder="请输入手机号码"
+                type="tel"
+                required
+                autocomplete="off"
+                inputAlign="right"
+                class={styles.username}
+                v-model={studentInfo.username}
+                border={false}
+                maxlength={11}>
+                {{
+                  label: () => (
+                    <div>
+                      联系方式
+                      <p class={styles.tips}>(直接监护人)</p>
+                    </div>
+                  )
+                }}
+              </Field>
+              <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
+                <div class={[styles.fieldTips]}>
+                  手机号是音乐数字课堂的唯一登录账户
                 </div>
-              )
-            }}
-          </Field>
-          <Field
-            center
-            clearable
-            label="验证码"
-            placeholder="请输入验证码"
-            autocomplete="off"
-            type="number"
-            v-model={studentInfo.password}
-            maxlength={6}>
-            {{
-              button: () =>
-                forms.countDownStatus ? (
-                  <span
+              </div>
+
+              <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>
+
+          <div
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              Number(forms.giftVipDay) <= 0 && styles.noSendDay
+            ]}>
+            <div class={styles.title1}></div>
+            <Form labelAlign="left" class={styles.registerForm}>
+              {/* 大于等于2,则可以切换学生 */}
+              {forms.studentList.length > 1 && (
+                <div
+                  class={[
+                    styles.selectStudentGroup,
+                    forms.showSelectStudent && styles.selectStudentGroupChecked
+                  ]}
+                  onClick={() => (forms.showSelectStudent = true)}>
+                  <i
                     class={[
-                      styles.codeText,
-                      !validatePhone.value ? styles.codeTextDisabled : ''
-                    ]}
-                    onClick={onSendCode}>
-                    获取验证码
+                      styles.studentIcon,
+                      !forms.studentItem.userId && styles.studentIconAdd
+                    ]}></i>
+                  <span>
+                    {forms.studentItem.userId
+                      ? forms.studentItem.nickname
+                      : '新增学生'}
                   </span>
-                ) : (
-                  <CountDown
-                    ref={(el: any) => (countDownRef.value = el)}
-                    auto-start={false}
-                    time={forms.countDownTime}
-                    onFinish={onFinished}
-                    format="ss秒"
-                  />
-                )
-            }}
-          </Field>
-        </Form>
+                </div>
+              )}
+              <Field
+                clearable={false}
+                label="学生姓名"
+                placeholder="请输入学生姓名"
+                autocomplete="off"
+                maxlength={14}
+                v-model={studentInfo.extra.nickname}
+                required
+                input-align="right"
+              />
+              <Field
+                clearable={false}
+                label="学生性别"
+                placeholder="请选择性别"
+                autocomplete="off"
+                required
+                input-align="right">
+                {{
+                  input: () => (
+                    <RadioGroup
+                      checked-color="#ffcb75"
+                      v-model={studentInfo.extra.gender}
+                      direction="horizontal">
+                      <Tag
+                        size="large"
+                        type="primary"
+                        color={
+                          !(studentInfo.extra.gender === 1)
+                            ? '#F5F6FA'
+                            : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
+                        }
+                        textColor={
+                          !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
+                        }
+                        class={styles.radioSection}
+                        round>
+                        <Radio class={styles.radioItem} name={1}></Radio>男
+                      </Tag>
+                      <Tag
+                        size="large"
+                        type="primary"
+                        color={
+                          !(studentInfo.extra.gender === 0)
+                            ? '#F5F6FA'
+                            : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
+                        }
+                        textColor={
+                          !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
+                        }
+                        class={styles.radioSection}
+                        round>
+                        <Radio class={styles.radioItem} name={0}></Radio>女
+                      </Tag>
+                    </RadioGroup>
+                  )
+                }}
+              </Field>
+              <Field
+                clearable={false}
+                label="所在年级"
+                placeholder="请选择年级"
+                isLink
+                readonly
+                clickable={false}
+                modelValue={forms.gradeNumText}
+                // onClick={() => (forms.gradeStatus = true)}
+                required
+                input-align="right"
+                onClick={() => {
+                  forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
+                  forms.gradeStatus = true;
+                }}
+              />
+              <Field
+                clearable={false}
+                label="所在班级"
+                placeholder="请选择班级"
+                isLink
+                readonly
+                clickable={false}
+                modelValue={forms.currentClassText}
+                // onClick={() => (forms.classStatus = true)}
+                onClick={() => {
+                  forms.classPopupIndex = [studentInfo.extra.currentClass];
+                  forms.classStatus = true;
+                }}
+                required
+                input-align="right"
+              />
+              {studentInfo.extra.registerType === 'GIFT_VIP_DAY' &&
+              forms.giftVipDay &&
+              Number(forms.giftVipDay) > 0 ? (
+                <div class={styles.giftTips}>
+                  <img src={vipGiftIcon} />
+                  <span>
+                    现在报名立即赠送乐器AI学练工具有效期
+                    <i>{forms.giftVipDay}</i>天
+                  </span>
+                </div>
+              ) : null}
+            </Form>
+          </div>
+        </div>
         {/* <MProtocol
           center
           v-model:modelValue={forms.modelValue}
@@ -388,16 +636,20 @@ export default defineComponent({
         /> */}
 
         <MSticky position="bottom">
-          <Button
-            type="primary"
-            class={styles.submitBtn}
-            color="linear-gradient(121deg, #FFD892 0%, #FFCB75 100%)"
-            block
-            onClick={() => onSubmit()}
-            disabled={forms.loading}
-            loading={forms.loading}>
-            确认
-          </Button>
+          <div class={styles.paymentContainer}>
+            <div class={styles.traditionBtn}>
+              <Button
+                type="primary"
+                class={styles.submitBtn}
+                color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
+                round
+                onClick={() => onSubmit()}
+                disabled={forms.loading}
+                loading={forms.loading}>
+                提交注册
+              </Button>
+            </div>
+          </div>
         </MSticky>
 
         {forms.imgCodeStatus ? (
@@ -419,36 +671,54 @@ export default defineComponent({
           round
           safeAreaInsetBottom
           lazyRender={false}
-          class={'popupBottomSearch'}>
-          <Picker
-            showToolbar
-            columns={gradeList.value as any}
-            onCancel={() => (forms.gradeStatus = false)}
-            onConfirm={(val: any) => {
-              const selectedOption = val.selectedOptions[0];
-              studentInfo.extra.currentGradeNum = selectedOption.value;
-              forms.gradeNumText = selectedOption.text;
-              forms.gradeStatus = false;
-            }}
-          />
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.gradePopupShow = true;
+          }}
+          onClosed={() => {
+            forms.gradePopupShow = false;
+          }}>
+          {forms.gradePopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.gradePopupIndex}
+              columns={gradeList.value as any}
+              onCancel={() => (forms.gradeStatus = false)}
+              onConfirm={(val: any) => {
+                const selectedOption = val.selectedOptions[0];
+                studentInfo.extra.currentGradeNum = selectedOption.value;
+                forms.gradeNumText = selectedOption.text;
+                forms.gradeStatus = false;
+              }}
+            />
+          )}
         </Popup>
         {/* 班级 */}
         <Popup
           v-model:show={forms.classStatus}
           position="bottom"
           round
-          class={'popupBottomSearch'}>
-          <Picker
-            showToolbar
-            columns={classList}
-            onCancel={() => (forms.classStatus = false)}
-            onConfirm={(val: any) => {
-              const selectedOption = val.selectedOptions[0];
-              studentInfo.extra.currentClass = selectedOption.value;
-              forms.currentClassText = selectedOption.text;
-              forms.classStatus = false;
-            }}
-          />
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.classPopupShow = true;
+          }}
+          onClosed={() => {
+            forms.classPopupShow = false;
+          }}>
+          {forms.classPopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.classPopupIndex}
+              columns={classList}
+              onCancel={() => (forms.classStatus = false)}
+              onConfirm={(val: any) => {
+                const selectedOption = val.selectedOptions[0];
+                studentInfo.extra.currentClass = selectedOption.value;
+                forms.currentClassText = selectedOption.text;
+                forms.classStatus = false;
+              }}
+            />
+          )}
         </Popup>
         {/* 是否在微信中打开 */}
         <OWxTip
@@ -470,17 +740,96 @@ export default defineComponent({
         />
 
         <MMessageTip
-          show={forms.showOtherSchool}
-          messageAlign="left"
-          message={forms.showOtherMessage}
-          showCancelButton
-          onCancel={() => (forms.showOtherSchool = false)}
+          show={otherParams.showOtherSchool}
+          messageAlign={otherParams.messageAlign}
+          message={otherParams.showOtherMessage}
+          showCancelButton={otherParams.showCancelButton}
+          cancelButtonColor={otherParams.cancelButtonColor}
+          cancelButtonText={otherParams.cancelButtonText}
+          confirmButtonColor={otherParams.confirmButtonColor}
+          confirmButtonText={otherParams.confirmButtonText}
+          onCancel={() => {
+            otherParams.showOtherSchool = false;
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'create'; // 新建
+              changeTipStatus(false, false);
+              onSubmit();
+            }
+          }}
           onConfirm={() => {
-            forms.showOtherSchool = false;
-            // 直接注册
-            onSubmit(true);
+            otherParams.showOtherSchool = false;
+            // 名字
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'update'; // 修改
+              changeTipStatus(false, false);
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'change') {
+              // 学校更换
+              forms.isChangeSchool = true;
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'limit') {
+              // 人数超限制
+              changeTipStatus(
+                forms.isRegister === 'create' && !forms.studentItem.userId
+                  ? false
+                  : true,
+                false
+              );
+            }
           }}
         />
+
+        <Popup
+          v-model:show={forms.showSelectStudent}
+          round
+          position="bottom"
+          safeAreaInsetBottom
+          closeable>
+          <SelectStudent
+            studentItem={forms.studentItem}
+            list={forms.studentList}
+            onClose={() => (forms.showSelectStudent = false)}
+            onConfirm={(val: any) => {
+              forms.studentItem = val;
+              if (val.userId) {
+                const firstStudent = val;
+                studentInfo.extra.nickname = firstStudent.nickname;
+                const tempGrade: any = gradeList.value[0] || [];
+                tempGrade?.forEach((i: any) => {
+                  if (i.value === firstStudent.currentGradeNum) {
+                    // forms.instrumentCode = i.instrumentCode;
+                    forms.gradeNumText = i.text;
+                    studentInfo.extra.currentGradeNum =
+                      firstStudent.currentGradeNum;
+                    // if (forms.schoolInstrumentSetType === 'CLASS') {
+                    //   forms.classList = i.classList;
+                    // }
+                  }
+                });
+                classList.forEach((i: any) => {
+                  if (i.value === firstStudent.currentClass) {
+                    forms.currentClassText = i.text;
+                    studentInfo.extra.currentClass = firstStudent.currentClass;
+                  }
+                });
+                studentInfo.extra.gender = firstStudent.gender;
+                forms.isRegister = 'update';
+                changeTipStatus(true, false);
+              } else {
+                forms.isRegister = 'create';
+                changeTipStatus(false, false);
+                studentInfo.extra.nickname = '';
+                studentInfo.extra.currentGradeNum = '';
+                studentInfo.extra.currentClass = '';
+                studentInfo.extra.gender = 1;
+                forms.currentClassText = '';
+                forms.gradeNumText = '';
+              }
+            }}
+          />
+        </Popup>
       </div>
     );
   }

+ 241 - 50
src/views/student-register/register-new/index.module.less

@@ -1,18 +1,74 @@
+// .registerModal {
+//   background: linear-gradient(180deg, #D0EFFD 0%, #DBF4FF 100%);
+//   overflow-x: hidden;
+//   overflow-y: scroll;
+//   min-height: 100vh;
+// }
+
 .registerModal {
-  background: linear-gradient( 180deg, #D0EFFD 0%, #DBF4FF 100%);
-  overflow-x: hidden;
-  overflow-y: scroll;
   min-height: 100vh;
+  // background: #FFF4E2;
+  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
+  overflow: hidden;
+  position: relative;
+
+  --k-font-primary: #007AFE;
+
+  .studentRegisterContainer {
+    padding-top: 137px;
+    background: url('../images/new/banner-bg2.png') no-repeat top center;
+    background-size: contain;
+  }
 }
 
-.headBg {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 195px;
+
+.studentSection {
+  margin: 0 14px 12px;
+  padding: 12px 15px;
+  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  border-radius: 16px;
+  border: 2px solid #FFFFFF;
+
+  &.studentSectionForm {
+    padding: 12px 0;
+    background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 20%);
+  }
+
+  &.noSendDay {
+    padding-bottom: 0;
+  }
+
+  .title1,
+  .title3 {
+    width: 212px;
+    height: 22px;
+    background: url('../images/new/title-7.png') no-repeat center;
+    background-size: contain;
+    margin: 0 auto;
+  }
+
+  // .title2 {
+  //   width: 248px;
+  //   height: 22px;
+  //   background: url('../images/new/title-4.png') no-repeat center;
+  //   background-size: contain;
+  //   margin: 0 auto;
+  // }
+
+  .title3 {
+    background: url('../images/new/title-6.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .goodsGroup {
+    display: flex;
+    align-items: center;
+    margin-top: 29px;
+  }
+
 }
 
+
 .memberNumer {
   margin: 12px 12px 0;
   background: linear-gradient(90deg, #FF8633 0%, #FFB047 100%);
@@ -39,53 +95,185 @@
 }
 
 .registerForm {
-  background: #FFFFFF;
-  border-radius: 16px;
-  margin: 82px 14px 0;
+  // background: #FFFFFF;
+  // border-radius: 16px;
+  border-radius: 18px;
+  // margin: 0 12px;
   overflow: hidden;
 
+  .selectStudentGroup {
+    background: #EDF6FD;
+    border-radius: 8px;
+    margin: 20px 14px 0;
+    padding: 8px 0;
+    font-weight: 600;
+    font-size: 16px;
+    color: #1189FF;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .studentIcon {
+      display: inline-block;
+      margin-right: 6px;
+      width: 20px;
+      height: 20px;
+      background: url('../images/new/icon-n-5.png') no-repeat center;
+      background-size: contain;
+
+      &.selectStudentGroupChecked {
+        span::after {
+          transform: rotate(180deg);
+        }
+      }
+
+      &.studentIconAdd {
+        background: url('../images/new/icon-n-4.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        display: inline-block;
+        content: '';
+        width: 9px;
+        height: 5px;
+        margin-left: 5px;
+        background: url('../images/new/icon-n-6.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  :global {
+    .van-cell {
+      background-color: transparent;
+    }
+  }
+
+  .fieldTipsGroup {
+    margin: 0 14px 0;
+    padding-bottom: 9px;
+  }
+
+  .fieldTips {
+    font-size: 13px;
+    color: #EC763B;
+    line-height: 18px;
+    background: #FFF8EB;
+    border-radius: 4px;
+    padding: 4px 10px;
+  }
+
   .tips {
     display: inline-block;
-    padding-left: 5px;
-    padding-top: 4px;
+    // padding-left: 5px;
+    // padding-top: 2px;
     font-size: 12px;
     font-weight: 400;
-    color: #666;
+    color: #777;
     line-height: 17px;
   }
 
+  .username {
+    padding-bottom: 8px !important;
+
+    :global {
+      .van-field__label {
+        display: flex;
+        align-items: center;
+        width: 170px;
+      }
+    }
+  }
+
+  .countDown {
+    min-width: 80px;
+    text-align: center;
+    font-size: 14px;
+    color: #A0D0FF;
+  }
+
   :global {
     .van-cell {
       padding: 18px 14px;
-      &:after {
-        border-bottom: 1px solid #F2F2F2;
-      }
     }
 
+
     .van-field__label {
-      width: fit-content;
       font-size: 16px;
       color: #666666;
       line-height: 22px;
-      margin-bottom: 0;
     }
 
     .van-field__control {
       font-size: 16px;
+      color: #131415;
     }
   }
 
+  .codeText {
+    color: #1189FF;
+    font-size: 14px;
+
+    // &.codeTextDisabled {
+    //   color: #ccc;
+    // }
+  }
+
+  .memberNumer {
+    margin: 14px 12px 0;
+    background: #E8F8FF;
+    border-radius: 8px;
+    padding: 8px 0 8px 10px;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 13px;
+    color: #2B85FF;
+    line-height: 18px;
+
+    .iconGift {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
+
+    span {
+      font-size: 15px;
+      color: #F62C2C;
+      padding: 0 5px;
+    }
+  }
 }
 
-.submitBtn {
-  margin: 25px;
-  width: calc(100% - 50px);
-  height: 44px;
-  border-radius: 40px;
-  font-size: 18px;
-  font-weight: 600;
-  color: #fff !important;
-  line-height: 25px;
+.paymentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) 12px;
+  background: #FFFFFF;
+  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  border-radius: 18px 18px 0px 0px;
+
+  .traditionBtn {
+    flex: 1;
+    text-align: center;
+
+    :global {
+      .van-button {
+        width: 100%;
+        max-width: 325px;
+      }
+    }
+  }
 }
 
 .radioSection {
@@ -94,7 +282,7 @@
   justify-content: center;
   width: 52px;
   height: 24px;
-  background: linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%);
+  background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
   border-radius: 6px;
   margin-left: 12px;
 }
@@ -118,21 +306,30 @@
   display: flex;
   align-items: center;
   font-size: 13px;
-  font-weight: 500;
-  color: #2B85FF;
+  line-height: 18px;
+  color: #131415;
   margin: 14px;
   padding: 6px 4px 6px 10px;
-  > img {
+
+  >img {
     width: 18px;
     height: 18px;
     margin-right: 6px;
   }
+
   i {
     font-style: normal;
     font-size: 15px;
-    color: #F62C2C;
+    color: #FD2C55;
     display: inline-block;
     margin: 0 3px;
+    font-weight: 600;
+
+  }
+
+  span {
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -140,14 +337,17 @@
   margin: 16px 14px;
   display: flex;
   align-items: center;
-  > img {
+
+  >img {
     width: 14px;
     height: 14px;
     margin-right: 6px;
   }
-  > p {
+
+  >p {
     font-size: 13px;
     color: #3C3C3C;
+
     i {
       font-style: normal;
       color: #247FFA;
@@ -165,6 +365,7 @@
         border-bottom: 1px solid transparent !important;
       }
     }
+
     .van-field__label {
       display: flex;
       align-items: center;
@@ -174,19 +375,8 @@
 }
 
 .fieldTipsGroup {
-  padding: 0 14px 9px;
-  background: #fff;
-  position: relative;
-  ::before {
-    content: "";
-    position: absolute;
-    left: 14px;
-    bottom: 0px;
-    width: calc(100vw - 56px);
-    height: 1px;
-    background: #f2f2f2;
-    transform: scaleY(0.5);
-  }
+  margin: 0 14px 0;
+  padding-bottom: 9px;
 }
 
 .fieldTips {
@@ -194,7 +384,7 @@
   color: #EC763B;
   line-height: 18px;
   background: #FFF8EB;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 4px 10px;
 }
 
@@ -206,6 +396,7 @@
   //   color: #ccc;
   // }
 }
+
 .countDown {
   min-width: 80px;
   text-align: center;

+ 581 - 265
src/views/student-register/register-new/index.tsx

@@ -21,20 +21,21 @@ import {
   showToast
 } from 'vant';
 import OWxTip from '@/components/m-wx-tip';
-import MProtocol from '@/components/m-protocol';
+// import MProtocol from '@/components/m-protocol';
 import MImgCode from '@/components/m-img-code';
 import { browser, checkPhone } from '@/helpers/utils';
 import request from '@/helpers/request';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
-import { setLoginInit, state } from '@/state';
-import iconGift from '../images/icon-gift.png';
+// import { setLoginInit, state } from '@/state';
+// import iconGift from '../images/icon-gift.png';
 import { useRoute, useRouter } from 'vue-router';
 import MSticky from '@/components/m-sticky';
-import registerBgIcon from '../images/register-bg.png';
+// import registerBgIcon from '../images/register-bg.png';
 import vipGiftIcon from '../images/vip-gift-icon.png';
-import agreeYes from '../images/agree-yes.png';
-import agreeNo from '../images/agree-no.png';
+// import agreeYes from '../images/agree-yes.png';
+// import agreeNo from '../images/agree-no.png';
 import MMessageTip from '@/components/m-message-tip';
+import SelectStudent from '../modal/select-student';
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -44,9 +45,8 @@ for (let i = 1; i <= 40; i++) {
 export default defineComponent({
   name: 'register-new',
   emits: ['close', 'submit'],
-  setup(props, { emit }) {
+  setup() {
     const route = useRoute();
-    const router = useRouter();
     const studentRegisterStore = useStudentRegisterStore();
     // 初始化学校编号
     studentRegisterStore.setShoolId(route.query.sId as any);
@@ -86,23 +86,46 @@ export default defineComponent({
       imgCodeStatus: false,
       gradeNumText: '',
       currentClassText: '',
+      multi_user_limit: 1, // 限制注册学生数量
       gradeStatus: false,
       classStatus: false,
       loading: false,
       schoolId: route.query.sId as any,
+      showSelectStudent: false, // 选择学生
+      studentList: [], // 手机号关联学生列表
+      studentItem: {} as any, // 选择的学生
+      isRegister: 'create' as 'create' | 'update' | '', // 是否注册学生
+      isTipRegister: true, // 是否显示名字不一致 - 默认显示
+      isChangeSchool: false, // 是否切换学校
       details: {} as any,
       gradeYear: null,
       schoolType: null,
-      giftVipDay: null,
+      giftVipDay: null as any,
       showTips: false,
       showButton: false,
       showMessage: '请使用微信打开',
+      gradePopupShow: false,
+      gradePopupIndex: [] as any, // 年级下拉索引
+      classPopupShow: false,
+      classPopupIndex: [] as any // 班级下拉索引
+    });
+    const otherParams = reactive({
       showOtherSchool: false,
-      showOtherMessage: ''
+      showOtherMessage: '',
+      /**  limit 超限制,change 更换学生,nickname 名称不一致  */
+      otherType: '' as 'limit' | 'change' | 'nickname',
+      showCancelButton: true,
+      cancelButtonColor: '',
+      cancelButtonText: '取消',
+      showConfirmButton: true,
+      confirmButtonColor: '',
+      confirmButtonText: '确定',
+      messageAlign: 'left' as 'center' | 'left' | 'right'
     });
     const isAgree = ref(false);
     const studentInfo = reactive({
       autoRegister: true,
+      multiUser: true, // 是否为多用户
       client_id: 'cooleshow-student',
       client_secret: 'cooleshow-student',
       extra: {
@@ -127,6 +150,12 @@ export default defineComponent({
       });
     };
 
+    // 格式化提示状态
+    const changeTipStatus = (register: boolean, school: boolean) => {
+      forms.isTipRegister = register;
+      forms.isChangeSchool = school;
+    };
+
     const onSendCode = () => {
       // 发送验证码
       if (!checkPhone(studentInfo.username)) {
@@ -134,6 +163,54 @@ export default defineComponent({
       }
       forms.imgCodeStatus = true;
     };
+    // const getUserInfos = async () => {
+    //   if (
+    //     studentInfo.password.length !== 6 ||
+    //     !checkPhone(studentInfo.username)
+    //   ) {
+    //     return;
+    //   }
+    //   try {
+    //     const { data } = await request.get(
+    //       `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
+    //     );
+    //     if (data) {
+    //       if (!studentInfo.extra.nickname) {
+    //         studentInfo.extra.nickname = data.nickname;
+    //       }
+
+    //       if (!studentInfo.extra.currentGradeNum) {
+    //         studentInfo.extra.currentGradeNum = data.currentGradeNum;
+    //       }
+
+    //       if (!studentInfo.extra.currentClass) {
+    //         studentInfo.extra.currentClass = data.currentClass;
+    //       }
+    //       // if (!studentInfo.extra.gender) {
+    //       studentInfo.extra.gender =
+    //         studentInfo.extra.gender !== data.gender
+    //           ? data.gender
+    //           : studentInfo.extra.gender;
+
+    //       // studentInfo.username = data.nickname;
+
+    //       classList.forEach((i: any) => {
+    //         if (i.value === data.currentClass) {
+    //           forms.currentClassText = i.text;
+    //         }
+    //       });
+
+    //       const tempGrade: any = gradeList.value[0] || [];
+    //       tempGrade?.forEach((i: any) => {
+    //         if (i.value === data.currentGradeNum) {
+    //           forms.gradeNumText = i.text;
+    //         }
+    //       });
+    //     }
+    //   } catch {
+    //     //
+    //   }
+    // };
     const getUserInfos = async () => {
       if (
         studentInfo.password.length !== 6 ||
@@ -142,43 +219,40 @@ export default defineComponent({
         return;
       }
       try {
-        // 15907120131;
         const { data } = await request.get(
           `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
         );
-        if (data) {
-          if (!studentInfo.extra.nickname) {
-            studentInfo.extra.nickname = data.nickname;
-          }
-
-          if (!studentInfo.extra.currentGradeNum) {
-            studentInfo.extra.currentGradeNum = data.currentGradeNum;
-          }
-
-          if (!studentInfo.extra.currentClass) {
-            studentInfo.extra.currentClass = data.currentClass;
-          }
-          // if (!studentInfo.extra.gender) {
-          studentInfo.extra.gender =
-            studentInfo.extra.gender !== data.gender
-              ? data.gender
-              : studentInfo.extra.gender;
-
-          // studentInfo.username = data.nickname;
-
-          classList.forEach((i: any) => {
-            if (i.value === data.currentClass) {
-              forms.currentClassText = i.text;
-            }
-          });
+        forms.studentList = data || [];
 
+        if (forms.studentList.length > 0) {
+          const firstStudent: any = forms.studentList[0];
+          forms.studentItem = firstStudent;
+          studentInfo.extra.nickname = firstStudent.nickname;
           const tempGrade: any = gradeList.value[0] || [];
           tempGrade?.forEach((i: any) => {
-            if (i.value === data.currentGradeNum) {
+            if (i.value === firstStudent.currentGradeNum) {
+              // forms.instrumentCode = i.instrumentCode;
               forms.gradeNumText = i.text;
+              studentInfo.extra.currentGradeNum = firstStudent.currentGradeNum;
+              // if (forms.schoolInstrumentSetType === 'CLASS') {
+              //   forms.classList = i.classList;
+              // }
+            }
+          });
+          classList.forEach((i: any) => {
+            if (i.value === firstStudent.currentClass) {
+              forms.currentClassText = i.text;
+              studentInfo.extra.currentClass = firstStudent.currentClass;
             }
           });
+          studentInfo.extra.gender = firstStudent.gender;
 
+          forms.isRegister = 'update';
+          changeTipStatus(true, false);
+        } else {
+          forms.isRegister = 'create';
+          changeTipStatus(true, false);
+          forms.studentItem = [];
         }
       } catch {
         //
@@ -194,36 +268,100 @@ export default defineComponent({
       countDownRef.value.reset();
     };
 
-    const onSubmit = async (isRegister = false) => {
+    //
+    const checkSubmit = () => {
+      const { extra } = studentInfo;
+      if (
+        forms.studentItem.nickname !== extra.nickname &&
+        forms.isTipRegister
+      ) {
+        otherParams.showOtherMessage =
+          '学生姓名与上次提交信息不一致,请确认修改学生信息或创建新的学生账号';
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = true;
+        otherParams.cancelButtonColor =
+          'linear-gradient( 224deg, #3FE1E6 0%, #00CDD4 100%)';
+        otherParams.cancelButtonText = '新建学生';
+        otherParams.confirmButtonColor =
+          'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+        otherParams.confirmButtonText = '修改信息';
+        otherParams.otherType = 'nickname';
+        otherParams.messageAlign = 'left';
+        return true;
+      }
+
+      // 判断新建学员是否上限了
+      if (
+        forms.isRegister === 'create' &&
+        forms.studentList.length >= forms.multi_user_limit
+      ) {
+        otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = false;
+        otherParams.confirmButtonColor =
+          'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+        otherParams.confirmButtonText = '我知道了';
+        otherParams.otherType = 'limit';
+        otherParams.messageAlign = 'center';
+        return true;
+      }
+
+      // 判断是否为同一个学校
+      if (
+        forms.studentItem.schoolId !== forms.details.id &&
+        !forms.isChangeSchool &&
+        forms.isRegister === 'update'
+      ) {
+        otherParams.showOtherMessage = `您已绑定【${
+          forms.details.name || ''
+        }】,提交后将更换到【${
+          forms.studentItem?.schoolName
+        }】,是否确认提交?`;
+        otherParams.showOtherSchool = true;
+        otherParams.showCancelButton = true;
+        otherParams.cancelButtonColor = '';
+        otherParams.cancelButtonText = '取消';
+        otherParams.confirmButtonColor = '';
+        otherParams.confirmButtonText = '确定';
+        otherParams.otherType = 'change';
+        otherParams.messageAlign = 'left';
+        return true;
+      }
+      return false;
+    };
+
+    const onSubmit = async () => {
       try {
-        if (checkForm()) return;
+        if (checkForm() || checkSubmit()) return;
         forms.loading = true;
-        if (!isRegister) {
-          const checkSchool = await request.get(
-            `/edu-app/open/student/studentSchool?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
-          );
-          if (checkSchool.data?.schoolId !== forms.schoolId) {
-            forms.showOtherSchool = true;
-            forms.showOtherMessage = `您已绑定【${
-              forms.details.name || ''
-            }】,提交后将更换到【${
-              checkSchool.data?.schoolName
-            }】,是否确认提交?`;
-            return;
-          }
-        }
 
-        await request.get('/edu-app/open/student/schoolQuery', {
-          params: {
-            schoolId: forms.schoolId,
-            mobile: studentInfo.username
-          }
-        });
-        const { extra, ...res } = studentInfo;
+        // await request.get('/edu-app/open/student/schoolQuery', {
+        //   params: {
+        //     schoolId: forms.schoolId,
+        //     mobile: studentInfo.username
+        //   }
+        // });
+        // const { extra, ...res } = studentInfo;
+        const { extra, loginType, autoRegister, password, multiUser, ...res } =
+          studentInfo;
+        let tLoginType = loginType,
+          tAutoRegister = autoRegister,
+          tPassword = password,
+          tMultiUser = multiUser;
+        if (forms.isRegister === 'update') {
+          tLoginType = 'TOKEN';
+          tAutoRegister = false;
+          tPassword = forms.studentItem.token;
+          tMultiUser = false;
+        }
         const result = await request.post('/edu-app/userlogin', {
           hideLoading: false,
           requestType: 'form',
           data: {
+            loginType: tLoginType,
+            autoRegister: tAutoRegister,
+            password: tPassword,
+            multiUser: tMultiUser,
             ...res,
             extra: JSON.stringify({
               ...extra,
@@ -238,10 +376,18 @@ export default defineComponent({
         } else {
           setTimeout(() => {
             showToast('报名成功');
-            router.push('/download');
+            // router.push('/download');
           }, 100);
+          setTimeout(() => {
+            if (browser().weixin) {
+              // 关闭微信
+              (window as any).WeixinJSBridge.call('closeWindow');
+            }
+          }, 1000);
         }
       } catch {
+        // 重置信息 - 如果是新建则不提示
+        changeTipStatus(forms.isRegister === 'create' ? false : true, false);
       } finally {
         forms.loading = false;
       }
@@ -295,12 +441,34 @@ export default defineComponent({
       } catch {}
     };
 
-    onMounted(() => {
-      getRegisterGoods();
+    onMounted(async () => {
+      try {
+        // 获取支付类型
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamNameList',
+          {
+            requestType: 'form',
+            params: {
+              paramNames: 'multi_user_limit'
+            }
+          }
+        );
+        if (data && Array.isArray(data)) {
+          data.forEach((item: any) => {
+            if (item.paramName === 'multi_user_limit') {
+              forms.multi_user_limit = item.paramValue
+                ? Number(item.paramValue)
+                : 1;
+            }
+          });
+        }
+
+        await getRegisterGoods();
+      } catch {}
     });
     return () => (
       <div class={styles.registerModal}>
-        {forms.giftVipDay ? (
+        {/* {forms.giftVipDay ? (
           <div class={styles.memberNumer}>
             <img src={iconGift} class={styles.iconGift} />
 
@@ -311,167 +479,215 @@ export default defineComponent({
           </div>
         ) : (
           ''
-        )}
-
-        <img class={styles.headBg} src={registerBgIcon} />
-        <Form labelAlign="top" class={styles.registerForm}>
-          <Field
-            clearable={false}
-            label="联系方式"
-            placeholder="请输入手机号码"
-            type="tel"
-            autocomplete="off"
-            class={styles.username}
-            v-model={studentInfo.username}
-            required
-            input-align="right"
-            maxlength={11}>
-            {{
-              label: () => (
-                <div>
-                  联系方式
-                  {/* (直接监护人) */}
-                  <p class={styles.tips}>(直接监护人)</p>
+        )} */}
+
+        <div class={styles.studentRegisterContainer}>
+          <div
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              styles.noSendDay
+            ]}>
+            <div class={styles.title3}></div>
+            <Form labelAlign="left" class={styles.registerForm}>
+              <Field
+                clearable={false}
+                label="联系方式(直接监护人)"
+                placeholder="请输入手机号码"
+                type="tel"
+                required
+                autocomplete="off"
+                inputAlign="right"
+                class={styles.username}
+                v-model={studentInfo.username}
+                border={false}
+                maxlength={11}>
+                {{
+                  label: () => (
+                    <div>
+                      联系方式
+                      <p class={styles.tips}>(直接监护人)</p>
+                    </div>
+                  )
+                }}
+              </Field>
+              <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
+                <div class={[styles.fieldTips]}>
+                  手机号是音乐数字课堂的唯一登录账户
                 </div>
-              )
-            }}
-          </Field>
-          <div class={[styles.fieldTipsGroup]}>
-            <div class={[styles.fieldTips]}>
-              手机号是音乐数字课堂的唯一登录账户
-            </div>
+              </div>
+
+              <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>
-          <Field
-            center
-            clearable={false}
-            label="验证码"
-            placeholder="请输入验证码"
-            autocomplete="off"
-            type="number"
-            v-model={studentInfo.password}
-            required
-            input-align="right"
-            maxlength={6}
-            onUpdate:modelValue={(val: any) => {
-              getUserInfos();
-            }}>
-            {{
-              button: () =>
-                forms.countDownStatus ? (
-                  <span
+          <div
+            class={[
+              styles.studentSection,
+              styles.studentSectionForm,
+              forms.giftVipDay <= 0 && styles.noSendDay
+            ]}>
+            <div class={styles.title1}></div>
+            <Form labelAlign="left" class={styles.registerForm}>
+              {/* 大于等于2,则可以切换学生 */}
+              {forms.studentList.length > 1 && (
+                <div
+                  class={[
+                    styles.selectStudentGroup,
+                    forms.showSelectStudent && styles.selectStudentGroupChecked
+                  ]}
+                  onClick={() => (forms.showSelectStudent = true)}>
+                  <i
                     class={[
-                      styles.codeText,
-                      !validatePhone.value ? styles.codeTextDisabled : ''
-                    ]}
-                    onClick={onSendCode}>
-                    获取验证码
+                      styles.studentIcon,
+                      !forms.studentItem.userId && styles.studentIconAdd
+                    ]}></i>
+                  <span>
+                    {forms.studentItem.userId
+                      ? forms.studentItem.nickname
+                      : '新增学生'}
                   </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}
-            label="学生姓名"
-            placeholder="请输入学生姓名"
-            autocomplete="off"
-            maxlength={14}
-            v-model={studentInfo.extra.nickname}
-            required
-            input-align="right"
-          />
-          <Field
-            clearable={false}
-            label="学生性别"
-            placeholder="请选择性别"
-            autocomplete="off"
-            required
-            input-align="right"
-            // v-model={studentInfo.extra.nickname}
-          >
-            {{
-              input: () => (
-                <RadioGroup
-                  checked-color="#ffcb75"
-                  v-model={studentInfo.extra.gender}
-                  direction="horizontal">
-                  <Tag
-                    size="large"
-                    type="primary"
-                    color={
-                      !(studentInfo.extra.gender === 1)
-                        ? '#F5F6FA'
-                        : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
-                    }
-                    textColor={
-                      !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
-                    }
-                    class={styles.radioSection}
-                    round>
-                    <Radio class={styles.radioItem} name={1}></Radio>男
-                  </Tag>
-                  <Tag
-                    size="large"
-                    type="primary"
-                    color={
-                      !(studentInfo.extra.gender === 0)
-                        ? '#F5F6FA'
-                        : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
-                    }
-                    textColor={
-                      !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
-                    }
-                    class={styles.radioSection}
-                    round>
-                    <Radio class={styles.radioItem} name={0}></Radio>女
-                  </Tag>
-                </RadioGroup>
-              )
-            }}
-          </Field>
-          <Field
-            clearable={false}
-            label="所在年级"
-            placeholder="请选择年级"
-            isLink
-            readonly
-            clickable={false}
-            modelValue={forms.gradeNumText}
-            onClick={() => (forms.gradeStatus = true)}
-            required
-            input-align="right"
-          />
-          <Field
-            clearable={false}
-            label="所在班级"
-            placeholder="请选择班级"
-            isLink
-            readonly
-            clickable={false}
-            modelValue={forms.currentClassText}
-            onClick={() => (forms.classStatus = true)}
-            required
-            input-align="right"
-          />
-          {studentInfo.extra.registerType === 'GIFT_VIP_DAY' &&
-          forms.giftVipDay &&
-          Number(forms.giftVipDay) > 0 ? (
-            <div class={styles.giftTips}>
-              <img src={vipGiftIcon} />
-              <span>
-                注册成功即可获得乐器AI学练工具<i>{forms.giftVipDay}</i>天有效期
-              </span>
-            </div>
-          ) : null}
-        </Form>
+                </div>
+              )}
+              <Field
+                clearable={false}
+                label="学生姓名"
+                placeholder="请输入学生姓名"
+                autocomplete="off"
+                maxlength={14}
+                v-model={studentInfo.extra.nickname}
+                required
+                input-align="right"
+              />
+              <Field
+                clearable={false}
+                label="学生性别"
+                placeholder="请选择性别"
+                autocomplete="off"
+                required
+                input-align="right"
+                // v-model={studentInfo.extra.nickname}
+              >
+                {{
+                  input: () => (
+                    <RadioGroup
+                      checked-color="#ffcb75"
+                      v-model={studentInfo.extra.gender}
+                      direction="horizontal">
+                      <Tag
+                        size="large"
+                        type="primary"
+                        color={
+                          !(studentInfo.extra.gender === 1)
+                            ? '#F5F6FA'
+                            : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
+                        }
+                        textColor={
+                          !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
+                        }
+                        class={styles.radioSection}
+                        round>
+                        <Radio class={styles.radioItem} name={1}></Radio>男
+                      </Tag>
+                      <Tag
+                        size="large"
+                        type="primary"
+                        color={
+                          !(studentInfo.extra.gender === 0)
+                            ? '#F5F6FA'
+                            : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
+                        }
+                        textColor={
+                          !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
+                        }
+                        class={styles.radioSection}
+                        round>
+                        <Radio class={styles.radioItem} name={0}></Radio>女
+                      </Tag>
+                    </RadioGroup>
+                  )
+                }}
+              </Field>
+              <Field
+                clearable={false}
+                label="所在年级"
+                placeholder="请选择年级"
+                isLink
+                readonly
+                clickable={false}
+                modelValue={forms.gradeNumText}
+                onClick={() => {
+                  forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
+                  forms.gradeStatus = true;
+                }}
+                required
+                input-align="right"
+              />
+              <Field
+                clearable={false}
+                label="所在班级"
+                placeholder="请选择班级"
+                isLink
+                readonly
+                clickable={false}
+                modelValue={forms.currentClassText}
+                onClick={() => {
+                  forms.classPopupIndex = [studentInfo.extra.currentClass];
+                  forms.classStatus = true;
+                }}
+                required
+                input-align="right"
+              />
+              {studentInfo.extra.registerType === 'GIFT_VIP_DAY' &&
+              forms.giftVipDay &&
+              Number(forms.giftVipDay) > 0 ? (
+                <div class={styles.giftTips}>
+                  <img src={vipGiftIcon} />
+                  <span>
+                    注册成功即可获得乐器AI学练工具<i>{forms.giftVipDay}</i>
+                    天有效期
+                  </span>
+                </div>
+              ) : null}
+            </Form>
+          </div>
+        </div>
+
         {/* <div class={styles.agreeColumn}>
           <img src={isAgree.value ? agreeYes : agreeNo} onClick={() => (isAgree.value = !isAgree.value)} />
           <p onClick={(e: MouseEvent) => {
@@ -486,16 +702,20 @@ export default defineComponent({
         /> */}
 
         <MSticky position="bottom">
-          <Button
-            type="primary"
-            class={styles.submitBtn}
-            color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
-            block
-            onClick={() => onSubmit()}
-            disabled={forms.loading}
-            loading={forms.loading}>
-            确认
-          </Button>
+          <div class={styles.paymentContainer}>
+            <div class={styles.traditionBtn}>
+              <Button
+                type="primary"
+                class={styles.submitBtn}
+                color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
+                round
+                onClick={() => onSubmit()}
+                disabled={forms.loading}
+                loading={forms.loading}>
+                提交注册
+              </Button>
+            </div>
+          </div>
         </MSticky>
 
         {forms.imgCodeStatus ? (
@@ -517,38 +737,54 @@ export default defineComponent({
           round
           safeAreaInsetBottom
           lazyRender={false}
-          class={'popupBottomSearch'}>
-          <Picker
-            showToolbar
-            columns={gradeList.value as any}
-            modelValue={[studentInfo.extra.currentGradeNum]}
-            onCancel={() => (forms.gradeStatus = false)}
-            onConfirm={(val: any) => {
-              const selectedOption = val.selectedOptions[0];
-              studentInfo.extra.currentGradeNum = selectedOption.value;
-              forms.gradeNumText = selectedOption.text;
-              forms.gradeStatus = false;
-            }}
-          />
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.gradePopupShow = true;
+          }}
+          onClosed={() => {
+            forms.gradePopupShow = false;
+          }}>
+          {forms.gradePopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.gradePopupIndex}
+              columns={gradeList.value as any}
+              onCancel={() => (forms.gradeStatus = false)}
+              onConfirm={(val: any) => {
+                const selectedOption = val.selectedOptions[0];
+                studentInfo.extra.currentGradeNum = selectedOption.value;
+                forms.gradeNumText = selectedOption.text;
+                forms.gradeStatus = false;
+              }}
+            />
+          )}
         </Popup>
         {/* 班级 */}
         <Popup
           v-model:show={forms.classStatus}
           position="bottom"
           round
-          class={'popupBottomSearch'}>
-          <Picker
-            showToolbar
-            columns={classList}
-            modelValue={[studentInfo.extra.currentClass]}
-            onCancel={() => (forms.classStatus = false)}
-            onConfirm={(val: any) => {
-              const selectedOption = val.selectedOptions[0];
-              studentInfo.extra.currentClass = selectedOption.value;
-              forms.currentClassText = selectedOption.text;
-              forms.classStatus = false;
-            }}
-          />
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.classPopupShow = true;
+          }}
+          onClosed={() => {
+            forms.classPopupShow = false;
+          }}>
+          {forms.classPopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.classPopupIndex}
+              columns={classList}
+              onCancel={() => (forms.classStatus = false)}
+              onConfirm={(val: any) => {
+                const selectedOption = val.selectedOptions[0];
+                studentInfo.extra.currentClass = selectedOption.value;
+                forms.currentClassText = selectedOption.text;
+                forms.classStatus = false;
+              }}
+            />
+          )}
         </Popup>
         {/* 是否在微信中打开 */}
         <OWxTip
@@ -570,17 +806,97 @@ export default defineComponent({
         />
 
         <MMessageTip
-          show={forms.showOtherSchool}
-          messageAlign="left"
-          message={forms.showOtherMessage}
-          showCancelButton
-          onCancel={() => (forms.showOtherSchool = false)}
+          show={otherParams.showOtherSchool}
+          messageAlign={otherParams.messageAlign}
+          message={otherParams.showOtherMessage}
+          showCancelButton={otherParams.showCancelButton}
+          cancelButtonColor={otherParams.cancelButtonColor}
+          cancelButtonText={otherParams.cancelButtonText}
+          confirmButtonColor={otherParams.confirmButtonColor}
+          confirmButtonText={otherParams.confirmButtonText}
+          onCancel={() => {
+            otherParams.showOtherSchool = false;
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'create'; // 新建
+              changeTipStatus(false, false);
+              onSubmit();
+            } else if (otherParams.otherType === 'limit') {
+            }
+          }}
           onConfirm={() => {
-            forms.showOtherSchool = false;
-            // 直接注册
-            onSubmit(true);
+            otherParams.showOtherSchool = false;
+            // 名字
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'update'; // 修改
+              changeTipStatus(false, false);
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'change') {
+              // 学校更换
+              forms.isChangeSchool = true;
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'limit') {
+              // 人数超限制
+              changeTipStatus(
+                forms.isRegister === 'create' && !forms.studentItem.userId
+                  ? false
+                  : true,
+                false
+              );
+            }
           }}
         />
+
+        <Popup
+          v-model:show={forms.showSelectStudent}
+          round
+          position="bottom"
+          safeAreaInsetBottom
+          closeable>
+          <SelectStudent
+            studentItem={forms.studentItem}
+            list={forms.studentList}
+            onClose={() => (forms.showSelectStudent = false)}
+            onConfirm={(val: any) => {
+              forms.studentItem = val;
+              if (val.userId) {
+                const firstStudent = val;
+                studentInfo.extra.nickname = firstStudent.nickname;
+                const tempGrade: any = gradeList.value[0] || [];
+                tempGrade?.forEach((i: any) => {
+                  if (i.value === firstStudent.currentGradeNum) {
+                    // forms.instrumentCode = i.instrumentCode;
+                    forms.gradeNumText = i.text;
+                    studentInfo.extra.currentGradeNum =
+                      firstStudent.currentGradeNum;
+                    // if (forms.schoolInstrumentSetType === 'CLASS') {
+                    //   forms.classList = i.classList;
+                    // }
+                  }
+                });
+                classList.forEach((i: any) => {
+                  if (i.value === firstStudent.currentClass) {
+                    forms.currentClassText = i.text;
+                    studentInfo.extra.currentClass = firstStudent.currentClass;
+                  }
+                });
+                studentInfo.extra.gender = firstStudent.gender;
+                forms.isRegister = 'update';
+                changeTipStatus(true, false);
+              } else {
+                forms.isRegister = 'create';
+                changeTipStatus(false, false);
+                studentInfo.extra.nickname = '';
+                studentInfo.extra.currentGradeNum = '';
+                studentInfo.extra.currentClass = '';
+                studentInfo.extra.gender = 1;
+                forms.currentClassText = '';
+                forms.gradeNumText = '';
+              }
+            }}
+          />
+        </Popup>
       </div>
     );
   }