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

学员-场馆

master
李双庆 1 year ago
parent
8902d2e65b
commit
f54e45ffe7
4 changed files with 768 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      pages.json
  2. 419
      pages/student/timetable/index.vue
  3. 228
      pages/student/timetable/info.vue
  4. 116
      pages/student/timetable/list.vue

20
pages.json
View File

@ -14,7 +14,7 @@
"style": { "style": {
"navigationBarTitleText": "课表", "navigationBarTitleText": "课表",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
@ -63,6 +63,24 @@
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, },
{
"path" : "pages/student/timetable/info",
"style": {
"navigationBarTitleText": "课表详情",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "black"
}
},
{
"path" : "pages/student/timetable/list",
"style": {
"navigationBarTitleText": "场馆",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#292929",
"navigationBarTextStyle": "black"
}
},

419
pages/student/timetable/index.vue
View File

@ -1,22 +1,413 @@
<!--课程-列表-->
<template> <template>
<view> <view class="main_box">
<!--自定义导航栏-->
</view> <view class="navbar_section">
<view class="title">课表</view>
</view>
<view class="main_section">
<view class="section_1">
<view class="ul">
<view class="li">
<text>周日</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周一</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周日</text>
<text class="today">今</text>
<text class=""></text>
</view>
<view class="li">
<text>周一</text>
<text>14</text>
<text class="select_plan"></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
</view>
</view>
<view class="section_2">
<view class="item_box">
XXX体育场馆
</view>
<view class="item_box" style="text-align: right;color: #F59A23;" @click="more">
更多
</view>
</view>
<view class="section_3">
<view class="ul">
<view class="li" @click="openViewCourseInfo({id:1})">
<view class="top_box">
<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>
</view>
<view class="bottom_box">
<view class="hint">
已签到学生 (15/34)
</view>
<view class="list_box">
<view class="list">
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
</view>
<view class="btn">
详情
</view>
</view>
</view>
</view>
<view class="li" @click="openViewCourseInfo({id:2})">
<view class="top_box">
<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>
</view>
<view class="bottom_box">
<view class="hint">
已签到学生 (15/34)
</view>
<view class="list_box">
<view class="list">
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
</view>
<view class="btn">
详情
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航-->
<AQTabber/>
</view>
</template> </template>
<script> <script>
export default { import user from '@/api/user.js';
data() { import AQTabber from "@/components/AQ/AQTabber.vue"
return {
} export default {
}, components: {
methods: { AQTabber,
},
} 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){
uni.navigateTo({
url: '/pages/student/timetable/info'
})
},
//体育馆列表
more(){
uni.navigateTo({
url: '/pages/student/timetable/list'
})
} }
}
}
</script> </script>
<style> <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-top: 40rpx;
padding-bottom: 150rpx;
font-size: 24rpx;
color: #FFFFFF;
.section_1{
background: #333333 100%;
width: 100%;
padding: 30rpx 28rpx;
.ul{
display: flex;
justify-content: space-between;
align-items: center;
.li{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10rpx;
text{
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
}
text:nth-child(2){
width: 44rpx;
height: 44rpx;
}
text:nth-child(3){
width: 8rpx;
height: 8rpx;
}
.today{
border-radius: 50%;
background: #29D3B4;
text-align: center;
line-height: 42rpx;
}
.select_plan{
background: #F59A23;
border-radius: 50%;
}
}
}
}
.section_2{
margin-top: 30rpx;
padding: 0 20rpx ;
color: #fff;
display: flex;
align-items: center;
gap: 20rpx;
.item_box {
width: 45%;
.fui-filter__item {
display: flex;
}
}
}
.section_3{
margin-top: 36rpx;
color: #fff;
font-size: 24rpx;
.ul{
padding: 0 26rpx;
display: flex;
flex-direction: column;
gap: 30rpx;
.li{
position: relative;
border-radius: 22rpx;
background: #434544 100%;
padding: 14rpx 0;
display: flex;
flex-direction: column;
.top_box{
padding: 20rpx 30rpx;
.center_box{
display: flex;
flex-direction: column;
gap: 10rpx;
view{}
}
.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;
}
}
}
.bottom_box{
border-top: 1px dashed #F2F2F2;
padding: 26rpx 16rpx 0 26rpx;
.hint{
color:#D7D7D7;
}
.list_box{
margin-top: 22rpx;
display: flex;
justify-content: space-between;
align-items: center;
.list{
display: flex;
align-items: center;
gap: 14rpx;
.itme{
image{
width: 48rpx;
height: 48rpx;
border-radius: 50%;
}
}
}
.btn{
border: 1px solid #FAD04D;
border-radius: 10rpx;
background: #434544;
color: #FAD04D;
width: 110rpx;
height: 60rpx;
line-height: 55rpx;
text-align: center;
font-size: 24rpx;
}
}
}
}
}
}
}
</style> </style>

228
pages/student/timetable/info.vue
View File

@ -0,0 +1,228 @@
<!--课程-详情-->
<template>
<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 class="li">
<view class="title">班级</view>
<view class="content">班级名称</view>
</view>
<view class="li">
<view class="title">上课时间</view>
<view class="content">2020.03.25 15:30-17:00</view>
</view>
<view class="li">
<view class="title">上课地址</view>
<view class="content">xxxx体育馆302室</view>
</view>
<view class="li">
<view class="title">课程名称</view>
<view class="content">青少年篮球课</view>
</view>
<view class="li">
<view class="title">教练</view>
<view class="content">包子皮</view>
</view>
<view class="li">
<view class="title">教练号码</view>
<view class="content">18888888888</view>
</view>
<view class="li">
<view class="title">扣除课时</view>
<view class="content">2个课时</view>
</view>
<view class="state_box">
<view>已上</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import user from '@/api/user.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
AQTabber,
},
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){
uni.navigateTo({
url: '/pages/coach/course/info'
})
},
}
}
</script>
<style lang="less" >
.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: 30rpx 24rpx;
padding-top: 40rpx;
padding-bottom: 150rpx;
font-size: 24rpx;
color: #FFFFFF;
.section_1{
border-radius: 22rpx;
padding: 20rpx 40rpx;
background: #333333 100%;
width: 100%;
.title_box{
padding: 10rpx;
padding-left: 30rpx;
font-size: 32rpx;
}
.ul{
padding: 40rpx 10rpx;
padding-bottom: 350rpx;
margin-top: 10rpx;
border-top: 1px solid #555555;
display: flex;
flex-direction: column;
gap: 40rpx;
position: relative;
.li{
display: flex;
gap: 72rpx;
.title{
width: 120rpx;
text-align: right;
}
.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); /* 旋转 */
}
}
}
}
}
</style>

116
pages/student/timetable/list.vue
View File

@ -0,0 +1,116 @@
<!--课程-详情-->
<template>
<view class="main_box">
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
<view class="current-venue" v-if="true">
当前场馆
</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
<view class="main_section">
<view class="title">XXX体育馆</view>
<view class="con">南山区科苑路15号科兴科学园</view>
<view class="con">距您1km</view>
</view>
</view>
</view>
</template>
<script>
import user from '@/api/user.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
AQTabber,
},
data() {
return {
}
},
onLoad() {},
methods: {
}
}
</script>
<style lang="less" scoped>
.main_box {
width: 100%;
height: 100vh;
overflow: auto;
background: #292929;
}
.main_section{
width: 92%;
border-radius: 15rpx;
background-color: #404045;
margin: 20rpx auto;
padding: 40rpx 0 40rpx 80rpx;
color: #fff;
position: relative;
}
.title{
font-size: 32rpx;
}
.con{
color: #D7D7D7;
font-size: 26rpx;
margin-top: 20rpx;
}
.current-venue{
border-radius: 8rpx;
border: 2rpx #F59A23 solid;
width: 120rpx;
text-align: center;
color: #F59A23;
position: absolute;
top: 10%;
right: 3%;
}
</style>
Write Preview
Loading…
Cancel
Save