9.1 夜晚更新
This commit is contained in:
zoujiandong
parent
92bfc36d51
commit
1cc611d68d
293
TODO.md
293
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组件实现自动轮播
|
- [x] 修复页码递增逻辑问题
|
||||||
3. **丰富的内容展示** - 每个横幅包含标题、副标题、专家信息等
|
- [x] 添加详细的调试日志
|
||||||
4. **指示器显示** - 底部圆点指示器显示当前页面位置
|
- [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设计**:
|
|
||||||
- 导航栏：红色主题色，符合医疗应用风格
|
|
||||||
- 标签设计：居中布局，分隔线分隔，激活状态红色高亮
|
|
||||||
- 课程卡片：白色背景，圆角设计，阴影效果，左侧图片右侧信息
|
|
||||||
- 浮动按钮：青色背景，圆形图标，固定位置，阴影效果
|
|
||||||
- 底部导航：红色激活状态，图标+文字布局
|
|
||||||
- **开发状态**: 已完成，"我的课程"页面功能完全可用
|
|
||||||
|
|||||||
@ -240,7 +240,7 @@ const api = {
|
|||||||
},
|
},
|
||||||
//指南标签
|
//指南标签
|
||||||
guideTag(data){
|
guideTag(data){
|
||||||
return request('/expertApp/tagList', data, 'post', false);
|
return request('/expertAPI/tagList', data, 'post', false);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 肝胆新闻相关API
|
// 肝胆新闻相关API
|
||||||
|
|||||||
@ -9,14 +9,20 @@
|
|||||||
height="140rpx"
|
height="140rpx"
|
||||||
:border="false"
|
:border="false"
|
||||||
backgroundColor="#eeeeee"
|
backgroundColor="#eeeeee"
|
||||||
></uni-nav-bar>
|
>
|
||||||
|
<template v-slot:right>
|
||||||
|
<view class="nav-right" @click="testLoadMore">
|
||||||
|
<text style="font-size: 24rpx; color: #8B2316;">测试加载</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-nav-bar>
|
||||||
|
|
||||||
<view class="courseware-container">
|
<view class="courseware-container">
|
||||||
|
|
||||||
<!-- 排序和筛选栏 -->
|
<!-- 排序和筛选栏 -->
|
||||||
<view class="filter-bar">
|
<view class="filter-bar">
|
||||||
<view class="filter-item" @click="toggleSort">
|
<view class="filter-item" @click="toggleSort">
|
||||||
<text class="filter-text">{{sort==2?'最新':'最热'}}</text>
|
<text class="filter-text">{{sort==0?'最新':'最热'}}</text>
|
||||||
<view class="newbox">
|
<view class="newbox">
|
||||||
<up-image :src="upImg" width="20rpx" height="26rpx" ></up-image>
|
<up-image :src="upImg" width="20rpx" height="26rpx" ></up-image>
|
||||||
</view>
|
</view>
|
||||||
@ -47,17 +53,24 @@
|
|||||||
<view class="pdf-icon">📄</view>
|
<view class="pdf-icon">📄</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-content">
|
<view class="item-content">
|
||||||
<view class="item-title">{{ item.title }}</view>
|
<view class="item-title">{{item.title}}</view>
|
||||||
<view class="item-author">{{ item.author }}</view>
|
<view class="info">
|
||||||
|
<view >{{ item.providername }}</view>
|
||||||
|
<view class="item-author">{{ item.hospitalname }}</view>
|
||||||
|
</view>
|
||||||
<view class="item-stats">
|
<view class="item-stats">
|
||||||
<view class="views">
|
<view class="views">
|
||||||
<uni-icons type="eye" size="30rpx" color="#999"></uni-icons>
|
<uni-icons type="eye" size="30rpx" color="#999"></uni-icons>
|
||||||
<text class="view-count">{{ item.views }}人阅读</text>
|
<text class="view-count">{{ item.readnum }}人阅读</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="price">
|
<view class="price">
|
||||||
<up-image :src="downLoadImg" width="32rpx" height="32rpx" ></up-image>
|
<view class="priceImg">
|
||||||
<text class="price-value">{{ item.price }}</text>
|
<up-image :src="downLoadImg" width="32rpx" height="32rpx" ></up-image>
|
||||||
|
</view>
|
||||||
|
<text class="price-value" v-if="item.price>0"><text class="money-unit">¥</text>{{ item.price>item.discount?fromatPrice(item.discount):fromatPrice(item.price) }}</text>
|
||||||
|
<text class="yuanjia" v-if="item.price>0 && item.price>item.discount">原价<text class="jiaprice">{{fromatPrice(item.price/100)}}</text></text>
|
||||||
|
<text v-else class="free">免费</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -106,7 +119,7 @@
|
|||||||
import downLoadImg from "@/static/wdxz.png"
|
import downLoadImg from "@/static/wdxz.png"
|
||||||
import api from '@/api/api.js';
|
import api from '@/api/api.js';
|
||||||
const isFilterActive=ref(false)
|
const isFilterActive=ref(false)
|
||||||
const sort = ref(2);
|
const sort = ref(0); // 默认最新排序
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const refreshing = ref(false);
|
const refreshing = ref(false);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
@ -136,7 +149,10 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const toggleSort = () => {
|
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 () => {
|
const onLoadMore = async () => {
|
||||||
console.log('加载更多')
|
console.log('=== onLoadMore 触发 ===');
|
||||||
if (loading.value || noMore.value) return;
|
console.log('当前状态:', {
|
||||||
|
loading: loading.value,
|
||||||
|
noMore: noMore.value,
|
||||||
|
page: page.value,
|
||||||
|
listLength: coursewareList.value.length
|
||||||
|
});
|
||||||
|
|
||||||
loading.value = true;
|
if (loading.value || noMore.value) {
|
||||||
|
console.log('条件不满足，跳过加载:', {
|
||||||
try {
|
loading: loading.value,
|
||||||
// 加载下一页数据
|
noMore: noMore.value
|
||||||
await loadData(false);
|
|
||||||
} catch (error) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '加载失败',
|
|
||||||
icon: 'error'
|
|
||||||
});
|
});
|
||||||
} finally {
|
return;
|
||||||
loading.value = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('条件满足，开始加载更多数据');
|
||||||
|
await loadData(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 加载数据
|
// 加载数据
|
||||||
@ -219,7 +237,6 @@
|
|||||||
// 调用API获取课件列表
|
// 调用API获取课件列表
|
||||||
const res = await api.ganDanFileByKeyWords({
|
const res = await api.ganDanFileByKeyWords({
|
||||||
page: page.value,
|
page: page.value,
|
||||||
pageSize: pageSize.value,
|
|
||||||
sort: sort.value,
|
sort: sort.value,
|
||||||
// 可以根据需要添加其他筛选参数
|
// 可以根据需要添加其他筛选参数
|
||||||
keywords: '',
|
keywords: '',
|
||||||
@ -237,7 +254,7 @@
|
|||||||
// 解析API返回的数据结构
|
// 解析API返回的数据结构
|
||||||
if (res.data && res.data.list) {
|
if (res.data && res.data.list) {
|
||||||
newItems = res.data.list;
|
newItems = res.data.list;
|
||||||
totalCount = res.data.total || res.data.totalRow || 0;
|
totalCount = res.data.totalRow;
|
||||||
console.log('使用 res.data.list 结构');
|
console.log('使用 res.data.list 结构');
|
||||||
} else if (res.data && Array.isArray(res.data)) {
|
} else if (res.data && Array.isArray(res.data)) {
|
||||||
newItems = res.data;
|
newItems = res.data;
|
||||||
@ -265,8 +282,11 @@
|
|||||||
noMore.value = true;
|
noMore.value = true;
|
||||||
console.log('没有更多数据了');
|
console.log('没有更多数据了');
|
||||||
} else {
|
} else {
|
||||||
page.value++;
|
// 只有在加载更多模式下才递增页码
|
||||||
console.log(`还有更多数据，下一页: ${page.value}`);
|
if (!isRefresh) {
|
||||||
|
page.value=page.value+1;
|
||||||
|
console.log(`还有更多数据，下一页: ${page.value}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error('API返回的数据不是数组格式:', newItems);
|
console.error('API返回的数据不是数组格式:', newItems);
|
||||||
@ -332,11 +352,39 @@
|
|||||||
hideFilterPopup();
|
hideFilterPopup();
|
||||||
// 这里可以根据选中的标签进行数据筛选
|
// 这里可以根据选中的标签进行数据筛选
|
||||||
};
|
};
|
||||||
|
const fromatPrice=(price)=>{
|
||||||
|
if(price<1){
|
||||||
|
return price.toFixed(2)
|
||||||
|
}else{
|
||||||
|
return price.toFixed(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
// 页面显示时加载数据
|
// 页面显示时加载数据
|
||||||
console.log('页面显示，开始加载课件数据');
|
console.log('页面显示，开始加载课件数据');
|
||||||
loadData(true);
|
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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// 变量定义
|
// 变量定义
|
||||||
@ -438,15 +486,16 @@
|
|||||||
top:240rpx;
|
top:240rpx;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
width:100%;
|
left:30rpx;
|
||||||
|
right:30rpx;
|
||||||
padding-top: 20rpx;
|
padding-top: 20rpx;
|
||||||
margin: 0 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width:auto;
|
width:auto;
|
||||||
.courseware-item {
|
.courseware-item {
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 30rpx;
|
padding: 30rpx 0;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
@include shadow;
|
@include shadow;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -464,18 +513,23 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
|
.item-title{
|
||||||
.item-title {
|
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: $text-primary;
|
color:#333;
|
||||||
font-weight: 500;
|
}
|
||||||
line-height: 1.4;
|
.info{
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color:#666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.item-author {
|
.item-author {
|
||||||
font-size: 28rpx;
|
margin-left: 10rpx;
|
||||||
color: $text-secondary;
|
white-space: nowrap;
|
||||||
line-height: 1.3;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 200rpx; /* 限制最大宽度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-stats {
|
.item-stats {
|
||||||
@ -518,10 +572,28 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.free{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
.yuanjia{
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
color:#999;
|
||||||
|
.jiaprice{
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.priceImg{
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
.price-value {
|
.price-value {
|
||||||
font-size: 32rpx;
|
font-size: 26rpx;
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
font-weight: bold;
|
|
||||||
|
.money-unit{
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -263,6 +263,7 @@
|
|||||||
import delImg from "@/static/delete_paper.png"
|
import delImg from "@/static/delete_paper.png"
|
||||||
import api from '@/api/api.js'
|
import api from '@/api/api.js'
|
||||||
import docUrl from "@/utils/docUrl.js"
|
import docUrl from "@/utils/docUrl.js"
|
||||||
|
import navTo from '../../utils/navTo';
|
||||||
const total=ref(0);
|
const total=ref(0);
|
||||||
const tab=ref('zhinan')
|
const tab=ref('zhinan')
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
@ -317,7 +318,9 @@
|
|||||||
keywords.value=selectedTags[i].DES
|
keywords.value=selectedTags[i].DES
|
||||||
}
|
}
|
||||||
|
|
||||||
|
navTo({
|
||||||
|
url:'/pages_app/zhinanList/zhinanList?keywords='+encodeURIComponent(keywords.value)
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
isFilterActive.value=true;
|
isFilterActive.value=true;
|
||||||
@ -366,7 +369,9 @@
|
|||||||
// 加载指南标签列表
|
// 加载指南标签列表
|
||||||
const loadGuideTags = async () => {
|
const loadGuideTags = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await api.guideTag({});
|
const res = await api.guideTag({
|
||||||
|
type:3
|
||||||
|
});
|
||||||
console.log('指南标签API响应:', res);
|
console.log('指南标签API响应:', res);
|
||||||
if(res && res.code === 200 && res.data) {
|
if(res && res.code === 200 && res.data) {
|
||||||
// 将API返回的标签数据转换为筛选标签格式
|
// 将API返回的标签数据转换为筛选标签格式
|
||||||
|
|||||||
@ -10,115 +10,149 @@
|
|||||||
height="140rpx"
|
height="140rpx"
|
||||||
:border="false"
|
:border="false"
|
||||||
backgroundColor="#eeeeee"
|
backgroundColor="#eeeeee"
|
||||||
></uni-nav-bar>
|
>
|
||||||
|
<template v-slot:right>
|
||||||
|
<view class="nav-right" @click="testLoadMore">
|
||||||
|
<text style="font-size: 24rpx; color: #8B2316;">测试加载</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-nav-bar>
|
||||||
|
|
||||||
<!-- 指南列表 -->
|
<!-- 使用scroll-view实现列表 -->
|
||||||
<view class="guidelines-list">
|
<scroll-view
|
||||||
<view
|
class="guidelines-scroll-view"
|
||||||
class="guideline-item"
|
scroll-y="true"
|
||||||
v-for="(item, index) in guidelinesList"
|
:refresher-enabled="true"
|
||||||
:key="item.uuid || index"
|
:refresher-triggered="isRefreshing"
|
||||||
>
|
@refresherrefresh="onRefresh"
|
||||||
<!-- 指南信息 -->
|
@scrolltolower="onScrollToLower"
|
||||||
<view class="item-content">
|
:show-scrollbar="false"
|
||||||
<view class="item-title">{{ item.title }}</view>
|
>
|
||||||
<view class="item-bottom">
|
<!-- 指南列表 -->
|
||||||
<view class="item-date">{{ formatDate(item.releaseTime) }}</view>
|
<view class="guidelines-list">
|
||||||
<!-- 操作按钮 -->
|
<view
|
||||||
<view class="item-action">
|
class="guideline-item"
|
||||||
<view
|
v-for="(item, index) in guidelinesList"
|
||||||
v-if="item.can_download"
|
:key="item.uuid || index"
|
||||||
class="download-btn"
|
>
|
||||||
@click="downloadGuideline(item)"
|
<!-- 指南信息 -->
|
||||||
>
|
<view class="item-content">
|
||||||
<up-icon name="download" color="#8D2316" size="28"></up-icon>
|
<view class="item-title">{{ item.title }}</view>
|
||||||
</view>
|
<view class="item-bottom">
|
||||||
<view
|
<view class="item-date">{{ formatDate(item.releaseTime) }}</view>
|
||||||
v-else
|
<!-- 操作按钮 -->
|
||||||
class="view-btn"
|
<view class="item-action">
|
||||||
@click="viewGuideline(item)"
|
<view
|
||||||
>
|
v-if="item.can_download"
|
||||||
查看
|
class="download-btn"
|
||||||
|
@click="downloadGuideline(item)"
|
||||||
|
>
|
||||||
|
<up-icon name="download" color="#8D2316" size="28"></up-icon>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else
|
||||||
|
class="view-btn"
|
||||||
|
@click="viewGuideline(item)"
|
||||||
|
>
|
||||||
|
查看
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
|
<!-- 加载更多状态 -->
|
||||||
<!-- 加载状态 -->
|
<view class="load-more-status">
|
||||||
<view class="loading-status">
|
<view v-if="loadMoreStatus === 'loading'" class="loading">
|
||||||
<view v-if="isLoading && currentPage === 1" class="loading">
|
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
|
||||||
<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
<view v-else-if="loadMoreStatus === 'more'" class="more">
|
||||||
|
<text>上拉加载更多</text>
|
||||||
|
</view>
|
||||||
|
<view v-else-if="loadMoreStatus === 'noMore'" class="no-more">
|
||||||
|
<text>没有更多数据了</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-else-if="hasMoreData && !isLoading" class="load-more" @click="loadMoreData">
|
|
||||||
<uni-load-more status="more" :content-text="loadingText"></uni-load-more>
|
<!-- 无数据提示 -->
|
||||||
|
<view class="no-data" v-if="guidelinesList.length === 0 && !isLoading">
|
||||||
|
<uni-icons type="info" size="60" color="#999"></uni-icons>
|
||||||
|
<text>暂无诊疗指南数据</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-else-if="!hasMoreData && guidelinesList.length > 0" class="no-more">
|
</scroll-view>
|
||||||
<uni-load-more status="noMore" :content-text="loadingText"></uni-load-more>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 无数据提示 -->
|
|
||||||
<view class="no-data" v-if="guidelinesList.length === 0 && !isLoading">
|
|
||||||
<uni-icons type="info" size="60" color="#999"></uni-icons>
|
|
||||||
<text>暂无诊疗指南数据</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted} from 'vue'
|
import { ref, onMounted} from 'vue'
|
||||||
import api from '@/api/api.js'
|
import api from '@/api/api.js'
|
||||||
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
import { onShow,onLoad } from "@dcloudio/uni-app";
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const guidelinesList = ref([])
|
const guidelinesList = ref([])
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
const hasMoreData = ref(true)
|
const hasMoreData = ref(true)
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
const pageSize = ref(20)
|
const pageSize = ref(10)
|
||||||
const isRefreshing = ref(false)
|
const isRefreshing = ref(false)
|
||||||
|
const keywords=ref('');
|
||||||
|
const loadMoreStatus = ref('more') // 'loading', 'more', 'noMore'
|
||||||
|
|
||||||
// 加载文本配置
|
onLoad((options)=>{
|
||||||
const loadingText = {
|
console.log(options)
|
||||||
contentdown: '上拉显示更多',
|
keywords.value=decodeURIComponent(options.keywords);
|
||||||
contentrefresh: '正在加载...',
|
console.log(keywords.value);
|
||||||
contentnomore: '没有更多数据了'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 页面加载
|
|
||||||
onMounted(() => {
|
|
||||||
loadGuidelinesList()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
// 页面显示时可以刷新数据
|
// 页面显示时，如果列表为空则加载数据
|
||||||
loadGuidelinesList()
|
if (guidelinesList.value.length === 0) {
|
||||||
})
|
loadGuidelinesList(true)
|
||||||
|
|
||||||
// 下拉刷新
|
|
||||||
onPullDownRefresh(() => {
|
|
||||||
refreshData()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 上拉加载更多
|
|
||||||
onReachBottom(() => {
|
|
||||||
if (hasMoreData.value && !isLoading.value) {
|
|
||||||
loadMoreData()
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// scroll-view 下拉刷新
|
||||||
|
const onRefresh = async () => {
|
||||||
|
console.log('scroll-view 下拉刷新触发');
|
||||||
|
isRefreshing.value = true;
|
||||||
|
await refreshData();
|
||||||
|
isRefreshing.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// scroll-view 滚动到底部
|
||||||
|
const onScrollToLower = () => {
|
||||||
|
console.log('=== onScrollToLower 触发 ===');
|
||||||
|
console.log('当前状态:', {
|
||||||
|
loadMoreStatus: loadMoreStatus.value,
|
||||||
|
isRefreshing: isRefreshing.value,
|
||||||
|
currentPage: currentPage.value,
|
||||||
|
listLength: guidelinesList.value.length,
|
||||||
|
hasMoreData: hasMoreData.value,
|
||||||
|
isLoading: isLoading.value
|
||||||
|
});
|
||||||
|
|
||||||
|
if (loadMoreStatus.value === 'more' && !isRefreshing.value && !isLoading.value) {
|
||||||
|
console.log('条件满足，开始加载更多数据');
|
||||||
|
loadMoreData();
|
||||||
|
} else {
|
||||||
|
console.log('条件不满足，跳过加载:', {
|
||||||
|
loadMoreStatus: loadMoreStatus.value,
|
||||||
|
isRefreshing: isRefreshing.value,
|
||||||
|
isLoading: isLoading.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 刷新数据
|
// 刷新数据
|
||||||
const refreshData = async () => {
|
const refreshData = async () => {
|
||||||
if (isRefreshing.value) return
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
isRefreshing.value = true
|
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
hasMoreData.value = true
|
hasMoreData.value = true
|
||||||
|
loadMoreStatus.value = 'more'
|
||||||
|
|
||||||
await loadGuidelinesList()
|
await loadGuidelinesList(true)
|
||||||
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '刷新成功',
|
title: '刷新成功',
|
||||||
@ -130,42 +164,59 @@ const refreshData = async () => {
|
|||||||
title: '刷新失败',
|
title: '刷新失败',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
})
|
})
|
||||||
} finally {
|
|
||||||
isRefreshing.value = false
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载指南列表
|
// 加载指南列表
|
||||||
const loadGuidelinesList = async (isLoadMore = false) => {
|
const loadGuidelinesList = async (isRefresh = false) => {
|
||||||
|
console.log('=== loadGuidelinesList 开始 ===');
|
||||||
|
console.log('当前参数:', { isRefresh, page: currentPage.value, keywords: keywords.value });
|
||||||
|
|
||||||
if (isLoading.value) return
|
if (isLoading.value) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
|
loadMoreStatus.value = 'loading'
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
page: currentPage.value,
|
page: currentPage.value,
|
||||||
pageSize: pageSize.value,
|
pageSize: pageSize.value,
|
||||||
type: 1, // 诊疗指南类型
|
type: 1, // 诊疗指南类型
|
||||||
keywords: ''
|
sort:2,
|
||||||
|
keywords:keywords.value
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await api.searchLibraryU(params)
|
const res = await api.searchLibraryU(params)
|
||||||
console.log('指南列表响应:', res)
|
console.log('指南列表响应:', res)
|
||||||
|
|
||||||
if (res.code === 200 && res.data) {
|
if (res.code === 200 && res.data) {
|
||||||
const newData = res.data
|
const newData = res.data.list || res.data
|
||||||
|
|
||||||
if (isLoadMore) {
|
if (isRefresh) {
|
||||||
guidelinesList.value = [...guidelinesList.value, ...newData]
|
|
||||||
} else {
|
|
||||||
guidelinesList.value = newData
|
guidelinesList.value = newData
|
||||||
|
console.log('刷新模式：替换列表数据');
|
||||||
|
} else {
|
||||||
|
guidelinesList.value = [...guidelinesList.value, ...newData]
|
||||||
|
console.log('加载更多：追加数据到列表');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 判断是否还有更多数据
|
// 判断是否还有更多数据
|
||||||
hasMoreData.value = newData.length === pageSize.value
|
if (newData.length < pageSize.value) {
|
||||||
|
loadMoreStatus.value = 'noMore'
|
||||||
|
hasMoreData.value = false
|
||||||
|
console.log('没有更多数据了');
|
||||||
|
} else {
|
||||||
|
loadMoreStatus.value = 'more'
|
||||||
|
hasMoreData.value = true
|
||||||
|
// 只有在加载更多模式下才递增页码
|
||||||
|
if (!isRefresh) {
|
||||||
|
currentPage.value++
|
||||||
|
console.log(`还有更多数据，下一页: ${currentPage.value}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error('加载指南列表失败:', res.message)
|
console.error('加载指南列表失败:', res.message)
|
||||||
|
loadMoreStatus.value = 'noMore'
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.message || '加载失败',
|
title: res.message || '加载失败',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
@ -173,20 +224,36 @@ const loadGuidelinesList = async (isLoadMore = false) => {
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载指南列表异常:', error)
|
console.error('加载指南列表异常:', error)
|
||||||
|
loadMoreStatus.value = 'noMore'
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '网络异常，请重试',
|
title: '网络异常，请重试',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
})
|
})
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false
|
isLoading.value = false
|
||||||
|
console.log('=== loadGuidelinesList 结束 ===');
|
||||||
|
console.log('最终状态:', {
|
||||||
|
loadMoreStatus: loadMoreStatus.value,
|
||||||
|
page: currentPage.value,
|
||||||
|
listLength: guidelinesList.value.length
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载更多数据
|
// 加载更多数据
|
||||||
const loadMoreData = () => {
|
const loadMoreData = () => {
|
||||||
|
console.log('=== loadMoreData 被调用 ===');
|
||||||
|
console.log('检查条件:', {
|
||||||
|
hasMoreData: hasMoreData.value,
|
||||||
|
isLoading: isLoading.value,
|
||||||
|
currentPage: currentPage.value
|
||||||
|
});
|
||||||
|
|
||||||
if (hasMoreData.value && !isLoading.value) {
|
if (hasMoreData.value && !isLoading.value) {
|
||||||
currentPage.value++
|
console.log('条件满足，开始加载更多数据');
|
||||||
loadGuidelinesList(true)
|
loadGuidelinesList(false);
|
||||||
|
} else {
|
||||||
|
console.log('条件不满足，跳过加载更多');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -236,6 +303,28 @@ const goBack = () => {
|
|||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 测试加载更多功能
|
||||||
|
const testLoadMore = () => {
|
||||||
|
console.log('=== 手动测试加载更多 ===');
|
||||||
|
console.log('当前状态:', {
|
||||||
|
loadMoreStatus: loadMoreStatus.value,
|
||||||
|
hasMoreData: hasMoreData.value,
|
||||||
|
isLoading: isLoading.value,
|
||||||
|
currentPage: currentPage.value,
|
||||||
|
listLength: guidelinesList.value.length
|
||||||
|
});
|
||||||
|
|
||||||
|
if (loadMoreStatus.value === 'more' && !isLoading.value) {
|
||||||
|
loadMoreData();
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: `状态: ${loadMoreStatus.value}, 加载中: ${isLoading.value}`,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期
|
||||||
const formatDate = (dateString) => {
|
const formatDate = (dateString) => {
|
||||||
if (!dateString) return ''
|
if (!dateString) return ''
|
||||||
@ -264,7 +353,12 @@ $white: #ffffff;
|
|||||||
|
|
||||||
.zhinan-list-page {
|
.zhinan-list-page {
|
||||||
background-color: $bg-color;
|
background-color: $bg-color;
|
||||||
min-height: 100vh;
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guidelines-scroll-view {
|
||||||
|
height: calc(100vh - 140rpx);
|
||||||
|
background-color: $bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 指南列表
|
// 指南列表
|
||||||
@ -291,6 +385,11 @@ $white: #ffffff;
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-bottom {
|
.item-bottom {
|
||||||
@ -341,18 +440,22 @@ $white: #ffffff;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载状态
|
// 加载更多状态
|
||||||
.loading-status {
|
.load-more-status {
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.loading, .load-more, .no-more {
|
.loading, .more, .no-more {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10rpx;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: $text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 无数据提示
|
// 无数据提示
|
||||||
.no-data {
|
.no-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user