updates

src/components/CourseItem.vue

-<script setup lang="ts">
-import type { ICourseItem } from '@/types'
-defineProps<{ data: ICourseItem }>()
-</script>
-<template>
-  <div class="course-item">
-    <img :src="data.course_picture" class="course-item-pic" />
-    <div class="course-item-content">
-      <h5>{{ data.course_name }}</h5>
-      <div>
-        <span>{{ data.course_chapters.big_total }}章节</span>
-        <span>{{ data.course_chapters.small_total }}课时</span>
-      </div>
-      <div>
-        <span>{{ data.pv }}人看过</span>
-        <span>{{ data.records_total }}人评论</span>
-      </div>
-      <p>{{ data.status }}</p>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.course-item {
-  display: flex;
-  padding: 0.22rem;
-  background: #fff;
-  border-radius: 0.2rem;
-}
-.course-item-pic {
-  width: 1.6rem;
-  height: 1.9rem;
-  border-radius: 0.1rem;
-  overflow: hidden;
-  object-fit: cover;
-}
-.course-item-content {
-  margin-left: 0.26rem;
-  font-size: 0.24rem;
-  line-height: 0.33rem;
-  font-weight: 500;
-  color: #4e4e4e;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-</style>

src/components/VideoItem.vue

-<script setup lang="ts">
-import type { IVideoItem } from '@/types'
-defineProps<{ data: IVideoItem }>()
-</script>
-
-<template>
-  <div class="video-item">
-    <img :src="data.cover_page" />
-    <h5>{{ data.course_name }}</h5>
-    <p>{{ data.pv }}播放</p>
-  </div>
-</template>
-
-<style lang="scss">
-.video-item {
-  img {
-    width: 2rem;
-    height: 1.9rem;
-    border-radius: 0.1rem;
-    overflow: hidden;
-    object-fit: cover;
-  }
-  h5 {
-    margin-top: 0.09rem;
-    font-size: 0.24rem;
-    font-weight: 500;
-    line-height: 0.33rem;
-    color: #4e4e4e;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  p {
-    margin-top: 0.04rem;
-    font-size: 0.1rem;
-    line-height: 0.28rem;
-    color: #999999;
-  }
-}
-</style>

src/main.ts

@@ -10,7 +10,6 @@ import AppContainer from '@/components/base/AppContainer.vue'
 import Avatar from '@/components/Avatar.vue'
 
 import modules from './modules'
-import { useUserStore } from '@/stores/user'
 
 const app = createApp(App)
 // 注册公共组件
@@ -23,6 +22,3 @@ app.use(router)
 app.use(Vant)
 
 app.mount('#app')
-
-// 初始化用户信息，判断是否登录
-useUserStore().getUser()

src/modules/doc/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import AppLayout from '@/components/layout/Index.vue'
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/message',
+    component: AppLayout,
+    children: [{ path: '', component: () => import('./views/Index.vue') }]
+  }
+]

src/modules/doc/views/Index.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="home"></div>
+</template>

src/modules/home/components/AdmissionGuide.vue

 <script setup lang="ts">
+import { Notify } from 'vant'
 import type { IDocItem, IVideoItem } from '../types'
 defineProps<{ docs: IDocItem[]; videos: IVideoItem[] }>()
+
+function showTips() {
+  Notify({ type: 'primary', message: '尚未开放' })
+}
 </script>
 
 <template>
@@ -22,12 +27,12 @@ defineProps<{ docs: IDocItem[]; videos: IVideoItem[] }>()
         <div class="box box-test">
           <h2>入学评测</h2>
           <p class="t1">系统专业知识</p>
-          <p class="t2"><a href="https://www.ezijing.com" target="_blank">去看看 ></a></p>
+          <p class="t2"><a @click="showTips">去看看 ></a></p>
         </div>
         <div class="box box-notice">
           <h2>入学通知书</h2>
           <p class="t1">报名之后即可查询</p>
-          <p class="t2"><a href="https://www.ezijing.com" target="_blank">去看看 ></a></p>
+          <p class="t2"><a @click="showTips">去看看 ></a></p>
         </div>
       </div>
     </div>

src/modules/home/components/LearningMap.vue

 <script setup lang="ts">
 import { ref } from 'vue'
+import { Notify } from 'vant'
 import type { IDocItem } from '../types'
 import LearningMapVideo from './LearningMapVideo.vue'
 import LearningMapCourse from './LearningMapCourse.vue'
 defineProps<{ docs: IDocItem[] }>()
 
 const active = ref<number>(0)
+
+function showTips() {
+  Notify({ type: 'primary', message: '尚未开放' })
+}
 </script>
 
 <template>
@@ -36,7 +41,7 @@ const active = ref<number>(0)
         <div class="learn-box learn-test">
           <h2>查漏补缺 建立系统概念</h2>
           <p>了解PRP学习前系统专业知识的情况</p>
-          <a class="button">去测评</a>
+          <a class="button" @click="showTips">去测评</a>
         </div>
       </van-tab>
       <van-tab title="课程导学">
@@ -51,12 +56,14 @@ const active = ref<number>(0)
       </van-tab>
     </van-tabs>
     <div class="learn-banner">
+      <router-link to="/my/course">
         <img src="https://webapp-pub.ezijing.com/project/prp-h5/learning_map_banner.png" />
+      </router-link>
     </div>
   </AppCard>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .learn-box {
   height: 3.1rem;
   padding: 0.3rem;

src/modules/home/components/LearningMapCourse.vue

@@ -51,7 +51,7 @@ onMounted(() => {
   </swiper>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .course-item {
   width: 4.7rem;
   padding: 0.22rem;

src/modules/home/components/LearningMapVideo.vue

@@ -53,7 +53,7 @@ const onClick = (data: IVideoItem) => {
   </van-popup>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .video-item {
   width: 2rem;
   img {

src/modules/my/api.ts

@@ -4,3 +4,8 @@ import httpRequest from '@/utils/axios'
 export function getMyInfo() {
   return httpRequest.get('/api/psp/v1/my/info')
 }
+
+// 获取课程列表
+export function getCourseList(params?: { page_size?: number; page?: number }) {
+  return httpRequest.get('/api/psp/v1/learning/course-list', { params })
+}

src/modules/my/index.ts

@@ -6,6 +6,9 @@ export const routes: Array<RouteRecordRaw> = [
     path: '/my',
     component: AppLayout,
     meta: { requireLogin: true },
-    children: [{ path: '', component: () => import('./views/Index.vue') }]
+    children: [
+      { path: '', component: () => import('./views/Index.vue') },
+      { path: 'course', component: () => import('./views/Course.vue') }
+    ]
   }
 ]

src/modules/my/views/Course.vue

+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { ICourseItem } from '@/types'
+import { getCourseList } from '../api'
+
+// 学习进度
+const dataset = ref<{ total: number; list: ICourseItem[] }>({ total: 0, list: [] })
+const fetchCourseList = () => {
+  getCourseList({ page_size: 100 }).then(res => {
+    dataset.value = res.data
+  })
+}
+const studyStatus = (progress: number) => {
+  if (progress === 100) {
+    return '已完成'
+  } else if (progress > 0) {
+    return '已学习'
+  } else {
+    return '未学习'
+  }
+}
+onMounted(() => {
+  fetchCourseList()
+})
+</script>
+
+<template>
+  <img src="https://webapp-pub.ezijing.com/project/prp-h5/banner_my_course.png" style="width: 100%" />
+  <p class="tips">如果你也是知识获得者，点击课程，晒出你的海报、说出你的感想，得到你的星星。</p>
+  <div v-for="(item, index) in dataset.list" :key="index" class="course-item">
+    <router-link :to="{ path: `/course/view/${item.id}` }" class="course-item-inner">
+      <img :src="item.course_picture" class="course-item-pic" />
+      <div class="course-item-content">
+        <h5>{{ item.course_name }}</h5>
+        <p class="t1">
+          <span v-for="(lecturer, index) in item.course_lectures" :key="index">{{ lecturer.lecturer_name }}</span>
+        </p>
+        <p class="t2">
+          <span>{{ item.course_chapters.big_total }}章节</span>
+          <span>{{ item.course_chapters.small_total }}课时</span>
+        </p>
+        <p class="t2">
+          <span>{{ item.pv }}人看过</span>
+          <span>{{ item.records_total }}人评论</span>
+        </p>
+        <p class="t3">{{ studyStatus(item.progress) }}</p>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tips {
+  padding: 0.1rem 0 0.2rem;
+  font-size: 0.24rem;
+  font-weight: 400;
+  color: #033974;
+  line-height: 0.36rem;
+}
+.course-item {
+  padding: 0.22rem;
+  background: #fff;
+  border-radius: 0.2rem;
+  margin-bottom: 0.3rem;
+}
+.course-item-inner {
+  display: flex;
+}
+.course-item-pic {
+  width: 1.6rem;
+  height: 1.9rem;
+  border-radius: 0.1rem;
+  overflow: hidden;
+  object-fit: cover;
+}
+.course-item-content {
+  flex: 1;
+  margin-left: 0.26rem;
+  line-height: 0.33rem;
+  overflow: hidden;
+  h5 {
+    font-size: 0.24rem;
+    font-weight: 500;
+    line-height: 0.33rem;
+    color: #4e4e4e;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .t1 {
+    margin-top: 0.05rem;
+    font-size: 0.24rem;
+    font-weight: 400;
+    line-height: 0.33rem;
+    color: #666;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .t2 {
+    margin-top: 0.05rem;
+    font-size: 0.2rem;
+    font-weight: 400;
+    color: #999;
+    line-height: 0.28rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    span + span {
+      margin-left: 0.2rem;
+    }
+  }
+  .t3 {
+    margin-top: 0.23rem;
+    font-size: 0.2rem;
+    font-weight: 400;
+    color: #999;
+    text-align: right;
+  }
+}
+</style>

src/modules/my/views/Index.vue

@@ -20,7 +20,7 @@ const menus: Array<{
   icon: string
 }> = [
   {
-    path: '/',
+    path: '/my/course',
     name: '我的课程',
     icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_1.png'
   },

src/router/index.ts

@@ -8,6 +8,7 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
   const user = useUserStore()
+  await user.getUser()
   if (to.meta.requireLogin && !user.isLogin) {
     location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
   }