修改逻辑

src/helpers/request.ts

@@ -85,7 +85,7 @@ request.interceptors.response.use(
     }
     const data = await res.clone().json();
     // 999 为特殊code码
-    const otherCode = [999, 5435, 5436, 5437, 5439, 5442, 5443];
+    const otherCode = [999, 5435, 5436, 5437, 5439, 5442, 5443, 5408, 5427];
     if (
       data.code !== 200 &&
       data.errCode !== 0 &&

src/router/router-root.ts

@@ -252,13 +252,20 @@ export default [
     }
   },
   {
-    path: '/activationRecord',
+    path: '/activationRegistration',
     component: () => import('@/views/activation-code/instrument-registration'),
     meta: {
       title: '乐器登记'
     }
   },
   {
+    path: '/activationRegistrationDetail',
+    component: () => import('@/views/activation-code/instrument-registration/detail'),
+    meta: {
+      title: '乐器登记'
+    }
+  },
+  {
     path: '/activationRegister',
     component: () => import('@/views/activation-code/activation-register/index'),
     meta: {

src/views/activation-code/activation-register/index.module.less

@@ -12,6 +12,13 @@
     background: url('./images/banner-bg.png') no-repeat top center;
     background-size: contain;
   }
+
+
+  :global {
+    .van-picker__loading {
+      top: calc(var(--van-picker-toolbar-height) + 20px + var(--van-search-input-height)) !important;
+    }
+  }
 }
 
 .paymentContainer {

src/views/activation-code/activation-register/index.tsx

@@ -66,6 +66,7 @@ import MMessageTip from '@/components/m-message-tip';
 import SelectStudent from '@/views/student-register/modal/select-student';
 import { api_sysAreaQueryAllProvince } from '@/views/school-register/api';
 import CodeDialog from '../modal/code-dialog';
+import MSearch from '@/components/m-search';
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -141,6 +142,14 @@ export default defineComponent({
       isTipRegister: false, // 是否显示名字不一致 - 默认显示
       isChangeSchool: false, // 是否切换学校
 
+      schoolStatus: false,
+      schoolPopupShow: false,
+      schoolLoading: false,
+      schoolAreaList: [] as any,
+      provinceCode: null,
+      cityCode: null,
+      regionCode: null,
+
       showResultPopup: false,
       reslutPopupType: '' as any,
       resultPopupContent: '',
@@ -501,10 +510,6 @@ export default defineComponent({
               '<p style="color: #F44541">报名已截止，感谢您的参与</p>'; //result.message;
             forms.showButton = false;
           } else if (registerResult.code === 5442) {
-            //             @FieldConfig(code = 5442, msg = "该激活码已过期")
-            // E_ACTIVATION_CODE_INVALID,
-            // @FieldConfig(code = 5443, msg = "该激活码权益已被使用")
-            // E_ACTIVATION_CODE_ACTIVE,
             forms.showResultPopup = true;
             forms.reslutPopupType = 'EXPIRED';
             forms.resultPopupContent = registerResult.message;
@@ -544,14 +549,17 @@ export default defineComponent({
           const tempArea = [] as any;
           if (firstStudent.provinceName) {
             tempArea.push(firstStudent.provinceName);
+            forms.provinceCode = firstStudent.provinceCode;
           }
           if (firstStudent.cityName) {
             tempArea.push(firstStudent.cityName);
+            forms.cityCode = firstStudent.cityCode;
           }
           if (firstStudent.regionName) {
             tempArea.push(firstStudent.regionName);
+            forms.regionCode = firstStudent.regionCode;
           }
-          forms.areaName = tempArea.join('-');
+          forms.areaName = tempArea.join(' ');
           forms.schoolName = firstStudent.schoolName;
           forms.schoolId = firstStudent.schoolId;
           forms.schoolAreaId = firstStudent.schoolAreaId;
@@ -637,6 +645,24 @@ export default defineComponent({
         }
       });
     };
+
+    const getSchoolAreaList = async (name?: string) => {
+      forms.schoolLoading = true;
+      try {
+        const { data } = await request.post('/edu-app/schoolArea/list', {
+          data: {
+            name,
+            provinceCode: forms.provinceCode,
+            cityCode: forms.cityCode,
+            regionCode: forms.regionCode
+          }
+        });
+        forms.schoolAreaList = data;
+      } catch {
+        //
+      }
+      forms.schoolLoading = false;
+    };
     onMounted(async () => {
       getAreaList();
       try {
@@ -820,7 +846,15 @@ export default defineComponent({
                 clickable={false}
                 modelValue={forms.schoolName}
                 onClick={() => {
-                  if (forms.isRegister !== 'update') forms.gradeStatus = true;
+                  if (forms.isRegister === 'update') return;
+
+                  if (!forms.areaName) {
+                    showToast('请选择地区');
+                    return;
+                  }
+
+                  forms.schoolStatus = true;
+                  // forms.gradeStatus = true;
                   // forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
                 }}
               />
@@ -913,6 +947,54 @@ export default defineComponent({
           />
         ) : null}
 
+        {/* 互通学校 */}
+        <Popup
+          v-model:show={forms.schoolStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          lazyRender={false}
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.schoolPopupShow = true;
+          }}
+          onClosed={() => {
+            forms.schoolPopupShow = false;
+          }}>
+          {forms.schoolPopupShow && (
+            <div>
+              <Picker
+                showToolbar
+                // v-model={forms.gradePopupIndex}
+                columns={forms.schoolAreaList}
+                loading={forms.schoolLoading}
+                columnsFieldNames={{
+                  text: 'name',
+                  value: 'id'
+                }}
+                onCancel={() => (forms.schoolStatus = false)}
+                onConfirm={(val: any) => {
+                  const selectedOption = val.selectedOptions[0];
+                  forms.schoolId = null;
+                  forms.schoolAreaId = selectedOption.id;
+                  forms.schoolName = selectedOption.name;
+                  forms.schoolStatus = false;
+                }}>
+                {{
+                  'columns-top': (
+                    <MSearch
+                      placeholder="请输入学校名称"
+                      onSearch={(val: any) => {
+                        getSchoolAreaList(val);
+                      }}
+                    />
+                  )
+                }}
+              </Picker>
+            </div>
+          )}
+        </Popup>
+
         {/* 年级 */}
         <Popup
           v-model:show={forms.gradeStatus}
@@ -1072,14 +1154,17 @@ export default defineComponent({
                 const tempArea = [] as any;
                 if (firstStudent.provinceName) {
                   tempArea.push(firstStudent.provinceName);
+                  forms.provinceCode = firstStudent.provinceCode;
                 }
                 if (firstStudent.cityName) {
                   tempArea.push(firstStudent.cityName);
+                  forms.cityCode = firstStudent.cityCode;
                 }
                 if (firstStudent.regionName) {
                   tempArea.push(firstStudent.regionName);
+                  forms.regionCode = firstStudent.regionCode;
                 }
-                forms.areaName = tempArea.join('-');
+                forms.areaName = tempArea.join(' ');
 
                 forms.schoolName = firstStudent.schoolName;
                 forms.schoolId = firstStudent.schoolId;
@@ -1154,16 +1239,21 @@ export default defineComponent({
             areaList={forms.areaList}
             onCancel={() => (forms.showPicker = false)}
             onConfirm={({ selectedOptions }) => {
-              // forms.provinceCode = selectedOptions[0].value;
-              // forms.cityCode = selectedOptions[1].value;
-              // forms.regionCode = selectedOptions[2].value;
+              forms.provinceCode = selectedOptions[0].value;
+              forms.cityCode = selectedOptions[1].value;
+              forms.regionCode = selectedOptions[2].value;
               // data.cityName = selectedOptions
               //   .map((item: any) => item.text)
-              //   .join('-');
+              //   .join(' ');
               forms.areaName = selectedOptions
                 .map((item: any) => item.text)
-                .join('-');
+                .join(' ');
+
               forms.showPicker = false;
+              forms.schoolAreaId = null;
+              forms.schoolName = '';
+
+              getSchoolAreaList();
             }}
           />
         </Popup>
@@ -1200,10 +1290,12 @@ export default defineComponent({
                 border={false}
                 title="所在班级"
                 value={forms.currentClassText}></Cell>
-              <Cell
-                border={false}
-                title="互通码"
-                value={forms.activationCode}></Cell>
+              {route.query.code && (
+                <Cell
+                  border={false}
+                  title="互通码"
+                  value={forms.activationCode}></Cell>
+              )}
             </div>
             <div class={styles.studentBtnGroup}>
               <Button

src/views/activation-code/index.tsx

@@ -4,17 +4,56 @@ import styles from './index.module.less';
 import MSticky from '@/components/m-sticky';
 import MHeader from '@/components/m-header';
 import { useRouter } from 'vue-router';
-import { Button, Field, Popup } from 'vant';
+import { Button, Field, Popup, showToast } from 'vant';
 import iconKey from './images/icon-key.png';
 import CodeDialog from './modal/code-dialog';
+import request from '@/helpers/request';
 
 export default defineComponent({
   name: 'activationCode',
   setup() {
     const router = useRouter();
     const state = reactive({
-      showPopup: false
+      showPopup: false,
+      reslutPopupType: '',
+      resultPopupContent: '',
+      loading: false,
+      activeCodeRecordCode: null as any
     });
+
+    const onSubmit = async () => {
+      if (!state.activeCodeRecordCode) {
+        showToast('请输入互通码');
+        return;
+      }
+      state.loading = true;
+      try {
+        const res = await request.post(
+          '/edu-app/activationCodeRecord/useActiveCode',
+          {
+            data: {
+              activeCodeRecordCode: state.activeCodeRecordCode
+            }
+          }
+        );
+        if (res.code !== 200) {
+          if (res.code === 5442) {
+            state.showPopup = true;
+            state.reslutPopupType = 'EXPIRED';
+            state.resultPopupContent = res.message;
+          } else if (res.code === 5443) {
+            state.showPopup = true;
+            state.reslutPopupType = 'CANCELLED';
+            state.resultPopupContent = res.message;
+          }
+        } else {
+          state.showPopup = true;
+          state.reslutPopupType = 'ACTIVATED';
+          state.resultPopupContent = res.message;
+        }
+      } catch {}
+      state.loading = false;
+    };
     return () => (
       <div
         class={[
@@ -67,6 +106,7 @@ export default defineComponent({
                 <Field
                   class={styles.input}
                   leftIcon={iconKey}
+                  v-model={state.activeCodeRecordCode}
                   placeholder="请输入您的互通码"
                 />
 
@@ -74,6 +114,11 @@ export default defineComponent({
                   <Button
                     round
                     block
+                    loading={state.loading}
+                    disabled={state.loading}
+                    onClick={() => {
+                      onSubmit();
+                    }}
                     color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)">
                     激活
                   </Button>
@@ -110,10 +155,24 @@ export default defineComponent({
             background: 'transparent',
             overflow: 'visible !important'
           }}>
-          <CodeDialog type="INFO">
-            <p>
-              您已成功激活一年乐器AI学练工具，有效期<span>2024-07-17</span>
-            </p>
+          <CodeDialog
+            type={state.reslutPopupType as any}
+            onConfirm={() => {
+              state.showPopup = false;
+            }}>
+            {state.reslutPopupType === 'ACTIVATED' && (
+              <p>
+                您已成功激活一年乐器AI学练工具，有效期
+                <span style={{ color: '#2B85FF' }}>2024-07-17</span>
+              </p>
+            )}
+
+            {state.reslutPopupType === 'CANCELLED' && (
+              <p style={{ textAlign: 'center' }}>{state.resultPopupContent}</p>
+            )}
+            {state.reslutPopupType === 'EXPIRED' && (
+              <p style={{ textAlign: 'center' }}>{state.resultPopupContent}</p>
+            )}
           </CodeDialog>
         </Popup>
       </div>

src/views/activation-code/instrument-registration/detail.module.less

@@ -0,0 +1,246 @@
+.student-register {
+  min-height: 100vh;
+  // background: #FFF4E2;
+  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
+  overflow: hidden;
+  position: relative;
+
+  --k-font-primary: #007AFE;
+
+  .studentRegisterContainer {
+    padding-top: 180px;
+    background: url('./images/banner1.png') no-repeat top center;
+    background-size: contain;
+  }
+}
+
+.paymentContainer {
+  font-size: 14px;
+  padding: 12px 25px calc(12px + env(safe-area-inset-bottom)) 25px;
+  background: #FFFFFF;
+  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  border-radius: 18px 18px 0px 0px;
+
+  :global {
+    .van-button {
+      height: 40px;
+      line-height: 40px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      font-size: 16px;
+      color: #fff;
+      font-weight: 500;
+      border: 0;
+    }
+  }
+
+}
+
+.studentSection {
+  margin: 0 14px 12px;
+  padding: 0;
+  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
+  border-radius: 16px;
+  border: 2px solid #FFFFFF;
+
+}
+
+.registerForm {
+  border-radius: 18px;
+  // margin: 0 12px;
+  overflow: hidden;
+
+  .selectStudentGroup {
+    margin-left: 10px;
+    font-size: 14px;
+    color: #1189FF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.selectStudentGroupChecked {
+      span::after {
+        transform: rotate(180deg);
+      }
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        display: inline-block;
+        content: '';
+        width: 9px;
+        height: 5px;
+        margin-left: 4px;
+        background: url('../../student-register/images/new/icon-n-6.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  :global {
+    .van-cell {
+      background-color: transparent;
+    }
+  }
+
+  :global {
+    .van-cell {
+      padding: 14px 18px;
+    }
+
+
+    .van-field__label {
+      font-size: 16px;
+      color: #666666;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+    }
+
+    .van-field__control {
+      font-size: 16px;
+      color: #131415;
+    }
+  }
+
+  .codeText {
+    color: #1189FF;
+    font-size: 14px;
+
+    // &.codeTextDisabled {
+    //   color: #ccc;
+    // }
+  }
+
+}
+
+.radioSection {
+  position: relative;
+  min-width: 32px;
+  justify-content: center;
+  // padding-left: 19px;
+  // padding-right: 19px;
+  padding: 5px 19px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+}
+
+.radioItem {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
+.radioSection+.radioSection {
+  margin-left: 12px;
+}
+
+
+.selectStudentPopup {
+  :global {
+    .van-popup__close-icon {
+      color: #767C7F;
+    }
+  }
+}
+
+
+.studentInfo {
+  :global {
+    .van-cell {
+      padding: 10px 0;
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+
+    .van-cell__title {
+
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+
+      span {
+        color: #666666 !important;
+      }
+    }
+
+    .van-cell__value {
+      font-size: 14px;
+      color: #131415;
+      flex: 1 auto;
+      line-height: 20px;
+
+      span {
+        color: #131415 !important;
+      }
+    }
+  }
+
+
+}
+
+.studentBtnGroup {
+  display: flex;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 5px;
+
+  :global {
+    .van-button {
+      flex: 1;
+
+      &+.van-button {
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+.popupContainer {
+  width: 295px;
+
+  border-radius: 20px;
+  padding: 13px 20px 20px;
+  background: url('./images/top_bg.png') no-repeat top;
+  background-size: contain;
+  background-color: #FFFFFF;
+
+  .title {
+    width: 215px;
+    height: 65px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  .content {
+    font-weight: 400;
+    font-size: 15px;
+    color: #666666;
+    line-height: 23px;
+    padding: 10px 0 20px;
+
+    span {
+      font-weight: 600;
+      color: #2B85FF;
+    }
+  }
+
+  .pBtnGroup {
+    padding: 0 50px;
+
+
+  }
+}

src/views/activation-code/instrument-registration/detail.tsx

@@ -0,0 +1,323 @@
+import {
+  Image,
+  Cell,
+  Tag,
+  Button,
+  Popup,
+  showToast,
+  Form,
+  Field,
+  CountDown,
+  RadioGroup,
+  Radio,
+  Picker,
+  closeToast,
+  Popover,
+  Area,
+  CellGroup,
+  showConfirmDialog
+} from 'vant';
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref
+} from 'vue';
+import styles from './detail.module.less';
+import MSticky from '@/components/m-sticky';
+// import MVideo from '@/components/m-video';
+import { useRoute, useRouter } from 'vue-router';
+import request from '@/helpers/request';
+import loginSuccess from './images/login-success.png';
+
+import SelectStudent from '@/views/student-register/modal/select-student';
+
+const classList: any = [];
+for (let i = 1; i <= 40; i++) {
+  classList.push({ text: i + '班', value: i });
+}
+
+const GRADE_ENUM = {
+  '1': '一年级',
+  '2': '二年级',
+  '3': '三年级',
+  '4': '四年级',
+  '5': '五年级',
+  '6': '六年级',
+  '7': '七年级',
+  '8': '八年级',
+  '9': '九年级'
+} as any;
+const getGradeList = (gradeYear?: string, instrumentCode?: string) => {
+  let tempList: any = [];
+  const five = [
+    { text: '一年级', value: 1, instrumentCode },
+    { text: '二年级', value: 2, instrumentCode },
+    { text: '三年级', value: 3, instrumentCode },
+    { text: '四年级', value: 4, instrumentCode },
+    { text: '五年级', value: 5, instrumentCode }
+  ];
+  const one = [{ text: '六年级', value: 6, instrumentCode }];
+  const three = [
+    { text: '七年级', value: 7, instrumentCode },
+    { text: '八年级', value: 8, instrumentCode },
+    { text: '九年级', value: 9, instrumentCode }
+  ];
+  if (gradeYear === 'FIVE_YEAR_SYSTEM') {
+    tempList.push(...[...five]);
+  } else if (gradeYear === 'SIX_YEAR_SYSTEM') {
+    tempList.push(...[...five, ...one]);
+  } else if (gradeYear === 'THREE_YEAR_SYSTEM') {
+    tempList.push(...[...three]);
+  } else if (gradeYear === 'FORE_YEAR_SYSTEM') {
+    tempList.push(...[...one, ...three]);
+  } else {
+    tempList.push(...[...five, ...one, ...three]);
+  }
+  return tempList;
+};
+
+export default defineComponent({
+  name: 'activation-register',
+  setup() {
+    const route = useRoute();
+    const forms = reactive({
+      activationCodeRecordId: route.query.activationCodeRecordId,
+      statusShow: false,
+      schoolId: null as any,
+      schoolAreaId: null, // 学校区域编号
+      activationCode: route.query.code as any, // 互通码
+      paymentType: '', // 支付类型
+      paymentChannel: '',
+      multi_user_limit: 1, // 限制注册学生数量
+      // popupShow: false,
+      registerDetails: {} as any,
+      details: [] as any[],
+      // schoolType: '', // 学校类型
+      gradeYear: '', // 学制
+      schoolInstrumentSetType: null as any,
+      submitLoading: false,
+      showSelectStudent: false, // 选择学生
+      studentList: [], // 手机号关联学生列表
+      studentItem: {} as any // 选择的学生
+      // bugGoods: false, // 是否购买AI
+    });
+
+    const studentInfo = reactive({
+      autoRegister: true,
+      multiUser: true, // 是否为多用户
+      client_id: 'cooleshow-student',
+      client_secret: 'cooleshow-student',
+      extra: {
+        nickname: '',
+        currentGradeNum: '' as any,
+        currentClass: '' as any,
+        gender: 1 as any,
+        registerType: null as any, // 报名类型
+        giftVipDay: 0 // 赠送会员天数
+      },
+      grant_type: 'password',
+      loginType: 'SMS',
+      password: '',
+      username: ''
+    });
+
+    const getDetail = async () => {
+      try {
+        const { data } = await request.post(
+          '/edu-app/open/instrumentRegister/instrumentUseRegister',
+          {
+            requestType: 'form',
+            data: {
+              activationCodeRecordId: forms.activationCodeRecordId
+            }
+          }
+        );
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getDetail();
+    });
+    return () => (
+      <div class={styles['student-register']}>
+        <div class={styles.studentRegisterContainer}>
+          <div class={[styles.studentSection]}>
+            <Form labelAlign="left" class={styles.registerForm}>
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="学生姓名"
+                placeholder="请输入学生姓名"
+                autocomplete="off"
+                readonly
+                maxlength={14}
+                v-model={studentInfo.extra.nickname}>
+                {{
+                  extra: () =>
+                    forms.studentList.length > 1 && (
+                      <div
+                        class={[
+                          styles.selectStudentGroup,
+                          forms.showSelectStudent &&
+                            styles.selectStudentGroupChecked
+                        ]}
+                        onClick={() => (forms.showSelectStudent = true)}>
+                        <span>切换学生</span>
+                      </div>
+                    )
+                }}
+              </Field>
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="学生性别"
+                placeholder="请选择性别"
+                autocomplete="off">
+                {{
+                  input: () => (
+                    <RadioGroup
+                      checked-color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
+                      v-model={studentInfo.extra.gender}
+                      direction="horizontal"
+                      disabled>
+                      <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}>
+                        <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}>
+                        <Radio class={styles.radioItem} name={0}></Radio>女
+                      </Tag>
+                    </RadioGroup>
+                  )
+                }}
+              </Field>
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="所在地区"
+                placeholder="请选择地区"
+                readonly
+                clickable={false}
+                // modelValue={forms.gradeNumText}
+                // onClick={() => {
+                //   if (forms.isRegister !== 'update') {
+                //     forms.gradePopupIndex = [studentInfo.extra.currentGradeNum];
+                //     forms.gradeStatus = true;
+                //   }
+                // }}
+              />
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="互通学校"
+                placeholder="请选择互通学校"
+                readonly
+                clickable={false}
+                // modelValue={forms.gradeNumText}
+              />
+              <Field
+                clearable={false}
+                required
+                inputAlign="right"
+                label="所在班级"
+                placeholder="请选择班级"
+                readonly
+                clickable={false}
+                // modelValue={forms.currentClassText}
+              />
+            </Form>
+          </div>
+
+          <MSticky position="bottom">
+            <div class={styles.paymentContainer}>
+              <Button
+                onClick={() => {
+                  // onSubmit();
+                  // if (checkForm() || checkSubmit()) {
+                  //   forms.submitLoading = false;
+                  //   return;
+                  // }
+                  // forms.showConfirmPopup = true;
+                }}
+                round
+                block
+                disabled={forms.submitLoading}
+                loading={forms.submitLoading}>
+                登记
+              </Button>
+            </div>
+          </MSticky>
+        </div>
+
+        <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) => {}}
+          />
+        </Popup>
+
+        <Popup
+          show={forms.statusShow}
+          style={{
+            background: 'transparent',
+            overflow: 'visible !important'
+          }}>
+          <div class={styles.popupContainer}>
+            <img class={styles.title} src={loginSuccess} />
+
+            <div class={styles.content}>
+              <span>李木子</span>已登记成功，乐器将在开课时发至学生
+            </div>
+            <div class={styles.pBtnGroup}>
+              <Button
+                round
+                block
+                onClick={() => (forms.statusShow = false)}
+                color="linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)">
+                我知道了
+              </Button>
+            </div>
+          </div>
+        </Popup>
+      </div>
+    );
+  }
+});

src/views/activation-code/instrument-registration/index.module.less

@@ -0,0 +1,95 @@
+.registrationContainer {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
+
+  .registration {
+    min-height: 100vh;
+    background: url('./images/banner.png') no-repeat top;
+    background-size: contain;
+    overflow: hidden;
+  }
+
+
+  .inputGroup {
+    margin-top: 379px;
+    position: relative;
+    padding: 0 18px;
+
+
+    .input {
+      background: rgba(242, 242, 242, .56);
+      border-radius: 29px;
+      --van-cell-line-height: 24px;
+      --van-field-icon-size: 24px;
+      --van-padding-base: 10px;
+      padding: 8px;
+      font-size: 14px;
+      color: #AAAAAA;
+
+      :global {
+        .van-field__control {
+          font-size: 14px;
+          // color: #AAAAAA;
+        }
+      }
+    }
+
+    .btnGroup {
+      margin: 30px 73px 0;
+      --van-button-default-height: 52px;
+
+      :global {
+        .van-button--disabled::before {
+          opacity: 0;
+        }
+
+        .van-button__text {
+          p {
+            font-weight: 500;
+            font-size: 16px;
+            color: #FFFFFF;
+            line-height: 22px;
+          }
+
+          span {
+            font-weight: 400;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.8);
+            line-height: 17px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.popupContainer {
+  width: 295px;
+
+  border-radius: 20px;
+  padding: 13px 20px 20px;
+  background: url('./images/top_bg.png') no-repeat top;
+  background-size: contain;
+  background-color: #FFFFFF;
+
+  .title {
+    width: 215px;
+    height: 65px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  .content {
+    font-weight: 400;
+    font-size: 15px;
+    color: #666666;
+    line-height: 23px;
+    padding: 10px 0 20px
+  }
+
+  .pBtnGroup {
+    padding: 0 50px;
+
+
+  }
+}

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

@@ -1,8 +1,96 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import { Button, Field, Popup, showToast } from 'vant';
+import iconKey from './images/icon-phone.png';
+import loginError from './images/login-error.png';
+import request from '@/helpers/request';
 
 export default defineComponent({
   name: 'instrument-registration',
   setup() {
-    return () => <>乐器登记</>;
+    const state = reactive({
+      statusShow: false,
+      mobile: '',
+      loading: false
+    });
+    const onSubmit = async () => {
+      if (!state.mobile) {
+        showToast('请输入手机号');
+        return;
+      }
+      state.loading = true;
+      try {
+        const res = await request.post(
+          '/edu-app/open/instrumentRegister/getStudentActivationRecord',
+          {
+            requestType: 'form',
+            data: {
+              mobile: state.mobile
+            }
+          }
+        );
+
+        if (res.code !== 200) {
+          state.statusShow = true;
+        }
+        console.log(res);
+      } catch {
+        //
+      }
+      state.loading = false;
+    };
+
+    return () => (
+      <div class={styles.registrationContainer}>
+        <div class={styles.registration}>
+          <div class={styles.inputGroup}>
+            <Field
+              class={styles.input}
+              leftIcon={iconKey}
+              v-model={state.mobile}
+              placeholder="请输入【音乐数字课堂】激活成功时的手机号"
+            />
+
+            <div class={styles.btnGroup}>
+              <Button
+                block
+                round
+                disabled={state.loading}
+                onClick={onSubmit}
+                color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)">
+                <p>{state.loading ? '正在进行核验' : '互通检测'}</p>
+                <span>
+                  {state.loading ? '请稍后······' : '多子女需多次核验'}
+                </span>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <Popup
+          show={state.statusShow}
+          style={{
+            background: 'transparent',
+            overflow: 'visible !important'
+          }}>
+          <div class={styles.popupContainer}>
+            <img class={styles.title} src={loginError} />
+
+            <div class={styles.content}>
+              请输入【音乐数字课堂】激活成功时的手机号
+            </div>
+            <div class={styles.pBtnGroup}>
+              <Button
+                round
+                block
+                onClick={() => (state.statusShow = false)}
+                color="linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)">
+                我知道了
+              </Button>
+            </div>
+          </div>
+        </Popup>
+      </div>
+    );
   }
 });

src/views/student-register/modal/select-student/index.module.less

@@ -25,6 +25,16 @@
         flex-shrink: 0;
       }
     }
+
+    .tag {
+      padding: 3px 4px;
+      font-weight: 500;
+      font-size: 12px;
+      color: #FFFFFF;
+      line-height: 17px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      border-radius: 0 10px 0 6px;
+    }
   }
 
   .cellSelected {

src/views/student-register/modal/select-student/index.tsx

@@ -14,6 +14,10 @@ export default defineComponent({
     studentItem: {
       type: Object,
       default: () => ({})
+    },
+    showAdd: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['close', 'confirm'],
@@ -73,23 +77,27 @@ export default defineComponent({
                   )}
                 </div>
               </div>
+
+              {!props.showAdd && <span class={styles.tag}>已登记</span>}
             </div>
           ))}
         </RadioGroup>
-        <div class={styles.addStudentBtn}>
-          <Button
-            block
-            color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
-            onClick={() => {
-              //
-              // radioChecked.value = null;
-              emit('confirm', {});
-              // emit('close');
-            }}>
-            <i class={styles.iconAdd}></i>
-            <span>新增学生</span>
-          </Button>
-        </div>
+        {props.showAdd && (
+          <div class={styles.addStudentBtn}>
+            <Button
+              block
+              color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
+              onClick={() => {
+                //
+                // radioChecked.value = null;
+                emit('confirm', {});
+                // emit('close');
+              }}>
+              <i class={styles.iconAdd}></i>
+              <span>新增学生</span>
+            </Button>
+          </div>
+        )}
       </div>
     );
   }