新增：我的课程分页

src/api/toolInfo/market.js

@@ -38,22 +38,22 @@ export function getFunction(toolId) {
 
 
 // 购买工具支付成功
-export function buyTool(tool) {
-  return request({
-    url: '/pay/one',
-    method: 'post',
-    data: tool
-  })
-}
+// export function buyTool(tool) {
+//   return request({
+//     url: '/pay/one',
+//     method: 'post',
+//     data: tool
+//   })
+// }
 
-// 购买多个工具支付成功
-export function buyTools(tools) {
-  return request({
-    url: '/pay/more',
-    method: 'post',
-    data: tools
-  })
-}
+// // 购买多个工具支付成功
+// export function buyTools(tools) {
+//   return request({
+//     url: '/pay/more',
+//     method: 'post',
+//     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,44 +1,61 @@
 <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>{{ course.courseName }}</div>
                     <div v-if="course.status" class="signInLog">已签到</div>
                     <div v-else class="signInLog" style="background: #a8aeb6">未签到</div>
                 </div>
                 <div class="courseTime">
                     <div>上课时间: {{ course.courseTime }}</div>
                     <div class="sourceWrap" v-if="course.attachments.length">
-                        <div v-for="(item,index) in course.attachments" :key="index">
-                            <div @click="download(item)">{{item.fileName}}</div>
+                        <div v-for="(item, index) in course.attachments" :key="index">
+                            <div @click="download(item)">{{ item.fileName }}</div>
                         </div>
                     </div>
                 </div>
             </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(){
+    created() {
         this.init()
     },
+    components:{
+        Pagination
+    },
     data() {
         return {
-            courseList:[],
+            total: 0,
+            courseList: [],
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
             base: process.env.VUE_APP_BASE_API,
         }
     },
     methods: {
-       async  init(){
+        async init() {
             const id = this.$route.query.id
-            const res= await getCourse(id)
-            if(res.code == 200){
+            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;
 }
@@ -83,7 +104,7 @@ export default {
     display: flex;
     justify-content: space-between;
 }
-.noCourse{
+.noCourse {
     text-align: center;
     font-size: 20px;
 }

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()
+}