修改

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

@@ -25,7 +25,7 @@
   &::before {
     content: '';
     position: absolute;
-    top: 2px;
+    top: 0;
     left: 13px;
     display: inline-block;
     width: 32px;
@@ -155,7 +155,7 @@
 .studentSection {
   margin: 0 14px 12px;
   padding: 12px 15px;
-  background: linear-gradient(180deg, rgba(219, 246, 253, 0.9) 0%, rgba(255, 255, 255, 0.9) 30%);
+  background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 30%);
   border-radius: 16px;
   border: 2px solid #FFFFFF;
 
@@ -224,30 +224,37 @@
     align-items: center;
     justify-content: center;
     flex: 1;
-    background: #EBF3F8;
-    border-radius: 20px 4px 4px 20px;
+    // background: #EBF3F8;
+    // border-radius: 20px 4px 4px 20px;
     height: 36px;
     line-height: 36px;
     font-size: 16px;
     color: #728088;
-    transform: skewX(-15deg);
-
+    // transform: skewX(-15deg);
+    background: url('./images/new/btn-left-default.png');
+    background-size: contain;
 
 
 
     .goodsInner {
-      transform: skewX(15deg);
+      // transform: skewX(15deg);
       // background: #EBF3F8;
       width: 100%;
       text-align: center;
-      border-radius: 20px;
     }
 
     &.checked {
-      background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
+      // background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
+      background: url('./images/new/btn-left-active.png') !important;
+      background-size: contain !important;
       color: #fff;
       font-weight: 600;
 
+      // &+.goodsItem {
+      //   background: url('./images/new/btn-right-active.png');
+      //   background-size: contain;
+      // }
+
       .goodsInner {
         // background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
       }
@@ -265,10 +272,11 @@
     }
 
     &+.goodsItem {
-      margin-left: 8px;
-      border-radius: 4px 20px 20px 4px;
-      transform: skewX(-15deg);
-
+      // margin-left: 8px;
+      // border-radius: 4px 20px 20px 4px;
+      // transform: skewX(-15deg);
+      background: url('./images/new/btn-right-default.png');
+      background-size: contain;
       // &.checked {
       //   background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
       // }

src/views/student-register/index.tsx

@@ -1,13 +1,9 @@
 import {
   Image,
   Cell,
-  CellGroup,
   Tag,
   Button,
-  Stepper,
-  Icon,
   Popup,
-  showConfirmDialog,
   showToast,
   Form,
   Field,
@@ -161,6 +157,7 @@ export default defineComponent({
       code: null as any,
       intervalFnRef: null as any, // 页面订时器
       registerExpireTime: null as any, // 结束时间
+      instrumentCode: null as any, // 乐器编码
       activeOverTime: 0, // 活动结束时间
       activeOverStatus: true // 活动是否结束 默认已结束
     });
@@ -297,7 +294,8 @@ export default defineComponent({
             forms.gradeList.push({
               text: GRADE_ENUM[item.gradeNum],
               value: item.gradeNum,
-              instrumentId: item.instrumentId
+              instrumentId: item.instrumentId,
+              instrumentCode: item.instrumentCode
             });
           });
           forms.classList = classList;
@@ -316,12 +314,14 @@ export default defineComponent({
               text: GRADE_ENUM[temp],
               value: temp,
               instrumentId: '',
+              instrumentCode: '',
               instrumentName: '',
               classList: [] as any
             };
             schoolInstrumentList.forEach((item: any) => {
               if (temp === item.gradeNum) {
                 list.instrumentId = item.instrumentId;
+                list.instrumentCode = item.instrumentCode;
                 list.instrumentName = item.instrumentName;
                 list.classList.push({
                   text: item.classNum + '班',
@@ -523,8 +523,10 @@ export default defineComponent({
 
           if (!studentInfo.extra.currentGradeNum) {
             const tempGrade: any = forms.gradeList || [];
+            console.log(tempGrade, 'tempGrade');
             tempGrade?.forEach((i: any) => {
               if (i.value === data.currentGradeNum) {
+                forms.instrumentId = i.instrumentId;
                 forms.gradeNumText = i.text;
                 studentInfo.extra.currentGradeNum = data.currentGradeNum;
               }
@@ -1128,7 +1130,13 @@ export default defineComponent({
                   styles.goodsItem,
                   forms.joinType === 'digitalize' && styles.checked
                 ]}
-                onClick={() => (forms.joinType = 'digitalize')}>
+                onClick={() => {
+                  if (!forms.gradeNumText) {
+                    showToast('请先选择所在年级');
+                    return;
+                  }
+                  forms.joinType = 'digitalize';
+                }}>
                 <div class={styles.goodsInner}>
                   <i class={styles.proposalTip}></i>
                   数字化方式
@@ -1139,7 +1147,13 @@ export default defineComponent({
                   styles.goodsItem,
                   forms.joinType === 'tradition' && styles.checked
                 ]}
-                onClick={() => (forms.joinType = 'tradition')}>
+                onClick={() => {
+                  if (!forms.gradeNumText) {
+                    showToast('请先选择所在年级');
+                    return;
+                  }
+                  forms.joinType = 'tradition';
+                }}>
                 <div class={styles.goodsInner}>传统方式</div>
               </div>
             </div>
@@ -1209,15 +1223,17 @@ export default defineComponent({
                     可以学练音乐教材中的乐曲，通过手机应用商店准备。
                   </div>
                 </div>
-                <div class={styles.step}>
-                  <span class={styles.nums}>
-                    <span class={styles.numInner}>2</span>
-                  </span>
-                  <div class={styles.stepContent}>
-                    <span>乐器标准：</span>
-                    管数不限，建议20管以上C调加嘴排箫（音域宽，能演奏更多复杂乐曲，不需要重复更换），黑色，要选择单一原调（调性多学生很难掌握），价格由学生根据自身情况确定。
+                {forms.instrumentCode === 'Panpipes' && (
+                  <div class={styles.step}>
+                    <span class={styles.nums}>
+                      <span class={styles.numInner}>2</span>
+                    </span>
+                    <div class={styles.stepContent}>
+                      <span>乐器标准：</span>
+                      管数不限，建议20管以上C调加嘴排箫（音域宽，能演奏更多复杂乐曲，不需要重复更换），黑色，要选择单一原调（调性多学生很难掌握），价格由学生根据自身情况确定。
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             </div>
           )}
@@ -1307,6 +1323,7 @@ export default defineComponent({
               const selectedOption = val.selectedOptions[0];
               studentInfo.extra.currentGradeNum = selectedOption.value;
               forms.gradeNumText = selectedOption.text;
+              forms.instrumentCode = selectedOption.instrumentCode;
               forms.gradeStatus = false;
               if (forms.schoolInstrumentSetType === 'CLASS') {
                 forms.classList = selectedOption.classList;