updates

src/modules/shop/components/CourseList.vue

@@ -2,87 +2,66 @@
 import CourseListItem from './CourseListItem.vue'
 import { useDevice } from '@/composables/useDevice'
 const { mobile } = useDevice()
+
 const props = defineProps({
-  courseList: {
-    type: Array
-  },
-  type: {
-    type: String
-  }
+  courseList: { type: Array, default: () => [] },
+  type: { type: String }
 })
-const page = reactive({
-  size: 10,
-  currentPage: 1
-})
-const courseListAll = $computed<any>(() => {
-  if (props.type) {
-    return props.courseList?.filter((item: any) => item.category === props.type)
-  } else {
-    return props.courseList
-  }
+
+const page = reactive({ size: 10, currentPage: 1 })
+
+// 筛选之后的数据
+const courseFilterList = $computed(() => {
+  return props.courseList.filter(
+    (item: any) => item.category === props.type || props.type === ''
+  )
 })
-watch(
-  () => courseListAll,
-  () => {
-    return queryByPage
-  }
-)
-const courseListAllNew = ref([])
-const queryByPage = $computed<any>(() => {
+
+// 当前页的数据
+const currentCourseList = $computed<any[]>(() => {
   // 起始位置 = (当前页 - 1) x 每页的大小
   const start = (page.currentPage - 1) * page.size
   // 结束位置 = 当前页 x 每页的大小
   const end = page.currentPage * page.size
-
-  // 返回切割数组后的数据
-  return courseListAll.slice(start, end)
+  const pageList = courseFilterList.slice(start, end)
+  return pageList
 })
-courseListAllNew.value = queryByPage
-
-// 改变每页大小的方法
-const handleSizeChange = (val: number) => {
-  page.size = val
-  // courseListAllNew.value = queryByPage
-  console.log(courseListAllNew)
-  courseListAllNew.value = queryByPage
-}
 
-// 改变当前页的方法
-const handleCurrentChange = (val: number) => {
-  page.currentPage = val
-  // courseListAllNew.value = queryByPage
-  console.log(courseListAllNew)
-  courseListAllNew.value = queryByPage
-}
+const paginationLayout = $computed(() => {
+  return mobile.value ? 'prev, pager, next' : 'prev, pager, next, jumper'
+})
 </script>
 
 <template>
-  <div
-    class="course_list"
-    v-for="(item, index) in courseListAllNew"
-    :key="index"
-  >
-    <CourseListItem :courseItem="item" :key="type"></CourseListItem>
+  <div class="course_list">
+    <CourseListItem
+      :courseItem="item"
+      v-for="(item, index) in currentCourseList"
+      :key="index"
+    ></CourseListItem>
+  </div>
+  <div class="pagination" v-if="courseFilterList.length > page.size">
+    <el-pagination
+      :layout="paginationLayout"
+      :page-size="page.size"
+      :total="courseFilterList.length"
+      v-model:currentPage="page.currentPage"
+    ></el-pagination>
   </div>
-  <el-pagination
-    class="pagination"
-    layout="total, sizes, prev, pager, next, jumper"
-    :page-sizes="[10, 15, 20, 30, 50]"
-    :page-size="page.size"
-    :total="courseListAll.length"
-    v-model:currentPage="page.currentPage"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrentChange"
-    v-if="courseListAll.length > 10 && !mobile"
-  >
-  </el-pagination>
 </template>
 
 <style lang="scss" scoped>
 .pagination {
-  margin: 46px 204px 40px 0;
+  padding: 40px;
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  :deep(ul) {
+    margin: 0 8px;
+  }
+  :deep(li) {
+    margin: 0 8px;
+  }
 }
 .is-h5 {
   .course_list {