修改乐器选择

src/page-instrument/view-figner/change-subject/index.module.less

@@ -1,12 +1,13 @@
 .changeSubject {
-  padding: 18px 0;
+  padding: 49px 17px 19px 24px;
+
 }
 
 .changeSubjectContainer {
-  height: 217px;
+  height: 187px;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 15px;
+  padding: 0;
 
   &::-webkit-scrollbar {
     display: none;
@@ -19,7 +20,7 @@
 
   font-size: 16px;
   font-weight: 500;
-  color: #333333;
+  color: #AE8967;
   line-height: 22px;
 
   &::before {
@@ -27,7 +28,7 @@
     display: inline-block;
     width: 4px;
     height: 11px;
-    background: #1CACF1;
+    background: #D5AD89;
     border-radius: 3px;
     margin-right: 6px;
   }
@@ -37,18 +38,18 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding-top: 18px;
+  padding-top: 7px;
 
   .subjectItem {
     width: 31%;
     height: 34px;
     line-height: 34px;
     text-align: center;
-    background: #F6F6F6;
+    // background: #F6F6F6;
     border-radius: 50px;
     font-size: 13px;
     color: #333333;
-    border: 1px solid #F6F6F6;
+    border: 1px solid #D8D8D8;
     margin-bottom: 12px;
 
     &:nth-child(3n + 2) {
@@ -75,12 +76,13 @@
 
 
     &.active {
-      border: 1px solid #1CACF1;
-      background: #EBF8FF;
-      color: #1CACF1;
+      background: #FFF6E7;
+      border-radius: 16px;
+      border: 1px solid #AE8967;
+      color: #A98464;
 
       &::after {
-        border-bottom: 4px solid #1CACF1;
+        border-bottom: 4px solid #C4A78D;
         transform: translateY(-2px) rotate(0deg);
       }
     }
@@ -90,14 +92,33 @@
 }
 
 .btnGroups {
-  border-top: 1px solid #F2F2F2;
+  border-top: 1px solid #EBEBEB;
   display: flex;
   align-items: center;
-  padding: 18px 15px 0;
+  padding: 8px 15px 0;
+
+  // :global {
+  //   .van-button+.van-button {
+  //     margin-left: 15px;
+  //   }
+  // }
 
-  :global {
-    .van-button+.van-button {
-      margin-left: 15px;
+  .btn {
+    width: 143px;
+    height: 44px;
+
+    &+.btn {
+      margin-left: 9px;
     }
   }
+
+  .resetBtn {
+    background: url('../image/subject-btn1.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .confirmBtn {
+    background: url('../image/subject-btn2.png') no-repeat center;
+    background-size: contain;
+  }
 }

src/page-instrument/view-figner/change-subject/index.tsx

@@ -30,7 +30,23 @@ export default defineComponent({
       //   state.instrumentCode = i.value;
       //   state.selectList = [];
       // }
-      const i: any = props.subjectList.find((item: any) => item.value === props.subject);
+      // const i: any = props.subjectList.find((item: any) => item.value === props.subject);
+      let i: any = {};
+      props.subjectList.forEach((item: any) => {
+        if (Array.isArray(item.children)) {
+          item.children.forEach((child: any) => {
+            if (child.value === props.subject) {
+              i = {
+                ...child,
+                parentId: item.id,
+              };
+              state.instrumentCode = child.value;
+              state.subjectValue = item.id;
+              state.selectList = item.children || [];
+            }
+          });
+        }
+      });
       if (!i) {
         props.subjectList.forEach((item: any) => {
           if (item.children && item.children.length > 0) {
@@ -43,10 +59,6 @@ export default defineComponent({
             });
           }
         });
-      } else {
-        state.subjectValue = i.id;
-        state.instrumentCode = i.value;
-        state.selectList = [];
       }
     };
 
@@ -89,8 +101,10 @@ export default defineComponent({
                     state.instrumentCode = "";
                   }
                   state.subjectValue = item.id;
-                  state.instrumentCode = item.value;
                   state.selectList = item.children;
+                  if (state.selectList.length > 0) {
+                    state.instrumentCode = state.selectList[0].value;
+                  }
                 }}
               >
                 {item.text}
@@ -118,9 +132,27 @@ export default defineComponent({
         </div>
 
         <div class={styles.btnGroups}>
-          <Button
+          <div
+            class={[styles.btn, styles.resetBtn]}
+            onClick={() => {
+              emit("close");
+              selectItem();
+            }}
+          ></div>
+          <div
+            class={[styles.btn, styles.confirmBtn]}
+            onClick={() => {
+              if (state.selectList.length > 0 && !state.instrumentCode) {
+                showToast("请选择乐器");
+                return;
+              }
+              emit("confirm", state.instrumentCode || state.subjectValue);
+            }}
+          ></div>
+          {/* <Button
             round
             block
+            class={styles.resetBtn}
             onClick={() => {
               emit("close");
               selectItem();
@@ -132,7 +164,7 @@ export default defineComponent({
             type="primary"
             block
             round
-            color="linear-gradient(90deg, #44C9FF 0%, #259CFE 100%)"
+            class={styles.confirmBtn}
             onClick={() => {
               if (state.selectList.length > 0 && !state.instrumentCode) {
                 showToast("请选择乐器");
@@ -142,7 +174,7 @@ export default defineComponent({
             }}
           >
             确认
-          </Button>
+          </Button> */}
         </div>
       </div>
     );

src/page-instrument/view-figner/index.module.less

@@ -1261,9 +1261,10 @@
 
 .changeSubjectPopup {
     width: 375px;
-    // height: 310px;
-    background: #FFFFFF;
+    height: 307px;
+    background: url('./image/subject-bg1.png') no-repeat center;
     border-radius: 12px;
+    background-size: contain;
 }
 
 .linkSourceClass {