更新

src/components/col-header/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
       navigator: [
         { name: '首页', href: '/home', current: false },
         { name: '谱库', href: '/musicLibrary', current: false },
-        // { name: '视频课', href: '/videoDetailList', current: false },
+        { name: '视频课', href: '/videoDetailList', current: false },
         // { name: '云教练', href: '#', current: false },
         // { name: '社区', href: '#', current: false },
         { name: '下载', href: '/downLoad', current: false }
@@ -83,11 +83,7 @@ export default defineComponent({
           <div class="flex items-center h-full">
             <div class="logoWrap" onClick={() => this.gotoMain()}>
               {/* this.isdark || */}
-              <img
-                class="w-full"
-                src={ !this.isTop ? logo : whileLogo}
-                alt=""
-              />
+              <img class="w-full" src={!this.isTop ? logo : whileLogo} alt="" />
             </div>
           </div>
           <div class={['rightWrap', 'flex', 'items-center']}>

src/components/searchInput/index.module.less

@@ -22,28 +22,23 @@
   }
   .selectWrap {
     :global {
-      .hasVal {
-        .el-input__wrapper {
-          &:hover {
-            .el-input__suffix-inner {
-              position: relative;
-              .el-select__caret {
-                //箭头样式
-
-                // transform: rotateZ(0deg); //转动图片
-                appearance: none;
-                background: url('@{img}/closeIcon.png') no-repeat; //自定义图片
-                background-size: 16px 16px;
-                // width: 16px;
-                // height: 16px !important;
-                // position: absolute; //图片定位
-                top: -1px;
-                right: -1px;
-              }
-            }
-          }
-        }
-      }
+      // .hasVal {
+      //   .el-input__wrapper {
+      //     &:hover {
+      //       .el-input__suffix-inner {
+      //         position: relative;
+      //         .el-select__caret {
+      //           //箭头样式
+      //           appearance: none;
+      //           background: url('@{img}/closeIcon.png') no-repeat; //自定义图片
+      //           background-size: 16px 16px;
+      //           top: -1px;
+      //           right: -1px;
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
       .el-input__wrapper {
         padding-right: 25px;
         font-size: 16px;

src/components/searchInput/index.tsx

@@ -9,11 +9,13 @@ import {
   ElOption,
   ElIcon
 } from 'element-plus'
+import { state as baseSate } from '@/state'
 
 // import white from './while.module.less'
 import classes from './index.module.less'
 import request from '@/helpers/request'
 import searchIcon from './images/searchIcon.png'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 export default defineComponent({
   name: 'searchInput',
   props: {
@@ -32,6 +34,10 @@ export default defineComponent({
     holder: {
       type: String,
       default: '搜一搜你想练习的曲目'
+    },
+    type: {
+      type: String,
+      default: 'search'
     }
   },
   emits: ['startSearch'],
@@ -48,8 +54,10 @@ export default defineComponent({
       searchVal => {
         // console.log(searchVal,'searchVal')
         state.search = searchVal.search ? searchVal.search : ''
-        state.subject = Number(props.searchVal.subject || props.searchVal.lessonSubject)
-          ? Number(props.searchVal.subject|| props.searchVal.lessonSubject)
+        state.subject = Number(
+          props.searchVal.subject || props.searchVal.lessonSubject
+        )
+          ? Number(props.searchVal.subject || props.searchVal.lessonSubject)
           : ''
       },
       {
@@ -60,11 +68,47 @@ export default defineComponent({
       console.log('调用')
       try {
         const res = await request.get(
-          '/api-website/open/subject/queryPage',
-          {params:{rows:9999,page:1}}
+          '/api-website/open/subject/subjectSelect',
+          { params: { type: 'MUSIC' } }
+        )
+        const result = res.data || []
+        const tempSubject: any = []
+        result.forEach((item: any) => {
+          if (item.subjects && item.subjects.length > 0) {
+            item.subjects.forEach((subject: any) => {
+              tempSubject.push(subject)
+            })
+          }
+        })
+        const subjects: any = useSubjectId(
+          SubjectEnum[props.type === 'search' ? 'SEARCH' : 'VIDEO']
         )
+        console.log(subjects, 'subjects found')
+        state.subjectList = tempSubject
+        const subjectIds = baseSate.user.data?.subjectId || ''
+        // 判断是否已有数据
+        if (subjects.id) {
+          state.subject = Number(subjects.id)
+        } else {
+          if (subjectIds) {
+            const subjectId = Number(subjectIds.split(',')[0])
+            state.subject = subjectId
 
-        state.subjectList = res.data.rows
+            tempSubject.forEach((subject: any) => {
+              if (subject.id == subjectId) {
+                // 设置默认查询声部
+                useSubjectId(
+                  SubjectEnum[props.type === 'search' ? 'SEARCH' : 'VIDEO'],
+                  JSON.stringify({
+                    id: subjectId,
+                    name: subject.name
+                  }),
+                  'set'
+                )
+              }
+            })
+          }
+        }
       } catch (e) {
         console.log(e)
       }
@@ -75,6 +119,22 @@ export default defineComponent({
         search: state.search,
         subject: state.subject
       })
+      const subjects = {
+        id: state.subject,
+        name: ''
+      }
+      state.subjectList.forEach((subject: any) => {
+        if (subject.id == subjects.id) {
+          subjects.name = subject.name
+        }
+      })
+
+      // 设置声部
+      useSubjectId(
+        SubjectEnum[props.type === 'search' ? 'SEARCH' : 'VIDEO'],
+        JSON.stringify(subjects),
+        'set'
+      )
     }
     onMounted(() => {
       getSubjectList()
@@ -87,11 +147,11 @@ export default defineComponent({
         <div class={[classes.wrap]}>
           <div class={classes.selectWrap} id="selectWrap">
             <ElSelect
-              clearable
+              // clearable
               v-model={state.subject}
               placeholder="请选择声部"
               style="width: 175px"
-              class={["subSelect",state.subject?'hasVal':'']}
+              class={['subSelect', state.subject ? 'hasVal' : '']}
               v-slots={{
                 suffix: () => <div class={classes.san}></div>
               }}
@@ -102,7 +162,7 @@ export default defineComponent({
             </ElSelect>
             <div class={classes.line}></div>
           </div>
-          <div class={classes.searchWrap} >
+          <div class={classes.searchWrap}>
             <img src={searchIcon} alt="" />
           </div>
           <ElInput
@@ -116,8 +176,10 @@ export default defineComponent({
             //   }
             // }}
           ></ElInput>
-            <div class={classes.searchline}></div>
-          <div class={classes.searchBtn} onClick={startSearch}>搜索</div >
+          <div class={classes.searchline}></div>
+          <div class={classes.searchBtn} onClick={startSearch}>
+            搜索
+          </div>
         </div>
       </>
     )

src/helpers/hooks.ts

@@ -0,0 +1,38 @@
+// 搜索关键字
+export const SubjectEnum = {
+  SEARCH: 'music-songbook-subject',
+  // ALBUM: 'music-album-subject',
+  // MUSIC: 'music-subject',
+  // LIVE: 'live-subject',
+  VIDEO: 'video-subject'
+  // ELEGANT: 'elegant-subject'
+}
+/**
+ * 获取声部编号 | 保存声部编号
+ */
+export const useSubjectId = (
+  key: string,
+  value?: any,
+  type = 'get' as 'get' | 'set'
+) => {
+  // 判断是否在关键字
+  // console.log(key, value, type)
+  if (!key) return ''
+  if (type === 'get') {
+    let subject = localStorage.getItem(key)
+    subject = subject ? JSON.parse(subject) : { name: '', id: '' }
+    return subject
+  } else {
+    localStorage.setItem(key, value)
+    return ''
+  }
+}
+
+export const useSubjectClearly = (key?: string) => {
+  if (key) {
+    localStorage.removeItem(key)
+  } else {
+    localStorage.removeItem(SubjectEnum.SEARCH)
+    localStorage.removeItem(SubjectEnum.VIDEO)
+  }
+}

src/views/App.tsx

@@ -13,6 +13,7 @@ import '../style/index.css'
 import 'normalize.css'
 import 'element-plus/dist/index.css'
 import 'vue3-lottie/dist/style.css'
+import { useSubjectClearly } from '@/helpers/hooks'
 
 export default defineComponent({
   components: { silder },
@@ -23,6 +24,8 @@ export default defineComponent({
       if (state.user.data?.userId) {
         // 获取用户信息
         await getUserInfo()
+      } else {
+        useSubjectClearly()
       }
     } catch {}
     // console.log('user end')

src/views/musicLibrary/index.tsx

@@ -18,6 +18,8 @@ import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
 import { useRoute, useRouter } from 'vue-router'
+import { state as baseState } from '@/state'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 export default defineComponent({
   name: 'musicLibrary',
   components: {
@@ -30,6 +32,14 @@ export default defineComponent({
     banner
   },
   setup() {
+    let subjectId = 0
+    const subjectIds = baseState.user.data?.subjectId || ''
+    if (subjectIds) {
+      subjectId = Number(subjectIds.split(',')[0])
+    }
+    // 判断是否在默认的声部
+    const subjects: any = useSubjectId(SubjectEnum.SEARCH)
+    subjectId = subjects.id || subjectId
     const state = reactive({
       albumList: [],
       musicList: []
@@ -41,6 +51,7 @@ export default defineComponent({
           data: {
             albumStatus: 1,
             page: 1,
+            subjectIds: subjectId ? subjectId : null,
             rows: 10
           }
         })
@@ -55,6 +66,7 @@ export default defineComponent({
         const res = await request.post('/api-website/open/music/sheet/list', {
           data: {
             albumStatus: 'PASS',
+            subjectIds: subjectId ? subjectId : null,
             page: 1,
             rows: 5,
             state: 1
@@ -97,6 +109,7 @@ export default defineComponent({
 
               <searchInput
                 isWhile={false}
+                type="search"
                 onStartSearch={(val: any) => gotoSearch(val)}
               ></searchInput>
               <div class={styles.hotSearch}>
@@ -107,45 +120,57 @@ export default defineComponent({
                   type={''}
                 ></hotSearch>
               </div>
-              <div class={[styles.videoNav,styles.mt25]}>
-                <div class={styles.titleWrap}>
-                  <h5 class={styles.hotAlbum}>热门专辑</h5>
-                  <img src={titleDot} class={styles.dotImg} alt="" />
-                </div>
 
-                <div class={styles.wrapRight} onClick={() => gotoAlbum()}>
-                  <span>更多</span>
-                  <img class={styles.arrow} src={arrow} alt="" />
-                </div>
-              </div>
+              {state.albumList && state.albumList.length > 0 && (
+                <>
+                  <div class={[styles.videoNav, styles.mt25]}>
+                    <div class={styles.titleWrap}>
+                      <h5 class={styles.hotAlbum}>热门专辑</h5>
+                      <img src={titleDot} class={styles.dotImg} alt="" />
+                    </div>
 
-              <div class={styles.albumList}>
-                {state.albumList.map(item => {
-                  return <albumItem detail={item}></albumItem>
-                })}
-              </div>
+                    <div class={styles.wrapRight} onClick={() => gotoAlbum()}>
+                      <span>更多</span>
+                      <img class={styles.arrow} src={arrow} alt="" />
+                    </div>
+                  </div>
+
+                  <div class={styles.albumList}>
+                    {state.albumList.map(item => {
+                      return <albumItem detail={item}></albumItem>
+                    })}
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>
         <div>
           <div class={styles.w1200}>
-            <div class={[styles.section,styles.pb40]}>
-              <div class={styles.videoNav}>
-                <div class={styles.titleWrap}>
-                  <h5>热门乐谱</h5>
-                  <img src={titleDot} class={styles.dotImg} alt="" />
-                </div>
-                <div class={styles.wrapRight} onClick={() => gotoMusic()}>
-                  <span>更多</span>
-                  <img class={styles.arrow} src={arrow} alt="" />
+            {state.musicList && state.musicList.length > 0 && (
+              <>
+                <div
+                  class={[styles.section, styles.pb40]}
+                  style="padding-top: 0"
+                >
+                  <div class={styles.videoNav}>
+                    <div class={styles.titleWrap}>
+                      <h5>热门乐谱</h5>
+                      <img src={titleDot} class={styles.dotImg} alt="" />
+                    </div>
+                    <div class={styles.wrapRight} onClick={() => gotoMusic()}>
+                      <span>更多</span>
+                      <img class={styles.arrow} src={arrow} alt="" />
+                    </div>
+                  </div>
+                  <div class={styles.musicList}>
+                    {state.musicList.map(item => {
+                      return <musicLIstItem item={item}></musicLIstItem>
+                    })}
+                  </div>
                 </div>
-              </div>
-              <div class={styles.musicList}>
-                {state.musicList.map(item => {
-                  return <musicLIstItem item={item}></musicLIstItem>
-                })}
-              </div>
-            </div>
+              </>
+            )}
 
             {/* <musicLIstItem></musicLIstItem> */}
           </div>

src/views/musicLibrary/searchdetail.tsx

@@ -140,6 +140,7 @@ export default defineComponent({
               <searchInput
                 isWhile={true}
                 searchVal={{ ...this.searchs }}
+                type="search"
                 onStartSearch={(val: any) => {
                   this.startSearch(val)
                 }}

src/views/videoDetailList/index.tsx

@@ -9,6 +9,8 @@ import pagination from '@/components/pagination'
 import { useRoute } from 'vue-router'
 import ColEmpty from '@/components/col-empty'
 import banner from '@/components/banner'
+import { state as baseState } from '@/state'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -31,10 +33,18 @@ export default defineComponent({
     ColEmpty
   },
   setup(props, conent) {
+    let subjectId = 0
+    const subjectIds = baseState.user.data?.subjectId || ''
+    if (subjectIds) {
+      subjectId = Number(subjectIds.split(',')[0])
+    }
+    // 判断是否在默认的声部
+    const subjects: any = useSubjectId(SubjectEnum.VIDEO)
+    subjectId = subjects.id || subjectId
     const state = reactive({
       title: props.title,
       videoList: [],
-      searchs: { search: '', lessonSubject: '' },
+      searchs: { search: '', lessonSubject: subjectId },
 
       pageInfo: {
         // 分页规则
@@ -102,6 +112,7 @@ export default defineComponent({
               <searchInput
                 isWhile={true}
                 searchVal={state.searchs}
+                type="video"
                 holder="搜一搜你想看的视频课"
                 onStartSearch={(val: any) => {
                   startSearch(val)