Compare commits
2 Commits
92dcc9300e
...
6d18f2218e
| Author | SHA1 | Date |
|---|---|---|
|
|
6d18f2218e | 9 months ago |
|
|
b29fe7b2d3 | 9 months ago |
9 changed files with 524 additions and 393 deletions
@ -1,323 +1,235 @@ |
|||
<!--即将到期--> |
|||
<template> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<!-- <view class="navbar_section">--> |
|||
<!-- <view class="title">班级详情</view>--> |
|||
<!-- </view>--> |
|||
<view class="main_box"> |
|||
<!--自定义导航栏--> |
|||
<!-- <view class="navbar_section">--> |
|||
<!-- <view class="title">班级详情</view>--> |
|||
<!-- </view>--> |
|||
|
|||
<view class="main_section"> |
|||
<!-- 班级成员列表--> |
|||
<view class="section_4"> |
|||
<view class="ul"> |
|||
<!-- @click="openViewStudentInfo({id:1})" --> |
|||
<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 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 class="main_section"> |
|||
<!-- 班级成员列表--> |
|||
<view class="section_4"> |
|||
<view class="ul"> |
|||
<!-- @click="openViewStudentInfo({id:1})" --> |
|||
<view class="li" v-for="(item, index) in studentList" :key="index"> |
|||
<view class="left"> |
|||
<view class="box_1"> |
|||
<image :src="item.avatar || '/static/icon-img/avatar.png'" mode="aspectFill" class="pic"></image> |
|||
<view class="tag_box"> |
|||
即将到期 |
|||
</view> |
|||
</view> |
|||
<view class="box_2"> |
|||
<view class="name">{{item.name}}</view> |
|||
<view class="date">课程截止时间:{{item.end_date}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="item"> |
|||
<view>{{ |
|||
(item.use_total_hours + item.use_gift_hours) |
|||
}}节</view> |
|||
<view>已上课时</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view>{{ |
|||
(item.total_hours + item.gift_hours) - (item.use_total_hours + item.use_gift_hours) |
|||
}}节</view> |
|||
<view>剩余课时</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<!-- <AQTabber/>--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部导航--> |
|||
<!-- <AQTabber/>--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import user from '@/api/user.js'; |
|||
import AQTabber from "@/components/AQ/AQTabber.vue" |
|||
|
|||
import memberApi from '@/api/member.js'; |
|||
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 |
|||
}, |
|||
|
|||
//打开课程详情 |
|||
openViewCourseInfo(item){ |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/course/info' |
|||
}) |
|||
}, |
|||
//打开学员详情页 |
|||
openViewStudentInfo(item){ |
|||
this.$navigateTo({ |
|||
url: '/pages/coach/student/info' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
export default { |
|||
components: { |
|||
AQTabber, |
|||
}, |
|||
data() { |
|||
return { |
|||
formData: {}, |
|||
tabType: '1', //1=班级成员,2=作业任务 |
|||
studentList: [] |
|||
} |
|||
}, |
|||
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> |
|||
|
|||
<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{ |
|||
background: #292929 ; |
|||
} |
|||
.name { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
//自定义导航栏 |
|||
.navbar_section{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #292929; |
|||
.title{ |
|||
padding: 40rpx 0rpx; |
|||
.date { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 小程序端样式 */ |
|||
// #ifdef MP-WEIXIN |
|||
padding: 80rpx 0rpx; |
|||
// #endif |
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
|
|||
font-size: 30rpx; |
|||
color: #fff; |
|||
} |
|||
} |
|||
.item { |
|||
border: 1px solid #00E5BB; |
|||
border-radius: 10rpx; |
|||
width: 102rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.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; |
|||
.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 { |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue