Merge branch 'master' of http://git.dayaedu.com/lex/h5-colexiu

src/components/col-search/index.module.less

@@ -1,41 +1,44 @@
-:global {
-  .van-search {
-    padding-left: 14px;
-    padding-right: 14px;
-  }
-}
-.col-search {
-  // padding-left: 14px;
-  // padding-right: 14px;
-  :global {
-    .van-field__left-icon {
-      display: flex;
-      align-items: center;
-    }
-    .van-field__right-icon {
-      font-size: 0;
-    }
-    .van-search__action {
-      display: flex;
-    }
-  }
-  &.default {
-    :global {
-      .van-search__content {
-        background: #f3f3f3;
-      }
-    }
-  }
-
-  &.white {
-    :global {
-      .van-search__content {
-        background: #fff;
-      }
-    }
-  }
-
-  .searchBtn {
-    padding: 0 12px;
-  }
-}
+:global {
+  .van-search {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+}
+.col-search {
+  // padding-left: 14px;
+  // padding-right: 14px;
+  :global {
+    .van-field__left-icon {
+      display: flex;
+      align-items: center;
+    }
+    .van-field__right-icon {
+      font-size: 0;
+    }
+    .van-search__action {
+      display: flex;
+    }
+    .van-field__control {
+      font-size: 14px;
+    }
+  }
+  &.default {
+    :global {
+      .van-search__content {
+        background: #f3f3f3;
+      }
+    }
+  }
+
+  &.white {
+    :global {
+      .van-search__content {
+        background: #fff;
+      }
+    }
+  }
+
+  .searchBtn {
+    padding: 0 12px;
+  }
+}

src/components/col-search/index.tsx

@@ -44,6 +44,10 @@ export default defineComponent({
     onFilter: {
       type: Function,
       default: () => {}
+    },
+    filterDot: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -89,6 +93,7 @@ export default defineComponent({
             <Icon
               name={iconFilter}
               size={28}
+              dot={this.filterDot}
               onClick={() => {
                 this.onFilter()
               }}

src/student/music/album-detail/index.module.less

@@ -1,6 +1,11 @@
-.base {
+.base > div {
   background: url(./header-bg.png) no-repeat top center;
-  background-attachment: fixed;
+  // background-attachment: fixed;
+}
+.base {
+  :global(.van-sticky--fixed) {
+    box-shadow: 10px 10px 10px var(--box-shadow-color);
+  }
 }
 .img {
   width: 94px;

src/student/music/album/index.module.less

@@ -0,0 +1,5 @@
+.sticky {
+  :global(.van-sticky--fixed) {
+    box-shadow: 10px 10px 10px var(--box-shadow-color);
+  }
+}

src/student/music/album/index.tsx

@@ -6,15 +6,27 @@ import Item from './item'
 import SelectTag from '../search/select-tag'
 import { useRoute } from 'vue-router'
 import ColResult from '@/components/col-result'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'Album',
-  setup() {
+  props: {
+    hideSearch: {
+      type: Boolean,
+      default: false
+    },
+    defauleParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup({ hideSearch, defauleParams }, { expose }) {
     const route = useRoute()
     const params = reactive({
       search: (route.query.search as string) || '',
       musicTagIds: route.query.tagids || '',
-      page: 1
+      page: 1,
+      ...defauleParams
     })
     const data = ref<any>(null)
     const loading = ref(false)
@@ -55,52 +67,62 @@ export default defineComponent({
       tagVisibility.value = false
     }
 
-    return () => (
-      <>
-        <List
-          loading={loading.value}
-          finished={finished.value}
-          finished-text={
-            data.value && data.value.rows.length ? '没有更多了' : ''
-          }
-          onLoad={FetchList}
-          error={isError.value}
-        >
-          <Sticky>
-            <Search
-              modelValue={params.search}
-              showAction
-              onSearch={onSearch}
-              onFilter={() => (tagVisibility.value = true)}
-            />
-          </Sticky>
-          {data.value && data.value.rows.length
-            ? data.value.rows.map(item => <Item data={item} />)
-            : !loading.value && (
-                <ColResult
-                  tips="暂无曲目"
-                  classImgSize="SMALL"
-                  btnStatus={false}
+    expose({
+      onSearch,
+      onComfirm
+    })
+
+    return () => {
+      return (
+        <>
+          <List
+            loading={loading.value}
+            finished={finished.value}
+            finished-text={
+              data.value && data.value.rows.length ? '没有更多了' : ''
+            }
+            onLoad={FetchList}
+            error={isError.value}
+          >
+            {!hideSearch && (
+              <Sticky class={styles.sticky}>
+                <Search
+                  modelValue={params.search}
+                  showAction
+                  onSearch={onSearch}
+                  onFilter={() => (tagVisibility.value = true)}
+                  filterDot={!!params.musicTagIds}
                 />
-              )}
-        </List>
+              </Sticky>
+            )}
+            {data.value && data.value.rows.length
+              ? data.value.rows.map(item => <Item data={item} />)
+              : !loading.value && (
+                  <ColResult
+                    tips="暂无曲目"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )}
+          </List>
 
-        <Popup
-          show={tagVisibility.value}
-          round
-          closeable
-          position="bottom"
-          style={{ height: '60%' }}
-          teleport="body"
-          onUpdate:show={val => (tagVisibility.value = val)}
-        >
-          <SelectTag
-            defaultValue={route.query.tagids as string}
-            onComfirm={onComfirm}
-            onCancel={() => {}}
-          />
-        </Popup>
-      </>
-    )
+          <Popup
+            show={tagVisibility.value}
+            round
+            closeable
+            position="bottom"
+            style={{ height: '60%' }}
+            teleport="body"
+            onUpdate:show={val => (tagVisibility.value = val)}
+          >
+            <SelectTag
+              defaultValue={route.query.tagids as string}
+              onComfirm={onComfirm}
+              onCancel={() => {}}
+            />
+          </Popup>
+        </>
+      )
+    }
   }
 })

src/student/music/list/index.module.less

@@ -0,0 +1,5 @@
+.sticky {
+  :global(.van-sticky--fixed) {
+    box-shadow: 10px 10px 10px var(--box-shadow-color);
+  }
+}

src/student/music/list/index.tsx

@@ -6,15 +6,27 @@ import Item from './item'
 import SelectTag from '../search/select-tag'
 import { useRoute } from 'vue-router'
 import ColResult from '@/components/col-result'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'MusicList',
-  setup() {
+  props: {
+    hideSearch: {
+      type: Boolean,
+      default: false
+    },
+    defauleParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup({ hideSearch, defauleParams }, { expose }) {
     const route = useRoute()
     const params = reactive({
       search: (route.query.search as string) || '',
       musicTagIds: route.query.tagids || '',
-      page: 1
+      page: 1,
+      ...defauleParams
     })
     const data = ref<any>(null)
     const loading = ref(false)
@@ -55,6 +67,11 @@ export default defineComponent({
       tagVisibility.value = false
     }
 
+    expose({
+      onSearch,
+      onComfirm
+    })
+
     return () => (
       <>
         <List
@@ -66,13 +83,17 @@ export default defineComponent({
           onLoad={FetchList}
           error={isError.value}
         >
-          <Sticky>
-            <Search
-              showAction
-              onSearch={onSearch}
-              onFilter={() => (tagVisibility.value = true)}
-            />
-          </Sticky>
+          {!hideSearch && (
+            <Sticky class={styles.sticky}>
+              <Search
+                showAction
+                onSearch={onSearch}
+                onFilter={() => (tagVisibility.value = true)}
+                filterDot={!!params.musicTagIds}
+              />
+            </Sticky>
+          )}
+
           {data.value && data.value.rows.length
             ? data.value.rows.map(item => <Item data={item} />)
             : !loading.value && (

src/student/music/search/index.module.less

@@ -4,6 +4,17 @@
   --van-cell-text-color: #333;
   --van-cell-value-color: #999;
   --van-cell-icon-size: 10px;
+
+  --base-bg: #f6f8f9;
+
+  .sticky {
+    :global(.van-sticky--fixed) {
+      box-shadow: 10px 10px 10px var(--box-shadow-color);
+    }
+    > div {
+      background-color: var(--base-bg);
+    }
+  }
   .title {
     padding-top: 16px;
     :global(.van-cell__value) {

src/student/music/search/index.tsx

@@ -1,9 +1,11 @@
-import { Sticky, Cell, Tag, Icon, Popup } from 'vant'
+import { Sticky, Cell, Tag, Icon, Popup, Tabs, Tab } from 'vant'
 import { defineComponent, onMounted, ref } from 'vue'
 import Search from '@/components/col-search'
 import { useLocalStorage } from '@vueuse/core'
 import AlbumItem from '../album/item'
+import AlbumList from '../album'
 import MusicItem from '../list/item'
+import MusicList from '../list'
 import styles from './index.module.less'
 import classNames from 'classnames'
 import request from '@/helpers/request'
@@ -20,24 +22,25 @@ export default defineComponent({
     const sheetRows = ref([])
     const tagVisibility = ref(false)
     const words = useLocalStorage<string[]>('music-search', [])
+    const activeTab = ref('album')
     const FetchList = async () => {
-      loading.value = true
-      try {
-        const res = await request.post(
-          '/api-student/music/sheet/albumAndSheetList',
-          {
-            data: {
-              albumRow: 3,
-              sheetRow: 10,
-              search: keyword.value,
-              musicTagIds: tagids.value
-            }
-          }
-        )
-        albumRows.value = res.data.musicAlbumList.rows
-        sheetRows.value = res.data.musicSheetList.rows
-      } catch (error) {}
-      loading.value = false
+      // loading.value = true
+      // try {
+      //   const res = await request.post(
+      //     '/api-student/music/sheet/albumAndSheetList',
+      //     {
+      //       data: {
+      //         albumRow: 3,
+      //         sheetRow: 10,
+      //         search: keyword.value,
+      //         musicTagIds: tagids.value
+      //       }
+      //     }
+      //   )
+      //   albumRows.value = res.data.musicAlbumList.rows
+      //   sheetRows.value = res.data.musicSheetList.rows
+      // } catch (error) {}
+      // loading.value = false
     }
     const onSearch = val => {
       keyword.value = val
@@ -49,28 +52,50 @@ export default defineComponent({
         words.value.unshift(val)
         words.value.length = Math.min(words.value.length, 5)
       }
-      FetchList()
+      const activeRef = activeTab.value === 'album' ? albumList : musicList
+      ;(activeRef.value as any).onSearch?.(val)
+      // FetchList()
     }
 
     const onComfirm = tags => {
       const data = Object.values(tags).flat().filter(Boolean).join(',')
       tagids.value = data
-      FetchList()
+      // FetchList()
+      const activeRef = activeTab.value === 'album' ? albumList : musicList
+      ;(activeRef.value as any).onComfirm?.(tags)
       tagVisibility.value = false
     }
 
-    onMounted(() => onSearch(''))
+    const albumList = ref(null)
+    const musicList = ref(null)
+
+    onMounted(() => {
+      const activeRef = activeTab.value === 'album' ? albumList : musicList
+      ;(activeRef.value as any).onSearch?.('')
+    })
     return () => {
       return (
         <div class={styles.search}>
-          <Sticky>
+          <Sticky class={styles.sticky}>
             <Search
               modelValue={keyword.value}
               showAction
               autofocus
               onSearch={onSearch}
               onFilter={() => (tagVisibility.value = true)}
+              filterDot={!!tagids.value}
             />
+            <Tabs
+              color="var(--van-primary)"
+              background="transparent"
+              lineWidth={20}
+              shrink
+              v-model:active={activeTab.value}
+              onChange={val => (activeTab.value = val)}
+            >
+              <Tab title="专辑" name="album"></Tab>
+              <Tab title="单曲" name="songe"></Tab>
+            </Tabs>
           </Sticky>
           {words.value.length > 0 && (
             <div class={classNames(styles.keywords, 'van-hairline--bottom')}>
@@ -93,7 +118,8 @@ export default defineComponent({
               />
             </div>
           )}
-          {albumRows.value.length > 0 && (
+
+          {/* {albumRows.value.length > 0 && (
             <>
               <Cell
                 class={styles.title}
@@ -112,8 +138,8 @@ export default defineComponent({
                 <AlbumItem data={item} />
               ))}
             </>
-          )}
-          <Cell
+          )} */}
+          {/* <Cell
             class={styles.title}
             title="曲谱"
             is-link
@@ -125,13 +151,36 @@ export default defineComponent({
               }
             }}
             value="更多"
-          />
-          {sheetRows.value.map(item => (
-            <MusicItem data={item} />
-          ))}
-          {!loading.value && sheetRows.value.length === 0 && (
-            <ColResult tips="暂无曲目" classImgSize="SMALL" btnStatus={false} />
+          /> */}
+          {activeTab.value === 'album' ? (
+            <AlbumList
+              hideSearch
+              ref={albumList}
+              defauleParams={{
+                search: keyword.value,
+                tagids: tagids.value
+              }}
+            />
+          ) : (
+            <MusicList
+              hideSearch
+              ref={musicList}
+              defauleParams={{
+                search: keyword.value,
+                tagids: tagids.value
+              }}
+            />
           )}
+          {/* {sheetRows.value.map(item => (
+            <MusicItem data={item} />
+          ))} */}
+          {/* {!loading.value && sheetRows.value.length === 0 && (
+            <ColResult
+              tips={activeTab.value === 'album' ? '暂无专辑' : '暂无曲目'}
+              classImgSize="SMALL"
+              btnStatus={false}
+            />
+          )} */}
           <Popup
             show={tagVisibility.value}
             round

src/student/music/songbook/index.module.less

@@ -9,6 +9,12 @@
   --favorite-color: #63ffe1;
   --favorite-text-color: white;
 }
+.sticky {
+  :global(.van-sticky--fixed) {
+    box-shadow: 10px 10px 10px var(--box-shadow-color);
+  }
+}
+
 .title {
   padding-top: 16px;
   :global(.van-cell__value) {

src/student/music/songbook/index.tsx

@@ -13,6 +13,7 @@ export default defineComponent({
     return () => (
       <div class={styles.songbook}>
         <Sticky
+          class={styles.sticky}
           onClick={() => {
             router.push('/music-search')
           }}