diff --git a/pages.json b/pages.json index 01f690e..24f6b74 100644 --- a/pages.json +++ b/pages.json @@ -97,6 +97,15 @@ // #endif } }, + { + "path": "home/richtext", + "style": { + // #ifdef H5 + "navigationStyle": "custom", + // #endif + "navigationBarTitleText": "内容详情" + } + }, { "path": "user/introduce", "style": { diff --git a/pages/index/home.vue b/pages/index/home.vue index 8d5a1c7..229427b 100644 --- a/pages/index/home.vue +++ b/pages/index/home.vue @@ -163,6 +163,38 @@ + + + + + @@ -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; + } + } +} diff --git a/rule.txt b/rule.txt index f8815ed..cb4456b 100644 --- a/rule.txt +++ b/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中 \ No newline at end of file +6.动态数据放到data中,静态数据放到computed中 +7.优先考虑H5环境 \ No newline at end of file diff --git a/subPages/home/richtext.vue b/subPages/home/richtext.vue new file mode 100644 index 0000000..5fc82b1 --- /dev/null +++ b/subPages/home/richtext.vue @@ -0,0 +1,182 @@ + + + + + \ No newline at end of file