updates

data/src/goods/3.js

@@ -2,7 +2,7 @@ export default [
   {
     category: 'PAAM',
     id: '3',
-    title: 'PAAP1 系列课程',
+    title: 'PAAM 系列课程',
     desc: '通过私人权属资产全面预算的系统学习，具备完成私人资产分析所需要的系统源点知识的底层逻辑，精确盘点私人资产，建立私人资产分析的多维模型',
     for_people: '包括但并不仅限于金融保险企业绩优营销员',
     image_url: '',

src/modules/shop/components/CourseList.vue

@@ -8,19 +8,68 @@ const props = defineProps({
     type: String
   }
 })
-const courseListAll = computed<any>(() => {
+const page = reactive({
+  size: 3,
+  currentPage: 1
+})
+const courseListAll = $computed<any>(() => {
   if (props.type) {
     return props.courseList?.filter((item: any) => item.category === props.type)
   } else {
     return props.courseList
   }
 })
+watch(
+  () => courseListAll,
+  () => {
+    return queryByPage
+  }
+)
+const courseListAllNew = ref([])
+const queryByPage = $computed<any>(() => {
+  // 起始位置 = (当前页 - 1) x 每页的大小
+  const start = (page.currentPage - 1) * page.size
+  // 结束位置 = 当前页 x 每页的大小
+  const end = page.currentPage * page.size
+
+  // 返回切割数组后的数据
+  return courseListAll.slice(start, end)
+})
+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
+}
 </script>
 
 <template>
-  <div v-for="(item, id) in courseListAll" :key="id">
-    <CourseListItem :courseItem="item" :key="id"></CourseListItem>
+  <div v-for="(item, index) in courseListAllNew" :key="index">
+    <CourseListItem :courseItem="item" :key="type"></CourseListItem>
   </div>
+  <el-pagination
+    class="pagination"
+    layout="total, sizes, prev, pager, next, jumper"
+    :page-sizes="[3, 5, 10, 15, 20]"
+    :page-size="page.size"
+    :total="courseListAll.length"
+    v-model:currentPage="page.currentPage"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    v-if="courseListAll.length > 3"
+  >
+  </el-pagination>
 </template>
 
 <style lang="scss" scoped>

src/modules/shop/views/Index.vue

@@ -21,7 +21,7 @@ const handleTabClick = (tab: any) => {
             <template #label>
               {{ item.label }}
             </template>
-            <CourseList :type="item.value" :courseList="shopStore.shopList" />
+            <CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />
           </el-tab-pane>
         </el-tabs>
       </div>