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

feat(coach): 添加班级详情页面并优化班级列表 

- 新增班级详情页面，包含班级信息、地点、课程、人数和时间等详情
- 在班级列表页面添加打开班级详情的功能
- 优化班级列表页面样式，调整列表项布局
master
liutong 1 year ago
parent
0d08bd15e0
commit
339ffc7303
2 changed files with 219 additions and 156 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. 206
      pages/coach/class/info.vue
  2. 169
      pages/coach/class/list.vue

206
pages/coach/class/info.vue
View File

@ -0,0 +1,206 @@
<!--班级-详情-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="title">班级详情</view>
</view>
<view class="main_section">
<view class="section_1">
<view class="left">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
<view class="name">包皮子</view>
</view>
<view class="right">
<view class="item">
班级：少年班
</view>
<view class="item">
地点：XXXX体育馆 302室
</view>
<view class="item">
课程：篮球少儿课
</view>
<view class="item">
人数：30人
</view>
<view class="item">
时间：2020.05:25 15:30 - 17:30
</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_1 {
border-radius: 10rpx;
background-color: #525252;
::v-deep .fui-input__wrap{
border-radius: 10rpx !important;
background-color: #525252 !important;
}
::v-deep .fui-input__background{
background-color: #525252 !important;
}
.input_item {
height: 60rpx;
::v-deep .uni-input-wrapper{
.uni-input-placeholder {
font-size: 28rpx !important;
}
}
}
::v-deep .uni-input-input {
color: #fff;
}
}
.section_2{
margin-top: 34rpx;
.ul{
display: flex;
flex-direction: column;
gap: 24rpx;
.li{
background: #404045;
padding: 50rpx 36rpx 46rpx;
border-radius: 16rpx;
display: flex;
gap: 32rpx;
.left{
.pic{
border-radius: 50%;
width: 92rpx;
height: 92rpx;
}
}
.right{
display: flex;
flex-direction: column;
gap: 28rpx;
.box_1{
display: flex;
align-items: center;
gap: 36rpx;
.name{
font-size: 28rpx;
}
.btn_box{
view{
border: 1px solid #FAD04D;
border-radius: 10rpx;
width: 182rpx;
height: 48rpx;
line-height: 42rpx;
text-align: center;
font-size: 26rpx;
color: #FAD04D;
}
}
}
.box_2{
display: flex;
align-items: center;
gap: 44rpx;
.user_list{
display: flex;
align-items: center;
gap: 14rpx;
image{
border-radius: 50%;
width: 48rpx;
height: 48rpx;
}
}
.num{}
}
}
}
}
}
}
</style>

169
pages/coach/class/list.vue
View File

@ -13,7 +13,7 @@
<view class="section_2">
<view class="ul">
<view class="li">
<view class="li" @click="openViewClassInfo({id:1})">
<view class="left">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
@ -40,7 +40,7 @@
</view>
</view>
</view>
<view class="li">
<view class="li" @click="openViewClassInfo({id:2})">
<view class="left">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
@ -67,7 +67,7 @@
</view>
</view>
</view>
<view class="li">
<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>
@ -111,79 +111,15 @@ export default {
data() {
return {
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() {
},
methods: {
//选中课程下拉菜单点击事件
clickCourse(e){
console.log(e)
this.course_name = e.text
this.show_course = true
},
//显示下拉菜单
filterTapCourse() {
//显示下拉框
this.$refs.ref_course.show()
this.show_course = true;
},
//选中课室
clickClassroom(e){
console.log(e)
this.classroom_name = e.text
this.show_classroom = true
},
//显示课室下拉菜单
filterTapClassroom() {
//显示下拉框
this.$refs.ref_classroom.show()
this.show_classroom = true;
},
//打开课时详情页
openViewCourseInfo(item){
//打开班级详情页
openViewClassInfo(item){
uni.navigateTo({
url: '/pages/coach/course/info'
url: '/pages/coach/class/info'
})
},
}
@ -219,97 +155,18 @@ export default {
color: #FFFFFF;
.section_1 {
border-radius: 10rpx;
background-color: #525252;
::v-deep .fui-input__wrap{
border-radius: 10rpx !important;
background-color: #525252 !important;
}
::v-deep .fui-input__background{
background-color: #525252 !important;
}
.input_item {
height: 60rpx;
::v-deep .uni-input-wrapper{
.uni-input-placeholder {
font-size: 28rpx !important;
}
}
}
::v-deep .uni-input-input {
color: #fff;
}
}
.section_2{
margin-top: 34rpx;
.ul{
.left{
display: flex;
flex-direction: column;
gap: 24rpx;
.li{
background: #404045;
padding: 50rpx 36rpx 46rpx;
border-radius: 16rpx;
display: flex;
gap: 32rpx;
.left{
.pic{
border-radius: 50%;
width: 92rpx;
height: 92rpx;
}
}
.right{
display: flex;
flex-direction: column;
gap: 28rpx;
.box_1{
display: flex;
align-items: center;
gap: 36rpx;
.name{
font-size: 28rpx;
}
.btn_box{
view{
border: 1px solid #FAD04D;
border-radius: 10rpx;
width: 182rpx;
height: 48rpx;
line-height: 42rpx;
text-align: center;
font-size: 26rpx;
color: #FAD04D;
}
}
}
.box_2{
display: flex;
align-items: center;
gap: 44rpx;
.user_list{
display: flex;
align-items: center;
gap: 14rpx;
image{
border-radius: 50%;
width: 48rpx;
height: 48rpx;
}
}
.num{}
}
}
justify-content: center;
gap: 12rpx;
.pic{
width: 100rpx;
}
.name{}
}
.right{}
}
}

Write Preview
Loading…
Cancel
Save