老师端训练教程添加声部搜索条件

src/tenant/music/train-tool/index.module.less

@@ -7,7 +7,80 @@
       }
     }
   }
+
+  :global {
+
+    // 选择框
+    // 上拉选择 - ✅
+    // 选择器 - ✅
+    .van-picker {
+      --van-picker-toolbar-height: 44px !important;
+
+      --k-font-primary: #FE2451;
+      --k-bg-4: #f2f2f2;
+      --k-gray-1: #333333;
+      --k-gray-2: #666666;
+      --k-gray-3: #777777;
+
+      .van-picker__toolbar {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          box-sizing: border-box;
+          content: ' ';
+          pointer-events: none;
+          right: var(--van-padding-md);
+          bottom: 0;
+          left: var(--van-padding-md);
+          border-bottom: 1px solid var(--van-cell-border-color);
+          transform: scaleY(0.5);
+        }
+      }
+
+      .van-picker__columns {
+        padding: 0 24px;
+      }
+
+      .van-picker-column {
+        position: relative;
+        z-index: 1;
+      }
+
+      .van-picker__frame {
+        z-index: 0;
+
+        &::after {
+          background: var(--k-bg-4);
+          border-radius: 8px;
+        }
+      }
+
+      .van-picker__cancel,
+      .van-picker__confirm {
+        font-size: 15px;
+      }
+
+      .van-picker__cancel {
+        color: var(--k-gray-3);
+      }
+
+      .van-picker__confirm {
+        color: var(--k-font-primary);
+      }
+
+      .van-picker-column__item {
+        color: var(--k-gray-1);
+        font-size: 16px;
+      }
+
+      .van-picker-column__item--selected {
+        font-weight: 600;
+      }
+    }
+  }
 }
+
 .musicContent {
   position: absolute;
   top: 0;
@@ -24,6 +97,38 @@
   background-size: cover;
 }
 
+.changeSubjectSection {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(254, 36, 81, 0.5);
+  border-radius: 100px;
+  padding: 3px 8px 2px;
+
+  .subjectName {
+    font-weight: 400;
+    font-size: 14px;
+    color: #FE2451;
+    line-height: 20px;
+    padding-right: 4px;
+    max-width: 60px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  img {
+    width: 9px;
+    height: 5px;
+    transition: .2s ease;
+
+    &.active {
+      transform: rotate(180deg);
+      transition: .2s ease;
+    }
+  }
+}
+
 .bgImg {
   position: absolute;
   left: 0;
@@ -157,11 +262,9 @@
           top: 0;
           bottom: 0;
           width: 9px;
-          background: linear-gradient(
-            270deg,
-            rgba(0, 0, 0, 0.18) 0%,
-            rgba(255, 255, 255, 0) 100%
-          );
+          background: linear-gradient(270deg,
+              rgba(0, 0, 0, 0.18) 0%,
+              rgba(255, 255, 255, 0) 100%);
         }
       }
     }
@@ -302,10 +405,12 @@
     .van-tabs {
       padding-bottom: 16px;
     }
+
     .van-tabs__nav {
       padding-left: 6px;
       padding-right: 6px;
     }
+
     .van-tab {
       font-size: 16px !important;
       margin-top: 15px;
@@ -321,11 +426,9 @@
     .van-tabs__line {
       width: 24px;
       height: 4px;
-      background: linear-gradient(
-        90deg,
-        #ff3c5e 0%,
-        rgba(255, 118, 155, 0.5) 100%
-      ) !important;
+      background: linear-gradient(90deg,
+          #ff3c5e 0%,
+          rgba(255, 118, 155, 0.5) 100%) !important;
       border-radius: 36px 36px 0px 0px;
     }
 
@@ -341,26 +444,33 @@
       background-color: #fff;
     }
   }
+
   .alumnList {
     padding: 0 15px;
+
     &.alumnListCourseware {
       padding: 0 3px 3px;
     }
+
     :global {
       .van-empty {
         margin-top: -24px;
       }
+
       .songItem {
         &:first-child {
           padding-top: 0;
         }
       }
+
       .courseItem:nth-child(1) {
         margin-top: 0 !important;
       }
+
       .courseItem:nth-child(2) {
         margin-top: 0 !important;
       }
+
       .courseItem:nth-child(3) {
         margin-top: 0 !important;
       }
@@ -381,13 +491,12 @@
     .van-button {
       font-size: 18px;
       font-weight: 500;
+
       &.van-button--disabled {
         opacity: initial;
-        background: linear-gradient(
-          270deg,
-          #ff7a93 0%,
-          #ff9daa 100%
-        ) !important;
+        background: linear-gradient(270deg,
+            #ff7a93 0%,
+            #ff9daa 100%) !important;
       }
     }
   }
@@ -399,4 +508,4 @@
       padding-top: 0;
     }
   }
-}
+}

src/tenant/music/train-tool/index.tsx

@@ -17,7 +17,8 @@ import {
   Dialog,
   Sticky,
   Swipe,
-  SwipeItem
+  SwipeItem,
+  Picker
 } from 'vant'
 import styles from './index.module.less'
 import TheSticky from '@/components/the-sticky'
@@ -28,6 +29,7 @@ import iconMenu from './images/icon-menu.png'
 import iconRightTop from './images/icon-right-top.png'
 import iconAlbumCover from '../../images/icon-album-cover.png'
 import iconTimer from './images/icon-timer.png'
+import iconArrow from './images/icon-arrow.png'
 import { state as baseState, setLogout } from '@/state'
 import Song from '../component/song'
 import { useRoute, useRouter } from 'vue-router'
@@ -80,7 +82,13 @@ export default defineComponent({
       heightV: 0,
       hasBuyStatus: true, // 是否能继续购买
       albumList: [] as any, // 专辑列表
-      initialSlide: 0
+      initialSlide: 0,
+      subjectStatus: false,
+      openStatus: false,
+      teacherSubjectId: null as any,
+      teacherSubjectName: null as any,
+      teacherSubjectIndex: 0,
+      subjectList: [] // 声部列表
     })
     const params = reactive({
       page: 1,
@@ -206,8 +214,8 @@ export default defineComponent({
 
       // 老师端默认查询声部
       if (baseState.platformType === 'TEACHER') {
-        const users = baseState.user.data
-        tempParams.subjectId = users.defaultSubject || null
+        // const users = baseState.user.data
+        tempParams.subjectId = state.teacherSubjectId || null
       }
 
       try {
@@ -236,6 +244,25 @@ export default defineComponent({
       state.loading = false
     }
 
+    const getSubjectList = async () => {
+      try {
+        const res = await request.get('/api-tenant/open/subject/queryPage', {
+          data: { page: 1, rows: 9999 }
+        })
+        const result = res.data.rows || []
+        result.forEach((item: any) => {
+          item.text = item.name
+        })
+        state.subjectList = result || []
+        const index = state.subjectList.findIndex(
+          (item: any) => item.id == state.teacherSubjectId
+        )
+        state.teacherSubjectIndex = index === -1 ? 0 : index
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
     onMounted(async () => {
       // useEventListener(document, 'scroll', evt => {
       //   const { y } = useWindowScroll()
@@ -246,10 +273,18 @@ export default defineComponent({
       //   }
       // })
 
+      // 老师端默认查询声部
+      if (baseState.platformType === 'TEACHER') {
+        const users = baseState.user.data
+        state.teacherSubjectId = users.defaultSubject || null
+        state.teacherSubjectName = users.defaultSubjectName || null
+      }
+
       state.loading = true
       state.loadingAlbum = true
       await getDetails()
       await FetchList()
+      getSubjectList()
       state.loadingAlbum = false
       state.loading = false
 
@@ -406,7 +441,27 @@ export default defineComponent({
                   hideHeader={route.query.taId ? true : false}
                   // color={color.value}
                   // backIconColor="white"
-                />
+                >
+                  {{
+                    right: () =>
+                      baseState.platformType === 'TEACHER' && (
+                        <div
+                          class={styles.changeSubjectSection}
+                          onClick={() => {
+                            state.subjectStatus = true
+                          }}
+                        >
+                          <span class={styles.subjectName}>
+                            {state.teacherSubjectName}
+                          </span>
+                          <img
+                            class={state.subjectStatus && styles.active}
+                            src={iconArrow}
+                          />
+                        </div>
+                      )
+                  }}
+                </ColHeader>
               </TheSticky>
 
               {/* <img class={styles.bgImg} src={state.details?.coverImg} /> */}
@@ -664,6 +719,34 @@ export default defineComponent({
             </>
           )
         )}
+
+        {/* 选择声部 */}
+        <Popup
+          show={state.subjectStatus}
+          position="bottom"
+          round
+          safe-area-inset-bottom
+          onClose={() => (state.subjectStatus = false)}
+          onClosed={() => (state.openStatus = false)}
+        >
+          <Picker
+            defaultIndex={state.teacherSubjectIndex}
+            columns={state.subjectList}
+            onCancel={() => {
+              state.subjectStatus = false
+            }}
+            onConfirm={(val: any) => {
+              console.log(val, 'val')
+              state.teacherSubjectId = val.id
+              state.teacherSubjectName = val.name
+              params.page = 1
+              state.finished = false
+              state.list = []
+              FetchList()
+              state.subjectStatus = false
+            }}
+          ></Picker>
+        </Popup>
       </div>
     )
   }