From 1cc611d68dc5fd3664c88e4e01c1d56b4e13b70c Mon Sep 17 00:00:00 2001 From: zoujiandong <10130823232@qq.com> Date: Mon, 1 Sep 2025 19:01:30 +0800 Subject: [PATCH] =?UTF-8?q?9.1=20=E5=A4=9C=E6=99=9A=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- TODO.md | 293 +++------------------------- api/api.js | 2 +- pages_app/ppt/ppt.vue | 152 +++++++++++---- pages_app/zhinan/zhinan.vue | 9 +- pages_app/zhinanList/zhinanList.vue | 289 ++++++++++++++++++--------- 5 files changed, 341 insertions(+), 404 deletions(-) diff --git a/TODO.md b/TODO.md index 31b9243..7798663 100644 --- a/TODO.md +++ b/TODO.md @@ -1,272 +1,29 @@ -# 精品课页面功能改进完成 +# TODO List -## ✅ 已完成功能 +## 已完成任务 +- [x] 调用API里的指南标签接口并集成到筛选功能 +- [x] 为指南列表页面添加scroll-view的上拉加载和下拉刷新功能 +- [x] 为指南列表标题添加超过2行显示省略号功能 +- [x] 修复PPT页面的上拉加载功能 + - [x] 修复页码递增逻辑问题 + - [x] 添加详细的调试日志 + - [x] 添加测试按钮用于手动触发 + - [x] 修复排序功能 -### 🎯 **主横幅板块升级** -1. **多个横幅图片** - 从单个图片改为5个轮播横幅 -2. **自动滑动功能** - 使用swiper组件实现自动轮播 -3. **丰富的内容展示** - 每个横幅包含标题、副标题、专家信息等 -4. **指示器显示** - 底部圆点指示器显示当前页面位置 +## 当前任务 +- [ ] 修复指南列表页面的上拉加载功能 + - [x] 修复页码递增逻辑问题 + - [x] 添加详细的调试日志 + - [x] 添加测试按钮用于手动触发 + - [ ] 测试scroll-view的scrolltolower事件是否正常触发 + - [ ] 检查API返回数据结构是否正确 -### 🎯 **福利课堂板块升级** -1. **多个福利项目** - 从单个横幅改为5个福利项目 -2. **左右滑动功能** - 使用scroll-view实现横向滚动 -3. **丰富的内容展示** - 每个项目包含标题、副标题、讲师、价格等信息 +## 待办任务 +- [ ] 优化页面性能 +- [ ] 添加错误处理机制 +- [ ] 完善用户体验 -### 🎯 **课程详情页面创建** -1. **100%还原设计图** - 完全按照图片设计实现 -2. **完整的页面结构** - 包含所有设计元素和功能 -3. **专业的UI设计** - 符合医疗课程的专业性要求 - -## 📱 **具体实现内容** - -### **主横幅轮播功能** - -#### **数据结构** -- 添加了`bannerList`数组，包含5个横幅项目 -- 每个项目包含：id、title、subtitle、image、link等字段 - -#### **UI组件** -- 使用`swiper`组件实现自动轮播 -- 设置`autoplay="true"`启用自动播放 -- 设置`interval="3000"`每3秒切换一次 -- 设置`duration="500"`切换动画时长500ms -- 设置`indicator-dots="true"`显示指示器 - -#### **样式设计** -- 轮播图高度：300rpx -- 圆角设计：16rpx -- 文字覆盖层：底部渐变背景 -- 文字阴影：提升可读性 - -#### **横幅内容** -1. **小懂医生讲HIV和感染** - 黄湛镰 副主任医师 -2. **肝脏肿瘤临床影像学习** - 王学浩 教授 -3. **慢性肝病营养治疗指南** - 段钟平 教授 -4. **肝移植术后管理要点** - 郑树森 院士 -5. **肝癌早期筛查与预防** - 陈孝平 院士 - -### **福利课堂板块** - -#### **数据结构** -- 添加了`welfareList`数组，包含5个福利项目 -- 每个项目包含：id、title、subtitle、teacher、price、image等字段 - -#### **UI组件** -- 使用`scroll-view`组件实现横向滚动 -- 设置`scroll-x="true"`启用水平滚动 -- 设置`show-scrollbar="false"`隐藏滚动条 - -#### **样式设计** -- 每个福利卡片宽度：400rpx -- 卡片间距：24rpx -- 圆角设计：16rpx -- 阴影效果：0 4rpx 12rpx rgba(0,0,0,0.1) -- 文字溢出处理：ellipsis + nowrap - -#### **交互功能** -- 点击横幅触发`goBannerDetail`方法 -- 点击福利卡片触发`goWelfareDetail`方法 -- 显示Toast提示信息 -- 预留了详情页面跳转接口 - -### **课程详情页面** - -#### **页面结构** -- **自定义导航栏** - 红色标题"课程详情"，左侧返回按钮，右侧分享按钮 -- **主横幅区域** - 400rpx高度，蓝色背景，居中显示课程标题 -- **课程信息区** - 白色背景，显示课程标题、课时信息、返现标签 -- **标签导航栏** - 三个标签：课程介绍（激活）、课程目录、评价(2) -- **课程介绍内容** - 小横幅和6位讲师信息网格布局 -- **底部购买栏** - 固定底部，显示价格¥80.00和立即购买按钮 - -#### **设计细节** -- **导航栏标题**：红色字体，符合医疗主题 -- **主横幅**：蓝色渐变背景，白色文字阴影 -- **返现标签**：红色背景，白色文字 -- **标签导航**：红色下划线指示器 -- **讲师网格**：3列布局，圆形头像，医院信息 -- **购买按钮**：红色主题色，圆角设计 - -#### **讲师信息** -1. **王建设 教授** - 复旦大学附属儿童医院 -2. **黄燕 教授** - 中南大学湘雅医院 -3. **田沂 教授** - 中南大学湘雅二医院 -4. **李教授** - 知名医院 -5. **张教授** - 知名医院 -6. **刘教授** - 知名医院 - -## 🖼️ **图片资源** -- 使用现有的static目录图片 -- 包括：lunbo_bg.png、paper_bg.png、pap_bg.png、bo_bg.png、livebg.png - -## 🚀 **技术特点** - -- ✅ 响应式设计，适配不同屏幕尺寸 -- ✅ 流畅的自动轮播体验 -- ✅ 优雅的横向滚动体验 -- ✅ 优雅的卡片式布局 -- ✅ 完整的数据绑定和事件处理 -- ✅ 符合uniapp最佳实践 -- ✅ 100%还原设计图效果 - -## 📝 **后续优化建议** - -1. **添加分页指示器** - 显示当前滚动位置 -2. **实现手动滑动** - 支持用户手动滑动轮播图 -3. **添加加载动画** - 提升用户体验 -4. **图片懒加载** - 优化性能 -5. **缓存机制** - 减少重复请求 -6. **轮播图暂停** - 触摸时暂停自动播放 -7. **课程目录功能** - 实现课程目录标签页 -8. **评价系统** - 实现评价标签页功能 -9. **购买流程** - 完善购买和支付功能 - -## 🔧 **问题修复记录** - -### **课程跳转功能修复** ✅ -- **问题描述**: 点击课程卡片没有跳转页面，只显示Toast提示 -- **修复内容**: - - 修改`goWelfareDetail`方法，从Toast提示改为页面跳转 - - 修改`goCourseDetail`方法，添加页面跳转功能 - - 修改`goBannerDetail`方法，添加页面跳转功能 - - 给精品小课添加点击事件和跳转方法 - - 给学完返现卡片添加点击事件和跳转方法 -- **跳转目标**: 所有课程相关点击都跳转到`/pages_course/course_detail/course_detail` -- **修复状态**: 已完成，所有课程卡片现在都能正常跳转 - -### **标签导航切换功能修复** ✅ -- **问题描述**: 课程详情页面的标签导航点击没有切换功能 -- **修复内容**: - - 添加`activeTab`状态管理当前激活的标签 - - 实现`switchTab`方法处理标签切换逻辑 - - 为每个标签添加点击事件和动态样式绑定 - - 添加标签切换的反馈提示 -- **功能实现**: - - 课程介绍（默认激活） - - 课程目录（显示开发中提示） - - 评价(2)（显示开发中提示） -- **修复状态**: 已完成，标签导航现在可以正常点击切换 - -### **课程目录功能开发** ✅ -- **功能描述**: 实现完整的课程目录标签页功能 -- **开发内容**: - - 课程概览：总课时、总时长、学习进度 - - 章节列表：3个章节，每个章节包含多个课时 - - 交互功能：章节展开/收起、课时点击 - - 状态管理：未解锁、已解锁、已完成状态 -- **数据结构**: - - `chapterList`：章节数组，包含标题、时长、状态、课时列表 - - `reviewList`：评价数组，包含用户信息、评分、内容、时间 -- **交互方法**: - - `toggleChapter(index)`：切换章节展开状态 - - `goLesson(lesson)`：进入课时学习 -- **UI设计**: - - 课程概览卡片：渐变背景，三列布局 - - 章节卡片：圆角设计，阴影效果，状态标签 - - 课时列表：缩进布局，播放图标，状态显示 -- **开发状态**: 已完成，课程目录功能完全可用 - -### **二级评论功能开发** ✅ -- **功能描述**: 实现完整的二级评论和回复功能 -- **开发内容**: - - 二级评论展示：支持多级回复结构 - - 回复按钮：每个评价都有回复功能 - - 回复输入框：动态显示/隐藏的输入界面 - - 讲师标识：讲师回复显示特殊标签 -- **数据结构**: - - 扩展`reviewList`：每个评价包含`replies`数组 - - 回复对象：包含用户信息、时间、内容、讲师标识 - - 状态管理：`activeReplyId`、`replyText`等 -- **交互方法**: - - `showReplyInput(reviewId)`：显示回复输入框 - - `cancelReply()`：取消回复 - - `submitReply(reviewId)`：提交回复 -- **UI设计**: - - 回复按钮：圆角设计，聊天图标 - - 二级评论：左侧边框，缩进布局 - - 讲师标签：红色背景，白色文字 - - 回复输入框：灰色背景，取消/发送按钮 -- **开发状态**: 已完成，二级评论功能完全可用 - -### **限时优惠模块开发** ✅ -- **功能描述**: 实现完整的限时优惠和倒计时功能 -- **开发内容**: - - 价格展示：当前价格¥39.00，原价¥390.00（划线显示） - - 优惠标签：白色背景的"限时优惠"标签 - - 倒计时功能：实时倒计时显示剩余时间 - - 自动更新：每秒更新倒计时数据 -- **数据结构**: - - `countdown`：包含天、时、分、秒的倒计时对象 - - `countdownTimer`：倒计时定时器引用 -- **交互方法**: - - `startCountdown()`：启动倒计时，计算剩余时间 - - 自动清理：页面卸载时清除定时器 -- **UI设计**: - - 渐变背景：红色到橙色的渐变效果 - - 左侧布局：价格信息和优惠标签（占2/3宽度） - - 右侧布局：倒计时文字和时间显示（占1/3宽度） - - 时间盒子：橙色背景的时分秒显示框 -- **开发状态**: 已完成，限时优惠功能完全可用 - -### **课程评论页面开发** ✅ -- **功能描述**: 创建专门的课程评价提交页面 -- **开发内容**: - - 自定义导航栏：红色"评价课程"标题，左侧返回按钮 - - 星级评分系统：5颗星星，点击选择评分 - - 动态反馈文字：根据评分显示对应的评价反馈 - - 评价输入框：300字限制，多行提示文字 - - 字数统计：实时显示已输入字数/总字数 - - 提交按钮：青色主题色，圆角设计 - - 奖励信息：显示积分奖励说明 -- **具体实现**: - - **评分系统**：1-5星评分，对应不同反馈文字 - - **输入验证**：必须选择评分和填写内容才能提交 - - **页面跳转**：从课程详情页"评价"标签页进入 - - **返回逻辑**：提交成功后自动返回上一页 -- **数据结构**: - - `currentRating`：当前选择的星级评分 - - `reviewContent`：评价内容文本 - - `ratingFeedback`：评分对应的反馈文字 -- **交互方法**: - - `setRating(rating)`：设置星级评分 - - `updateRatingFeedback()`：更新评分反馈文字 - - `submitReview()`：提交评价内容 - - `goToReview()`：跳转到评论页面 -- **UI设计**: - - 导航栏：红色标题，符合医疗主题 - - 星星图标：48rpx大小，黄色填充，灰色未填充 - - 输入框：浅灰色背景，圆角设计，300rpx高度 - - 提交按钮：青色背景，白色文字，88rpx高度 -- **开发状态**: 已完成，课程评论功能完全可用 - -### **我的课程页面开发** ✅ -- **功能描述**: 创建完整的"我的课程"页面，包含标签切换和课程管理 -- **开发内容**: - - 自定义导航栏：红色"我的课程"标题，左侧返回按钮，右侧搜索按钮 - - 标签切换功能：学习中/已学完两个标签，带分隔线设计 - - 课程列表展示：课程图片、标题、课时信息、学习进度 - - 特殊标签显示：福利课堂、学完返现等特殊标识 - - 订单记录浮动按钮：青色圆形按钮，固定位置显示 - - 底部导航栏：精品课（未激活）、我的课程（激活状态） -- **具体实现**: - - **标签系统**：默认激活"学习中"标签，点击切换显示不同课程列表 - - **课程数据结构**：包含id、标题、课时数、状态、已学课时、图片、标签等 - - **响应式布局**：课程卡片自适应，文字溢出处理，标签动态显示 - - **交互功能**：点击课程跳转详情页，点击标签切换内容，底部导航跳转 -- **数据结构**: - - `activeTab`：当前激活的标签（learning/completed） - - `courseList`：按标签分组的课程数据 - - `currentCourseList`：计算属性，根据当前标签返回对应课程列表 -- **交互方法**: - - `switchTab(tab)`：切换标签，更新课程列表显示 - - `goCourseDetail(course)`：跳转到课程详情页面 - - `goOrderRecord()`：进入订单记录功能 - - `goPremiumCourses()`：跳转到精品课页面 -- **UI设计**: - - 导航栏：红色主题色，符合医疗应用风格 - - 标签设计：居中布局，分隔线分隔，激活状态红色高亮 - - 课程卡片：白色背景，圆角设计，阴影效果，左侧图片右侧信息 - - 浮动按钮：青色背景，圆形图标，固定位置，阴影效果 - - 底部导航：红色激活状态，图标+文字布局 -- **开发状态**: 已完成，"我的课程"页面功能完全可用 +## 技术债务 +- [ ] 代码重构和优化 +- [ ] 添加单元测试 +- [ ] 文档更新 diff --git a/api/api.js b/api/api.js index e26ddbe..d5a0847 100644 --- a/api/api.js +++ b/api/api.js @@ -240,7 +240,7 @@ const api = { }, //指南标签 guideTag(data){ - return request('/expertApp/tagList', data, 'post', false); + return request('/expertAPI/tagList', data, 'post', false); }, // 肝胆新闻相关API diff --git a/pages_app/ppt/ppt.vue b/pages_app/ppt/ppt.vue index a96ed89..f035863 100644 --- a/pages_app/ppt/ppt.vue +++ b/pages_app/ppt/ppt.vue @@ -9,14 +9,20 @@ height="140rpx" :border="false" backgroundColor="#eeeeee" - > + > + + - {{sort==2?'最新':'最热'}} + {{sort==0?'最新':'最热'}} @@ -47,17 +53,24 @@ 📄 - {{ item.title }} - {{ item.author }} + {{item.title}} + + {{ item.providername }} + {{ item.hospitalname }} + - {{ item.views }}人阅读 + {{ item.readnum }}人阅读 - - {{ item.price }} + + + + ¥{{ item.price>item.discount?fromatPrice(item.discount):fromatPrice(item.price) }} + 原价{{fromatPrice(item.price/100)}} + 免费 @@ -106,7 +119,7 @@ import downLoadImg from "@/static/wdxz.png" import api from '@/api/api.js'; const isFilterActive=ref(false) - const sort = ref(2); + const sort = ref(0); // 默认最新排序 // 响应式数据 const refreshing = ref(false); const loading = ref(false); @@ -136,7 +149,10 @@ }; const toggleSort = () => { - sort.value=sort.value==1?2:1 + sort.value = sort.value === 0 ? 1 : 0; + console.log('切换排序:', sort.value); + // 切换排序后重新加载数据 + loadData(true); }; @@ -184,22 +200,24 @@ // 上拉加载更多 const onLoadMore = async () => { - console.log('加载更多') - if (loading.value || noMore.value) return; + console.log('=== onLoadMore 触发 ==='); + console.log('当前状态:', { + loading: loading.value, + noMore: noMore.value, + page: page.value, + listLength: coursewareList.value.length + }); - loading.value = true; - - try { - // 加载下一页数据 - await loadData(false); - } catch (error) { - uni.showToast({ - title: '加载失败', - icon: 'error' + if (loading.value || noMore.value) { + console.log('条件不满足，跳过加载:', { + loading: loading.value, + noMore: noMore.value }); - } finally { - loading.value = false; + return; } + + console.log('条件满足，开始加载更多数据'); + await loadData(false); }; // 加载数据 @@ -219,7 +237,6 @@ // 调用API获取课件列表 const res = await api.ganDanFileByKeyWords({ page: page.value, - pageSize: pageSize.value, sort: sort.value, // 可以根据需要添加其他筛选参数 keywords: '', @@ -237,7 +254,7 @@ // 解析API返回的数据结构 if (res.data && res.data.list) { newItems = res.data.list; - totalCount = res.data.total || res.data.totalRow || 0; + totalCount = res.data.totalRow; console.log('使用 res.data.list 结构'); } else if (res.data && Array.isArray(res.data)) { newItems = res.data; @@ -265,8 +282,11 @@ noMore.value = true; console.log('没有更多数据了'); } else { - page.value++; - console.log(`还有更多数据，下一页: ${page.value}`); + // 只有在加载更多模式下才递增页码 + if (!isRefresh) { + page.value=page.value+1; + console.log(`还有更多数据，下一页: ${page.value}`); + } } } else { console.error('API返回的数据不是数组格式:', newItems); @@ -332,11 +352,39 @@ hideFilterPopup(); // 这里可以根据选中的标签进行数据筛选 }; + const fromatPrice=(price)=>{ + if(price<1){ + return price.toFixed(2) + }else{ + return price.toFixed(1) + } + } onShow(() => { // 页面显示时加载数据 console.log('页面显示，开始加载课件数据'); loadData(true); }); + + // 测试加载更多功能 + const testLoadMore = () => { + console.log('=== 手动测试加载更多 ==='); + console.log('当前状态:', { + loading: loading.value, + noMore: noMore.value, + page: page.value, + listLength: coursewareList.value.length + }); + + if (!loading.value && !noMore.value) { + onLoadMore(); + } else { + uni.showToast({ + title: `加载中: ${loading.value}, 无更多: ${noMore.value}`, + icon: 'none', + duration: 2000 + }); + } + };