9 changed files with 524 additions and 393 deletions
@ -1,323 +1,235 @@ |
|||||
<!--即将到期--> |
<!--即将到期--> |
||||
<template> |
<template> |
||||
<view class="main_box"> |
<view class="main_box"> |
||||
<!--自定义导航栏--> |
<!--自定义导航栏--> |
||||
<!-- <view class="navbar_section">--> |
<!-- <view class="navbar_section">--> |
||||
<!-- <view class="title">班级详情</view>--> |
<!-- <view class="title">班级详情</view>--> |
||||
<!-- </view>--> |
<!-- </view>--> |
||||
|
|
||||
<view class="main_section"> |
<view class="main_section"> |
||||
<!-- 班级成员列表--> |
<!-- 班级成员列表--> |
||||
<view class="section_4"> |
<view class="section_4"> |
||||
<view class="ul"> |
<view class="ul"> |
||||
<!-- @click="openViewStudentInfo({id:1})" --> |
<!-- @click="openViewStudentInfo({id:1})" --> |
||||
<view class="li"> |
<view class="li" v-for="(item, index) in studentList" :key="index"> |
||||
<view class="left"> |
<view class="left"> |
||||
<view class="box_1"> |
<view class="box_1"> |
||||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
<image :src="item.avatar || '/static/icon-img/avatar.png'" mode="aspectFill" class="pic"></image> |
||||
<view class="tag_box"> |
<view class="tag_box"> |
||||
即将到期 |
即将到期 |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="box_2"> |
<view class="box_2"> |
||||
<view class="name">黄明明</view> |
<view class="name">{{item.name}}</view> |
||||
<view class="date">课程截止时间:2020.05:25</view> |
<view class="date">课程截止时间:{{item.end_date}}</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="right"> |
<view class="right"> |
||||
<view class="item"> |
<view class="item"> |
||||
<view>24</view> |
<view>{{ |
||||
<view>已上课时</view> |
(item.use_total_hours + item.use_gift_hours) |
||||
</view> |
}}节</view> |
||||
<view class="item"> |
<view>已上课时</view> |
||||
<view>24</view> |
</view> |
||||
<view>剩余课时</view> |
<view class="item"> |
||||
</view> |
<view>{{ |
||||
</view> |
(item.total_hours + item.gift_hours) - (item.use_total_hours + item.use_gift_hours) |
||||
</view> |
}}节</view> |
||||
<view class="li"> |
<view>剩余课时</view> |
||||
<view class="left"> |
</view> |
||||
<view class="box_1"> |
</view> |
||||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
</view> |
||||
<view class="tag_box"> |
|
||||
即将到期 |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box_2"> |
|
||||
<view class="name">黄明明</view> |
|
||||
<view class="date">课程截止时间:2020.05:25</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>已上课时</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>剩余课时</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="li"> |
|
||||
<view class="left"> |
|
||||
<view class="box_1"> |
|
||||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|
||||
<view class="tag_box"> |
|
||||
即将到期 |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box_2"> |
|
||||
<view class="name">黄明明</view> |
|
||||
<view class="date">课程截止时间:2020.05:25</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>已上课时</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>剩余课时</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="li"> |
|
||||
<view class="left"> |
|
||||
<view class="box_1"> |
|
||||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|
||||
<view class="tag_box"> |
|
||||
即将到期 |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box_2"> |
|
||||
<view class="name">黄明明</view> |
|
||||
<view class="date">课程截止时间:2020.05:25</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>已上课时</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>剩余课时</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="li"> |
|
||||
<view class="left"> |
|
||||
<view class="box_1"> |
|
||||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|
||||
<view class="tag_box"> |
|
||||
即将到期 |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="box_2"> |
|
||||
<view class="name">黄明明</view> |
|
||||
<view class="date">课程截止时间:2020.05:25</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>已上课时</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>剩余课时</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="li"> |
|
||||
<view class="left"> |
|
||||
<view class="box_1"> |
|
||||
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> |
|
||||
<!-- <view class="tag_box">--> |
|
||||
<!-- 即将到期--> |
|
||||
<!-- </view>--> |
|
||||
</view> |
|
||||
<view class="box_2"> |
|
||||
<view class="name">黄明明</view> |
|
||||
<view class="date">课程截止时间:2020.05:25</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>已上课时</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<view>24</view> |
|
||||
<view>剩余课时</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 底部导航--> |
</view> |
||||
<!-- <AQTabber/>--> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
|
<!-- 底部导航--> |
||||
|
<!-- <AQTabber/>--> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
// import user from '@/api/user.js'; |
import memberApi from '@/api/member.js'; |
||||
import AQTabber from "@/components/AQ/AQTabber.vue" |
import AQTabber from "@/components/AQ/AQTabber.vue" |
||||
|
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
AQTabber, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
formData:{}, |
|
||||
tabType:'1',//1=班级成员,2=作业任务 |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
}, |
|
||||
methods: { |
|
||||
//切换tab |
|
||||
tabChange(tabType) { |
|
||||
this.tabType = tabType |
|
||||
}, |
|
||||
|
|
||||
//打开课程详情 |
export default { |
||||
openViewCourseInfo(item){ |
components: { |
||||
this.$navigateTo({ |
AQTabber, |
||||
url: '/pages/coach/course/info' |
}, |
||||
}) |
data() { |
||||
}, |
return { |
||||
//打开学员详情页 |
formData: {}, |
||||
openViewStudentInfo(item){ |
tabType: '1', //1=班级成员,2=作业任务 |
||||
this.$navigateTo({ |
studentList: [] |
||||
url: '/pages/coach/student/info' |
} |
||||
}) |
}, |
||||
}, |
onLoad() { |
||||
} |
this.getStudentList(); |
||||
} |
}, |
||||
|
methods: { |
||||
|
//切换tab |
||||
|
tabChange(tabType) { |
||||
|
this.tabType = tabType |
||||
|
}, |
||||
|
async getStudentList() { |
||||
|
// 模拟数据,实际开发中应该从API获取 |
||||
|
const res = await memberApi.jlGetStudentList({ |
||||
|
'type': 'daoqi' |
||||
|
}); |
||||
|
if (res.code == 1) { |
||||
|
this.studentList = res.data || []; |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.msg || '获取学员列表失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
//打开课程详情 |
||||
|
openViewCourseInfo(item) { |
||||
|
this.$navigateTo({ |
||||
|
url: '/pages/coach/course/info' |
||||
|
}) |
||||
|
}, |
||||
|
//打开学员详情页 |
||||
|
openViewStudentInfo(item) { |
||||
|
this.$navigateTo({ |
||||
|
url: '/pages/coach/student/info' |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
|
.main_box { |
||||
|
background: #292929; |
||||
|
} |
||||
|
|
||||
|
//自定义导航栏 |
||||
|
.navbar_section { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: #292929; |
||||
|
|
||||
|
.title { |
||||
|
padding: 40rpx 0rpx; |
||||
|
|
||||
|
/* 小程序端样式 */ |
||||
|
// #ifdef MP-WEIXIN |
||||
|
padding: 80rpx 0rpx; |
||||
|
// #endif |
||||
|
|
||||
|
font-size: 30rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main_section { |
||||
|
min-height: 100vh; |
||||
|
background: #292929 100%; |
||||
|
padding: 0 24rpx; |
||||
|
padding-top: 40rpx; |
||||
|
padding-bottom: 150rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
//班级成员列表 |
||||
|
.section_4 { |
||||
|
.ul { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 10rpx; |
||||
|
|
||||
|
.li { |
||||
|
padding: 20rpx 0; |
||||
|
padding-bottom: 40rpx; |
||||
|
border-bottom: 2px solid #D7D7D7; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 30rpx; |
||||
|
|
||||
|
.box_1 { |
||||
|
padding-left: 20rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: relative; |
||||
|
|
||||
|
.pic { |
||||
|
width: 84rpx; |
||||
|
height: 84rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.tag_box { |
||||
|
position: absolute; |
||||
|
bottom: -30rpx; |
||||
|
width: 120rpx; |
||||
|
height: 38rpx; |
||||
|
background-color: #F59A23; |
||||
|
border-radius: 4rpx; |
||||
|
line-height: 35rpx; |
||||
|
text-align: center; |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box_2 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
|
||||
.main_box{ |
.name { |
||||
background: #292929 ; |
font-size: 28rpx; |
||||
} |
} |
||||
|
|
||||
//自定义导航栏 |
.date { |
||||
.navbar_section{ |
font-size: 24rpx; |
||||
display: flex; |
} |
||||
justify-content: center; |
} |
||||
align-items: center; |
} |
||||
background: #292929; |
|
||||
.title{ |
|
||||
padding: 40rpx 0rpx; |
|
||||
|
|
||||
/* 小程序端样式 */ |
.right { |
||||
// #ifdef MP-WEIXIN |
display: flex; |
||||
padding: 80rpx 0rpx; |
align-items: center; |
||||
// #endif |
gap: 14rpx; |
||||
|
|
||||
font-size: 30rpx; |
.item { |
||||
color: #fff; |
border: 1px solid #00E5BB; |
||||
} |
border-radius: 10rpx; |
||||
} |
width: 102rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
.main_section{ |
view { |
||||
min-height: 100vh; |
text-align: center; |
||||
background: #292929 100%; |
height: 50rpx; |
||||
padding: 0 24rpx; |
line-height: 50rpx; |
||||
padding-top: 40rpx; |
} |
||||
padding-bottom: 150rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #FFFFFF; |
|
||||
//班级成员列表 |
|
||||
.section_4{ |
|
||||
.ul{ |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
gap: 10rpx; |
|
||||
.li{ |
|
||||
padding: 20rpx 0; |
|
||||
padding-bottom: 40rpx; |
|
||||
border-bottom: 2px solid #D7D7D7; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
.left{ |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 30rpx; |
|
||||
.box_1{ |
|
||||
padding-left: 20rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
position: relative; |
|
||||
.pic{ |
|
||||
width: 84rpx; |
|
||||
height: 84rpx; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
.tag_box{ |
|
||||
position: absolute; |
|
||||
bottom: -30rpx; |
|
||||
width: 120rpx; |
|
||||
height: 38rpx; |
|
||||
background-color: #F59A23; |
|
||||
border-radius: 4rpx; |
|
||||
line-height: 35rpx; |
|
||||
text-align: center; |
|
||||
font-size: 20rpx; |
|
||||
} |
|
||||
} |
|
||||
.box_2{ |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
gap: 20rpx; |
|
||||
.name{ |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
.date{ |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.right{ |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 14rpx; |
|
||||
.item{ |
|
||||
border: 1px solid #00E5BB; |
|
||||
border-radius: 10rpx; |
|
||||
width: 102rpx; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
view{ |
|
||||
text-align: center; |
|
||||
height: 50rpx; |
|
||||
line-height: 50rpx; |
|
||||
} |
|
||||
view:nth-child(1){ |
|
||||
font-size: 32rpx; |
|
||||
background-color: #fff; |
|
||||
color: #00e5bb; |
|
||||
} |
|
||||
view:nth-child(2){ |
|
||||
font-size: 20rpx; |
|
||||
background-color: #00e5bb; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
view:nth-child(1) { |
||||
|
font-size: 32rpx; |
||||
|
background-color: #fff; |
||||
|
color: #00e5bb; |
||||
|
} |
||||
|
|
||||
|
view:nth-child(2) { |
||||
|
font-size: 20rpx; |
||||
|
background-color: #00e5bb; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue