colexiu-project/src/views/videoDetailList/index.tsx

import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
// import classes from './index.module.less'
import styles from './index.module.less'
import hotSearch from '@/components/hotSearch'
import searchInput from '@/components/searchInput'
import videoDetailItem from './modals/videoDetailItem'
import request from '@/helpers/request'
import pagination from '@/components/pagination'
import { useRoute } from 'vue-router'
import ColEmpty from '@/components/col-empty'
import banner from '@/components/banner'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
export default defineComponent({
  name: 'videoDetailList',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    banner,
    hotSearch,
    searchInput,
    videoDetailItem,
    pagination,

    ColEmpty
  },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      videoList: [],
      searchs: { search: '', lessonSubject: '' },

      pageInfo: {
        // 分页规则
        limit: 9, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [9, 18, 36, 45] // 选择限制显示条数
      },
      isshowData: false
    })
    const route = useRoute()
    const getVideoList = async () => {
      console.log('请求接口')
      try {
        const res = await request.post(
          '/api-website/open/videoLessonGroup/page',
          {
            data: {
              ...state.searchs,
              albumStatus: 'PASS',
              page: state.pageInfo.page,
              rows: state.pageInfo.limit
            }
          }
        )
        state.videoList = res.data.rows
        state.pageInfo.total = res.data.total
        if (state.pageInfo.total == 0) {
          state.isshowData = true
        } else {
          state.isshowData = false
        }
      } catch (e) {
        console.log(e)
      }
    }

    const startSearch = (val: any) => {
      state.searchs = {
        ...state.searchs,
        lessonSubject: val.subject,
        search: val.search
      }
      getVideoList()
    }
    const gotoSearch = (val: string) => {
      state.searchs.search = val
      startSearch(state.searchs)
    }
    onMounted(() => {
      if (route.query.search) {
        state.searchs.search = route.query.search as string
      }
      if (route.query.subject) {
        state.searchs.lessonSubject = route.query.subject as string
      }
      getVideoList()
    })
    return () => (
      <>
        <banner />
        <div>
          <div class={styles.w1200}>
            <div class={styles.section}>
              <searchInput
                isWhile={true}
                searchVal={state.searchs}
                holder="搜一搜你想看的视频课"
                onStartSearch={(val: any) => {
                  startSearch(val)
                }}
              ></searchInput>
              <div class={styles.hotSearchWrap}>
                <hotSearch
                  searchType="COURSE"
                  onHotTag={(val: string) => {
                    gotoSearch(val)
                  }}
                  type={''}
                  isChiose={true}
                ></hotSearch>
              </div>
            </div>
            <div class={styles.videoList}>
              {state.videoList.map(item => {
                return <videoDetailItem detail={item}></videoDetailItem>
              })}
            </div>
            {state.isshowData && <ColEmpty></ColEmpty>}
            <pagination
              total={state.pageInfo.total}
              v-model:page={state.pageInfo.page}
              v-model:limit={state.pageInfo.limit}
              pageSizes={state.pageInfo.page_size}
              pagination={getVideoList}
            />
          </div>
        </div>
      </>
    )
  }
})