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

refactor(coach): 重构教练端课程详情页面 

- 重新设计了课程详情页面的布局和样式,使其更加简洁明了- 添加了课程名称、班级、上课时间、上课地址等详细信息
- 增加了教练信息和扣除课时的展示- 优化了页面结构,提高了用户体验
- 调整了导航栏样式,与整体页面风格保持一致
master
liutong 1 year ago
parent
590528ffc7
commit
beea94ac66
3 changed files with 164 additions and 417 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. 4
      pages.json
  2. 560
      pages/coach/course/info.vue
  3. 17
      pages/coach/course/list.vue

4
pages.json
View File

@ -90,8 +90,8 @@
"style": {
"navigationBarTitleText": "课时详情",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white"
}
}

560
pages/coach/course/info.vue
View File

@ -1,169 +1,57 @@
<!--课程-详情-->
<template>
<view class="main_section">
<view class="section_1">
<view class="top">
<view class="user">
<view class="pic">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="name">包子皮</view>
</view>
<view class="right">
<view>
<text class="title">到课率统计</text>
<text>28%</text>
</view>
<view>
<text class="title">发布作业</text>
<text>28%</text>
</view>
</view>
</view>
<view class="bottom"></view>
<view class="text_box">
<text>月授课数</text>
<text>12</text>
<text>节，月负责学员</text>
<text>188</text>
<text>名</text>
</view>
</view>
<view class="section_2">
<view class="left_box">
<view>
<text>课程</text>
<text>预告</text>
</view>
<view>
<text>5/28周五 15:30~17:30</text>
<text>301室篮球少儿课程</text>
</view>
</view>
<view class="rigth_box">
<view>详情</view>
</view>
</view>
<view class="section_3">
<view class="title_box">
<view class="top_box">
<text>最近课程</text>
<view></view>
</view>
<view class="line"></view>
</view>
<view class="ul">
<view class="li">
<view class="left_box">
<view class="date_box">
<text>12</text>
<text>/</text>
<text>24</text>
</view>
<view class="ratio">
到课率：80%
</view>
</view>
<view class="center_box">
<view>班级：少年班</view>
<view>时间：2020-05-25 15:30 - 17:30</view>
<view>课室：302室
</view>
<view>课程：篮球少儿课
</view>
</view>
<view class="right_box">
<view class="tag" style="background:#fad24e;">上课中</view>
<!-- <view class="tag" style="background:#1cd188;">待上课</view>-->
<view class="main_box">
<view class="main_section">
<view class="section_1">
<view class="title_box">青少儿篮球课</view>
<view class="ul">
<view class="li">
<view class="title">课程名称</view>
<view class="content">青少年篮球课</view>
</view>
</view>
<view class="li">
<view class="left_box">
<view class="date_box">
<text>12</text>
<text>/</text>
<text>24</text>
</view>
<view class="ratio">
到课率：80%
</view>
<view class="li">
<view class="title">班级</view>
<view class="content">班级名称</view>
</view>
<view class="center_box">
<view>班级：少年班</view>
<view>时间：2020-05-25 15:30 - 17:30</view>
<view>课室：302室
</view>
<view>课程：篮球少儿课
</view>
<view class="li">
<view class="title">上课时间</view>
<view class="content">2020.03.25 15:30-17:00</view>
</view>
<view class="right_box">
<!-- <view class="tag" style="background:#fad24e;">上课中</view>-->
<view class="tag" style="background:#1cd188;">待上课</view>
<view class="li">
<view class="title">上课地址</view>
<view class="content">xxxx体育馆302室</view>
</view>
</view>
</view>
</view>
<view class="section_3">
<view class="title_box">
<view class="top_box">
<text>作业批改</text>
<view @click="openObjListView()">全部</view>
</view>
<view class="line"></view>
</view>
<view class="ul">
<view class="li">
<view class="left_box">
<view class="date_box">
<text>12</text>
<text>/</text>
<text>24</text>
</view>
<view class="ratio">
完成率：80%
</view>
<view class="li">
<view class="title">课程名称</view>
<view class="content">青少年篮球课</view>
</view>
<view class="center_box">
<view>班级：少年班</view>
<view>时间：2020-05-25 15:30 - 17:30</view>
<view>课程：篮球少儿课
</view>
<view class="li">
<view class="title">教练</view>
<view class="content">包子皮</view>
</view>
<view class="right_box">
<!-- <view class="tag" style="background:#fad24e;">上课中</view>-->
<view class="tag" style="background:#1cd188;">待批改</view>
<view class="li">
<view class="title">教练号码</view>
<view class="content">18888888888</view>
</view>
</view>
<view class="li">
<view class="left_box">
<view class="date_box">
<text>12</text>
<text>/</text>
<text>24</text>
</view>
<view class="ratio">
完成率：80%
</view>
<view class="li">
<view class="title">扣除课时</view>
<view class="content">2个课时</view>
</view>
<view class="center_box">
<view>班级：少年班</view>
<view>时间：2020-05-25 15:30 - 17:30</view>
<view>课程：篮球少儿课
</view>
<view class="state_box">
<view>已上</view>
</view>
<view class="right_box">
<!-- <view class="tag" style="background:#fad24e;">上课中</view>-->
<view class="tag" style="background:#1cd188;">待批改</view>
</view>
</view>
</view>
</view>
<!-- 底部导航-->
<AQTabber/>
</view>
</template>
@ -178,296 +66,162 @@ export default {
},
data() {
return {
list: [],
likes: 0,
type: 1,
type1: 1,
activity_id: 0,
um_id: 0,
urls: 'http://medication.zeyan.wang/'
formData:{},
//课程下拉菜单相关
show_course:false,//是否显示下拉菜单
//课程下拉菜单
course_name:'课程',//选中的下拉菜单名称
options_course: [
{
text: '请选择课程',
value: '',
checked: true
}, {
text: '羽毛球课程1',
value: '1'
}, {
text: '篮球课程2',
value: '2'
}
],
//课室下拉菜单相关
show_classroom:false,//是否显示下拉菜单
//课程下拉菜单
classroom_name:'课室',//选中的下拉菜单名称
options_classroom: [
{
text: '请选择课室',
value: '',
checked: true
}, {
text: '羽毛球201',
value: '1'
}, {
text: '篮球室101',
value: '2'
}
],
}
},
onLoad() {
const um_id = uni.getStorageSync('um_id');
this.um_id = um_id
if (um_id == '') {
uni.navigateTo({
url: '/pages/login/login'
})
}
this.fetchData(this.um_id)
},
methods: {
//打开-发布作业页
openObjListView(){
uni.navigateTo({
url: '/pages/coach/job/add'
})
//选中课程下拉菜单点击事件
clickCourse(e){
console.log(e)
this.course_name = e.text
this.show_course = true
},
//打开作业列表页
openObjListView(){
uni.navigateTo({
url: '/pages/coach/job/list'
})
//显示下拉菜单
filterTapCourse() {
//显示下拉框
this.$refs.ref_course.show()
this.show_course = true;
},
fetchData(um_id) {
user.activity_index({
um_id: um_id
}).then(res => {
console.log(res)
if (res.status == 200) {
if (res.data == null) {
this.list = []
} else {
this.list = res.data
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
onPullDownRefresh() {
this.fetchData(this.um_id)
},
publishing() {
uni.navigateTo({
url: '/pages/index/publishing'
})
},
like(id, um_id) {
user.activity_like({um_id: um_id, activity_id: id, type: 1}).then(res => {
if (res.status == 200) {
user.activity_index({
um_id: um_id
}).then(res => {
console.log(res)
if (res.status == 200) {
this.list = res.data
}
});
this.type = res.data.type
this.activity_id = res.data.activity_id
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
//选中课室
clickClassroom(e){
console.log(e)
this.classroom_name = e.text
this.show_classroom = true
},
collection(id, um_id) {
user.activity_like({um_id: um_id, activity_id: id, type: 2}).then(res => {
if (res.status == 200) {
console.log(res)
this.fetchData(this.um_id)
this.type1 = res.data.type
this.activity_id = res.data.activity_id
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
//显示课室下拉菜单
filterTapClassroom() {
//显示下拉框
this.$refs.ref_classroom.show()
this.show_classroom = true;
},
coninfo(item) {
// user.coninfo({id:id}).then(res => {
// if(res.status == 200){
uni.setStorageSync('coninfo', item);
//打开课时详情页
openViewCourseInfo(item){
uni.navigateTo({
url: '/pages/index/coninfo'
url: '/pages/coach/course/info'
})
// }else{
// uni.showToast({
// title: res.msg,
// icon: 'none'
// })
// }
// });
},
Comment(id) {
uni.setStorageSync('actid', id);
uni.navigateTo({
url: '/pages/index/Comment'
})
}
}
}
</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: 30rpx 24rpx;
padding-top: 40rpx;
padding-bottom: 150rpx;
font-size: 28rpx;
.section_1{
background: #FFFFFF 100%;
height: 264rpx;
border-radius: 14rpx;
margin: 28rpx auto;
padding: 28rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 28rpx;
.top{
display: flex;
justify-content: space-between;
align-items: center;
.user{
display: flex;
align-items: center;
gap: 20rpx;
.pic{
width: 144rpx;
height: 144rpx;
border-radius: 50%;
image{
width: 100%;
height: 100%;
}
}
}
.right{
display: flex;
flex-direction: column;
gap: 20rpx;
view{
display: flex;
gap: 10rpx;
.title{
width: 148rpx;
text-align: right;
}
}
}
}
.bottom{
padding: 0 44rpx;
}
}
.section_2{
border-radius: 60rpx;
padding: 28rpx 36rpx;
background: #29D3B4 100%;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
.left_box{
display: flex;
view{
display: flex;
flex-direction: column;
text{}
}
view:nth-child(1){
padding-right: 10rpx;
border-right: 2px solid #fff;
}
view:nth-child(2){
padding-left: 10rpx;
}
}
.rigth_box{
view{
width: 106rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: 25rpx;
background: #32baa1;
font-size: 24rpx;
}
}
}
font-size: 24rpx;
color: #FFFFFF;
.section_3{
margin-top: 36rpx;
color: #fff;
font-size: 24rpx;
.section_1{
border-radius: 22rpx;
padding: 20rpx 40rpx;
background: #333333 100%;
width: 100%;
.title_box{
display: flex;
flex-direction: column;
.top_box{
display: flex;
justify-content: space-between;
align-items: center;
text{
font-size: 30rpx;
}
}
.line{
width: 90rpx;
height: 2px;
background: #29D3B4;
}
padding: 10rpx;
padding-left: 30rpx;
font-size: 32rpx;
}
.ul{
margin-top: 30rpx;
padding: 40rpx 10rpx;
padding-bottom: 350rpx;
margin-top: 10rpx;
border-top: 1px solid #555555;
display: flex;
flex-direction: column;
gap: 20rpx;
gap: 40rpx;
position: relative;
.li{
position: relative;
border-radius: 22rpx;
background: #434544 100%;
padding: 14rpx 0;
display: flex;
align-items: center;
.left_box{
margin-left: 28rpx;
width: 146rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
.date_box{
display: flex;
font-size: 48rpx;
text:nth-child(1){
color: #29D3B4;
}
}
.ratio{
color: #AAAAAA;
}
}
.center_box{
margin-left: 52rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
gap: 72rpx;
.title{
width: 120rpx;
text-align: right;
}
.right_box{
.tag{
position:absolute;
top: 0rpx;
right: 0rpx;
padding: 10rpx;
width: 102rpx;
text-align: center;
font-size: 24rpx;
border-bottom-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.content{}
}
.state_box{
position: absolute;
bottom: 50rpx;
right: 10rpx;
view{
width: 154rpx;
height: 154rpx;
border-radius: 50%;
background-color: rgba(41,211,180,0.17);
color: rgba(41,211,180,1);
font-size: 26rpx;
text-align: center;
line-height: 150rpx;
transform: rotate(-35deg); /* 旋转 */
}
}
}
}
}

17
pages/coach/course/list.vue
View File

@ -73,7 +73,7 @@
<view class="section_3">
<view class="ul">
<view class="li">
<view class="li" @click="openViewCourseInfo({id:1})">
<view class="top_box">
<view class="center_box">
<view>班级：少年班</view>
@ -113,7 +113,7 @@
</view>
</view>
</view>
<view class="li">
<view class="li" @click="openViewCourseInfo({id:2})">
<view class="top_box">
<view class="center_box">
<view>班级：少年班</view>
@ -243,17 +243,10 @@ export default {
this.show_classroom = true;
},
//打开-发布作业页
openObjAddView(){
uni.navigateTo({
url: '/pages/coach/job/add'
})
},
//打开作业列表页
openObjListView(){
//打开课时详情页
openViewCourseInfo(item){
uni.navigateTo({
url: '/pages/coach/job/list'
url: '/pages/coach/course/info'
})
},
}

Write Preview
Loading…
Cancel
Save