21 changed files with 2039 additions and 3550 deletions
@ -0,0 +1,171 @@ |
|||
# 课程安排学员显示修复说明 |
|||
|
|||
## 🔍 **问题描述** |
|||
|
|||
在 `pages/market/clue/class_arrangement` 页面中，调用 `/api/course/courseAllList?schedule_date=2025-08-01` 接口时，课程安排中的学员信息显示不正确： |
|||
- 应该显示一个正式学员和一个等待位学员 |
|||
- 实际只显示了一个学员，另一个学员没有在列表中显示 |
|||
|
|||
## 📊 **数据库分析** |
|||
|
|||
### 1. **课程安排数据** |
|||
```sql |
|||
SELECT id, course_date, time_slot FROM school_course_schedule WHERE course_date = '2025-08-01'; |
|||
-- 结果： |
|||
-- id=124, course_date='2025-08-01', time_slot='09:00-10:00' |
|||
-- id=154, course_date='2025-08-01', time_slot='10:00-11:00' |
|||
``` |
|||
|
|||
### 2. **学员安排数据** |
|||
```sql |
|||
SELECT pcs.*, cr.name FROM school_person_course_schedule pcs |
|||
LEFT JOIN school_customer_resources cr ON pcs.resources_id = cr.id |
|||
WHERE pcs.schedule_id = 124; |
|||
-- 结果： |
|||
-- id=73, resources_id=5, schedule_type=1, course_type=1, name='测试' (正式学员) |
|||
-- id=74, resources_id=31, schedule_type=2, course_type=3, name='美团01' (等待位学员) |
|||
``` |
|||
|
|||
### 3. **关联数据问题** |
|||
```sql |
|||
SELECT cr.id, cr.name, cr.member_id, sm.member_id, sm.headimg |
|||
FROM school_customer_resources cr |
|||
LEFT JOIN school_member sm ON cr.member_id = sm.member_id |
|||
WHERE cr.id IN (5, 31); |
|||
-- 结果： |
|||
-- id=5, name='测试', member_id=2, sm.member_id=2, headimg='...' ✅ |
|||
-- id=31, name='美团01', member_id=0, sm.member_id=NULL, headimg=NULL ❌ |
|||
``` |
|||
|
|||
**问题根源**：`美团01` 的 `member_id` 为 0，在 JOIN `school_member` 表时没有匹配到数据，导致整条记录被过滤掉。 |
|||
|
|||
## 🔧 **修复方案** |
|||
|
|||
### **原始代码问题** |
|||
```php |
|||
// CourseService.php 第398-407行（修复前） |
|||
$student = Db::name('person_course_schedule') |
|||
->alias('pcs') |
|||
->where('pcs.schedule_id', $v['id']) |
|||
->join('school_student st', 'pcs.student_id = st.id') // ❌ student_id为NULL |
|||
->join('school_customer_resources cr', 'st.user_id = cr.id') |
|||
->join('school_member sm', 'cr.member_id = sm.member_id') // ❌ INNER JOIN过滤掉member_id=0的记录 |
|||
->field('st.name, sm.headimg as avatar') |
|||
->select(); |
|||
``` |
|||
|
|||
### **修复后代码** |
|||
```php |
|||
// CourseService.php 第397-407行（修复后） |
|||
$student = Db::name('person_course_schedule') |
|||
->alias('pcs') |
|||
->where('pcs.schedule_id', $v['id']) |
|||
->leftJoin('school_customer_resources cr', 'pcs.resources_id = cr.id') // ✅ 使用resources_id |
|||
->leftJoin('school_member sm', 'cr.member_id = sm.member_id AND cr.member_id > 0') // ✅ LEFT JOIN + 条件 |
|||
->field('cr.name, COALESCE(sm.headimg, "") as avatar, pcs.schedule_type, pcs.course_type, pcs.status') |
|||
->select(); |
|||
``` |
|||
|
|||
## 🎯 **修复要点** |
|||
|
|||
### 1. **字段关联修复** |
|||
- **原来**：通过 `pcs.student_id = st.id` 关联（但 student_id 为 NULL） |
|||
- **修复**：通过 `pcs.resources_id = cr.id` 关联（正确的关联字段） |
|||
|
|||
### 2. **JOIN类型修复** |
|||
- **原来**：使用 `join()` (INNER JOIN)，过滤掉不匹配的记录 |
|||
- **修复**：使用 `leftJoin()` (LEFT JOIN)，保留所有记录 |
|||
|
|||
### 3. **member_id处理** |
|||
- **原来**：`cr.member_id = sm.member_id` 直接关联 |
|||
- **修复**：`cr.member_id = sm.member_id AND cr.member_id > 0` 条件关联 |
|||
|
|||
### 4. **字段处理** |
|||
- **原来**：`sm.headimg as avatar` |
|||
- **修复**：`COALESCE(sm.headimg, "") as avatar` 处理NULL值 |
|||
|
|||
### 5. **增加字段** |
|||
- 添加 `pcs.schedule_type`：区分正式位(1)和等待位(2) |
|||
- 添加 `pcs.course_type`：区分正式课(1)、体验课(2)、等待位(3) |
|||
- 添加 `pcs.status`：学员状态信息 |
|||
|
|||
## 📋 **测试结果** |
|||
|
|||
### **修复前** |
|||
```json |
|||
{ |
|||
"student": [ |
|||
{ |
|||
"name": "测试", |
|||
"avatar": "https://...", |
|||
"schedule_type": 1, |
|||
"course_type": 1, |
|||
"status": 0 |
|||
} |
|||
// 缺少"美团01"学员 |
|||
] |
|||
} |
|||
``` |
|||
|
|||
### **修复后** |
|||
```json |
|||
{ |
|||
"student": [ |
|||
{ |
|||
"name": "测试", |
|||
"avatar": "https://...", |
|||
"schedule_type": 1, |
|||
"course_type": 1, |
|||
"status": 0 |
|||
}, |
|||
{ |
|||
"name": "美团01", |
|||
"avatar": "", |
|||
"schedule_type": 2, |
|||
"course_type": 3, |
|||
"status": 0 |
|||
} |
|||
] |
|||
} |
|||
``` |
|||
|
|||
## 🔍 **数据字段说明** |
|||
|
|||
### **schedule_type 字段** |
|||
- `1` - 正式位 |
|||
- `2` - 等待位 |
|||
|
|||
### **course_type 字段** |
|||
- `1` - 正式课 |
|||
- `2` - 体验课 |
|||
- `3` - 等待位 |
|||
|
|||
### **status 字段** |
|||
- `0` - 正常 |
|||
- `1` - 已取消 |
|||
- `2` - 已完成 |
|||
|
|||
## 🎯 **技术总结** |
|||
|
|||
### **问题类型** |
|||
1. **数据关联错误**：使用了错误的关联字段 |
|||
2. **JOIN类型错误**：INNER JOIN 过滤掉了部分数据 |
|||
3. **数据完整性问题**：member_id 为 0 的记录处理不当 |
|||
|
|||
### **修复原则** |
|||
1. **使用正确的关联字段**：resources_id 而不是 student_id |
|||
2. **使用LEFT JOIN**：保证所有学员记录都能显示 |
|||
3. **处理NULL值**：使用 COALESCE 处理可能的空值 |
|||
4. **增加业务字段**：提供更多有用的业务信息 |
|||
|
|||
### **最佳实践** |
|||
1. **数据库设计**：确保关联字段的一致性 |
|||
2. **查询优化**：根据实际数据结构选择合适的JOIN类型 |
|||
3. **异常处理**：考虑数据不完整的情况 |
|||
4. **字段完整性**：提供前端需要的所有业务字段 |
|||
|
|||
--- |
|||
|
|||
**修复完成时间**：2025-07-31 |
|||
**状态**：✅ 问题已修复，学员显示正常 |
|||
**影响范围**：课程安排页面的学员列表显示 |
|||
@ -1,296 +0,0 @@ |
|||
<!--家长端合同管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 选中孩子信息 --> |
|||
<view class="child_info_bar" v-if="selectedChild"> |
|||
<view class="child_avatar"> |
|||
<image :src="selectedChild.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_details"> |
|||
<view class="child_name">{{ selectedChild.name }}</view> |
|||
<view class="child_class">{{ selectedChild.class_name || '未分配班级' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 合同列表 --> |
|||
<view class="contracts_list"> |
|||
<view class="section_title">合同列表</view> |
|||
<view class="contracts_items"> |
|||
<view |
|||
v-for="contract in contractsList" |
|||
:key="contract.id" |
|||
class="contract_item" |
|||
@click="viewContractDetail(contract)" |
|||
> |
|||
<view class="contract_main"> |
|||
<view class="contract_header"> |
|||
<view class="contract_title">{{ contract.title }}</view> |
|||
<view class="contract_status" :class="contract.status">{{ contract.status_text }}</view> |
|||
</view> |
|||
<view class="contract_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">合同金额：</text> |
|||
<text class="detail_value amount">¥{{ contract.amount }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">签订日期：</text> |
|||
<text class="detail_value">{{ contract.sign_date }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">有效期：</text> |
|||
<text class="detail_value">{{ contract.valid_date }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="contract_arrow"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && contractsList.length === 0"> |
|||
<image :src="$util.img('/uniapp_src/static/images/common/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无合同信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
contractsList: [], |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadContractsList() |
|||
}, |
|||
methods: { |
|||
async loadContractsList() { |
|||
if (!this.childId) { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildContracts({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.contractsList = response.data.data || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取合同列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取合同列表失败:', error) |
|||
uni.showToast({ |
|||
title: '获取合同列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
viewContractDetail(contract) { |
|||
this.$navigateTo({ |
|||
url: `/pages/parent/contracts/contract-detail?contractId=${contract.id}&childId=${this.childId}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_bar { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.child_class { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contracts_list { |
|||
.section_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.contracts_items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.contract_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.contract_main { |
|||
flex: 1; |
|||
|
|||
.contract_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.contract_title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.contract_status { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.active { |
|||
background: rgba(40, 167, 69, 0.1); |
|||
color: #28a745; |
|||
} |
|||
|
|||
&.expired { |
|||
background: rgba(220, 53, 69, 0.1); |
|||
color: #dc3545; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
|
|||
&.amount { |
|||
color: #e67e22; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract_arrow { |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,330 +0,0 @@ |
|||
<!--家长端课程管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 选中孩子信息 --> |
|||
<view class="child_info_bar" v-if="selectedChild"> |
|||
<view class="child_avatar"> |
|||
<image :src="selectedChild.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_details"> |
|||
<view class="child_name">{{ selectedChild.name }}</view> |
|||
<view class="child_class">{{ selectedChild.class_name || '未分配班级' }}</view> |
|||
</view> |
|||
<view class="course_stats"> |
|||
<view class="stat_item"> |
|||
<text class="stat_number">{{ selectedChild.remaining_courses || 0 }}</text> |
|||
<text class="stat_label">剩余课时</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 课程列表 --> |
|||
<view class="course_list"> |
|||
<view class="section_title">课程信息</view> |
|||
<view class="course_items"> |
|||
<view |
|||
v-for="course in courseList" |
|||
:key="course.id" |
|||
class="course_item" |
|||
@click="viewCourseDetail(course)" |
|||
> |
|||
<view class="course_main"> |
|||
<view class="course_header"> |
|||
<view class="course_name">{{ course.course_name }}</view> |
|||
<view class="course_status" :class="course.status">{{ course.status === 'active' ? '进行中' : '已结束' }}</view> |
|||
</view> |
|||
<view class="course_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">授课教师：</text> |
|||
<text class="detail_value">{{ course.teacher_name }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">上课校区：</text> |
|||
<text class="detail_value">{{ course.campus_name }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">上课时间：</text> |
|||
<text class="detail_value">{{ course.schedule_time }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">课程进度：</text> |
|||
<text class="detail_value">{{ course.progress }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="course.next_class"> |
|||
<text class="detail_label">下节课时间：</text> |
|||
<text class="detail_value next_class">{{ course.next_class }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="course_arrow"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && courseList.length === 0"> |
|||
<image :src="$util.img('/uniapp_src/static/images/common/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无课程信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
courseList: [], |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadCourseList() |
|||
}, |
|||
methods: { |
|||
async loadCourseList() { |
|||
if (!this.childId) { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildCourses({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.courseList = response.data.data || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取课程列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取课程列表失败:', error) |
|||
uni.showToast({ |
|||
title: '获取课程列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
viewCourseDetail(course) { |
|||
this.$navigateTo({ |
|||
url: `/pages/parent/courses/course-detail?courseId=${course.id}&childId=${this.childId}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_bar { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.child_class { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
|
|||
.course_stats { |
|||
.stat_item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
.stat_number { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #29d3b4; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.stat_label { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.course_list { |
|||
.section_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.course_items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.course_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.course_main { |
|||
flex: 1; |
|||
|
|||
.course_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.course_name { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.course_status { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.active { |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
|
|||
&.inactive { |
|||
background: #f0f0f0; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.course_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
|
|||
&.next_class { |
|||
color: #29d3b4; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.course_arrow { |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,279 +0,0 @@ |
|||
<!--家长端教学资料页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 选中孩子信息 --> |
|||
<view class="child_info_bar" v-if="selectedChild"> |
|||
<view class="child_avatar"> |
|||
<image :src="selectedChild.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_details"> |
|||
<view class="child_name">{{ selectedChild.name }}</view> |
|||
<view class="child_class">{{ selectedChild.class_name || '未分配班级' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 教学资料列表 --> |
|||
<view class="materials_list"> |
|||
<view class="section_title">教学资料</view> |
|||
<view class="materials_items"> |
|||
<view |
|||
v-for="material in materialsList" |
|||
:key="material.id" |
|||
class="material_item" |
|||
@click="viewMaterialDetail(material)" |
|||
> |
|||
<view class="material_main"> |
|||
<view class="material_header"> |
|||
<view class="material_title">{{ material.title }}</view> |
|||
<view class="material_type">{{ material.type }}</view> |
|||
</view> |
|||
<view class="material_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">发布时间：</text> |
|||
<text class="detail_value">{{ material.created_at }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">资料类型：</text> |
|||
<text class="detail_value">{{ material.type }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="material_arrow"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && materialsList.length === 0"> |
|||
<image :src="$util.img('/uniapp_src/static/images/common/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无教学资料</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
materialsList: [], |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadMaterialsList() |
|||
}, |
|||
methods: { |
|||
async loadMaterialsList() { |
|||
if (!this.childId) { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildMaterials({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.materialsList = response.data.data || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取教学资料失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取教学资料失败:', error) |
|||
uni.showToast({ |
|||
title: '获取教学资料失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
viewMaterialDetail(material) { |
|||
this.$navigateTo({ |
|||
url: `/pages/parent/materials/material-detail?materialId=${material.id}&childId=${this.childId}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_bar { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.child_class { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.materials_list { |
|||
.section_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.materials_items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.material_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.material_main { |
|||
flex: 1; |
|||
|
|||
.material_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.material_title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.material_type { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.material_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.material_arrow { |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,280 +0,0 @@ |
|||
<!--家长端消息管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 选中孩子信息 --> |
|||
<view class="child_info_bar" v-if="selectedChild"> |
|||
<view class="child_avatar"> |
|||
<image :src="selectedChild.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_details"> |
|||
<view class="child_name">{{ selectedChild.name }}</view> |
|||
<view class="child_class">{{ selectedChild.class_name || '未分配班级' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 消息列表 --> |
|||
<view class="messages_list"> |
|||
<view class="section_title">消息记录</view> |
|||
<view class="messages_items"> |
|||
<view |
|||
v-for="message in messagesList" |
|||
:key="message.id" |
|||
class="message_item" |
|||
@click="viewMessageDetail(message)" |
|||
> |
|||
<view class="message_main"> |
|||
<view class="message_header"> |
|||
<view class="message_title">{{ message.title }}</view> |
|||
<view class="message_time">{{ message.created_at }}</view> |
|||
</view> |
|||
<view class="message_content">{{ message.content }}</view> |
|||
<view class="message_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">发送者：</text> |
|||
<text class="detail_value">{{ message.sender }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="message_arrow"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && messagesList.length === 0"> |
|||
<image :src="$util.img('/uniapp_src/static/images/common/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无消息记录</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
messagesList: [], |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadMessagesList() |
|||
}, |
|||
methods: { |
|||
async loadMessagesList() { |
|||
if (!this.childId) { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildMessages({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.messagesList = response.data.data || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取消息记录失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取消息记录失败:', error) |
|||
uni.showToast({ |
|||
title: '获取消息记录失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
viewMessageDetail(message) { |
|||
this.$navigateTo({ |
|||
url: `/pages/parent/messages/message-detail?messageId=${message.id}&childId=${this.childId}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_bar { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.child_class { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.messages_list { |
|||
.section_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.messages_items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.message_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.message_main { |
|||
flex: 1; |
|||
|
|||
.message_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 12rpx; |
|||
|
|||
.message_title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.message_time { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.message_content { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.4; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.message_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 120rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.message_arrow { |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,305 +0,0 @@ |
|||
<!--家长端订单管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 选中孩子信息 --> |
|||
<view class="child_info_bar" v-if="selectedChild"> |
|||
<view class="child_avatar"> |
|||
<image :src="selectedChild.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_details"> |
|||
<view class="child_name">{{ selectedChild.name }}</view> |
|||
<view class="child_class">{{ selectedChild.class_name || '未分配班级' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 订单列表 --> |
|||
<view class="order_list"> |
|||
<view class="section_title">订单列表</view> |
|||
<view class="order_items"> |
|||
<view |
|||
v-for="order in orderList" |
|||
:key="order.id" |
|||
class="order_item" |
|||
@click="viewOrderDetail(order)" |
|||
> |
|||
<view class="order_main"> |
|||
<view class="order_header"> |
|||
<view class="order_no">订单号：{{ order.order_no }}</view> |
|||
<view class="order_status" :class="order.status">{{ order.status_text }}</view> |
|||
</view> |
|||
<view class="order_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">课程名称：</text> |
|||
<text class="detail_value">{{ order.course_name }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">订单金额：</text> |
|||
<text class="detail_value amount">¥{{ order.amount }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">下单时间：</text> |
|||
<text class="detail_value">{{ order.created_at }}</text> |
|||
</view> |
|||
<view class="detail_row" v-if="order.pay_time"> |
|||
<text class="detail_label">支付时间：</text> |
|||
<text class="detail_value">{{ order.pay_time }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="order_arrow"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && orderList.length === 0"> |
|||
<image :src="$util.img('/uniapp_src/static/images/common/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无订单信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
orderList: [], |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadOrderList() |
|||
}, |
|||
methods: { |
|||
async loadOrderList() { |
|||
if (!this.childId) { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildOrders({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.orderList = response.data.data || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取订单列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取订单列表失败:', error) |
|||
uni.showToast({ |
|||
title: '获取订单列表失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
viewOrderDetail(order) { |
|||
this.$navigateTo({ |
|||
url: `/pages/parent/orders/order-detail?orderId=${order.id}&childId=${this.childId}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_bar { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.child_class { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order_list { |
|||
.section_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.order_items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.order_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.order_main { |
|||
flex: 1; |
|||
|
|||
.order_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.order_no { |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.order_status { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.paid { |
|||
background: rgba(40, 167, 69, 0.1); |
|||
color: #28a745; |
|||
} |
|||
|
|||
&.unpaid { |
|||
background: rgba(220, 53, 69, 0.1); |
|||
color: #dc3545; |
|||
} |
|||
|
|||
&.refund { |
|||
background: rgba(108, 117, 125, 0.1); |
|||
color: #6c757d; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
|
|||
&.amount { |
|||
color: #e67e22; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order_arrow { |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,279 +0,0 @@ |
|||
<!--家长端服务管理页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 选中孩子信息 --> |
|||
<view class="child_info_bar" v-if="selectedChild"> |
|||
<view class="child_avatar"> |
|||
<image :src="selectedChild.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_details"> |
|||
<view class="child_name">{{ selectedChild.name }}</view> |
|||
<view class="child_class">{{ selectedChild.class_name || '未分配班级' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 服务列表 --> |
|||
<view class="services_list"> |
|||
<view class="section_title">服务记录</view> |
|||
<view class="services_items"> |
|||
<view |
|||
v-for="service in servicesList" |
|||
:key="service.id" |
|||
class="service_item" |
|||
@click="viewServiceDetail(service)" |
|||
> |
|||
<view class="service_main"> |
|||
<view class="service_header"> |
|||
<view class="service_title">{{ service.title }}</view> |
|||
<view class="service_status" :class="service.status">{{ service.status_text }}</view> |
|||
</view> |
|||
<view class="service_details"> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">服务时间：</text> |
|||
<text class="detail_value">{{ service.service_time }}</text> |
|||
</view> |
|||
<view class="detail_row"> |
|||
<text class="detail_label">服务内容：</text> |
|||
<text class="detail_value">{{ service.content }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="service_arrow"> |
|||
<image :src="$util.img('/uniapp_src/static/images/index/right_arrow.png')" class="arrow-icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && servicesList.length === 0"> |
|||
<image :src="$util.img('/uniapp_src/static/images/common/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无服务记录</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
servicesList: [], |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadServicesList() |
|||
}, |
|||
methods: { |
|||
async loadServicesList() { |
|||
if (!this.childId) { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildServices({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.servicesList = response.data.data || [] |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取服务记录失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取服务记录失败:', error) |
|||
uni.showToast({ |
|||
title: '获取服务记录失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
|
|||
viewServiceDetail(service) { |
|||
this.$navigateTo({ |
|||
url: `/pages/parent/services/service-detail?serviceId=${service.id}&childId=${this.childId}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_bar { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_avatar { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.child_class { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.services_list { |
|||
.section_title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
padding-left: 8rpx; |
|||
} |
|||
|
|||
.services_items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.service_item { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.service_main { |
|||
flex: 1; |
|||
|
|||
.service_header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
.service_title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.service_status { |
|||
font-size: 22rpx; |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
} |
|||
|
|||
.service_details { |
|||
.detail_row { |
|||
display: flex; |
|||
margin-bottom: 8rpx; |
|||
|
|||
.detail_label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.service_arrow { |
|||
.arrow-icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,308 +0,0 @@ |
|||
<!--孩子详情页面--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!-- 孩子基本信息 --> |
|||
<view class="child_info_card" v-if="childInfo"> |
|||
<view class="child_header"> |
|||
<view class="child_avatar"> |
|||
<image :src="childInfo.avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="child_basic"> |
|||
<view class="child_name">{{ childInfo.name }}</view> |
|||
<view class="child_tags"> |
|||
<view class="tag gender">{{ childInfo.gender === 1 ? '男' : '女' }}</view> |
|||
<view class="tag age">{{ Math.floor(childInfo.age) }}岁</view> |
|||
<view class="tag label">{{ childInfo.member_label }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="child_details"> |
|||
<view class="detail_section"> |
|||
<view class="section_title">基本信息</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">生日</view> |
|||
<view class="detail_value">{{ childInfo.birthday }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">年龄</view> |
|||
<view class="detail_value">{{ childInfo.age }}岁</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">紧急联系人</view> |
|||
<view class="detail_value">{{ childInfo.emergency_contact }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">联系电话</view> |
|||
<view class="detail_value">{{ childInfo.contact_phone }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section"> |
|||
<view class="section_title">校区信息</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">所属校区</view> |
|||
<view class="detail_value">{{ childInfo.campus_name || '未分配' }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">班级</view> |
|||
<view class="detail_value">{{ childInfo.class_name || '未分配' }}</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">教练</view> |
|||
<view class="detail_value">{{ childInfo.coach_name || '未分配' }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section"> |
|||
<view class="section_title">学习情况</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">总课程数</view> |
|||
<view class="detail_value">{{ childInfo.total_courses }}节</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">已完成</view> |
|||
<view class="detail_value">{{ childInfo.completed_courses }}节</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">剩余课时</view> |
|||
<view class="detail_value">{{ childInfo.remaining_courses }}节</view> |
|||
</view> |
|||
<view class="detail_item"> |
|||
<view class="detail_label">出勤率</view> |
|||
<view class="detail_value">{{ childInfo.attendance_rate }}%</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="detail_section" v-if="childInfo.note"> |
|||
<view class="section_title">备注信息</view> |
|||
<view class="note_content">{{ childInfo.note }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty_state" v-if="!loading && !childInfo"> |
|||
<image :src="$util.img('/static/icon-img/empty.png')" class="empty_icon"></image> |
|||
<view class="empty_text">暂无孩子信息</view> |
|||
</view> |
|||
|
|||
<!-- 加载状态 --> |
|||
<view class="loading_state" v-if="loading"> |
|||
<view class="loading_text">加载中...</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
import apiRoute from '@/api/apiRoute.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
childInfo: null, |
|||
loading: false, |
|||
childId: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['selectedChild']) |
|||
}, |
|||
onLoad(options) { |
|||
this.childId = options.childId |
|||
this.loadChildInfo() |
|||
}, |
|||
methods: { |
|||
async loadChildInfo() { |
|||
if (!this.childId) { |
|||
// 如果没有传入childId，使用当前选中的孩子 |
|||
if (this.selectedChild) { |
|||
this.childInfo = this.selectedChild |
|||
} else { |
|||
uni.showToast({ |
|||
title: '缺少孩子ID参数', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
try { |
|||
const response = await apiRoute.parent_getChildInfo({ |
|||
child_id: this.childId |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
this.childInfo = response.data |
|||
} else { |
|||
uni.showToast({ |
|||
title: response.msg || '获取孩子信息失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
console.error('获取孩子信息失败:', error) |
|||
uni.showToast({ |
|||
title: '获取孩子信息失败', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.main_box { |
|||
background: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.child_info_card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.child_header { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 24rpx; |
|||
padding-bottom: 32rpx; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
margin-bottom: 32rpx; |
|||
|
|||
.child_avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.child_basic { |
|||
flex: 1; |
|||
|
|||
.child_name { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.child_tags { |
|||
display: flex; |
|||
gap: 12rpx; |
|||
flex-wrap: wrap; |
|||
|
|||
.tag { |
|||
font-size: 22rpx; |
|||
padding: 6rpx 12rpx; |
|||
border-radius: 12rpx; |
|||
|
|||
&.gender { |
|||
background: rgba(41, 211, 180, 0.1); |
|||
color: #29d3b4; |
|||
} |
|||
|
|||
&.age { |
|||
background: rgba(52, 152, 219, 0.1); |
|||
color: #3498db; |
|||
} |
|||
|
|||
&.label { |
|||
background: rgba(230, 126, 34, 0.1); |
|||
color: #e67e22; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.child_details { |
|||
.detail_section { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.section_title { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 20rpx; |
|||
padding-bottom: 12rpx; |
|||
border-bottom: 2rpx solid #29d3b4; |
|||
} |
|||
|
|||
.detail_item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 16rpx 0; |
|||
border-bottom: 1px solid #f8f9fa; |
|||
|
|||
.detail_label { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
min-width: 160rpx; |
|||
} |
|||
|
|||
.detail_value { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
.note_content { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
padding: 16rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.empty_state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 120rpx 0; |
|||
|
|||
.empty_icon { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 32rpx; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.empty_text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.loading_state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 60rpx 0; |
|||
|
|||
.loading_text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,270 @@ |
|||
# 学员端订单页面接口对接说明 |
|||
|
|||
## 📋 **任务描述** |
|||
|
|||
根据 `学员端开发计划-后端任务.md` 中的计划，将 `pages/student/orders/index` 页面从 mock 数据改为对接真实接口数据。 |
|||
|
|||
## 🔧 **修改内容** |
|||
|
|||
### 1. **学员信息获取优化** |
|||
**修改前**：使用硬编码的模拟学员信息 |
|||
```javascript |
|||
// 模拟获取学员信息 |
|||
const mockStudentInfo = { |
|||
id: this.studentId, |
|||
name: '小明' |
|||
} |
|||
``` |
|||
|
|||
**修改后**：从用户存储中获取真实学员信息 |
|||
```javascript |
|||
// 获取当前登录学员信息 |
|||
const userInfo = uni.getStorageSync('userInfo') |
|||
if (userInfo && userInfo.id) { |
|||
this.studentId = userInfo.id |
|||
this.studentInfo = { |
|||
id: userInfo.id, |
|||
name: userInfo.name || userInfo.nickname || '学员' |
|||
} |
|||
} else { |
|||
// 如果没有用户信息，跳转到登录页 |
|||
uni.redirectTo({ url: '/pages/student/login/login' }) |
|||
} |
|||
``` |
|||
|
|||
### 2. **订单列表接口对接** |
|||
**修改前**：使用大量的 mock 数据 |
|||
```javascript |
|||
// 使用模拟数据 |
|||
const mockResponse = { |
|||
code: 1, |
|||
data: { |
|||
list: [/* 大量模拟数据 */], |
|||
// ... |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**修改后**：调用真实的订单列表接口 |
|||
```javascript |
|||
// 调用真实的订单列表接口 |
|||
const response = await apiRoute.xy_orderTableList({ |
|||
student_id: this.studentId, |
|||
page: this.currentPage, |
|||
limit: 10 |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
const newList = this.processOrderData(response.data?.data || []) |
|||
// 处理分页信息 |
|||
this.hasMore = response.data?.current_page < response.data?.last_page |
|||
// 计算订单统计 |
|||
this.calculateOrderStats() |
|||
} |
|||
``` |
|||
|
|||
### 3. **数据处理方法** |
|||
新增 `processOrderData` 方法，将后端数据转换为前端需要的格式： |
|||
```javascript |
|||
processOrderData(rawData) { |
|||
return rawData.map(item => { |
|||
return { |
|||
id: item.id, |
|||
order_no: item.order_no || item.order_number, |
|||
product_name: item.course_name || item.product_name || '课程订单', |
|||
product_specs: item.course_specs || item.product_specs || '', |
|||
quantity: item.quantity || 1, |
|||
total_amount: item.total_amount || item.amount || '0.00', |
|||
status: this.mapOrderStatus(item.status), |
|||
create_time: item.create_time || item.created_at, |
|||
payment_method: this.mapPaymentMethod(item.payment_method), |
|||
payment_time: item.payment_time || item.paid_at, |
|||
// 其他字段... |
|||
} |
|||
}) |
|||
} |
|||
``` |
|||
|
|||
### 4. **状态映射方法** |
|||
新增状态映射方法，处理后端和前端状态的差异： |
|||
```javascript |
|||
// 映射订单状态 |
|||
mapOrderStatus(status) { |
|||
const statusMap = { |
|||
'0': 'pending_payment', // 待付款 |
|||
'1': 'completed', // 已完成 |
|||
'2': 'cancelled', // 已取消 |
|||
'3': 'refunded', // 已退款 |
|||
'pending': 'pending_payment', |
|||
'paid': 'completed', |
|||
'cancelled': 'cancelled', |
|||
'refunded': 'refunded' |
|||
} |
|||
return statusMap[status] || 'pending_payment' |
|||
} |
|||
|
|||
// 映射支付方式 |
|||
mapPaymentMethod(method) { |
|||
const methodMap = { |
|||
'wxpay': '微信支付', |
|||
'alipay': '支付宝', |
|||
'cash': '现金支付', |
|||
'bank': '银行转账', |
|||
'': '' |
|||
} |
|||
return methodMap[method] || method || '' |
|||
} |
|||
``` |
|||
|
|||
### 5. **订单详情接口对接** |
|||
**修改前**：简单的弹窗显示 |
|||
```javascript |
|||
uni.showModal({ |
|||
title: '订单详情', |
|||
content: `订单号：${order.order_no}...`, |
|||
showCancel: false |
|||
}) |
|||
``` |
|||
|
|||
**修改后**：调用真实接口并跳转详情页 |
|||
```javascript |
|||
async viewOrderDetail(order) { |
|||
try { |
|||
uni.showLoading({ title: '加载中...' }) |
|||
|
|||
// 调用订单详情接口 |
|||
const res = await apiRoute.xy_orderTableInfo({ |
|||
id: order.id |
|||
}) |
|||
|
|||
if (res.code === 1) { |
|||
// 跳转到订单详情页面 |
|||
uni.navigateTo({ |
|||
url: `/pages/student/orders/detail?id=${order.id}` |
|||
}) |
|||
} else { |
|||
// 降级处理：显示简单弹窗 |
|||
} |
|||
} catch (error) { |
|||
// 错误处理：显示简单弹窗 |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 6. **页面初始化优化** |
|||
**修改前**：只从URL参数获取学员ID |
|||
```javascript |
|||
onLoad(options) { |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
if (this.studentId) { |
|||
this.initPage() |
|||
} else { |
|||
uni.showToast({ title: '参数错误' }) |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**修改后**：支持多种方式获取学员ID |
|||
```javascript |
|||
onLoad(options) { |
|||
// 优先从参数获取学员ID，如果没有则从用户信息获取 |
|||
this.studentId = parseInt(options.student_id) || 0 |
|||
|
|||
if (!this.studentId) { |
|||
// 从用户信息中获取学员ID |
|||
const userInfo = uni.getStorageSync('userInfo') |
|||
if (userInfo && userInfo.id) { |
|||
this.studentId = userInfo.id |
|||
} |
|||
} |
|||
|
|||
if (this.studentId) { |
|||
this.initPage() |
|||
} else { |
|||
uni.showToast({ title: '请先登录' }) |
|||
setTimeout(() => { |
|||
uni.redirectTo({ url: '/pages/student/login/login' }) |
|||
}, 1500) |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## 🌐 **使用的API接口** |
|||
|
|||
### 1. **订单列表接口** |
|||
- **接口**：`apiRoute.xy_orderTableList()` |
|||
- **参数**： |
|||
```javascript |
|||
{ |
|||
student_id: this.studentId, |
|||
page: this.currentPage, |
|||
limit: 10 |
|||
} |
|||
``` |
|||
- **返回**：订单列表数据和分页信息 |
|||
|
|||
### 2. **订单详情接口** |
|||
- **接口**：`apiRoute.xy_orderTableInfo()` |
|||
- **参数**： |
|||
```javascript |
|||
{ |
|||
id: order.id |
|||
} |
|||
``` |
|||
- **返回**：订单详细信息 |
|||
|
|||
## 🎯 **技术特点** |
|||
|
|||
### 1. **数据兼容性** |
|||
- 支持多种后端数据格式 |
|||
- 提供字段映射和默认值处理 |
|||
- 兼容不同的状态值和支付方式 |
|||
|
|||
### 2. **错误处理** |
|||
- 接口调用失败时的降级处理 |
|||
- 用户未登录时的跳转处理 |
|||
- 加载状态的友好提示 |
|||
|
|||
### 3. **用户体验** |
|||
- 保持原有的UI和交互逻辑 |
|||
- 添加加载状态提示 |
|||
- 支持多种获取学员ID的方式 |
|||
|
|||
### 4. **代码质量** |
|||
- 移除所有mock数据 |
|||
- 添加详细的错误处理 |
|||
- 保持代码结构清晰 |
|||
|
|||
## 📝 **注意事项** |
|||
|
|||
### 1. **数据格式** |
|||
- 后端返回的数据格式可能与前端期望不完全一致 |
|||
- 通过 `processOrderData` 方法进行数据转换 |
|||
- 需要根据实际后端接口调整字段映射 |
|||
|
|||
### 2. **分页处理** |
|||
- 使用 `current_page` 和 `last_page` 判断是否有更多数据 |
|||
- 支持上拉加载更多功能 |
|||
|
|||
### 3. **状态管理** |
|||
- 订单状态需要根据后端实际返回值调整映射关系 |
|||
- 支付方式同样需要映射处理 |
|||
|
|||
### 4. **用户认证** |
|||
- 页面支持从多个来源获取学员ID |
|||
- 未登录用户会被引导到登录页面 |
|||
|
|||
## ✅ **测试要点** |
|||
|
|||
1. **数据加载**：验证订单列表能正确加载 |
|||
2. **分页功能**：测试上拉加载更多 |
|||
3. **状态筛选**：验证不同状态的订单筛选 |
|||
4. **订单详情**：测试订单详情查看功能 |
|||
5. **错误处理**：测试网络异常和接口错误的处理 |
|||
6. **用户认证**：测试未登录用户的处理 |
|||
|
|||
--- |
|||
|
|||
**修改完成时间**：2025-07-31 |
|||
**状态**：✅ Mock数据已移除，真实接口已对接 |
|||
**下一步**：测试接口功能和用户体验 |
|||
@ -0,0 +1,171 @@ |
|||
# 忘记密码弹窗模板错误修复 |
|||
|
|||
## 🔍 **问题描述** |
|||
|
|||
在实现忘记密码弹窗功能时，遇到了 Vue 2 模板编译错误： |
|||
|
|||
``` |
|||
Component template should contain exactly one root element. |
|||
If you are using v-if on multiple elements, use v-else-if to chain them instead. |
|||
``` |
|||
|
|||
## 🔧 **问题原因** |
|||
|
|||
Vue 2 要求组件模板必须有且仅有一个根元素，但我们添加的弹窗代码被放在了原有根元素的外部，导致模板有多个根元素： |
|||
|
|||
```vue |
|||
<template> |
|||
<view> |
|||
<!-- 原有内容 --> |
|||
</view> |
|||
|
|||
<!-- ❌ 错误：这些弹窗在根元素外部 --> |
|||
<view v-if="showForgotModal" class="forgot-modal-overlay"> |
|||
<!-- 忘记密码弹窗 --> |
|||
</view> |
|||
|
|||
<view v-if="showUserTypeModal" class="user-type-modal-overlay"> |
|||
<!-- 用户类型选择弹窗 --> |
|||
</view> |
|||
</template> |
|||
``` |
|||
|
|||
## ✅ **修复方案** |
|||
|
|||
将所有弹窗代码移动到原有根元素内部，确保只有一个根元素： |
|||
|
|||
```vue |
|||
<template> |
|||
<view> |
|||
<!-- 原有内容 --> |
|||
<view style="height: 500rpx;background-color:#fff;"> |
|||
<!-- 登录表单内容 --> |
|||
</view> |
|||
<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }"> |
|||
<!-- 登录表单内容 --> |
|||
</view> |
|||
|
|||
<!-- ✅ 正确：弹窗在根元素内部 --> |
|||
<view v-if="showForgotModal" class="forgot-modal-overlay" @click="closeForgotModal"> |
|||
<!-- 忘记密码弹窗内容 --> |
|||
</view> |
|||
|
|||
<view v-if="showUserTypeModal" class="user-type-modal-overlay" @click="showUserTypeModal = false"> |
|||
<!-- 用户类型选择弹窗内容 --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
``` |
|||
|
|||
## 🔄 **修复步骤** |
|||
|
|||
### 1. **移动忘记密码弹窗** |
|||
```vue |
|||
<!-- 从这里 --> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 忘记密码弹窗 --> |
|||
<view v-if="showForgotModal"> |
|||
|
|||
<!-- 移动到这里 --> |
|||
</view> |
|||
|
|||
<!-- 忘记密码弹窗 --> |
|||
<view v-if="showForgotModal"> |
|||
</view> |
|||
``` |
|||
|
|||
### 2. **移动用户类型选择弹窗** |
|||
```vue |
|||
<!-- 从根元素外部移动到根元素内部 --> |
|||
<view v-if="showUserTypeModal" class="user-type-modal-overlay"> |
|||
<!-- 弹窗内容 --> |
|||
</view> |
|||
</view> <!-- 根元素结束 --> |
|||
``` |
|||
|
|||
## 📋 **修复结果** |
|||
|
|||
### **修复前的错误结构** |
|||
```vue |
|||
<template> |
|||
<view>原有内容</view> <!-- 根元素1 --> |
|||
<view>弹窗1</view> <!-- 根元素2 ❌ --> |
|||
<view>弹窗2</view> <!-- 根元素3 ❌ --> |
|||
</template> |
|||
``` |
|||
|
|||
### **修复后的正确结构** |
|||
```vue |
|||
<template> |
|||
<view> <!-- 唯一根元素 ✅ --> |
|||
原有内容 |
|||
<view>弹窗1</view> <!-- 子元素 --> |
|||
<view>弹窗2</view> <!-- 子元素 --> |
|||
</view> |
|||
</template> |
|||
``` |
|||
|
|||
## 🎯 **技术要点** |
|||
|
|||
### 1. **Vue 2 模板规则** |
|||
- 必须有且仅有一个根元素 |
|||
- 所有内容都必须包含在这个根元素内 |
|||
- 条件渲染（v-if）的元素也必须在根元素内 |
|||
|
|||
### 2. **弹窗定位不受影响** |
|||
- 弹窗使用 `position: fixed` 定位 |
|||
- 即使在根元素内部，仍然可以覆盖整个屏幕 |
|||
- `z-index` 确保弹窗在最上层显示 |
|||
|
|||
### 3. **样式层级** |
|||
```css |
|||
.forgot-modal-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 9999; /* 确保在最上层 */ |
|||
} |
|||
``` |
|||
|
|||
## ✅ **验证修复** |
|||
|
|||
### 1. **编译检查** |
|||
- ✅ 模板编译无错误 |
|||
- ✅ 只有一个根元素 |
|||
- ✅ 所有弹窗正确嵌套 |
|||
|
|||
### 2. **功能检查** |
|||
- ✅ 弹窗正常显示 |
|||
- ✅ 弹窗定位正确 |
|||
- ✅ 交互功能正常 |
|||
|
|||
### 3. **样式检查** |
|||
- ✅ 弹窗覆盖整个屏幕 |
|||
- ✅ 背景遮罩正常 |
|||
- ✅ 弹窗居中显示 |
|||
|
|||
## 📝 **经验总结** |
|||
|
|||
### 1. **Vue 2 vs Vue 3** |
|||
- Vue 2：必须有一个根元素 |
|||
- Vue 3：支持多个根元素（Fragment） |
|||
|
|||
### 2. **弹窗实现最佳实践** |
|||
- 始终将弹窗放在组件的根元素内部 |
|||
- 使用 `position: fixed` 进行全屏覆盖 |
|||
- 合理设置 `z-index` 层级 |
|||
|
|||
### 3. **模板结构规划** |
|||
- 在添加新功能前，先确认模板结构 |
|||
- 保持清晰的元素层级关系 |
|||
- 避免破坏现有的根元素结构 |
|||
|
|||
--- |
|||
|
|||
**修复完成时间**：2025-07-31 |
|||
**状态**：✅ 模板错误已修复，功能正常 |
|||
**下一步**：测试弹窗功能的完整流程 |
|||
@ -0,0 +1,283 @@ |
|||
# 忘记密码弹窗功能实现说明 |
|||
|
|||
## 📋 **功能概述** |
|||
|
|||
将原来的忘记密码页面跳转改为弹窗形式，按照设计图实现两步式密码重置流程。 |
|||
|
|||
## 🎨 **设计特点** |
|||
|
|||
### 1. **两步式流程** |
|||
- **步骤1**：验证手机号码 |
|||
- 输入手机号 |
|||
- 输入短信验证码（带倒计时） |
|||
- 选择用户类型（员工/学员） |
|||
|
|||
- **步骤2**：设置新密码 |
|||
- 输入新密码 |
|||
- 确认新密码 |
|||
- 密码可见性切换 |
|||
|
|||
### 2. **视觉设计** |
|||
- **步骤指示器**：圆形数字 + 连接线，激活状态为绿色 |
|||
- **输入框**：灰色背景，圆角设计 |
|||
- **验证码按钮**：绿色背景，带倒计时功能 |
|||
- **用户类型选择**：点击弹出选择器 |
|||
- **操作按钮**：全宽绿色按钮 |
|||
|
|||
## 🔧 **技术实现** |
|||
|
|||
### 1. **前端组件结构** |
|||
```vue |
|||
<!-- 主弹窗 --> |
|||
<view class="forgot-modal-overlay"> |
|||
<view class="forgot-modal"> |
|||
<!-- 步骤指示器 --> |
|||
<view class="step-indicator"> |
|||
<view class="step-item"> |
|||
<text class="step-number">1</text> |
|||
<text class="step-text">验证手机号码</text> |
|||
</view> |
|||
<view class="step-line"></view> |
|||
<view class="step-item"> |
|||
<text class="step-number">2</text> |
|||
<text class="step-text">设置新密码</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 步骤内容 --> |
|||
<view class="step-content"> |
|||
<!-- 动态内容根据currentStep显示 --> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="action-buttons"> |
|||
<view class="next-btn">下一步</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 用户类型选择弹窗 --> |
|||
<view class="user-type-modal-overlay"> |
|||
<view class="user-type-modal"> |
|||
<!-- 选择项 --> |
|||
</view> |
|||
</view> |
|||
``` |
|||
|
|||
### 2. **数据结构** |
|||
```javascript |
|||
data() { |
|||
return { |
|||
// 弹窗控制 |
|||
showForgotModal: false, |
|||
currentStep: 1, |
|||
showUserTypeModal: false, |
|||
|
|||
// 验证码倒计时 |
|||
codeCountdown: 0, |
|||
|
|||
// 密码可见性 |
|||
showNewPassword: false, |
|||
showConfirmPassword: false, |
|||
|
|||
// 表单数据 |
|||
forgotForm: { |
|||
mobile: '', |
|||
code: '', |
|||
userType: '', |
|||
newPassword: '', |
|||
confirmPassword: '' |
|||
}, |
|||
|
|||
// 用户类型选项 |
|||
selectedUserType: {}, |
|||
userTypeOptions: [ |
|||
{ value: 'staff', text: '员工' }, |
|||
{ value: 'member', text: '学员' } |
|||
] |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 3. **核心方法** |
|||
```javascript |
|||
// 打开弹窗 |
|||
forgot() { |
|||
this.showForgotModal = true; |
|||
this.currentStep = 1; |
|||
this.resetForgotForm(); |
|||
} |
|||
|
|||
// 发送验证码 |
|||
async sendVerificationCode() { |
|||
// 表单验证 |
|||
// 调用API发送验证码 |
|||
// 开始倒计时 |
|||
} |
|||
|
|||
// 下一步 |
|||
nextStep() { |
|||
// 验证当前步骤数据 |
|||
// 调用验证码验证API |
|||
// 切换到步骤2 |
|||
} |
|||
|
|||
// 重置密码 |
|||
async resetPassword() { |
|||
// 密码验证 |
|||
// 调用重置密码API |
|||
// 显示成功提示 |
|||
} |
|||
``` |
|||
|
|||
## 🌐 **API接口** |
|||
|
|||
### 1. **发送验证码** |
|||
```javascript |
|||
// POST /common/sendVerificationCode |
|||
{ |
|||
mobile: "13800138000", |
|||
type: "reset_password", |
|||
user_type: "staff" // 或 "member" |
|||
} |
|||
``` |
|||
|
|||
### 2. **验证验证码** |
|||
```javascript |
|||
// POST /common/verifyCode |
|||
{ |
|||
mobile: "13800138000", |
|||
code: "123456", |
|||
type: "reset_password", |
|||
user_type: "staff" |
|||
} |
|||
``` |
|||
|
|||
### 3. **重置密码** |
|||
```javascript |
|||
// POST /common/resetPassword |
|||
{ |
|||
mobile: "13800138000", |
|||
code: "123456", |
|||
new_password: "newpassword123", |
|||
user_type: "staff" |
|||
} |
|||
``` |
|||
|
|||
## 🎯 **用户体验优化** |
|||
|
|||
### 1. **表单验证** |
|||
- 手机号格式验证 |
|||
- 验证码长度验证 |
|||
- 密码强度验证 |
|||
- 确认密码一致性验证 |
|||
|
|||
### 2. **交互反馈** |
|||
- 发送验证码倒计时（60秒） |
|||
- 加载状态提示 |
|||
- 成功/失败消息提示 |
|||
- 密码可见性切换 |
|||
|
|||
### 3. **错误处理** |
|||
- 网络异常处理 |
|||
- 接口错误提示 |
|||
- 表单验证错误提示 |
|||
|
|||
## 📱 **响应式设计** |
|||
|
|||
### 1. **弹窗尺寸** |
|||
- 宽度：90%，最大600rpx |
|||
- 高度：自适应内容 |
|||
- 圆角：20rpx |
|||
- 居中显示 |
|||
|
|||
### 2. **输入框设计** |
|||
- 高度：100rpx |
|||
- 背景：#f5f5f5 |
|||
- 圆角：10rpx |
|||
- 内边距：0 30rpx |
|||
|
|||
### 3. **按钮设计** |
|||
- 主色调：#00be8c（绿色） |
|||
- 高度：100rpx |
|||
- 圆角：10rpx |
|||
- 全宽布局 |
|||
|
|||
## 🔄 **状态管理** |
|||
|
|||
### 1. **步骤控制** |
|||
```javascript |
|||
currentStep: 1 // 1=验证手机号, 2=设置密码 |
|||
``` |
|||
|
|||
### 2. **表单重置** |
|||
```javascript |
|||
resetForgotForm() { |
|||
this.forgotForm = { |
|||
mobile: '', |
|||
code: '', |
|||
userType: '', |
|||
newPassword: '', |
|||
confirmPassword: '' |
|||
}; |
|||
this.selectedUserType = {}; |
|||
this.codeCountdown = 0; |
|||
} |
|||
``` |
|||
|
|||
### 3. **弹窗关闭** |
|||
```javascript |
|||
closeForgotModal() { |
|||
this.showForgotModal = false; |
|||
this.currentStep = 1; |
|||
this.resetForgotForm(); |
|||
} |
|||
``` |
|||
|
|||
## 🧪 **测试要点** |
|||
|
|||
### 1. **功能测试** |
|||
- [ ] 弹窗正常打开/关闭 |
|||
- [ ] 步骤切换正常 |
|||
- [ ] 验证码发送和倒计时 |
|||
- [ ] 用户类型选择 |
|||
- [ ] 密码重置流程 |
|||
|
|||
### 2. **UI测试** |
|||
- [ ] 步骤指示器状态变化 |
|||
- [ ] 输入框样式正确 |
|||
- [ ] 按钮状态和颜色 |
|||
- [ ] 弹窗居中显示 |
|||
- [ ] 响应式布局 |
|||
|
|||
### 3. **交互测试** |
|||
- [ ] 表单验证提示 |
|||
- [ ] 网络请求状态 |
|||
- [ ] 错误处理机制 |
|||
- [ ] 成功反馈 |
|||
|
|||
## 📝 **使用说明** |
|||
|
|||
### 1. **触发方式** |
|||
点击登录页面的"忘记登录密码"按钮 |
|||
|
|||
### 2. **操作流程** |
|||
1. 输入手机号 |
|||
2. 选择用户类型 |
|||
3. 点击"发送验证码" |
|||
4. 输入收到的验证码 |
|||
5. 点击"下一步" |
|||
6. 输入新密码和确认密码 |
|||
7. 点击"确认修改" |
|||
|
|||
### 3. **注意事项** |
|||
- 验证码有效期通常为5-10分钟 |
|||
- 密码长度不少于6位 |
|||
- 两次密码输入必须一致 |
|||
- 需要选择正确的用户类型 |
|||
|
|||
--- |
|||
|
|||
**实现完成时间**：2025-07-31 |
|||
**状态**：✅ 前端UI和交互逻辑已完成 |
|||
**待完成**：后端API接口实现 |
|||
Loading…
Reference in new issue