php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(coach/class): 教练端班级详情页面添加课程计划列表 

- 实现课程计划列表的展示和分页加载
- 添加下拉刷新功能
- 优化课程列表的数据显示和样式
- 实现课程状态的动态显示
master
liutong 12 months ago
parent
5e15067086
commit
46e5e526f5
1 changed files with 94 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 208
      pages/coach/class/info.vue

208
pages/coach/class/info.vue
View File

@ -107,30 +107,42 @@
</view>
<!--课程计划-->
<view class="section_5" v-if="tabType=='2'">
<scroll-view
v-if="tabType=='2'"
class="section_5"
scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData"
style="height: 65vh;"
>
<view class="ul">
<view class="li" @click="openViewCourseInfo({id:1})">
<view
class="li"
v-for="(v,k) in courseList"
:key="l"
@click="openViewCourseInfo(v)"
>
<view class="top_box">
<view class="title">
课程：篮球少儿课
课程：{{v.courses_name}}
</view>
<view class="title">
时间：2024-05-25 15：20 - 17：30
时间：{{v.date}}
</view>
<view class="title">
地点：xxx体育馆 302室
地点：{{v.address}}
</view>
</view>
<view class="bottom_box">
<view class="item">
<view class="left">应到学员（34）</view>
<view class="left">应到学员（{{v.max_students}}）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">已签到学生（15/34）</view>
<view class="left">已签到学生（{{v.has_sign_count}}/{{v.max_students}}）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
@ -144,117 +156,20 @@
</view>
</view>
</view>
<view class="tag" style="background-color:#20CAAF;">
未开始
</view>
<!-- <view class="tag" style="background-color:#fad24e;">-->
<!-- 上课中-->
<!-- </view>-->
<!-- <view class="tag" style="background-color:#e2e2e2;">-->
<!-- 已结束-->
<!-- </view>-->
</view>
<view class="li" @click="openViewCourseInfo({id:1})">
<view class="top_box">
<view class="title">
课程：篮球少儿课
</view>
<view class="title">
时间：2024-05-25 15：20 - 17：30
</view>
<view class="title">
地点：xxx体育馆 302室
</view>
</view>
<view class="bottom_box">
<view class="item">
<view class="left">应到学员（34）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">已签到学生（15/34）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">作业完成率（80%）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
<view class="tag" v-if="!(['1','2'].includes(String(v.status)))" style="background-color:#20CAAF;">
未开始
</view>
<view class="tag" style="background-color:#fad24e;">
<view class="tag" v-if="v.status == 1" style="background-color:#fad24e;">
上课中
</view>
<!-- <view class="tag" style="background-color:#e2e2e2;">-->
<!-- 已结束-->
<!-- </view>-->
</view>
<view class="li" @click="openViewCourseInfo({id:1})">
<view class="top_box">
<view class="title">
课程：篮球少儿课
</view>
<view class="title">
时间：2024-05-25 15：20 - 17：30
</view>
<view class="title">
地点：xxx体育馆 302室
</view>
</view>
<view class="bottom_box">
<view class="item">
<view class="left">应到学员（34）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">已签到学生（15/34）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
<view class="item">
<view class="left">作业完成率（80%）</view>
<view class="right">
查看
<fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
</view>
</view>
</view>
<!-- <view class="tag" style="background-color:#20CAAF;">-->
<!-- 未开始-->
<!-- </view>-->
<!-- <view class="tag" style="background-color:#fad24e;">-->
<!-- 上课中-->
<!-- </view>-->
<view class="tag" style="background-color:#e2e2e2;">
<view class="tag" v-if="v.status == 2" style="background-color:#e2e2e2;">
已结束
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 底部导航-->
@ -274,11 +189,24 @@ export default {
data() {
return {
class_id:'',//班级id
courseInfoList:{},//课程计划数据
classInfo:{},//班级数据
classMemberList:{},//班级成员
tabType:'1',//1=班级成员,2=课程计划
loading: false,//加载状态
lowerThreshold: 100,//距离底部多远触发
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
//筛选条件
filteredData: {
page: 1,//当前页码
limit: 10,//每页返回数据条数
total: 10,//数据总条数
class_id: '',//班级id
},
courseList:[],//课程计划数据
}
},
onLoad(options) {
@ -287,13 +215,19 @@ export default {
onShow() {
this.init()
},
//下拉刷新
async onPullDownRefresh() {
//重置为第一页
await this.loadData()
await this.getCourseList()
},
methods: {
async init(){
// member/course_list//课程列表
// member/class_info//班级详情+成员详情
this.getClassInfo()//获取班级详情
// this.getCourseList()//获取课程列表
await this.getCourseList()//获取课程列表
},
@ -312,14 +246,48 @@ export default {
this.classMemberList = res.data.students_list
},
//加载更过(下一页)
loadMoreData() {
//判断是否加载
if (!this.isReachedBottom) {
this.isReachedBottom = true;//设置为不可请求状态
this.getCourseList();
}
},
//重置为第一页
async loadData() {
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
this.filteredData.page = 1//当前页码
this.filteredData.limit = 10//每页返回数据条数
this.filteredData.total = 10//数据总条数
},
//教练端-获取课程列表
async getCourseList(){
let data = {
page:0,
limit:12,
class_id:this.class_id,
let data = {...this.filteredData}
data.class_id = this.class_id
console.log(12123,this.courseList)
if(data.page == 1){
this.courseList = []
}
//判断是否还有数据
if (this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total) {
this.loading = false
uni.showToast({
title: '暂无更多',
icon: 'none'
})
return
}
let res = await memberApi.courseList(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1) {
uni.showToast({
title: res.msg,
@ -327,8 +295,14 @@ export default {
})
return
}
this.courseInfo = res.data
console.log('获取课程列表',this.courseInfo)
this.courseList = this.courseList.concat(res.data.list.data)// 使用 concat 方法 将新数据追加到数组中
this.filteredData.total = res.data.list.total
console.log('获取课程列表',this.courseList)
this.filteredData.page++
},

Write Preview
Loading…
Cancel
Save