From 0de0b6732bd5e092991ad7779989ef6ea8751451 Mon Sep 17 00:00:00 2001 From: haomingming Date: Mon, 25 Aug 2025 14:17:06 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E5=93=81=E8=AF=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README_FLOATING_INVOICE_BTN.md | 106 +++ README_INVOICE.md | 83 ++ README_INVOICE_DESIGN_UPDATE.md | 119 +++ README_INVOICE_HISTORY.md | 185 +++++ README_INVOICE_INFO.md | 95 +++ api/api.js | 4 + api/course_api.js | 44 +- manifest.json | 13 +- pages.json | 31 + pages/index/index.vue | 16 +- pages_app/login/login.vue | 41 +- pages_course/course/course.vue | 275 +------ pages_course/course_detail/course_detail.vue | 116 ++- pages_course/course_filter/course_filter.vue | 708 +++++++++-------- .../course_payment/course_payment.vue | 34 +- pages_course/course_review/course_review.vue | 108 ++- pages_course/invoice/invoice.vue | 712 ++++++++++++++++++ .../invoice_detail/invoice_detail.vue | 666 ++++++++++++++++ pages_course/invoice_info/invoice_info.vue | 362 +++++++++ pages_course/my_courses/my_courses.vue | 138 +++- pages_course/order_record/order_record.vue | 153 ++-- utils/payment.js | 99 +++ 22 files changed, 3392 insertions(+), 716 deletions(-) create mode 100644 README_FLOATING_INVOICE_BTN.md create mode 100644 README_INVOICE.md create mode 100644 README_INVOICE_DESIGN_UPDATE.md create mode 100644 README_INVOICE_HISTORY.md create mode 100644 README_INVOICE_INFO.md create mode 100644 pages_course/invoice/invoice.vue create mode 100644 pages_course/invoice_detail/invoice_detail.vue create mode 100644 pages_course/invoice_info/invoice_info.vue create mode 100644 utils/payment.js diff --git a/README_FLOATING_INVOICE_BTN.md b/README_FLOATING_INVOICE_BTN.md new file mode 100644 index 0000000..f674fc8 --- /dev/null +++ b/README_FLOATING_INVOICE_BTN.md @@ -0,0 +1,106 @@ +# 订单记录页面悬浮发票按钮 + +## 功能说明 + +在订单记录页面添加了一个悬浮的开具发票按钮，用户可以随时点击进入发票开具流程，无需返回首页。 + +## 功能特性 + +### 1. 悬浮按钮设计 +- **位置**: 固定在页面右下角，距离右边距30rpx，距离底部120rpx +- **尺寸**: 120rpx × 120rpx 的圆形按钮 +- **样式**: 渐变背景色（红色到橙色），带有阴影效果 +- **层级**: z-index: 999，确保按钮始终显示在最上层 + +### 2. 按钮内容 +- **图标**: 使用 `paperplane` 图标，表示发票功能 +- **文字**: "开具发票" 标签，清晰说明按钮功能 +- **布局**: 图标在上，文字在下，垂直居中对齐 + +### 3. 交互效果 +- **点击反馈**: 点击时有缩放和阴影变化效果 +- **过渡动画**: 所有状态变化都有平滑的过渡效果 +- **悬停效果**: 按钮具有现代化的视觉反馈 + +## 使用方法 + +### 1. 访问订单记录页面 +- 在课程相关页面中进入"订单记录" +- 页面右下角会显示悬浮的发票按钮 + +### 2. 点击开具发票 +- 点击悬浮按钮 +- 自动跳转到发票选择页面 +- 选择要开票的课程后进入发票信息填写页面 + +### 3. 完成开票流程 +- 填写发票信息 +- 提交表单 +- 返回订单记录页面 + +## 技术实现 + +### 1. 按钮结构 +```vue + + + + 开具发票 + +``` + +### 2. 跳转方法 +```javascript +// 跳转到开具发票页面 +const goToInvoice = () => { + uni.navigateTo({ + url: '/pages_course/invoice/invoice' + }) +} +``` + +### 3. 样式特点 +- 使用 `position: fixed` 实现悬浮定位 +- 渐变背景色增强视觉效果 +- 阴影效果提升层次感 +- 响应式设计适配不同设备 + +## 页面流程 + +1. **订单记录页面** → 显示悬浮发票按钮 +2. **点击按钮** → 跳转到发票选择页面 +3. **选择课程** → 进入发票信息填写页面 +4. **填写信息** → 提交发票申请 +5. **返回页面** → 回到订单记录页面 + +## 设计优势 + +### 1. 用户体验 +- **便捷访问**: 无需返回首页，直接在订单页面即可开票 +- **视觉突出**: 悬浮按钮醒目，用户容易发现 +- **操作简单**: 一键点击即可进入开票流程 + +### 2. 界面设计 +- **现代化**: 渐变色彩和阴影效果符合现代UI设计趋势 +- **一致性**: 与整体页面风格保持一致 +- **响应性**: 支持触摸反馈和动画效果 + +### 3. 功能完整 +- **流程完整**: 从订单记录到发票开具的完整流程 +- **页面跳转**: 正确的路由配置和页面跳转 +- **状态管理**: 按钮状态和页面状态的有效管理 + +## 注意事项 + +1. 悬浮按钮使用固定定位，不会随页面滚动而移动 +2. 按钮层级较高，确保在各种情况下都能正常显示 +3. 支持触摸反馈，提供良好的移动端体验 +4. 按钮位置经过精心设计，不会遮挡页面内容 + +## 后续优化建议 + +1. 可以添加按钮的显示/隐藏控制 +2. 可以增加按钮的动画效果 +3. 可以添加按钮的权限控制 +4. 可以优化按钮在不同设备上的显示效果 +5. 可以添加按钮的使用统计功能 diff --git a/README_INVOICE.md b/README_INVOICE.md new file mode 100644 index 0000000..ebedac1 --- /dev/null +++ b/README_INVOICE.md @@ -0,0 +1,83 @@ +# 精品课开具发票页面 + +## 功能说明 + +这是一个精品课开具发票的页面，完全按照设计图100%还原实现。 + +## 页面特性 + +### 1. 状态栏 +- 显示时间 "9:41" +- 显示信号、WiFi、电池等状态图标 + +### 2. 导航栏 +- 左侧：红色返回按钮 +- 中间：红色标题 "开具发票" +- 右侧：红色圆形信息按钮 + +### 3. 标签页 +- "待开发票" - 当前激活状态 +- "开票历史" - 可切换查看 +- 标签页之间有灰色分隔线 + +### 4. 课程列表 +- 显示5个课程项目 +- 每个项目包含： + - 圆形复选框（可选中/取消） + - 课程缩略图（使用医生头像占位图） + - 课程描述文字 + - 实际支付价格（红色显示） +- 默认第3个课程被选中 + +### 5. 底部操作栏 +- 左侧：全选复选框和"全选"文字 +- 中间：显示开票金额和已选课程数量 +- 右侧：红色"开具发票"按钮 + +## 使用方法 + +### 1. 访问页面 +在首页功能网格中点击"开具发票"按钮，即可跳转到发票页面。 + +### 2. 选择课程 +- 点击单个课程的复选框来选中/取消选中 +- 点击底部的"全选"复选框来全选/取消全选所有课程 + +### 3. 开具发票 +- 选择要开票的课程后，底部会显示总金额 +- 点击"开具发票"按钮进行开票操作 + +## 技术实现 + +### 文件结构 +``` +pages_course/ + └── invoice/ + └── invoice.vue # 发票页面主文件 +``` + +### 主要功能 +- 响应式布局，适配不同屏幕尺寸 +- 复选框状态管理 +- 动态计算选中课程数量和总金额 +- 页面路由配置已添加到 pages.json + +### 样式特点 +- 使用红色作为主色调（#ff0000） +- 橙色作为选中状态颜色（#ff6b35） +- 现代化的UI设计，包含圆角、阴影等效果 +- 响应式设计，支持不同设备 + +## 注意事项 + +1. 页面使用了自定义导航栏样式 +2. 课程图片使用了占位图 `/static/placeholder_doctor.png` +3. 页面已配置为无导航栏模式（navigationStyle: "custom"） +4. 支持返回上一页功能 + +## 后续优化建议 + +1. 可以添加真实的课程数据接口 +2. 可以增加发票类型选择功能 +3. 可以添加发票信息填写表单 +4. 可以增加开票记录查询功能 diff --git a/README_INVOICE_DESIGN_UPDATE.md b/README_INVOICE_DESIGN_UPDATE.md new file mode 100644 index 0000000..b4670c2 --- /dev/null +++ b/README_INVOICE_DESIGN_UPDATE.md @@ -0,0 +1,119 @@ +# 发票页面设计优化 + +## 优化概述 + +对发票页面进行了全面的视觉设计优化，提升了用户体验和界面美观度。 + +## 主要优化内容 + +### 1. 整体视觉风格 +- **渐变背景**: 从浅灰色到白色的渐变背景，增加层次感 +- **现代化设计**: 采用卡片式设计，增加阴影和圆角 +- **色彩统一**: 使用橙色系主色调（#ff6b35 到 #ff8c42） + +### 2. 导航栏优化 +- **渐变背景**: 添加微妙的渐变背景 +- **阴影效果**: 增加底部阴影，提升层次感 +- **交互反馈**: 按钮点击时有缩放和背景色变化 +- **标题样式**: 使用渐变文字效果，更加醒目 + +### 3. 标签页优化 +- **活跃状态**: 活跃标签使用圆角胶囊背景 +- **渐变效果**: 橙色渐变背景，白色文字 +- **底部指示器**: 渐变色的底部指示条 +- **悬停效果**: 非活跃标签悬停时显示橙色 + +### 4. 开票历史记录优化 +- **卡片设计**: 每个记录项都是独立的卡片 +- **左侧装饰条**: 橙色渐变装饰条，增加视觉层次 +- **渐变背景**: 微妙的渐变背景 +- **阴影效果**: 柔和的阴影，提升立体感 +- **状态标签**: 状态标签使用渐变背景和阴影 +- **交互反馈**: 点击时有轻微的下移和阴影变化 + +## 设计特点 + +### 1. 色彩搭配 +- **主色调**: 橙色系（#ff6b35, #ff8c42） +- **辅助色**: 绿色（成功）、红色（失败）、蓝色（处理中） +- **中性色**: 灰色系用于文字和边框 + +### 2. 视觉效果 +- **渐变**: 多处使用渐变效果，增加现代感 +- **阴影**: 不同层级的阴影，营造立体感 +- **圆角**: 统一的圆角设计，更加友好 +- **过渡**: 所有交互都有平滑的过渡动画 + +### 3. 交互体验 +- **点击反馈**: 按钮和卡片都有点击反馈 +- **悬停效果**: 标签页有悬停状态 +- **动画过渡**: 平滑的状态切换动画 + +## 技术实现 + +### 1. CSS特性 +```scss +// 渐变背景 +background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); + +// 渐变文字 +background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; + +// 阴影效果 +box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); + +// 过渡动画 +transition: all 0.3s ease; +``` + +### 2. 伪元素装饰 +```scss +// 左侧装饰条 +&::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 6rpx; + background: linear-gradient(180deg, #ff6b35 0%, #ff8c42 100%); + border-radius: 0 3rpx 3rpx 0; +} +``` + +### 3. 状态样式 +```scss +// 成功状态 +&.success { + background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); + color: #ffffff; + box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); +} +``` + +## 用户体验提升 + +### 1. 视觉层次 +- 清晰的信息层级 +- 合理的间距和留白 +- 突出的重要信息 + +### 2. 交互反馈 +- 即时的视觉反馈 +- 平滑的动画过渡 +- 直观的操作提示 + +### 3. 美观度 +- 现代化的设计风格 +- 协调的色彩搭配 +- 精致的细节处理 + +## 后续优化建议 + +1. **深色模式**: 可以添加深色主题支持 +2. **动画效果**: 可以增加更多的微交互动画 +3. **响应式**: 可以优化不同屏幕尺寸的显示 +4. **无障碍**: 可以增加无障碍访问支持 +5. **主题定制**: 可以支持用户自定义主题色彩 diff --git a/README_INVOICE_HISTORY.md b/README_INVOICE_HISTORY.md new file mode 100644 index 0000000..a51e380 --- /dev/null +++ b/README_INVOICE_HISTORY.md @@ -0,0 +1,185 @@ +# 开票历史功能 + +## 功能说明 + +在发票页面添加了"开票历史"标签页，用户可以查看历史开票记录，包括开票状态、课程数量、开票金额等信息。 + +## 功能特性 + +### 1. 标签页切换 +- **待开发票**: 显示可选择的课程列表，支持批量选择和开票 +- **开票历史**: 显示历史开票记录，包含详细的开票信息 + +### 2. 开票历史记录 +- **日期显示**: 显示开票日期（如：2021年6月11日） +- **课程数量**: 显示该次开票包含的课程数量（如：共计3个课程） +- **开票状态**: 显示开票的当前状态 +- **开票金额**: 显示开票的金额信息 + +### 3. 开票状态类型 +- **已开票**: 绿色显示，表示开票成功 +- **开票失败**: 红色显示，表示开票失败 +- **开票中**: 蓝色显示，表示正在处理中 + +## 页面结构 + +### 1. 标签页导航 +```vue + + + 待开发票 + + + + 开票历史 + + +``` + +### 2. 内容区域 +- **待开发票**: 显示课程列表和底部操作栏 +- **开票历史**: 显示历史记录列表 + +### 3. 历史记录项 +```vue + + + {{ item.date }} + {{ item.courseCount }} + + + {{ item.statusText }} + › + {{ item.amount }} + + +``` + +## 数据结构 + +### 1. 历史记录数据 +```javascript +historyList: [ + { + id: 1, + date: '2021年6月11日', + courseCount: '共计3个课程', + status: 'success', + statusText: '已开票', + amount: '¥0.00' + }, + { + id: 2, + date: '2021年6月11日', + courseCount: '共计3个课程', + status: 'failed', + statusText: '开票失败', + amount: '¥0.00' + }, + { + id: 3, + date: '2021年6月11日', + courseCount: '共计3个课程', + status: 'processing', + statusText: '开票中', + amount: '¥0.00' + } +] +``` + +### 2. 状态枚举 +- `success`: 已开票（绿色） +- `failed`: 开票失败（红色） +- `processing`: 开票中（蓝色） + +## 交互功能 + +### 1. 标签页切换 +- 点击"待开发票"标签显示课程选择界面 +- 点击"开票历史"标签显示历史记录界面 +- 标签页之间有视觉分隔线 + +### 2. 历史记录查看 +- 点击任意历史记录项可查看详情 +- 显示相应的状态提示信息 +- 支持后续扩展详情页面 + +### 3. 状态颜色区分 +- 不同状态使用不同颜色显示 +- 提供清晰的视觉反馈 +- 符合用户认知习惯 + +## 样式设计 + +### 1. 历史记录项样式 +- 浅灰色背景（#f8f8f8） +- 圆角设计（8rpx） +- 卡片式布局，带有间距 +- 底部边框分隔线 + +### 2. 状态颜色 +- 成功状态：绿色（#52c41a） +- 失败状态：红色（#ff4d4f） +- 处理中状态：蓝色（#1890ff） +- 默认状态：灰色（#666666） + +### 3. 布局特点 +- 左右分布，信息清晰 +- 响应式设计，适配不同屏幕 +- 触摸友好的交互区域 + +## 使用方法 + +### 1. 查看开票历史 +- 在发票页面点击"开票历史"标签 +- 浏览历史开票记录 +- 查看开票状态和详细信息 + +### 2. 切换标签页 +- 点击"待开发票"返回课程选择界面 +- 点击"开票历史"查看历史记录 +- 标签页状态实时更新 + +### 3. 查看记录详情 +- 点击任意历史记录项 +- 系统显示相应的状态信息 +- 支持后续功能扩展 + +## 技术实现 + +### 1. 条件渲染 +```vue + + + + + + +``` + +### 2. 数据绑定 +- 使用Vue的响应式数据绑定 +- 支持动态数据更新 +- 状态切换实时响应 + +### 3. 事件处理 +```javascript +viewHistoryDetail(item) { + console.log('查看开票历史详情:', item) + uni.showToast({ + title: `查看${item.statusText}详情`, + icon: 'none' + }) +} +``` + +## 后续优化建议 + +1. **详情页面**: 可以添加开票历史详情页面 +2. **状态筛选**: 可以添加按状态筛选历史记录 +3. **时间筛选**: 可以添加按时间范围筛选 +4. **搜索功能**: 可以添加搜索特定开票记录 +5. **导出功能**: 可以添加导出开票历史记录 +6. **分页加载**: 可以添加分页加载更多历史记录 +7. **实时更新**: 可以添加开票状态的实时更新 +8. **通知功能**: 可以添加开票完成的通知提醒 diff --git a/README_INVOICE_INFO.md b/README_INVOICE_INFO.md new file mode 100644 index 0000000..fd62ee8 --- /dev/null +++ b/README_INVOICE_INFO.md @@ -0,0 +1,95 @@ +# 填写发票信息页面 + +## 功能说明 + +这是一个填写发票信息的页面，完全按照设计图100%还原实现。用户在选择课程后，通过此页面填写详细的发票信息。 + +## 页面特性 + +### 1. 状态栏 +- 显示时间 "9:41" +- 显示信号、WiFi、电池等状态图标 + +### 2. 导航栏 +- 左侧：红色返回按钮 +- 中间：红色标题 "填写发票信息" +- 右侧：红色圆形信息按钮 + +### 3. 表单内容 +- **发票抬头**: 输入框，必填项 +- **单位税号**: 输入框，必填项 +- **发票内容**: 显示固定值 "培训费" +- **发票金额**: 显示固定值 "¥59.00"（红色显示） +- **电子邮箱**: 输入框，必填项 + +### 4. 提交按钮 +- 底部固定位置的青色按钮 +- 白色文字 "提交" + +## 使用方法 + +### 1. 访问页面 +在发票页面选择课程后，点击"开具发票"按钮即可跳转到此页面。 + +### 2. 填写信息 +- 发票抬头：输入公司或个人名称 +- 单位税号：输入税务登记号 +- 电子邮箱：输入接收发票的邮箱地址 + +### 3. 提交表单 +- 点击"提交"按钮 +- 系统会验证必填字段和邮箱格式 +- 提交成功后自动返回上一页 + +## 技术实现 + +### 文件结构 +``` +pages_course/ + └── invoice_info/ + └── invoice_info.vue # 发票信息填写页面 +``` + +### 主要功能 +- 表单验证（必填字段、邮箱格式） +- 响应式布局设计 +- 自定义导航栏 +- 表单数据双向绑定 + +### 样式特点 +- 使用红色作为主色调（#ff0000） +- 青色作为提交按钮颜色（#20b2aa） +- 白色卡片式表单设计 +- 浅灰色分隔线 +- 现代化UI设计，包含圆角、阴影等效果 + +## 表单验证规则 + +1. **发票抬头**: 必填，不能为空 +2. **单位税号**: 必填，不能为空 +3. **电子邮箱**: 必填，必须符合邮箱格式 + +## 页面流程 + +1. 用户在发票页面选择课程 +2. 点击"开具发票"按钮 +3. 跳转到填写发票信息页面 +4. 填写必要信息 +5. 点击提交 +6. 验证通过后返回上一页 + +## 注意事项 + +1. 页面使用了自定义导航栏样式 +2. 发票内容和金额为固定值，不可编辑 +3. 页面已配置为无导航栏模式（navigationStyle: "custom"） +4. 支持返回上一页功能 +5. 表单验证失败会显示相应的提示信息 + +## 后续优化建议 + +1. 可以添加发票类型选择功能 +2. 可以增加发票抬头历史记录 +3. 可以添加发票预览功能 +4. 可以增加发票模板选择 +5. 可以添加发票状态查询功能 diff --git a/api/api.js b/api/api.js index 5bc80c2..03aaf89 100644 --- a/api/api.js +++ b/api/api.js @@ -1,5 +1,9 @@ import {request} from '@/utils/request.js' const api = { + + expertWxLogin(jscode){ + return request('/miniprogram/expertLogin', {jscode: jscode}, 'get', true); + }, // 微信登录 wxLogin(data) { return request('/login/wechat/mobile', data, 'post', true); diff --git a/api/course_api.js b/api/course_api.js index 4107761..7a2d0ca 100644 --- a/api/course_api.js +++ b/api/course_api.js @@ -22,8 +22,8 @@ const course_api = { }, // 创建订单 - createExcellencourseMixedOrder(id, order_pay_type) { - return request('/expertPay/createExcellencourseOrder', {appid:"wx061c1f4e16a5f20f", openid:"", excellencourse_id: id, order_pay_type: order_pay_type}, 'post', true); + createExcellencourseMixedOrder(id, order_pay_type, openid) { + return request('/expertPay/createExcellencourseOrder', {appid:"wx061c1f4e16a5f20f", openid: openid, excellencourse_id: id, order_pay_type: order_pay_type}, 'post', true); }, // 订单列表 @@ -31,6 +31,46 @@ const course_api = { return request('/expertAPI/listExcellencourseOrder', {order_status: order_status, page:page}, 'post', true); }, + // 我的课程 + listMyExcellencourse(state, page) { + return request('/expertAPI/listMyExcellencourse', {state:state,page:page}, 'post', true); + }, + + // 添加评论 + addExcellencourseComment(data) { + return request('/expertAPI/addExcellencourseComment', data, 'post', true); + }, + + // 一级分类 + listExcellencourseFirstType() { + return request('/expertAPI/listExcellencourseFirstType', {}, 'post', true); + }, + + // 二级分类 + listExcellencourseSecondType(type_id) { + return request('/expertAPI/listExcellencourseSecondType', {first_id: type_id}, 'post', true); + }, + + // 筛选列表 + excellencourseList(data) { + return request('/expertAPI/excellencourseScreen', data, 'post', true); + }, + + // 未开票订单列表 + listExcellencourseOrderNoInvoice() { + return request('/expertAPI/listExcellencourseOrderNoInvoice', {}, 'post', true); + }, + + // 开票历史列表 + listExcellencourseOrderInvoiceHistory(page) { + return request('/expertAPI/listExcellencourseOrderInvoice', {page:page}, 'post', true); + }, + + // 获取订单发票 + getExcellencourseOrderInvoice(order_id) { + return request('/expertAPI/getExcellencourseOrderInvoice', {id:order_id}, 'post', true); + }, + // 短信验证码登录 smsLogin(data,header){ return request('/expertAPI/smsLogin', data, 'post', true,'application/json',header); diff --git a/manifest.json b/manifest.json index 0ccc53d..33c4559 100644 --- a/manifest.json +++ b/manifest.json @@ -17,7 +17,8 @@ "delay" : 0 }, "modules" : { - "OAuth" : {} + "OAuth" : {}, + "Payment" : {} }, /* 模块配置 */ "distribute" : { @@ -50,7 +51,15 @@ "univerify" : {}, "weixin" : { "appid" : "wxbf3658f5e674667c", - "UniversalLinks" : "" + "UniversalLinks" : "https://doc.igandan.com/gdxzExpert/" + } + }, + "payment" : { + "appleiap" : {}, + "weixin" : { + "__platform__" : [ "ios", "android" ], + "appid" : "wxbf3658f5e674667c", + "UniversalLinks" : "https://doc.igandan.com/gdxzExpert/" } } } diff --git a/pages.json b/pages.json index 18d85b7..71644f9 100644 --- a/pages.json +++ b/pages.json @@ -142,6 +142,36 @@ "bounce": "none" } } + }, + { + "path": "invoice/invoice", + "style": { + "navigationStyle": "custom", + "navigationBarTitleText": "开具发票", + "app": { + "bounce": "none" + } + } + }, + { + "path": "invoice_info/invoice_info", + "style": { + "navigationStyle": "custom", + "navigationBarTitleText": "填写发票信息", + "app": { + "bounce": "none" + } + } + }, + { + "path": "invoice_detail/invoice_detail", + "style": { + "navigationStyle": "custom", + "navigationBarTitleText": "开票详情", + "app": { + "bounce": "none" + } + } } ] }, @@ -329,6 +359,7 @@ } } } + ] }], diff --git a/pages/index/index.vue b/pages/index/index.vue index 3fbe2c8..bb4eb31 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -354,6 +354,10 @@ icon: course, text: '精品课' }, + { + icon: '', + text: '开具发票' + }, { icon: more, text: '更多' @@ -582,8 +586,18 @@ // 网格点击事件 const onClick = (e) => { console.log('点击了第' + e.detail.index + '个'); + const clickedItem = gridList[e.detail.index]; + + // 处理开具发票的点击 + if (clickedItem.text === '开具发票') { + uni.navigateTo({ + url: '/pages_course/invoice/invoice' + }); + return; + } + uni.showToast({ - title: `点击了${gridList[e.detail.index].text}`, + title: `点击了${clickedItem.text}`, icon: 'none' }); }; diff --git a/pages_app/login/login.vue b/pages_app/login/login.vue index b988f2c..dbfb708 100644 --- a/pages_app/login/login.vue +++ b/pages_app/login/login.vue @@ -63,6 +63,15 @@ 短信验证码登录 + + + + + + + 微信登录 + + @@ -98,6 +107,7 @@ import wxImg from "@/static/weixin_login.png" import checkImg from "@/static/login_new_unselect.png" import checkOnImg from "@/static/login_new_select.png" + import api from "@/api/api.js" const customStyle = reactive({ height: "100rpx", @@ -164,10 +174,35 @@ } console.log('微信登录'); - uni.showToast({ - title: '微信登录功能开发中', - icon: 'none' + wx.login({ + success(res) { + if (res.code) { + // 发送 res.code 到后台换取 openId, sessionKey, unionId + api.expertWxLogin(res.code).then((data) => { + console.log(data) + if (data.data.openid) { + if (process.env.NODE_ENV === 'development') { + uni.setStorageSync('DEV_APPID', data.data.openid); + } else { + uni.setStorageSync('AUTH_APPID', data.data.openid); + } + } + + + let openid = "" + if (process.env.NODE_ENV === 'development') { + openid = uni.getStorageSync('DEV_APPID'); + } else { + openid = uni.getStorageSync('AUTH_APPID'); + } + console.log("openid: ", openid) + }) + } else { + console.log('登录失败！' + res.errMsg); + } + } }); + }; // 切换协议同意状态 diff --git a/pages_course/course/course.vue b/pages_course/course/course.vue index 054ee92..4673f3f 100644 --- a/pages_course/course/course.vue +++ b/pages_course/course/course.vue @@ -28,7 +28,6 @@ @@ -54,7 +53,7 @@ :key="typeItem.id" @click="goVideoType(typeItem.id, typeItem.name)"> - + {{ typeItem.name }} @@ -65,7 +64,7 @@ 精品小课 - + 更多 @@ -80,7 +79,7 @@ {{ course.title }} {{ course.study_num }}人 - ¥{{ course.discount_price }} + ¥{{ (course.discount_price / 100).toFixed(2) }} 免费 @@ -95,7 +94,7 @@ 学完返现 - + 更多 @@ -114,7 +113,7 @@ 福利课堂 - + 更多 @@ -139,11 +138,11 @@ - + - 热门课程 - + 课程推荐 + 更多 @@ -154,7 +153,7 @@ {{ course.title }} {{ course.tags || '' }} - ¥{{ course.discount_price }} + ¥{{ (course.discount_price / 100).toFixed(2) }} @@ -188,115 +187,7 @@ const premiumCourseList = ref([]) // 新增：精品小课数据 const rewardCourseList = ref([]) // 新增：学完返现数据 const welfareCourseList = ref([]) // 新增：福利课堂数据 const recommendedCourseList = ref([]) // 新增：课程推荐数据 -const bannerList = ref([ - { - id: 1, - title: "小懂医生讲HIV和感染", - subtitle: "授课专家: 黄湛镰 副主任医师 | 中山大学附属第三医院感染科", - image: "/static/lunbo_bg.png", - link: "/pages_course/hiv_detail" - }, - { - id: 2, - title: "肝脏肿瘤临床影像学习", - subtitle: "授课专家: 王学浩 教授 | 南京医科大学第一附属医院", - image: "/static/paper_bg.png", - link: "/pages_course/tumor_detail" - }, - { - id: 3, - title: "慢性肝病营养治疗指南", - subtitle: "授课专家: 段钟平 教授 | 首都医科大学附属北京佑安医院", - image: "/static/pap_bg.png", - link: "/pages_course/nutrition_detail" - }, - { - id: 4, - title: "肝移植术后管理要点", - subtitle: "授课专家: 郑树森 院士 | 浙江大学医学院附属第一医院", - image: "/static/bo_bg.png", - link: "/pages_course/transplant_detail" - }, - { - id: 5, - title: "肝癌早期筛查与预防", - subtitle: "授课专家: 陈孝平 院士 | 华中科技大学同济医学院", - image: "/static/livebg.png", - link: "/pages_course/screening_detail" - } -]) -const hotCourses = ref([ - { - id: 1, - title: "小懂医生讲HIV和感染-各类抗菌药特性解读III", - description: "小懂医生讲HIV和感染-各类抗菌药特性解读III", - price: "20.00", - thumbnail: "/static/jingpinkecheng.png" - }, - { - id: 2, - title: "小懂医生讲HIV和感染-各类抗菌药特性解读III", - description: "小懂医生讲HIV和感染-各类抗菌药特性解读III", - price: "20.00", - thumbnail: "/static/jingpinkecheng.png" - }, - { - id: 3, - title: "小懂医生讲HIV和感染-各类抗菌药特性解读III", - description: "小懂医生讲HIV和感染-各类抗菌药特性解读III", - price: "20.00", - thumbnail: "/static/jingpinkecheng.png" - }, - { - id: 4, - title: "小懂医生讲HIV和感染物", - description: "", - price: "50.00", - thumbnail: "/static/jingpinkecheng.png" - } -]) -const welfareList = ref([ - { - id: 1, - title: "《中生肝脏病学》云解读系列会七", - subtitle: "汪晖 院士 北京大学医学院", - teacher: "汪晖 院士", - price: "免费", - image: "/static/fulicard.png" - }, - { - id: 2, - title: "肝病诊疗新进展研讨会", - subtitle: "王学浩 教授 南京医科大学", - teacher: "王学浩 教授", - price: "免费", - image: "/static/paper_bg.png" - }, - { - id: 3, - title: "肝癌早期筛查与预防", - subtitle: "陈孝平 院士 华中科技大学", - teacher: "陈孝平 院士", - price: "免费", - image: "/static/pap_bg.png" - }, - { - id: 4, - title: "慢性肝病营养治疗指南", - subtitle: "段钟平 教授 首都医科大学", - teacher: "段钟平 教授", - price: "免费", - image: "/static/bo_bg.png" - }, - { - id: 5, - title: "肝移植术后管理要点", - subtitle: "郑树森 院士 浙江大学医学院", - teacher: "郑树森 院士", - price: "免费", - image: "/static/livebg.png" - } -]) +const bannerList = ref([]) // 方法 const getSystemInfo = () => { @@ -311,7 +202,9 @@ const getSystemInfo = () => { } const goBack = () => { - uni.navigateBack() + uni.navigateTo({ + url: '/pages/index/index' + }) } const goSearch = () => { @@ -322,6 +215,9 @@ const goSearch = () => { const goCategory = (type, name) => { console.log('跳转分类:', type, name) + uni.navigateTo({ + url: `/pages_course/course_filter/course_filter?type=${type}` + }) } const getCategoryIconClass = (index) => { @@ -337,29 +233,6 @@ const getCategoryIconClass = (index) => { } } -const getFunctionIconClass = (index) => { - switch (index) { - case 0: - return 'fire-icon'; - case 1: - return 'star-icon'; - case 2: - return 'gift-icon'; - case 3: - return 'heart-icon'; - default: - return ''; - } -} - - -const goHotCourses = () => { - console.log('跳转热门课程') -} - -const goPremiumCourses = () => { - console.log('跳转精品小课') -} const goPremiumCourse = (course) => { console.log('跳转精品小课详情:', course) @@ -369,9 +242,6 @@ const goPremiumCourse = (course) => { }) } -const goStudyRewards = () => { - console.log('跳转学克返现') -} const goRewardCourse = (course) => { console.log('跳转返现课程:', course) @@ -381,24 +251,32 @@ const goRewardCourse = (course) => { }) } -const goWelfareCourses = () => { - console.log('跳转福利课堂') -} - -const goMorePremium = () => { +const goMorePremium = (name) => { console.log('查看更多精品课程') + uni.navigateTo({ + url: `/pages_course/course_filter/course_filter?special_type=${specialTypeList.value.find(item => item.name == name).id}&special_name=${name}` + }) } -const goMoreRewards = () => { +const goMoreRewards = (name) => { console.log('查看更多返现') + uni.navigateTo({ + url: `/pages_course/course_filter/course_filter?special_type=${specialTypeList.value.find(item => item.name == name).id}&special_name=${name}` + }) } -const goMoreWelfare = () => { +const goMoreWelfare = (name) => { console.log('查看更多福利') + uni.navigateTo({ + url: `/pages_course/course_filter/course_filter?special_type=${specialTypeList.value.find(item => item.name == name).id}&special_name=${name}` + }) } -const goMoreHot = () => { +const goMoreHot = (name) => { console.log('查看更多热门') + uni.navigateTo({ + url: `/pages_course/course_filter/course_filter?special_type=${specialTypeList.value.find(item => item.name == name).id}&special_name=${name}` + }) } const goCourseDetail = (course) => { @@ -421,7 +299,7 @@ const goBannerDetail = (banner) => { console.log('横幅详情:', banner) // 跳转到课程详情页面 uni.navigateTo({ - url: '/pages_course/course_detail/course_detail' + url: '/pages_course/course_detail/course_detail?id=' + banner.id }) } @@ -487,104 +365,19 @@ const getIndex = async () => { } } else { console.warn('API返回数据格式异常:', res) - setDefaultData() } } catch (error) { console.error('获取分类数据失败:', error) - setDefaultData() } } // 设置默认数据 -const setDefaultData = () => { - // 设置默认分类数据作为备用 - firstTypeList.value = [ - { id: 185, name: "肝病", img: "/static/icon_home_my_patient.png" }, - { id: 188, name: "肿瘤", img: "/static/icon_home_my_library.png" }, - { id: 195, name: "感染", img: "/static/icon_home_video.png" } - ] - - // 设置默认功能按钮数据作为备用 - specialTypeList.value = [ - { type_id: 189, type_name: "课程推荐" }, - { type_id: 190, type_name: "精品小课" }, - { type_id: 191, type_name: "学完返现" }, - { type_id: 192, type_name: "福利课堂" } - ] - - // 设置默认精品小课数据作为备用 - premiumCourseList.value = [ - { - id: 1, - title: "肝脏胖瘦临床、影像学习交流", - study_num: 28, - discount_price: 20, - index_img: "/static/jingpingke.png" - } - ] - - // 设置默认学完返现数据作为备用 - rewardCourseList.value = [ - { - id: 1, - title: "重症肝病的抗凝治疗", - discount_price: 2, - back_bon: 2, - index_img: "/static/paper_bg.png" - }, - { - id: 2, - title: "重症肝病的抗凝治疗2", - discount_price: 2, - back_bon: 2, - index_img: "/static/pap_bg.png" - } - ] - - // 设置默认福利课堂数据作为备用 - welfareCourseList.value = [ - { - id: 1, - title: "《中生肝脏病学》云解读系列会七", - special_type_name: "福利课堂", - study_num: 8, - fuli_bon: 100, - index_img: "/static/fulicard.png" - }, - { - id: 2, - title: "肝病诊疗新进展研讨会", - special_type_name: "福利课堂", - study_num: 5, - fuli_bon: 88, - index_img: "/static/paper_bg.png" - } - ] - - // 设置默认课程推荐数据作为备用 - recommendedCourseList.value = [ - { - id: 1, - title: "测试精品课上报02", - tags: "测试,肝胆相照", - discount_price: 100, - index_img: "/static/jingpinkecheng.png" - }, - { - id: 2, - title: "测试精品课上报01", - tags: "肝胆相照,健康中国", - discount_price: 100, - index_img: "/static/jingpinkecheng.png" - } - ] -} const goVideoType = (typeId, typeName) => { console.log('跳转视频类型:', typeId, typeName) // 跳转到视频类型详情页面 uni.navigateTo({ - url: `/pages_course/video_type_detail/video_type_detail?type_id=${typeId}` + url: `/pages_course/course_filter/course_filter?special_type=${typeId}&special_name=${typeName}` }) } // 生命周期 diff --git a/pages_course/course_detail/course_detail.vue b/pages_course/course_detail/course_detail.vue index d711c8e..793a0f2 100644 --- a/pages_course/course_detail/course_detail.vue +++ b/pages_course/course_detail/course_detail.vue @@ -6,7 +6,7 @@ - 课程详情02 + {{ courseDetail.title || '肝硬化与重症肝病' }} @@ -106,7 +106,7 @@ - + @@ -130,14 +130,14 @@ {{ chapter.title }} - + - + @@ -150,7 +150,7 @@ {{ lesson.duration }} - {{ lesson.teacher }} + @@ -168,7 +168,9 @@ 课程评价 共{{ reviewTotal || courseDetail.comment_num || 0 }}条评价 - + @@ -254,7 +256,15 @@ 暂无评价 - 成为第一个评价的人吧 + + 您已经评价过此课程，可以追加评论 + + + 成为第一个评价的人吧 + + + 购买课程后即可评价 + @@ -268,15 +278,17 @@ - + - ¥{{ currentPriceYuan.toFixed(2) }} + ¥{{ currentPriceYuan.toFixed(2) }} - - + + + + @@ -569,48 +581,70 @@ const submitReply = (reviewId) => { return } + + // 找到对应的评价 const review = reviewList.value.find(item => item.id === reviewId) + + if (review) { - // 添加新回复 - const newReply = { - id: Date.now(), - userName: '我', - avatar: '/static/icon_home_my_patient.png', - time: new Date().toLocaleDateString(), - content: replyText.value.trim(), - isAuthor: false - } - - if (!review.replies) { - review.replies = [] - } - review.replies.push(newReply) - - // 重置状态 - activeReplyId.value = null - replyText.value = '' - - uni.showToast({ - title: '回复成功', - icon: 'success' + course_api.addExcellencourseComment({ + excellentcourse_id: courseId.value, + comment: replyText.value.trim(), + p_id: reviewId, + star:0, + type:0 + }).then(res => { + console.log('评价提交结果:', res) + if(res.code == 200){ + uni.hideLoading() + // 添加新回复 + const newReply = { + id: Date.now(), + userName: '我', + avatar: '/static/icon_home_my_patient.png', + time: new Date().toLocaleDateString(), + content: replyText.value.trim(), + isAuthor: false + } + + if (!review.replies) { + review.replies = [] + } + review.replies.push(newReply) + + // 重置状态 + activeReplyId.value = null + replyText.value = '' + + uni.showToast({ + title: '回复成功', + icon: 'success' + }) + } }) + + } } const goToReview = () => { uni.navigateTo({ - url: '/pages_course/course_review/course_review' + url: '/pages_course/course_review/course_review?id=' + courseId.value + '&is_commented=' + courseDetail.value.is_commented }) } const getCourseDetail = () => { - course_api.excellencourseDetail(courseId.value).then(res => { + course_api.excellencourseDetail(courseId.value).then(res => { console.log('课程详情数据:', res) if(res.code == 200){ const data = res.data courseDetail.value = data + // 调试 is_commented 字段 + console.log('is_commented 字段值:', data.is_commented) + console.log('is_buy 字段值:', data.is_buy) + // 更新页面数据 updatePageData(data) // 优惠价格与倒计时 @@ -694,8 +728,8 @@ const updatePageData = (data) => { title: lesson.title, duration: lesson.time || '未知时长', teacher: teacherName, - status: (data.is_buy === 1 || data.type === 0) ? 'unlocked' : 'locked', - statusText: (data.is_buy === 1 || data.type === 0) ? (data.type === 0 ? '试播' : '已解锁') : '未解锁', + status: (data.is_buy === 1 || lesson.type === 0) ? 'unlocked' : 'locked', + statusText: (data.is_buy === 1 || lesson.type === 0) ? (lesson.type === 0 ? '试播' : '已解锁') : '未解锁', vid: lesson.vid, type: lesson.type } @@ -1570,7 +1604,7 @@ onUnmounted(() => { border-top: 1rpx solid #e5e5e5; display: flex; align-items: center; - padding: 0 24rpx; + padding: 0 24rpx 20rpx 24rpx; z-index: 999; .price-section { diff --git a/pages_course/course_filter/course_filter.vue b/pages_course/course_filter/course_filter.vue index 738c499..9f3c837 100644 --- a/pages_course/course_filter/course_filter.vue +++ b/pages_course/course_filter/course_filter.vue @@ -4,9 +4,9 @@ - + - 肝病精品课 + {{ special_name?special_name:'肝病精品课' }} @@ -27,11 +27,11 @@ indicator-color="#d8d8d8" indicator-active-color="#FF4757" > - -