更新：增加课程首页分类跳转列表页；优化全站列表分页加载；

components/course/ListItem.vue

@@ -0,0 +1,153 @@
+<template>
+  <wd-card type="rectangle" custom-class="list-item-card" @click="goCourseDetail(data.id)">
+    <view class="content">
+      <image :src="data[cover]" mode="aspectFill" class="course-cover-image"/>
+      <view class="course-info">
+        <view class="course-name">{{ data[title] }}</view>
+        <view class="course-desc" v-html="data[desc]"></view>
+        <!-- 课程标签 -->
+        <view class="course-tags">
+          <wd-tag v-if="data.level && data.level !== 0" type="primary">
+            {{ data.level === 1 ? $t('courseSearch.levelBeginner') : $t('courseSearch.levelAdvanced') }}
+          </wd-tag>
+          <wd-tag v-if="data.selective === 1" type="warning">
+            {{ $t('courseSearch.required') }}
+          </wd-tag>
+          <wd-tag v-if="data.selective === 2" type="success">
+            {{ $t('courseSearch.elective') }}
+          </wd-tag>
+        </view>
+      </view>
+    </view>
+
+    <template #footer>
+      <view class="course-item-footer">
+        <!-- 课程价格 -->
+        <view v-if="data.courseCatalogueEntityList" class="text-[red]">
+          <text v-if="data.courseCatalogueEntityList.length === 1">
+            {{
+              data.courseCatalogueEntityList[0].halfFee === 0
+                ? $t('courseSearch.free')
+                : `¥${data.courseCatalogueEntityList[0].halfFee}/${data.courseCatalogueEntityList[0].fee}`
+            }}
+          </text>
+          <text v-if="data.courseCatalogueEntityList.length > 1">
+            <text v-for="(v, i) in data.courseCatalogueEntityList" :key="i">
+              {{ formatCatalogueTitle(v.title) }}
+              <text v-if="i !== data.courseCatalogueEntityList.length - 1">/</text>
+            </text>
+            {{
+              data.courseCatalogueEntityList[0].halfFee === 0
+                ? $t('courseSearch.free')
+                : ` ${$t('courseSearch.each')}${data.courseCatalogueEntityList[0].halfFee}/${data.courseCatalogueEntityList[0].fee}`
+            }}
+          </text>
+        </view>
+        <wd-button v-if="showToDetail" size="small" custom-class="course-detail-btn">课程详情</wd-button>
+      </view>
+    </template>
+  </wd-card>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: 'title'
+  },
+  desc: {
+    type: String,
+    default: 'desc'
+  },
+  cover: {
+    type: String,
+    default: 'image'
+  },
+  showToDetail: {
+    type: Boolean,
+    default: true
+  }
+})
+
+/**
+ * 格式化课程目录标题
+ * 提取"上/中/下"
+ */
+const formatCatalogueTitle = (title: string): string => {
+  const keywords = ['上部', '中部', '下部']
+  const result: string[] = []
+
+  keywords.forEach((keyword) => {
+    if (title.includes(keyword)) {
+      result.push(keyword.substring(0, 1))
+    }
+  })
+
+  return result.join('')
+}
+
+/**
+ * 跳转到课程详情
+ */
+const goCourseDetail = (courseId: number) => {
+  uni.navigateTo({
+    url: `/pages/course/details/course?id=${courseId}`
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.list-item-card {
+  box-shadow: 0px 0px 10px 0px #a7bbe4 !important;
+  border-radius: 10px !important;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  .course-cover-image {
+    width: 124px;
+    height: 100px;
+  }
+  .course-info {
+    flex: 1;
+    margin-left: 10px;
+    .course-name {
+      color: rgba(0,0,0,0.85);
+      font-size: 16px;
+    }
+    .course-desc {
+      color: rgba(0,0,0,0.4);
+      font-size: 12px;
+      line-height: 1.5;
+      max-height: 4.5em;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.course-item-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.course-detail-btn {
+  background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
+  color: #fff !important;
+  margin-left: 10px;
+}
+</style>

components/course/VideoPlayer.vue

@@ -149,7 +149,7 @@ const handleFullscreenChange = (e: any) => {
 const handleVideoError = (e: any) => {
   console.error('视频播放错误:', e)
   uni.showToast({
-    title: '视频加载失败',
+    title: '课程视频播放组件正在开发中，现在还不能播放视频',
     icon: 'none'
   })
 }