updates

src/components/PublishItem.vue

@@ -5,7 +5,7 @@ const props = defineProps<{ data: any }>()
 
 const imageList = computed<string[]>(() => {
   try {
-    return JSON.parse(props.data.data.content)
+    return JSON.parse(props.data.picture)
   } catch (error) {
     return []
   }
@@ -24,14 +24,22 @@ const onImagePreview = function (index: number) {
       </div>
     </div>
     <div class="publish-item-bd">
-      <div class="publish-item-content" v-html="data.content || data.desc"></div>
-      <ul class="publish-item-picture">
+      <div class="publish-content" v-html="data.content || data.desc"></div>
+      <ul class="publish-picture">
         <li v-for="(item, index) in imageList" :key="index" @click="onImagePreview(index)"><img :src="item" /></li>
       </ul>
-      <div class="publish-item-tools">
+      <div class="publish-tools">
         <p class="t1">{{ data.created_time }}</p>
         <p class="t2">评论</p>
       </div>
+      <!-- 评论 -->
+      <div class="publish-comments" v-if="data.comments.total">
+        <div class="comment-item" v-for="item in data.comments.list" :key="item.id">
+          <div class="comment-item-hd">{{ item.user_name }}</div>
+          <div class="comment-item-bd">{{ item.content }}</div>
+        </div>
+        <div class="comment-more">查看{{ data.comments.total }}条评论 <van-icon name="arrow" /></div>
+      </div>
     </div>
   </div>
 </template>
@@ -63,13 +71,13 @@ const onImagePreview = function (index: number) {
 .publish-item-bd {
   margin-left: 0.86rem;
 }
-.publish-item-content {
+.publish-content {
   font-size: 0.24rem;
   font-weight: 400;
   line-height: 0.3rem;
   color: #333333;
 }
-.publish-item-picture {
+.publish-picture {
   margin-top: 0.1rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -84,7 +92,7 @@ const onImagePreview = function (index: number) {
     }
   }
 }
-.publish-item-tools {
+.publish-tools {
   margin-top: 0.1rem;
   display: flex;
   align-items: center;
@@ -100,4 +108,32 @@ const onImagePreview = function (index: number) {
     line-height: 0.36rem;
   }
 }
+.publish-comments {
+  margin: 0.1rem 0;
+  padding: 0.1rem 0.2rem;
+  background-color: #f5f5f5;
+  border-radius: 0.1rem;
+}
+.comment-item {
+  margin-bottom: 0.2rem;
+}
+.comment-item-hd {
+  font-size: 0.24rem;
+  color: #033974;
+}
+.comment-item-bd {
+  margin-top: 0.09rem;
+  font-size: 0.22rem;
+  color: #4e4e4e;
+  line-height: 0.32rem;
+}
+.comment-more {
+  padding: 0.16rem 0;
+  font-size: 0.24rem;
+  color: #033974;
+  line-height: 0.36rem;
+  text-align: center;
+  border-top: 0.01rem solid #d3d3d3;
+  cursor: pointer;
+}
 </style>

src/components/PublishItemComment.vue

-<script setup lang="ts">
-defineProps({ list: { type: Array } })
-</script>
-
-<template>
-  <div class="comment-item" v-for="item in list" :key="item.id">
-    <div class="comment-item-hd">
-      <img :src="item.user_avatar" />
-      <div class="comment-item-hd-info">
-        <h5>{{ item.user_name }}</h5>
-        <p>{{ item.create_time }}</p>
-      </div>
-    </div>
-    <div class="comment-item-bd"></div>
-  </div>
-</template>

src/modules/course/api.ts

@@ -11,6 +11,10 @@ export function getCourseView(params: { id: string }) {
 }
 
 // 获取课程列表
+export function getChapterView(params: { chapter_id: string; page_size?: number; page?: number }) {
+  return httpRequest.get('/api/psp/v1/learning/chapter-view', { params })
+}
+// 打卡
 export function coursePublish(data: {
   chapter_id: string
   course_id: string

src/modules/course/views/View.vue

@@ -2,9 +2,10 @@
 import { ref, onMounted } from 'vue'
 import { Toast } from 'vant'
 import PublishItem from '@/components/PublishItem.vue'
-import { getCourseView } from '../api'
+import { getCourseView, getChapterView } from '../api'
 const props = defineProps<{ id: string }>()
 
+// 课程
 const data = ref()
 function getCourse() {
   const toast = Toast.loading({ message: '加载中...', forbidClick: true })
@@ -13,9 +14,30 @@ function getCourse() {
     toast.clear()
   })
 }
-onMounted(() => {
-  getCourse()
-})
+onMounted(getCourse)
+
+// 章节
+const show = ref<boolean>(false)
+// 当前选中的章节
+const activeChapter = ref()
+// 打卡记录
+const chapterRecord = ref({ total: 0, list: [] })
+// 获取章节打卡记录
+const getChapterRecord = function () {
+  const toast = Toast.loading({ message: '加载中...', forbidClick: true })
+  const params = {
+    chapter_id: activeChapter.value.id
+  }
+  getChapterView(params).then(res => {
+    chapterRecord.value = res.data
+    toast.clear()
+  })
+}
+const showChapterRecord = function (data: any) {
+  activeChapter.value = data
+  show.value = true
+  getChapterRecord()
+}
 </script>
 
 <template>
@@ -55,19 +77,24 @@ onMounted(() => {
       <div class="course-chapters">
         <div class="course-chapter-item" v-for="item in data.course_chapters.list" :key="item.id">
           <h2 class="chapter-title">{{ item.chapter_name }}</h2>
-          <div class="chapter-button">
-            <router-link
-              :to="{ path: '/course/publish', query: { course_id: id, chapter_id: item.id } }"
-              class="chapter-button"
-            >
-              课程总结
-            </router-link>
-          </div>
           <PublishItem v-for="publish in item.records.list" :data="publish" :key="publish.id"></PublishItem>
+          <div class="chapter-view" @click="showChapterRecord(item)">查看本章所有打卡记录</div>
         </div>
       </div>
     </div>
   </div>
+  <van-popup v-model:show="show" round position="bottom" :style="{ height: '80%' }">
+    <div class="course-chapter">
+      <PublishItem v-for="publish in chapterRecord.list" :data="publish" :key="publish.id"></PublishItem>
+      <van-button
+        block
+        round
+        class="my-button"
+        :to="{ path: '/course/publish', query: { course_id: id, chapter_id: activeChapter.id } }"
+        >我也要拍照得星星</van-button
+      >
+    </div>
+  </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -167,24 +194,24 @@ onMounted(() => {
   border-top-left-radius: 0.2rem;
   border-top-right-radius: 0.2rem;
   .chapter-title {
+    margin-bottom: 0.22rem;
     font-size: 0.28rem;
     font-weight: bold;
     color: #333333;
     line-height: 0.28rem;
   }
 }
-.chapter-button {
-  text-align: right;
-  a {
-    display: inline-block;
-    height: 0.4rem;
-    margin: 0.22rem 0 0.22rem auto;
-    padding: 0 0.15rem;
-    font-size: 0.22rem;
-    line-height: 0.4rem;
-    color: #ffffff;
-    background: linear-gradient(164deg, #f7c988 0%, #e5a448 100%);
-    border-radius: 0.2rem;
-  }
+.chapter-view {
+  margin-bottom: 0.56rem;
+  padding: 0.16rem 0;
+  font-size: 0.24rem;
+  color: #033974;
+  line-height: 0.36rem;
+  text-align: center;
+  border-top: 0.01rem solid #d3d3d3;
+  cursor: pointer;
+}
+.course-chapter {
+  padding: 0.38rem 0.24rem;
 }
 </style>

src/modules/home/components/LearningMapCourse.vue

@@ -12,10 +12,20 @@ function fetchCourseList() {
     dataset.value = res.data
   })
 }
+const studyStatus = function (progress: number) {
+  if (progress === 100) {
+    return '已完成'
+  } else if (progress > 0) {
+    return '已学习'
+  } else {
+    return '未学习'
+  }
+}
 onMounted(() => {
   fetchCourseList()
 })
 </script>
+
 <template>
   <swiper slides-per-view="auto" :space-between="10">
     <swiper-slide v-for="(item, index) in dataset.list" :key="index" class="course-item">
@@ -34,7 +44,7 @@ onMounted(() => {
             <span>{{ item.pv }}人看过</span>
             <span>{{ item.records_total }}人评论</span>
           </p>
-          <p class="t3">{{ item.status }}</p>
+          <p class="t3">{{ studyStatus(item.progress) }}</p>
         </div>
       </router-link>
     </swiper-slide>