更新：增加“精彩试听”列表；将课程列表元素提取公共组件

pages/course/search.vue

@@ -40,51 +40,13 @@
       <!-- 课程列表 -->
       <view v-if="!loading && courseList.length > 0" class="course-section">
         <view class="course-list">
-          <view
+          <list-item
             v-for="(item, index) in courseList"
             :key="index"
-            class="course-item"
-            @click="goCourseDetail(item.id)"
-          >
-            <image :src="item.squareImage" class="course-image" mode="aspectFit" />
-            <view class="course-info">
-              <view class="course-title">{{ item.title }}</view>
-              <view class="course-content" v-html="item.content"></view>
-              <!-- 课程标签 -->
-              <view class="course-tags">
-                <wd-tag v-if="item.level && item.level !== 0" type="primary">
-                  {{ item.level === 1 ? $t('courseSearch.levelBeginner') : $t('courseSearch.levelAdvanced') }}
-                </wd-tag>
-                <wd-tag v-if="item.selective === 1" type="warning">
-                  {{ $t('courseSearch.required') }}
-                </wd-tag>
-                <wd-tag v-if="item.selective === 2" type="success">
-                  {{ $t('courseSearch.elective') }}
-                </wd-tag>
-              </view>
-            </view>
-            <!-- 课程价格 -->
-            <view class="course-price">
-              <text v-if="item.courseCatalogueEntityList.length === 1">
-                {{
-                  item.courseCatalogueEntityList[0].halfFee === 0
-                    ? $t('courseSearch.free')
-                    : `¥${item.courseCatalogueEntityList[0].halfFee}/${item.courseCatalogueEntityList[0].fee}`
-                }}
-              </text>
-              <text v-if="item.courseCatalogueEntityList.length > 1">
-                <text v-for="(v, i) in item.courseCatalogueEntityList" :key="i">
-                  {{ formatCatalogueTitle(v.title) }}
-                  <text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
-                </text>
-                {{
-                  item.courseCatalogueEntityList[0].halfFee === 0
-                    ? $t('courseSearch.free')
-                    : ` ${$t('courseSearch.each')}${item.courseCatalogueEntityList[0].halfFee}/${item.courseCatalogueEntityList[0].fee}`
-                }}
-              </text>
-            </view>
-          </view>
+            :data="item"
+            :showToDetail="false"
+            desc="content"
+          />
         </view>
       </view>
 
@@ -102,6 +64,7 @@ import { onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import { courseApi } from '@/api/modules/course'
 import type { ICourse } from '@/types/search'
+import listItem from './list/components/list-item.vue'
 
 const { t } = useI18n()
 
@@ -207,32 +170,6 @@ const handleClear = () => {
   getHistory()
 }
 
-/**
- * 跳转到课程详情
- */
-const goCourseDetail = (courseId: number) => {
-  uni.navigateTo({
-    url: `/pages/course/courseDetail?id=${courseId}`
-  })
-}
-
-/**
- * 格式化课程目录标题
- * 提取"上/中/下"
- */
-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('')
-}
-
 /**
  * 页面挂载
  */
@@ -313,78 +250,6 @@ onShow(() => {
   text-shadow: 0 2rpx 4rpx rgba(0, 122, 255, 0.6);
 }
 
-// 商品网格样式
-.product-section {
-  margin-bottom: 40rpx;
-}
-
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20rpx;
-}
-
-.product-item {
-  background: #fff;
-  border-radius: 15rpx;
-  padding: 14rpx;
-  position: relative;
-  overflow: hidden;
-
-  .vip-badge {
-    position: absolute;
-    top: 10rpx;
-    left: 10rpx;
-    z-index: 10;
-    background: #f94f04;
-    color: #fff;
-    font-size: 22rpx;
-    font-weight: bold;
-    padding: 4rpx 8rpx;
-    border-radius: 4rpx;
-  }
-
-  .product-image {
-    width: 100%;
-    height: 220rpx;
-    border-radius: 10rpx;
-    background: #f0f0f0;
-  }
-
-  .product-name {
-    font-size: 24rpx;
-    font-weight: bold;
-    margin-top: 10rpx;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .product-price {
-    font-size: 26rpx;
-    margin-top: 10rpx;
-
-    .price-vip {
-      color: #e97512;
-      font-size: 26rpx;
-      font-weight: bold;
-    }
-
-    .price-original {
-      color: #8a8a8a;
-      font-size: 22rpx;
-      margin-left: 8rpx;
-      text-decoration: line-through;
-    }
-
-    .price-normal {
-      color: #e97512;
-      font-size: 26rpx;
-      font-weight: bold;
-    }
-  }
-}
-
 // 课程列表样式
 .course-section {
   margin-bottom: 40rpx;
@@ -395,62 +260,4 @@ onShow(() => {
   flex-direction: column;
   gap: 20rpx;
 }
-
-.course-item {
-  display: flex;
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 20rpx;
-  position: relative;
-  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
-
-  .course-image {
-    width: 250rpx;
-    height: 250rpx;
-    margin-right: 20rpx;
-    border-radius: 10rpx;
-    background: #f0f0f0;
-    flex-shrink: 0;
-  }
-
-  .course-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    .course-title {
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
-      margin-bottom: 10rpx;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .course-content {
-      font-size: 24rpx;
-      color: #9c9c9c;
-      line-height: 30rpx;
-      height: 60rpx;
-      overflow: hidden;
-      margin-bottom: 10rpx;
-    }
-
-    .course-tags {
-      display: flex;
-      gap: 10rpx;
-      flex-wrap: wrap;
-    }
-  }
-
-  .course-price {
-    position: absolute;
-    bottom: 20rpx;
-    right: 20rpx;
-    font-size: 32rpx;
-    font-weight: 500;
-    color: red;
-  }
-}
 </style>