新增：我的课程分页

src/api/toolInfo/market.js

@@ -38,22 +38,22 @@ export function getFunction(toolId) {
 
 
 // 购买工具支付成功
-export function buyTool(tool) {
+// export function buyTool(tool) {
-  return request({
+//   return request({
-    url: '/pay/one',
+//     url: '/pay/one',
-    method: 'post',
+//     method: 'post',
-    data: tool
+//     data: tool
-  })
+//   })
-}
+// }
 
-// 购买多个工具支付成功
+// // 购买多个工具支付成功
-export function buyTools(tools) {
+// export function buyTools(tools) {
-  return request({
+//   return request({
-    url: '/pay/more',
+//     url: '/pay/more',
-    method: 'post',
+//     method: 'post',
-    data: tools
+//     data: tools
-  })
+//   })
-}
+// }
 //0元订单支付
 export function noPayBuy(tool) {
   return request({

src/api/train/index.js

@@ -97,9 +97,10 @@ export function getSwiperImages() {
 }
 
 // 根据班级id查询所有课程
-export function getCourse(id) {
+export function getCourse(params,id) {
   return request({
     url: '/course/myCourse/class/' + id,
-    method: 'get'
+    method: 'get',
+    params
   })
 }

src/components/Pagination/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/util/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/page/personalpage/course/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="courseWrap">
         <div class="courseItemWrap" v-if="courseList.length">
-            <div class="courseItem" v-for="(course) in courseList" :key="course.courseId">
+            <div class="courseItem" v-for="course in courseList" :key="course.courseId">
                 <div class="courseName">
                     <div>{{ course.courseName }}</div>
                     <div v-if="course.status" class="signInLog">已签到</div>
@@ -18,27 +18,44 @@
             </div>
         </div>
         <div v-else class="noCourse">暂未配置课程</div>
+         <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="init"
+        />
     </div>
 </template>
 
 <script>
 import { getCourse } from '@/api/train/index.js'
+import Pagination from "@/components/Pagination";
 
 export default {
     created() {
         this.init()
     },
+    components:{
+        Pagination
+    },
     data() {
         return {
+            total: 0,
             courseList: [],
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
             base: process.env.VUE_APP_BASE_API,
         }
     },
     methods: {
         async init() {
             const id = this.$route.query.id
-            const res= await getCourse(id)
+            const res = await getCourse(this.queryParams, id)
             if (res.code == 200) {
+                this.total = res.total
                 this.courseList = res.rows
             }
         },
@@ -59,6 +76,10 @@ export default {
 </script>
 
 <style>
+.courseWrap{
+    height: 100%;
+    overflow: hidden;
+}
 .courseItemWrap {
     margin-top: 10px;
 }

src/util/scroll-to.js

@@ -0,0 +1,64 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  const courseWrap = document.querySelector(".app-container")
+  courseWrap.scrollTop = amount
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  // const courseItemWrap = document.querySelector('#courseItemWrap')
+  // console.log(document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop);
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop || document.querySelector(".app-container").scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  console.log('comming scroll');
+  const start = position()
+  console.log(start);
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}