修改选择

src/views/courseware-list/index.module.less

@@ -385,6 +385,81 @@
     }
   }
 
+  .subjectItem {
+    width: 31%;
+    height: 30px;
+    // line-height: 30px;
+    text-align: center;
+    background: #F6F6F6;
+    border-radius: 50px;
+    font-size: 13px;
+    color: #333333;
+    border: 1px solid #F6F6F6;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:nth-child(3n + 2) {
+      margin-left: 2.333%;
+      margin-right: 2.333%;
+    }
+
+    // &:nth-child(3n + 3) {
+    //   margin-left: 2.333%;
+    // }
+
+    &.arrow::after {
+      content: '';
+      display: inline-block;
+      margin-left: 3px;
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid transparent;
+      border-bottom: 4px solid #777777;
+      transform: translateY(3px) rotate(180deg);
+    }
+
+
+    &.active {
+      border: 1px solid #1CACF1;
+      background: #EBF8FF;
+      color: #1CACF1;
+
+      &::after {
+        border-bottom: 4px solid #1CACF1;
+        transform: translateY(-2px) rotate(0deg);
+      }
+    }
+  }
+
+  // .arrow::after {
+  //   content: '';
+  //   display: inline-block;
+  //   margin-left: 3px;
+  //   width: 0;
+  //   height: 0;
+  //   border-left: 4px solid transparent;
+  //   border-right: 4px solid transparent;
+  //   border-top: 4px solid transparent;
+  //   border-bottom: 4px solid #777777;
+  //   transform: translateY(3px) rotate(180deg);
+  // }
+
+
+  // &.active {
+  //   border: 1px solid #1CACF1;
+  //   background: #EBF8FF;
+  //   color: #1CACF1;
+
+  //   &::after {
+  //     border-bottom: 4px solid #1CACF1;
+  //     transform: translateY(-2px) rotate(0deg);
+  //   }
+  // }
+
   .btnGroup {
     border: 1px solid #f2f2f2;
     padding: 16px 12px;

src/views/courseware-list/index.tsx

@@ -88,20 +88,24 @@ export default defineComponent({
         coursewareStorage.subjectId ||
         state.user.data?.subjectId ||
         (null as any),
+      instrumentId:
+        coursewareStorage.instrumentId ||
+        state.user.data?.instrumentId ||
+        (null as any),
       page: 1,
       rows: 999,
       type: 'COURSEWARE'
     });
-    const _actions = computed(() => {
-      return BOOK_DATA.grades.map((item, index) => {
-        return {
-          ...item,
-          color:
-            forms.currentGradeNum === index ? 'var(--van-primary-color)' : '',
-          className: forms.currentGradeNum === index ? 'fontBlod' : ''
-        };
-      });
-    });
+    // const _actions = computed(() => {
+    //   return BOOK_DATA.grades.map((item, index) => {
+    //     return {
+    //       ...item,
+    //       color:
+    //         forms.currentGradeNum === index ? 'var(--van-primary-color)' : '',
+    //       className: forms.currentGradeNum === index ? 'fontBlod' : ''
+    //     };
+    //   });
+    // });
     // const onSelect = (action: any, index: number) => {
     //   forms.currentGradeNum = index;
     //   handleChange();
@@ -115,6 +119,7 @@ export default defineComponent({
       details: [] as any[],
       bookData: {} as any,
       subjectList: [] as any,
+      instrumentList: [] as any, // 乐器列表
       showBook: false,
       book: {} as DOMRect
     });
@@ -255,6 +260,14 @@ export default defineComponent({
       // console.log(browser().isTablet, 'browser().isTablet');
       await getTanentList();
       await getSubjectList();
+
+      if (forms.subjectId && data.subjectList.length > 0) {
+        data.subjectList.forEach((item: any) => {
+          if (item.id == forms.subjectId) {
+            data.instrumentList = item.instruments || [];
+          }
+        });
+      }
       getData();
       // 安卓的状态栏
       postMessage({
@@ -388,9 +401,7 @@ export default defineComponent({
             size="small"
             onClick={() => (popoverShow.value = true)}
             {...{ id: 'courseware-3' }}>
-            {/* {BOOK_DATA.grades[forms.currentGradeNum].text} */}
             筛选
-            {/* <img class={styles.icon} src={icon_arrow} /> */}
             <svg
               class={[styles.icon, popoverShow.value ? styles.iconUp : '']}
               width="9px"
@@ -423,17 +434,6 @@ export default defineComponent({
               </g>
             </svg>
           </Button>
-          {/* <Popover
-            v-model:show={popoverShow.value}
-            class={styles.popover}
-            actions={_actions.value}
-            onSelect={onSelect}>
-            {{
-              reference: () => (
-
-              )
-            }}
-          </Popover> */}
         </div>
 
         <div
@@ -542,17 +542,43 @@ export default defineComponent({
                 ))}
               </div>
 
-              <div class={styles.popoverTitle}>选择声部</div>
+              {/* <div class={styles.popoverTitle}>选择声部</div>
               <div class={[styles.popupList, styles.versionList]}>
                 {data.subjectList.map((item: any) => (
-                  <Tag
-                    plain={forms.subjectId == item.id}
-                    round
-                    onClick={() => (forms.subjectId = item.id)}>
+                  <span
+                    // plain={forms.subjectId == item.id}
+                    class={[
+                      styles.subjectItem,
+                      forms.subjectId == item.id && styles.active,
+                      item.instruments?.length > 0 && styles.arrow
+                    ]}
+                    onClick={() => {
+                      forms.subjectId = item.id;
+                      data.instrumentList = item.instruments || [];
+                      if (data.instrumentList.length > 0) {
+                        forms.instrumentId = data.instrumentList[0].id;
+                      }
+                    }}>
                     {item.name}
-                  </Tag>
+                  </span>
                 ))}
               </div>
+
+              {data.instrumentList.length > 0 && (
+                <>
+                  <div class={styles.popoverTitle}>选择乐器</div>
+                  <div class={[styles.popupList, styles.versionList]}>
+                    {data.instrumentList.map((item: any) => (
+                      <Tag
+                        plain={forms.instrumentId == item.id}
+                        round
+                        onClick={() => (forms.instrumentId = item.id)}>
+                        {item.name}
+                      </Tag>
+                    ))}
+                  </div>
+                </>
+              )}*/}
             </div>
 
             <div class={styles.btnGroup}>
@@ -562,6 +588,14 @@ export default defineComponent({
                   forms.bookVersionId = null;
                   forms.currentGradeNum = null;
                   forms.subjectId = state.user.data?.subjectId || null;
+                  forms.instrumentId = state.user.data?.instrumentId || null;
+                  if (forms.subjectId && data.subjectList.length > 0) {
+                    data.subjectList.forEach((item: any) => {
+                      if (item.id == forms.subjectId) {
+                        data.instrumentList = item.instruments || [];
+                      }
+                    });
+                  }
                 }}>
                 重置
               </Button>
@@ -575,7 +609,8 @@ export default defineComponent({
                     JSON.stringify({
                       bookVersionId: forms.bookVersionId,
                       currentGradeNum: forms.currentGradeNum,
-                      subjectId: forms.subjectId
+                      subjectId: forms.subjectId,
+                      instrumentId: forms.instrumentId
                     })
                   );
                   getData();