feat(custom): 课程小程序首页更改

src/components/course-block.vue

@@ -5,7 +5,12 @@
         <text class="title">{{ title }}</text>
         <text class="desc">{{ subtitle }}</text>
       </view>
-      <view class="study-count">{{ studyCount }}万人已学习</view>
+      <view
+        v-if="formattedStudyCount"
+        class="study-count"
+      >
+        {{ formattedStudyCount }}人已学习
+      </view>
     </view>
 
     <view class="course-list">
@@ -13,17 +18,18 @@
         v-for="(item, index) in showCourseList"
         :key="index"
         class="course-item"
+        @tap="handleCourseClick(item)"
       >
         <image
           class="course-img"
-          :src="item.image || '/static/images/course-placeholder.png'"
+          :src="item.homeCover"
           mode="aspectFill"
         />
         <view class="course-info">
           <view class="course-title">{{ item.title }}</view>
-          <view class="course-desc">{{ item.desc }}</view>
+          <view class="course-desc">{{ item.subTitle }}</view>
           <view class="course-meta">
-            <text class="enroll-count">{{ item.enrollCount }}人已报名</text>
+            <text class="enroll-count">{{ item.applyNum }}人已报名</text>
             <button class="study-btn">去学习</button>
           </view>
         </view>
@@ -36,12 +42,16 @@
       @tap="toggleShowMore"
     >
       <text>{{ isExpanded ? '收起' : '展开更多' }}</text>
-      <text :class="['arrow', isExpanded ? 'up' : '']">∨</text>
+      <image
+        :class="isExpanded ? 'arrow up' : 'arrow'"
+        src="https://static.ydlcdn.com/miniapp/ydl-group-course/arrow.png"
+      />
     </view>
   </view>
 </template>
 
 <script>
+import { hostPrefix } from '@/config'
 export default {
   name: 'CourseBlock',
   props: {
@@ -71,8 +81,26 @@ export default {
     showCourseList() {
       return this.isExpanded ? this.courseList : this.courseList.slice(0, 2)
     },
+    formattedStudyCount() {
+      const count = this.studyCount
+      if (count >= 10000) {
+        let formatted = (count / 10000).toFixed(1)
+        formatted = formatted.replace(/\.0$/, '')
+        return `${formatted}万`
+      } else {
+        return count
+      }
+    },
   },
   methods: {
+    handleCourseClick(item) {
+      // console.log(item)/h5-course/detail/
+      uni.navigateTo({
+        url: `/pages/web/web?title=${encodeURIComponent(item.title)}&loadUrl=${encodeURIComponent(
+          `${hostPrefix}/h5-course/detail/${item.id}`,
+        )}`,
+      })
+    },
     toggleShowMore() {
       this.isExpanded = !this.isExpanded
     },
@@ -85,7 +113,7 @@ export default {
   margin: 12px;
   padding: 12px 10px;
   background: #fff;
-  border-radius: 16px;
+  border-radius: 12px;
 
   .block-header {
     display: flex;
@@ -138,12 +166,16 @@ export default {
         margin-right: 8px;
         border-radius: 4px;
         background-color: #d8d8d8;
+        flex-shrink: 0;
       }
 
       .course-info {
         flex: 1;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
         .course-title {
           color: #000000;
@@ -154,6 +186,7 @@ export default {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          flex-shrink: 0;
         }
 
         .course-desc {
@@ -201,14 +234,19 @@ export default {
   }
 
   .show-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-    padding-top: 20rpx;
-    font-size: 26rpx;
-    color: #999;
+    padding-top: 20px;
+    color: #999999;
+    font-weight: 400;
+    font-size: 12px;
 
     .arrow {
-      margin-left: 8rpx;
-      font-size: 20rpx;
+      width: 8px;
+      height: 8px;
+      margin-left: 8px;
       display: inline-block;
       transition: transform 0.3s ease;
 

src/pages.json

@@ -56,7 +56,7 @@
 	},
 	"tabBar": {
 		"color": "#76787C",
-		"selectedColor": "#55B5F3",
+		"selectedColor": "#0092FF",
 		"iconWidth": "24px",
 		"spacing": "9px",
 		"list": [