更新

src/views/music/list/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
-import { Sticky, List, Popup, Icon } from 'vant'
+import { Sticky, List, Popup, Icon, Switch } from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
 // import Item from './item'
@@ -43,10 +43,7 @@ export default defineComponent({
       default: 'fine'
     }
   },
-  setup(
-    { hideSearch, defauleParams, onItemClick, teacherId, type },
-    { expose }
-  ) {
+  setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
     const subjects: any = useSubjectId(SubjectEnum.SEARCH)
     // 判断是否已有数据
     if (!subjects.id) {
@@ -92,12 +89,12 @@ export default defineComponent({
       ...defauleParams,
       ...tempParams
     })
-    const routeType = ref<string>(route.query.type === 'list' ? 'list' : 'fine')
     const data = ref<any>(null)
     const loading = ref(false)
     const finished = ref(false)
     const isError = ref(false)
     const tagVisibility = ref(false)
+    const exquisiteFlag = ref(false)
     const apiSuffix = ref(
       state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
     )
@@ -121,8 +118,8 @@ export default defineComponent({
         createBy: teacherId,
         myself: false
       }
-      if (type === 'fine') {
-        tempParams.exquisiteFlag = routeType.value === 'list' ? 0 : 1
+      if (exquisiteFlag.value) {
+        tempParams.exquisiteFlag = 1
       }
       try {
         const res = await request.post(`${apiSuffix.value}/music/sheet/list`, {
@@ -142,7 +139,17 @@ export default defineComponent({
     }
 
     const onComfirm = tags => {
-      const d = Object.values(tags).flat().filter(Boolean).join(',')
+      const tempTags: any = {}
+      // 单独处理乐谱类型
+      for (const tag in tags) {
+        if (Number(tag) === -1) {
+          exquisiteFlag.value = tags[tag][0] ? true : false
+        } else {
+          tempTags[tag] = tags[tag]
+        }
+      }
+
+      const d = Object.values(tempTags).flat().filter(Boolean).join(',')
       params.musicTagIds = d
       params.page = 1
       data.value = null
@@ -168,32 +175,6 @@ export default defineComponent({
       subject.show = false
     }
 
-    const tabType = ref(route.query.type === 'list' ? 0 : 1)
-    const onTabChange = async (type: number) => {
-      tabType.value = type
-      if (type === 1) {
-        routeType.value = 'fine'
-      } else {
-        routeType.value = 'list'
-      }
-      params.page = 1
-      data.value = null
-      await FetchList()
-    }
-
-    const sticky = ref()
-    // const searchHeight = ref(200)
-    // onMounted(() => {
-    //   nextTick(() => {
-    //     if (sticky.value) {
-    //       const { height } = useRect(sticky)
-    //       const clientHeight =
-    //         document.body.clientHeight || document.body.offsetHeight
-    //       searchHeight.value = clientHeight - height
-    //     }
-    //   })
-    // })
-
     const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
     const subject = reactive({
       show: false,
@@ -211,54 +192,28 @@ export default defineComponent({
       <>
         {!hideSearch && (
           <Sticky class={styles.sticky}>
-            <div ref={sticky}>
-              <ColHeader
-                isFixed={false}
-                border={false}
-                background="#fff"
-                v-slots={{
-                  content: () => (
-                    <div class={styles.listContainer}>
-                      <span
-                        onClick={() => onTabChange(1)}
-                        class={tabType.value === 1 && styles.active}
-                      >
-                        精品曲目
-                      </span>
-                      <span class={styles.line}></span>
-                      <span
-                        onClick={() => onTabChange(0)}
-                        class={tabType.value === 0 && styles.active}
-                      >
-                        热门曲目
-                      </span>
-                    </div>
-                  )
-                }}
-              />
-              <Search
-                showAction
-                onSearch={onSearch}
-                onFilter={() => (tagVisibility.value = true)}
-                filterDot={!!params.musicTagIds}
-                v-slots={{
-                  left: () => (
-                    <div
-                      class={styles.label}
-                      onClick={() => (subject.show = true)}
-                    >
-                      {subject.name}
-                      <Icon
-                        classPrefix="iconfont"
-                        name="down"
-                        size={12}
-                        color="#333"
-                      />
-                    </div>
-                  )
-                }}
-              />
-            </div>
+            <Search
+              showAction
+              onSearch={onSearch}
+              onFilter={() => (tagVisibility.value = true)}
+              filterDot={!!params.musicTagIds}
+              v-slots={{
+                left: () => (
+                  <div
+                    class={styles.label}
+                    onClick={() => (subject.show = true)}
+                  >
+                    {subject.name}
+                    <Icon
+                      classPrefix="iconfont"
+                      name="down"
+                      size={12}
+                      color="#333"
+                    />
+                  </div>
+                )
+              }}
+            />
           </Sticky>
         )}
         <List
@@ -293,82 +248,6 @@ export default defineComponent({
             )
           )}
         </List>
-        {/* <Swipe
-          height={searchHeight.value}
-          showIndicators={false}
-          onChange={(name: string) => {
-            console.log('12')
-          }}
-        >
-          <SwipeItem>
-            <List
-              loading={loading.value}
-              finished={finished.value}
-              finished-text={
-                data.value && data.value.rows.length ? '没有更多了' : ''
-              }
-              onLoad={FetchList}
-              error={isError.value}
-            >
-              {data.value && data.value.rows.length ? (
-                <div class={styles.alumnList}>
-                  <Song
-                    list={data.value.rows}
-                    onDetail={(item: any) => {
-                      if (onItemClick === noop) {
-                        musicBuy(item)
-                      } else {
-                        onItemClick?.(item)
-                      }
-                    }}
-                  />
-                </div>
-              ) : (
-                !loading.value && (
-                  <ColResult
-                    tips="暂无曲目"
-                    classImgSize="SMALL"
-                    btnStatus={false}
-                  />
-                )
-              )}
-            </List>
-          </SwipeItem>
-          <SwipeItem>
-            <List
-              loading={loading.value}
-              finished={finished.value}
-              finished-text={
-                data.value && data.value.rows.length ? '没有更多了' : ''
-              }
-              onLoad={FetchList}
-              error={isError.value}
-            >
-              {data.value && data.value.rows.length ? (
-                <div class={styles.alumnList}>
-                  <Song
-                    list={data.value.rows}
-                    onDetail={(item: any) => {
-                      if (onItemClick === noop) {
-                        musicBuy(item)
-                      } else {
-                        onItemClick?.(item)
-                      }
-                    }}
-                  />
-                </div>
-              ) : (
-                !loading.value && (
-                  <ColResult
-                    tips="暂无曲目"
-                    classImgSize="SMALL"
-                    btnStatus={false}
-                  />
-                )
-              )}
-            </List>
-          </SwipeItem>
-        </Swipe> */}
         <Popup
           show={tagVisibility.value}
           round
@@ -379,6 +258,7 @@ export default defineComponent({
           onUpdate:show={val => (tagVisibility.value = val)}
         >
           <SelectTag
+            exquisiteFlag
             onConfirm={onComfirm}
             onCancel={() => {
               //

src/views/music/search/select-tag.tsx

@@ -17,13 +17,17 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    exquisiteFlag: {
+      type: Boolean,
+      default: false
+    },
     needAllButton: {
       type: Boolean,
       default: true
     }
   },
   emits: ['cancel', 'confirm'],
-  setup({ defaultValue, ...restProps }, { emit, expose }) {
+  setup({ exquisiteFlag, defaultValue, ...restProps }, { emit, expose }) {
     const prefix =
       appState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
     const { isLoading, state } = useAsyncState(
@@ -46,6 +50,19 @@ export default defineComponent({
     watch(state, () => {
       if (state.value) {
         const list = (state.value && state.value.data) || []
+        if (exquisiteFlag) {
+          list.unshift({
+            name: '乐谱类型',
+            id: -1,
+            children: [
+              {
+                id: 1,
+                name: '精品'
+              }
+            ]
+          })
+        }
+
         for (const item of list) {
           const allids = item.children.map(c => {
             names[c.id] = c.name
@@ -64,10 +81,12 @@ export default defineComponent({
 
     return () => {
       const list = (state.value && state.value.data) || []
+      console.log(list, 'list')
       return (
         <div class={styles.select}>
           <h4 class={styles.title}>全部标签</h4>
           <div class={styles.content}>
+            {/* 曲谱类型，精品曲谱、普通曲谱 */}
             {list.map(item => {
               if (!item.children || item.children.length <= 0) {
                 return null