feat: 添加富文本页面和视频播放功能

- 新增富文本内容展示页面
- 实现轮播图点击跳转逻辑，支持课程详情、视频播放和富文本内容
- 添加视频播放弹窗组件及相关控制方法
- 更新项目规则文档，补充开发规范

pages.json

@@ -97,6 +97,15 @@
 						// #endif
 					}
 				},
+				{
+					"path": "home/richtext",
+					"style": {
+						// #ifdef H5
+						"navigationStyle": "custom",
+						// #endif
+						"navigationBarTitleText": "内容详情"
+					}
+				},
 				{
 					"path": "user/introduce",
 					"style": {

pages/index/home.vue

@@ -163,6 +163,38 @@
         </view>
       </view>
     </view>
+    
+    <!-- 视频播放弹窗 -->
+    <uv-modal 
+      ref="videoModal"
+      title="视频播放"
+      :show-cancel-button="false"
+      :show-confirm-button="false"
+      width="90%"
+      :close-on-click-overlay="true"
+      @close="closeVideoModal"
+    >
+      <template #default>
+        <view class="video-container">
+          <video 
+            v-if="currentVideo"
+            :src="currentVideo"
+            controls
+            autoplay
+            :show-fullscreen-btn="true"
+            :show-play-btn="true"
+            :show-center-play-btn="true"
+            style="width: 100%; height: 400rpx; border-radius: 8rpx;"
+            @error="onVideoError"
+            @play="onVideoPlay"
+            @pause="onVideoPause"
+          ></video>
+          <view v-else class="video-loading">
+            <text>视频加载中...</text>
+          </view>
+        </view>
+      </template>
+    </uv-modal>
   </view>
 </template>
 
@@ -197,7 +229,10 @@ export default {
        // 推荐列表数据
        recommendList: [
          
-       ]
+       ],
+       
+       
+       currentVideo: ''
     }
   },
   
@@ -217,7 +252,34 @@ export default {
     // 轮播图点击事件
     onBannerClick(index) {
       console.log('点击轮播图:', index)
-      // 这里可以添加跳转逻辑
+      const bannerItem = this.bannerList[index]
+      if (!bannerItem) return
+      
+      // 根据 typ 字段判断跳转类型
+      switch(bannerItem.typ) {
+        case '1': // 课程详情
+          if (bannerItem.bookId) {
+            uni.navigateTo({
+              url: '/subPages/home/directory?id=' + bannerItem.bookId
+            })
+          }
+          break
+        case '2': // 视频播放
+          if (bannerItem.video) {
+            this.$refs.videoModal.open()
+            this.currentVideo = bannerItem.video
+          }
+          break
+        case '0': // 富文本内容
+          if (bannerItem.content) {
+            uni.navigateTo({
+              url: '/subPages/home/richtext?content=' + encodeURIComponent(bannerItem.content)
+            })
+          }
+          break
+        default:
+          console.log('未知的轮播图类型:', bannerItem.typ)
+      }
     },
     // 跳转计划定制
     goPlan(id, type) {
@@ -240,7 +302,12 @@ export default {
       if (bannerRes.code === 200){
         this.bannerList = bannerRes.result.map(item => ({
             image: item.img,
-            title: item.title   
+            title: item.title,
+            typ: item.typ,
+            bookId: item.bookId,
+            video: item.video,
+            content: item.content,
+            id: item.id
         }))
       }
     },
@@ -323,6 +390,32 @@ export default {
       uni.navigateTo({
         url: '/subPages/home/search?label=' + label.id
       })
+    },
+    
+    // 关闭视频弹窗
+    closeVideoModal() {
+      this.$refs.videoModal.close()
+      this.currentVideo = ''
+    },
+    
+    // 视频错误处理
+    onVideoError(e) {
+      console.error('视频播放错误:', e)
+      uni.showToast({
+        title: '视频播放失败',
+        icon: 'error'
+      })
+      this.closeVideoModal()
+    },
+    
+    // 视频开始播放
+    onVideoPlay() {
+      console.log('视频开始播放')
+    },
+    
+    // 视频暂停
+    onVideoPause() {
+      console.log('视频暂停播放')
     }
   },
 
@@ -706,4 +799,24 @@ export default {
     }
   }
 }
+
+// 视频弹窗样式
+.video-container {
+  position: relative;
+  padding: 20rpx 0;
+  
+  .video-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 400rpx;
+    background: #f5f5f5;
+    border-radius: 8rpx;
+    
+    text {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+}
 </style>

rule.txt

@@ -1,6 +1,7 @@
 1，优先使用uvUI
 2，优先使用uni.scss文件的SCSS变量$primary-color和其他三个还有动画变量
 3，图片在/static
-4，电脑系统配置Window 11
+4，电脑系统配置Window 11，项目使用uniapp+Vue2
 5，阿里云上传工具封装在@utils/oss-upload，api相关封装在@api，后台动态配置参数的获取 封装在@stores/index
-6.动态数据放到data中
+6.动态数据放到data中，静态数据放到computed中
+7.优先考虑H5环境

subPages/home/richtext.vue

@@ -0,0 +1,182 @@
+<template>
+  <view class="richtext-container">
+    <!-- 状态栏安全区域 -->
+    <uv-status-bar></uv-status-bar>
+    
+
+    
+    <!-- 富文本内容区域 -->
+    <view class="content-wrapper">
+      <view class="content-container">
+        <!-- 使用 uv-parse 组件渲染富文本 -->
+        <uv-parse 
+          v-if="htmlContent"
+          :content="htmlContent"
+          :tag-style="tagStyle"
+          :show-with-animation="true"
+          :animation-duration="300"
+        ></uv-parse>
+        
+        <!-- 加载状态 -->
+        <view v-else class="loading-container">
+          <uv-loading-icon mode="circle"></uv-loading-icon>
+          <text class="loading-text">内容加载中...</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      htmlContent: '',
+      // 富文本样式配置
+      tagStyle: {
+        p: 'margin: 16rpx 0; line-height: 1.6; color: #333;',
+        img: 'max-width: 100%; height: auto; border-radius: 8rpx; margin: 16rpx 0;',
+        h1: 'font-size: 36rpx; font-weight: bold; margin: 24rpx 0 16rpx 0; color: #222;',
+        h2: 'font-size: 32rpx; font-weight: bold; margin: 20rpx 0 12rpx 0; color: #333;',
+        h3: 'font-size: 28rpx; font-weight: bold; margin: 16rpx 0 8rpx 0; color: #444;',
+        strong: 'font-weight: bold; color: #222;',
+        em: 'font-style: italic; color: #666;',
+        ul: 'margin: 16rpx 0; padding-left: 32rpx;',
+        ol: 'margin: 16rpx 0; padding-left: 32rpx;',
+        li: 'margin: 8rpx 0; line-height: 1.5;',
+        blockquote: 'margin: 16rpx 0; padding: 16rpx; background: #f5f5f5; border-left: 4rpx solid #ddd; border-radius: 4rpx;',
+        code: 'background: #f5f5f5; padding: 4rpx 8rpx; border-radius: 4rpx; font-family: monospace;',
+        pre: 'background: #f5f5f5; padding: 16rpx; border-radius: 8rpx; overflow-x: auto; margin: 16rpx 0;'
+      }
+    }
+  },
+  
+  onLoad(options) {
+    // 获取传递的富文本内容
+    if (options.content) {
+      this.htmlContent = decodeURIComponent(options.content)
+    } else {
+      uni.showToast({
+        title: '内容加载失败',
+        icon: 'error'
+      })
+      setTimeout(() => {
+        this.goBack()
+      }, 1500)
+    }
+  },
+  
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack({
+        delta: 1
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.richtext-container {
+  min-height: 100vh;
+  background: #fff;
+}
+
+.content-wrapper {
+  padding: 0 32rpx 40rpx;
+}
+
+.content-container {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+  
+  .loading-text {
+    margin-top: 24rpx;
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+// 富文本内容样式优化
+:deep(.uv-parse) {
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #333;
+  
+  // 图片样式
+  img {
+    max-width: 100% !important;
+    height: auto !important;
+    border-radius: 8rpx;
+    margin: 16rpx 0;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  // 段落样式
+  p {
+    margin: 16rpx 0;
+    text-align: justify;
+    word-break: break-word;
+  }
+  
+  // 标题样式
+  h1, h2, h3, h4, h5, h6 {
+    margin: 24rpx 0 16rpx 0;
+    font-weight: bold;
+    line-height: 1.4;
+  }
+  
+  // 列表样式
+  ul, ol {
+    margin: 16rpx 0;
+    padding-left: 32rpx;
+    
+    li {
+      margin: 8rpx 0;
+      line-height: 1.5;
+    }
+  }
+  
+  // 引用样式
+  blockquote {
+    margin: 16rpx 0;
+    padding: 16rpx;
+    background: #f8f9fa;
+    border-left: 4rpx solid $primary-color;
+    border-radius: 4rpx;
+    font-style: italic;
+  }
+  
+  // 代码样式
+  code {
+    background: #f1f3f4;
+    padding: 4rpx 8rpx;
+    border-radius: 4rpx;
+    font-family: 'Courier New', monospace;
+    font-size: 24rpx;
+  }
+  
+  pre {
+    background: #f1f3f4;
+    padding: 16rpx;
+    border-radius: 8rpx;
+    overflow-x: auto;
+    margin: 16rpx 0;
+    
+    code {
+      background: none;
+      padding: 0;
+    }
+  }
+}
+</style>