更新

src/student/teacher-dependent/components/music.tsx

@@ -40,6 +40,7 @@ export default defineComponent({
       <>
         <MusicList
           hideSearch
+          type="list"
           onItemClick={this.onItemClick}
           teacherId={this.teacherId}
         />

src/views/music/list/index.tsx

@@ -1,8 +1,8 @@
 import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
-import { Sticky, List, Popup, Icon, SwipeItem, Swipe } from 'vant'
+import { Sticky, List, Popup, Icon } from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
-import Item from './item'
+// import Item from './item'
 import SelectTag from '../search/select-tag'
 import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
@@ -15,7 +15,9 @@ import Song from '../component/song'
 import ColHeader from '@/components/col-header'
 import { useRect } from '@vant/use'
 
-const noop = () => {}
+const noop = () => {
+  //
+}
 
 export default defineComponent({
   name: 'MusicList',
@@ -35,9 +37,16 @@ export default defineComponent({
     teacherId: {
       type: String || Number,
       default: ''
+    },
+    type: {
+      tyep: String,
+      default: 'fine'
     }
   },
-  setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
+  setup(
+    { hideSearch, defauleParams, onItemClick, teacherId, type },
+    { expose }
+  ) {
     const subjects: any = useSubjectId(SubjectEnum.SEARCH)
     // 判断是否已有数据
     if (!subjects.id) {
@@ -77,12 +86,15 @@ export default defineComponent({
     //
     const params = reactive({
       search: (route.query.search as string) || '',
-      exquisiteFlag: 1,
+      // exquisiteFlag: 1,
       musicTagIds: route.query.tagids || '',
       page: 1,
       ...defauleParams,
       ...tempParams
     })
+    const routeType = ref<string>(
+      route.query.type === 'list' || type === 'list' ? 'list' : 'fine'
+    )
     const data = ref<any>(null)
     const loading = ref(false)
     const finished = ref(false)
@@ -108,12 +120,12 @@ export default defineComponent({
       const tempParams = {
         ...params,
         idAndName: params.search,
-        createBy: teacherId
+        createBy: teacherId,
+        myself: false
+      }
+      if (routeType.value === 'fine') {
+        tempParams.exquisiteFlag = 1
       }
-      // if (state.platformType === 'TEACHER') {
-      tempParams.myself = false
-      // }
-
       try {
         const res = await request.post(`${apiSuffix.value}/music/sheet/list`, {
           data: tempParams
@@ -158,29 +170,31 @@ export default defineComponent({
       subject.show = false
     }
 
-    const tabType = ref(1)
+    const tabType = ref(route.query.type === 'list' || type === 'list' ? 0 : 1)
     const onTabChange = async (type: number) => {
-      console.log(type, 'onTabChange')
       tabType.value = type
-      params.exquisiteFlag = 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(() => {
-        console.log(sticky)
-        if (sticky.value) {
-          const { height } = useRect(sticky)
-          const clientHeight =
-            document.body.clientHeight || document.body.offsetHeight
-          searchHeight.value = clientHeight - height
-        }
-      })
-    })
+    // 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({
@@ -249,12 +263,40 @@ export default defineComponent({
             </div>
           </Sticky>
         )}
-        <Swipe
-          // class={styles.swipeContainer}
+        <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>
+        {/* <Swipe
           height={searchHeight.value}
-          // style={{
-          //   height: `calc(100vh - ${searchHeight.value})`
-          // }}
           showIndicators={false}
           onChange={(name: string) => {
             console.log('12')
@@ -328,7 +370,7 @@ export default defineComponent({
               )}
             </List>
           </SwipeItem>
-        </Swipe>
+        </Swipe> */}
         <Popup
           show={tagVisibility.value}
           round
@@ -340,7 +382,9 @@ export default defineComponent({
         >
           <SelectTag
             onConfirm={onComfirm}
-            onCancel={() => {}}
+            onCancel={() => {
+              //
+            }}
             defaultValue={route.query.tagids as string}
           />
         </Popup>

src/views/music/list/list.tsx

@@ -1,35 +1,37 @@
+import ColResult from '@/components/col-result'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import request from '@/helpers/request'
+import { state } from '@/state'
 import { List } from 'vant'
-import { defineComponent } from 'vue'
+import { defineComponent, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import Song from '../component/song'
+import { getRandomKey, musicBuy } from '../music'
+import styles from './index.module.less'
+
+const noop = () => {}
 
 export default defineComponent({
   name: 'list',
-  data() {
-    return {}
-  },
-  setup(this, props, ctx) {
-    const subjects: any = useSubjectId(SubjectEnum.SEARCH)
-    // 判断是否已有数据
-    if (!subjects.id) {
-      const users = state.user.data
-      const subjectId = users.subjectId
-        ? Number(users.subjectId.split(',')[0])
-        : ''
-      const subjectName = users.subjectName
-        ? users.subjectName.split(',')[0]
-        : ''
-      if (subjectId) {
-        useSubjectId(
-          SubjectEnum.SEARCH,
-          JSON.stringify({
-            id: subjectId,
-            name: subjectName
-          }),
-          'set'
-        )
-      }
+  props: {
+    hideSearch: {
+      type: Boolean,
+      default: false
+    },
+    defauleParams: {
+      type: Object,
+      default: () => ({})
+    },
+    onItemClick: {
+      type: Function,
+      default: noop
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
     }
-
-    localStorage.setItem('behaviorId', getRandomKey())
+  },
+  setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
     const route = useRoute()
     // const router = useRouter()
     const tempParams: any = {}
@@ -56,18 +58,10 @@ export default defineComponent({
     const loading = ref(false)
     const finished = ref(false)
     const isError = ref(false)
-    const tagVisibility = ref(false)
     const apiSuffix = ref(
       state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
     )
 
-    const onSearch = (value: string) => {
-      params.page = 1
-      params.search = value
-      data.value = null
-      FetchList()
-    }
-
     const FetchList = async () => {
       if (loading.value) {
         return