Browse Source

feat(coach): 教练端新增班级列表功能

- 添加 jlClassList 方法获取班级列表数据- 实现班级列表页面,包括加载更多和筛选功能
-优化班级列表展示,显示班级名称和学生列表
master
liutong 12 months ago
parent
commit
86402d0c58
  1. 10
      api/member.js
  2. 139
      pages/coach/class/list.vue
  3. 3
      pages/coach/course/info_list.vue

10
api/member.js

@ -202,6 +202,16 @@ export default {
})
},
//教练端-获取班级列表
jlClassList(data = {}) {
let url = '/member/class_list'
return http.get(url, data).then(res => {
return res;
})
},

139
pages/coach/class/list.vue

@ -12,59 +12,43 @@
</view>
<view class="section_2">
<view class="ul">
<view class="li" @click="openViewClassInfo({id:1})">
<scroll-view
class="ul"
scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData"
style="height: 80vh;"
>
<view
class="li"
v-for="(v,k) in tableList"
:key="k"
@click="openViewClassInfo(v)"
>
<view class="left">
<!-- <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>-->
</view>
<view class="right">
<view class="box_1">
<view class="name">
少年班
{{v.name}}
</view>
<view class="btn_box">
<view>2人即将到期</view>
</view>
</view>
<view class="box_2">
<view class="user_list">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="num">34</view>
</view>
</view>
</view>
<view class="li" @click="openViewClassInfo({id:3})">
<view class="left">
<!-- <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>-->
</view>
<view class="right">
<view class="box_1">
<view class="name">
少年班
</view>
<view class="btn_box">
<!-- <view>2人即将到期</view>-->
</view>
</view>
<view class="box_2">
<view class="user_list">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="num">34</view>
<view class="user_list" v-for="(v2,k2) in v.students_list" :key="k2">
<image
:src="$util.img(v2.header)"></image>
</view>
<view class="num">{{v.students_count}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 底部导航-->
@ -73,7 +57,7 @@
</template>
<script>
// import user from '@/api/user.js';
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
@ -83,12 +67,86 @@ export default {
},
data() {
return {
formData:{},
loading:false,//
lowerThreshold: 100,//
isReachedBottom: false,//|true=|false=
//
filteredData:{
page:1,//
limit:10,//
total:10,//
name: '',//
},
tableList:[],//
}
},
onLoad() {
onLoad(options) {},
onShow(){
this.init()//
},
methods: {
//
async init(){
this.getList()
},
//()
loadMoreData() {
//
if (!this.isReachedBottom) {
this.isReachedBottom = true;//
this.getList();
}
},
//
async resetFilteredData() {
this.isReachedBottom = false; // 便
this.filteredData.page = 1//
this.filteredData.limit = 10//
this.filteredData.total = 10//
},
//
async getList(){
this.loading = true
let data = {...this.filteredData}
console.log(111,(this.filteredData.page * this.filteredData.limit) ,(this.filteredData.total))
//
if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
this.loading = false
uni.showToast({
title: '暂无更多',
icon: 'none'
})
return
}
if(data.page == 1){
this.tableList = []
}
let res = await memberApi.jlClassList(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.tableList = this.tableList.concat(res.data.data); // 使 concat
console.log('列表',this.tableList)
this.filteredData.total = res.data.total
this.filteredData.page++
},
//
openViewClassInfo(item){
uni.navigateTo({
@ -157,8 +215,9 @@ export default {
.ul{
display: flex;
flex-direction: column;
gap: 24rpx;
//gap: 24rpx;
.li{
margin-bottom: 24rpx;
background: #404045;
padding: 50rpx 36rpx 46rpx;
border-radius: 16rpx;

3
pages/coach/course/info_list.vue

@ -89,8 +89,7 @@
<view
class="li"
v-for="(v,k) in courseInfo.assignments.wtj_list"
:key="k"
@click="openViewCourseInfo({v})">
:key="k">
<view class="left">
<image class="pic" model="aspectFit" :src="$util.img(v.header)"></image>
<view class="box">

Loading…
Cancel
Save