feat: 增加已学课程

src/pages/my/index.vue

@@ -31,7 +31,7 @@ export default {
         },
         {
           title: '已学课程',
-          url: '/my/learned'
+          url: '/my/learn'
         },
         {
           title: '学习提醒',

src/pages/my/learned/api.js → src/pages/my/learn/api.js

@@ -8,3 +8,10 @@ const httpRequest = new BaseAPI(webConf)
 export function getFreeCourseList() {
   return httpRequest.get('/zy/v2/education/freecourse')
 }
+
+/**
+ * 获取课程列表
+ */
+export function getCourseList() {
+  return httpRequest.get('/zy/v2/education/courses/list')
+}

src/pages/my/learn/components/buyCourseList.vue

+<template>
+  <div class="main-list" v-show="loaded">
+    <ul v-if="list.length">
+      <li v-for="item in list" :key="item.course_id" @click="onClick(item)">
+        <div class="name">{{item.course_name}}</div>
+        <div class="progress">{{item.video_progress | progressText}}</div>
+      </li>
+    </ul>
+    <template v-else>
+      <slot name="empty"></slot>
+    </template>
+  </div>
+</template>
+<script>
+import * as api from '../api'
+export default {
+  name: 'BuyCourseList',
+  data() {
+    return {
+      loaded: false,
+      list: []
+    }
+  },
+  filters: {
+    progressText(value) {
+      value = parseInt(value)
+      return value === 100 ? '已学完' : `${value}%`
+    }
+  },
+  methods: {
+    getList() {
+      api.getCourseList().then(response => {
+        this.loaded = true
+        this.list = response
+      })
+    },
+    onClick(data) {
+      if (this.isWeapp) {
+        wx.miniProgram.navigateTo({
+          url: `/pages/web/index?src=${window.location.origin}/course/learn/${data.course_id}`
+        })
+      } else {
+        this.$router.push({ name: 'courseLearnItem', params: { id: data.course_id } })
+      }
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-list li {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid #f1f1f1;
+  &:last-child {
+    border-bottom: 0;
+  }
+  .name {
+    flex: 1;
+    font-size: 15px;
+    color: #222;
+  }
+  .progress {
+    margin-left: 20px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>

src/pages/my/learn/components/freeCourseList.vue

+<template>
+  <div class="main-list" v-show="loaded">
+    <ul v-if="list.length">
+      <li v-for="item in list" :key="item.course_id" @click="onClick(item)">
+        <div class="pic" v-if="item.picture">
+          <img :src="item.picture" />
+        </div>
+        <div class="name">{{item.course_name}}</div>
+        <div class="progress">{{item.video_progress | progressText}}</div>
+      </li>
+    </ul>
+    <template v-else>
+      <slot name="empty"></slot>
+    </template>
+  </div>
+</template>
+<script>
+import * as api from '../api'
+export default {
+  name: 'BuyCourseList',
+  data() {
+    return {
+      loaded: false,
+      list: []
+    }
+  },
+  filters: {
+    progressText(value) {
+      value = parseInt(value)
+      return value === 100 ? '已学完' : `${value}%`
+    }
+  },
+  methods: {
+    getList() {
+      api.getFreeCourseList().then(response => {
+        this.loaded = true
+        this.list = response
+      })
+    },
+    onClick(data) {
+      if (this.isWeapp) {
+        wx.miniProgram.navigateTo({
+          url: `/pages/course/free?id=${data.course_id}`
+        })
+      } else {
+        window.alert('请在微信小程序中打开')
+      }
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-list li {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid #f1f1f1;
+  &:last-child {
+    border-bottom: 0;
+  }
+  .pic {
+    width: 100px;
+    height: 64px;
+    margin-right: 10px;
+    border-radius: 6px;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .name {
+    flex: 1;
+    align-self: flex-start;
+    font-size: 15px;
+    color: #222;
+  }
+  .progress {
+    margin-left: 20px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>

src/pages/my/learn/index.vue

+<template>
+  <div class="main-container">
+    <div class="learn-choose">
+      <van-cell title="选择已学课程：" :value="selectedItem.name" is-link @click="popupVisible = true" />
+    </div>
+    <buy-course-list v-if="selectedItem.type === 1" />
+    <free-course-list v-else />
+    <van-popup
+      v-model="popupVisible"
+      position="bottom"
+      :safe-area-inset-bottom="true"
+      @open="popupOpen"
+    >
+      <ul class="popup-list">
+        <li
+          :class="item.selected ? 'is-active' : ''"
+          v-for="item in chooseList"
+          :key="item.type"
+          @click="changeSelected(item)"
+        >{{item.name}}</li>
+      </ul>
+      <div class="popup-buttons">
+        <van-button type="primary" @click="popupVisible = false">取消</van-button>
+        <van-button type="primary" @click="primaryChangeFilterType">确定</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import BuyCourseList from './components/buyCourseList.vue'
+import FreeCourseList from './components/freeCourseList.vue'
+
+export default {
+  metaInfo: { title: '已学课程' },
+  components: { BuyCourseList, FreeCourseList },
+  data() {
+    return {
+      popupVisible: false,
+      chooseList: [
+        { type: 1, name: '课程学习', selected: true },
+        { type: 2, name: '试听课程', selected: false }
+      ],
+      selectedItem: { type: 1, name: '课程学习' }
+    }
+  },
+  methods: {
+    popupOpen() {
+      this.changeSelected(this.selectedItem)
+    },
+    changeSelected(data) {
+      this.chooseList = this.chooseList.map(item => {
+        item.selected = item.type === data.type
+        return item
+      })
+    },
+    // 确定选择
+    primaryChangeFilterType() {
+      const found = this.chooseList.find(item => item.selected)
+      this.selectedItem = found
+      this.popupVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.learn-choose {
+  border-bottom: 1px solid #f1f1f1;
+}
+::v-deep .van-cell {
+  padding: 20px 0;
+  font-size: 15px;
+  font-weight: bold;
+  color: #222;
+  .van-cell__value {
+    color: #222;
+  }
+  .van-cell__right-icon {
+    color: #222;
+  }
+}
+.popup-list {
+  padding: 20px 0;
+  li {
+    padding: 20px 0;
+    font-size: 15px;
+    color: #000;
+    line-height: 1;
+    text-align: center;
+    &.is-active {
+      color: #2b7ce9;
+    }
+  }
+}
+.popup-buttons {
+  display: flex;
+  padding: 10px 0;
+  ::v-deep .van-button {
+    flex: 1;
+    height: 35px;
+    margin: 0 20px;
+    font-size: 15px;
+    background-color: #2b7ce9;
+    border-radius: 6px;
+  }
+}
+</style>

src/pages/my/learned/index.vue

-<template>
-  <div class="learned">
-    <div class="learned-header">
-      <h3 class="learned-header__title">选择已学课程：</h3>
-      <div class="learned-header__choose"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  metaInfo: {
-    title: '已学课程'
-  },
-  data() {
-    return {}
-  },
-  methods: {}
-}
-</script>
-
-<style lang="scss" scoped>
-</style>

src/router/routes.js

@@ -173,9 +173,9 @@ export default [
   },
   // 已学课程
   {
-    path: '/my/learned',
-    name: 'MyLearned',
-    component: () => import('../pages/my/learned/index.vue'),
+    path: '/my/learn',
+    name: 'MyLearn',
+    component: () => import('../pages/my/learn/index.vue'),
     meta: { requiredLogin: true }
   }
 ]