Browse Source

feat(coach): 添加即将到期页面并更新相关导航

- 新增即将到期页面组件,用于展示即将到期的学员信息
- 在我的页面添加即将到期导航项,点击可跳转到新页面
- 更新全局页面配置,添加即将到期页面的样式设置
master
liutong 1 year ago
parent
commit
51c891082b
  1. 11
      pages.json
  2. 316
      pages/coach/my/due_soon.vue
  3. 9
      pages/coach/my/index.vue

11
pages.json

@ -195,7 +195,18 @@
"navigationBarBackgroundColor": "#292929", "navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
},
{
"path": "pages/coach/my/due_soon",
"style": {
"navigationBarTitleText": "即将到期",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white"
}
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",

316
pages/coach/my/due_soon.vue

@ -0,0 +1,316 @@
<!--即将到期-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<!-- <view class="navbar_section">-->
<!-- <view class="title">班级详情</view>-->
<!-- </view>-->
<view class="main_section">
<!-- 班级成员列表-->
<view class="section_4">
<view class="ul">
<view class="li" @click="openViewStudentInfo({id:1})">
<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" @click="openViewStudentInfo({id:1})">
<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" @click="openViewStudentInfo({id:1})">
<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" @click="openViewStudentInfo({id:1})">
<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" @click="openViewStudentInfo({id:1})">
<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" @click="openViewStudentInfo({id:1})">
<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>
<!-- 底部导航-->
<!-- <AQTabber/>-->
</view>
</template>
<script>
import user from '@/api/user.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){
uni.navigateTo({
url: '/pages/coach/course/info'
})
},
//
openViewStudentInfo(item){
uni.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: 20rpx 0;
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;
.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;
}
}
}
}
}
}
}
</style>

9
pages/coach/my/index.vue

@ -65,7 +65,7 @@
</view> </view>
<view class="item"> <view class="item">
<view>即将到期</view> <view @click="openViewDueSoon()">即将到期</view>
<view></view> <view></view>
</view> </view>
@ -117,6 +117,13 @@ export default {
url: '/pages/coach/my/arrival_statistics' url: '/pages/coach/my/arrival_statistics'
}) })
}, },
//
openViewDueSoon(){
uni.navigateTo({
url: '/pages/coach/my/due_soon'
})
},
} }
} }
</script> </script>

Loading…
Cancel
Save