30 changed files with 3994 additions and 14 deletions
-
76src/pages.json
-
147src/subpackage/course/components/cancel_class_modal/cancel_class_modal.vue
-
175src/subpackage/course/components/class_reset_modal/class_reset_modal.vue
-
112src/subpackage/course/components/manage/bclass_reserve_item/bclass_reserve_item.vue
-
93src/subpackage/course/components/manage/class_manage_item/class_manage_item.vue
-
108src/subpackage/course/components/manage/private_reserve_item/private_reserve_item.vue
-
72src/subpackage/course/components/manage/student_course_item/student_course_item.vue
-
113src/subpackage/course/components/sclass_record_section/sclass_record_section.vue
-
20src/subpackage/course/components/store_name/store_name.vue
-
117src/subpackage/course/components/tab_bar/tab_bar.vue
-
193src/subpackage/course/components/task_section/task_section.vue
-
427src/subpackage/course/pages/arrange_class/arrange_class.vue
-
222src/subpackage/course/pages/class_add_student/class_add_student.vue
-
251src/subpackage/course/pages/class_student_detail/class_student_detail.vue
-
268src/subpackage/course/pages/class_time_change/class_time_change.vue
-
11src/subpackage/course/pages/index/index.vue
-
242src/subpackage/course/pages/manage_detail/bclass_reserve_detail/bclass_reserve_detail.vue
-
433src/subpackage/course/pages/manage_detail/class_manage_detail/class_manage_detail.vue
-
159src/subpackage/course/pages/manage_detail/private_reserve_detail/private_reserve_detail.vue
-
302src/subpackage/course/pages/manage_detail/student_course_detail/student_course_detail.vue
-
188src/subpackage/course/pages/manage_list/manage_list.vue
-
132src/subpackage/course/pages/task_detail/task_detail.vue
-
147src/subpackage/course/pages/task_finish_list/task_finish_list.vue
-
BINsrc/subpackage/course/static/images/icon/arrow_black.png
-
BINsrc/subpackage/course/static/images/icon/arrow_green.png
-
BINsrc/subpackage/course/static/images/icon/calendar.png
-
BINsrc/subpackage/course/static/images/icon/close_gray.png
-
BINsrc/subpackage/course/static/images/icon/phone.png
-
BINsrc/subpackage/course/static/images/icon/triangle.png
-
BINsrc/subpackage/course/static/images/no_order.png
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<!--弹框 取消上课 --> |
|||
<view class="cancel-class-modal" @click.stop=""> |
|||
<view class="ox-dark-mask fixed-mask " @touchmove.stop.prevent="moveHandle"> |
|||
<view class="mask-modal" @click.stop=""> |
|||
<view class="mm-close"> |
|||
<image src="/subpackage/course/static/images/icon/close_gray.png" @click="closeChange"></image> |
|||
</view> |
|||
<view class="mm-tit">取消上课</view> |
|||
<view class="mm-cause"> |
|||
<textarea class="mc-textarea" @blur="bindTextAreaBlur" placeholder="请输入取消上课的原因（选填）" maxlength="25" v-model="causeTxt"></textarea> |
|||
<view class="mc-num">{{causeTxt.length || 0}}/25</view> |
|||
</view> |
|||
<view class="mm-btn"> |
|||
<view class="mb-btn1" hover-class="hover-active" @click="confirmChange">确认</view> |
|||
<view class="mb-btn2" hover-class="hover-active" @click="closeChange">取消</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
causeTxt: "", |
|||
} |
|||
}, |
|||
methods: { |
|||
moveHandle(){}, |
|||
// 文本域 |
|||
bindTextAreaBlur: function(e) { |
|||
// console.log( "文本域内容: " + e.detail.value) |
|||
this.causeTxt = e.detail.value |
|||
|
|||
this.$emit('bindTextAreaBlur', this.causeTxt) |
|||
}, |
|||
|
|||
closeChange(){ |
|||
this.$emit('reasonClose') |
|||
}, |
|||
|
|||
confirmChange(){ |
|||
this.$emit('reasonConfirm', this.causeTxt) |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.cancel-class-modal{ |
|||
|
|||
} |
|||
// 黑半透遮罩 |
|||
.fixed-mask{ |
|||
// position: fixed; |
|||
// left: 0; |
|||
// top: 0; |
|||
// right: 0; |
|||
// bottom: 0; |
|||
// background-color: rgba(0, 0, 0, .5); |
|||
z-index: 999; |
|||
} |
|||
.mask-modal{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 46%; |
|||
transform: translate(-50%, -50%); |
|||
width: 620rpx; |
|||
padding: 30rpx 0 82rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #FFFFFF; |
|||
.mm-close{ |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
margin-right: 30rpx; |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
} |
|||
} |
|||
.mm-tit{ |
|||
margin: 16rpx auto 38rpx; |
|||
color: #333333; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
} |
|||
.mm-cause{ |
|||
margin: auto; |
|||
position: relative; |
|||
width: 538rpx; |
|||
height: 150rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #D8D8D8; |
|||
.mc-textarea{ |
|||
margin: 24rpx 20rpx; |
|||
width: 498rpx; |
|||
height: 102rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.mc-num{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
bottom: 20rpx; |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.mm-btn{ |
|||
margin-top: 80rpx; |
|||
@include centerFlex(center); |
|||
>view{ |
|||
margin: 0 10rpx; |
|||
padding: 22rpx 0; |
|||
width: 240rpx; |
|||
border-radius: 10rpx; |
|||
border: 2rpx solid #009874; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
.mb-btn1{ |
|||
color: #FFFFFF; |
|||
background-color: #009874; |
|||
} |
|||
.mb-btn2{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<!-- 转班弹框 --> |
|||
<view class="class-reset-modal" @click.stop=""> |
|||
<view class="ox-dark-mask fixed-mask" @touchmove.stop.prevent="moveHandle" v-if="isShowClass" @click="closeReset"> |
|||
<view class="mask-modal" @click.stop=""> |
|||
<view class="mm-close"> |
|||
<image src="/subpackage/course/static/images/icon/close_gray.png" @click="closeReset"></image> |
|||
</view> |
|||
<view class="mm-tit">选择班级</view> |
|||
<view class="mm-line">课程名称：{{info.course_name || '-'}}</view> |
|||
<scroll-view class="mm-scroll" scroll-y> |
|||
<view class="ms-list" v-for="(e,i) in classList" :key="i"> |
|||
<view class="ml-item" @click="selectClass(e)"> |
|||
<image :class="[resetInfo.new_id==e.id?'mi-img':'mi-icon']" :src="resetInfo.new_id==e.id?'/static/images/icon/selected_987.png':''"></image> |
|||
<view class="mi-info"> |
|||
<view>班级名称：{{e.name || '-'}}</view> |
|||
<view>班级人数：{{e.nums || 0}}</view> |
|||
<view>上课教练：{{e.coach || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="mm-btn" hover-class="hover-active" @click="confirmReset">确定</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
info: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
canlist: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
isShowClass: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
computed: { |
|||
// userInfo(){ |
|||
// return uni.getStorageSync('loginInfo') || {}; |
|||
// }, |
|||
|
|||
classList(){ |
|||
let { info, canlist } = this |
|||
let _list = [] |
|||
if(canlist.length > 0)_list = canlist.filter(e=>e.id != info.sclass_id); |
|||
return _list || []; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
resetInfo:{ |
|||
new_id: "", //新班级ID |
|||
// user_id: "", |
|||
// user_order_no: "", |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
moveHandle(){}, |
|||
|
|||
selectClass(item){ |
|||
this.resetInfo.new_id = item.id |
|||
}, |
|||
|
|||
closeReset(){ |
|||
this.$emit('closeReset') |
|||
}, |
|||
|
|||
confirmReset(){ |
|||
let { resetInfo, classList } = this |
|||
if(classList.length == 0)return util.showNone('无可选班级！'); |
|||
if(resetInfo.new_id == '')return util.showNone('请选择！'); |
|||
this.$emit('confirmReset',resetInfo) |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.class-reset-modal{ |
|||
.fixed-mask{ |
|||
z-index: 999; |
|||
} |
|||
.mask-modal{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 45%; |
|||
transform: translate(-50%, -50%); |
|||
width: 558rpx; |
|||
padding: 20rpx 0; |
|||
border-radius: 10rpx; |
|||
background-color: #FFFFFF; |
|||
.mm-close{ |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
margin-right: 22rpx; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.mm-tit{ |
|||
margin: 6rpx auto 40rpx; |
|||
color: #1A1A1A; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
.mm-line{ |
|||
flex-grow: 1; |
|||
margin: 0 38rpx; |
|||
color: #1A1A1A; |
|||
font-size: 32rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 2rpx solid #E5E5E5; |
|||
} |
|||
.mm-scroll{ |
|||
margin-left: 42rpx; |
|||
height: 368rpx; |
|||
.ms-list{ |
|||
.ml-item{ |
|||
padding-top: 28rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 24rpx; |
|||
margin-top: 14rpx; |
|||
} |
|||
.mi-icon{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid #9C9C9F; |
|||
} |
|||
.mi-img{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.mi-info{ |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.mm-btn{ |
|||
margin: 60rpx auto; |
|||
padding: 18rpx 0; |
|||
width: 240rpx; |
|||
border-radius: 6rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<!-- 大班约课记录 --> |
|||
<view class="bclass-reserve-item" @click="toDetail"> |
|||
<view class="bri-line"> |
|||
<view class="bl-store">欧轩智能场馆(羽毛球馆永泰店)</view> |
|||
<view class="bl-status" :class="[false?'status-gray':false?'status-red':'']">待上课</view> |
|||
</view> |
|||
<view class="bri-view">已预约人数：<text>3人（上课区间：5-10）</text></view> |
|||
<view class="bri-view">上课时间：<text>2021.06.02（周五） 14:00-16:00</text></view> |
|||
<view class="bri-view">上课地点：<text>羽毛球（3号场）</text></view> |
|||
<view class="bri-view">上课教练：<text>周扎米</text></view> |
|||
<view class="bri-view">课程名称：<text>羽毛球培训课</text></view> |
|||
<block v-if="false"> |
|||
<view class="bri-view">取消时间：<text>2021.06.03 11:42:50</text></view> |
|||
<view class="bri-view">取消原因：<text>教练取消（大雨停课）</text></view> |
|||
</block> |
|||
<view class="bri-btn" v-if="true"> |
|||
<view class="bb-btn1" hover-class="hover-active" @click.stop="">取消上课</view> |
|||
<view class="bb-btn2" hover-class="hover-active" @click.stop="">确认上课</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
toDetail(){ |
|||
let { orderInfo } = this |
|||
util.routeTo(`/subpackage/course/pages/manage_detail/bclass_reserve_detail/bclass_reserve_detail`,'nT'); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.bclass-reserve-item{ |
|||
padding: 26rpx 44rpx 34rpx; |
|||
background-color: #FFFFFF; |
|||
.bri-line{ |
|||
margin-bottom: 20rpx; |
|||
padding: 0 0 32rpx 2rpx; |
|||
border-bottom: 2rpx solid #E5E5E5; |
|||
@include centerFlex(space-between); |
|||
.bl-store{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
@include textHide(1); |
|||
} |
|||
.bl-status{ |
|||
flex-shrink: 0; |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.status-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.status-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.bri-view{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
.bri-btn{ |
|||
margin-top: 18rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
margin-left: 20rpx; |
|||
padding: 20rpx 0; |
|||
width: 192rpx; |
|||
border-radius: 6rpx; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
.bb-btn1{ |
|||
color: #EA5061; |
|||
border: 2rpx solid #EA5061; |
|||
background-color: #FFFFFF; |
|||
} |
|||
.bb-btn2{ |
|||
color: #FFFFFF; |
|||
border: 2rpx solid #009874; |
|||
background-color: #009874; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<!-- 班级管理 --> |
|||
<view class="class-manage-item" @click="toDetail"> |
|||
<view class="cmi-line"> |
|||
<view class="cl-store">欧轩智能场馆(羽毛球馆永泰店)</view> |
|||
<view class="cl-status" :class="[false?'status-gray':false?'status-red':'']">进行中</view> |
|||
</view> |
|||
|
|||
<block v-if="true"> |
|||
<view class="cmi-view">课程名称：<text>羽毛球培训课</text></view> |
|||
<view class="cmi-view">班级id：<text>2-3</text></view> |
|||
<view class="cmi-view">成班人数区间：<text>2-6人</text></view> |
|||
<view class="cmi-view">已报名人数：<text>2人</text></view> |
|||
<view class="cmi-view">报名截止时间：<text>2020.12.27 22:55:56</text></view> |
|||
</block> |
|||
|
|||
<block v-if="false"> |
|||
<view class="cmi-view">班级名称：<text>冲锋班</text></view> |
|||
<view class="cmi-view">班级人数：<text>20</text></view> |
|||
<view class="cmi-view">上课教练：<text>何其多</text></view> |
|||
<view class="cmi-view">上课地点：<text>欧轩智能场馆3号馆</text></view> |
|||
<view class="cmi-view">课程日期：<text>2021.08.08-2021.10.10</text></view> |
|||
<view class="cmi-view">课程名称：<text>羽毛球培训课</text></view> |
|||
</block> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
toDetail(){ |
|||
let { orderInfo } = this |
|||
util.routeTo(`/subpackage/course/pages/manage_detail/class_manage_detail/class_manage_detail`,'nT'); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.class-manage-item{ |
|||
padding: 26rpx 44rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
.cmi-line{ |
|||
margin-bottom: 20rpx; |
|||
padding: 0 0 32rpx 2rpx; |
|||
border-bottom: 2rpx solid #E5E5E5; |
|||
@include centerFlex(space-between); |
|||
.cl-store{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
@include textHide(1); |
|||
} |
|||
.cl-status{ |
|||
flex-shrink: 0; |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.status-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.status-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.cmi-view{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<!-- 私教约课记录 --> |
|||
<view class="private-reserve-item" @click="toDetail"> |
|||
<view class="pri-line"> |
|||
<view class="pl-store">欧轩智能场馆(羽毛球馆永泰店)</view> |
|||
<view class="pl-status" :class="[false?'status-gray':false?'status-red':'']">待上课</view> |
|||
</view> |
|||
<view class="pri-view">学员信息：<text>张安（男 ） 18316536894</text></view> |
|||
<view class="pri-view">上课时间：<text>2021.06.02（周五） 14:00-16:00</text></view> |
|||
<view class="pri-view">上课地点：<text>羽毛球（3号场）</text></view> |
|||
<view class="pri-view">上课教练：<text>张夏欧</text></view> |
|||
<view class="pri-view">课程名称：<text>羽毛球培训课</text></view> |
|||
<view class="pri-btn" v-if="true"> |
|||
<view hover-class="hover-active" @click.stop="isCancelClass=true">取消上课</view> |
|||
</view> |
|||
|
|||
<cancel-class-modal |
|||
v-if="isCancelClass" |
|||
@reasonClose="isCancelClass=false" |
|||
></cancel-class-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import cancel_class_modal from '../../cancel_class_modal/cancel_class_modal.vue'; |
|||
export default { |
|||
components: { |
|||
'cancel-class-modal': cancel_class_modal, |
|||
}, |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
isCancelClass: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
toDetail(){ |
|||
let { orderInfo } = this |
|||
util.routeTo(`/subpackage/course/pages/manage_detail/private_reserve_detail/private_reserve_detail`,'nT'); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.private-reserve-item{ |
|||
padding: 26rpx 44rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
.pri-line{ |
|||
margin-bottom: 20rpx; |
|||
padding: 0 0 32rpx 2rpx; |
|||
border-bottom: 2rpx solid #E5E5E5; |
|||
@include centerFlex(space-between); |
|||
.pl-store{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
@include textHide(1); |
|||
} |
|||
.pl-status{ |
|||
flex-shrink: 0; |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.status-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.status-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.pri-view{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
.pri-btn{ |
|||
margin-top: 6rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
padding: 20rpx 0; |
|||
width: 192rpx; |
|||
border-radius: 6rpx; |
|||
border: 2rpx solid #EA5061; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<!-- 学员课程 --> |
|||
<view class="student-course-item" @click="toDetail"> |
|||
<view class="sci-status" :class="[false?'status-gray':false?'status-red':'']">进行中</view> |
|||
<view class="sci-view">学员信息：<text>张安（男 ） 18316536894</text></view> |
|||
<view class="sci-view">剩余课时：<text>10课时 （2/12)</text></view> |
|||
<view class="sci-view">课程名称：<text>羽毛球培训课</text></view> |
|||
<view class="sci-view">有效期至：<text>2020.12.27</text></view> |
|||
<view class="sci-view">课程类型：<text>私教课</text></view> |
|||
<view class="sci-view">上课教练：<text>一级教练</text></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
toDetail(){ |
|||
// this.$emit('closeChange') |
|||
let { orderInfo } = this |
|||
// ?query=${util.jsonStr(_query)} |
|||
util.routeTo(`/subpackage/course/pages/manage_detail/student_course_detail/student_course_detail`,'nT'); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.student-course-item{ |
|||
position: relative; |
|||
padding: 30rpx 44rpx; |
|||
background-color: #FFFFFF; |
|||
.sci-status{ |
|||
position: absolute; |
|||
top: 30rpx; |
|||
right: 44rpx; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
color: #009874; |
|||
} |
|||
.status-gray{ |
|||
color: #9A9A9D; |
|||
} |
|||
.status-red{ |
|||
color: #EA5061; |
|||
} |
|||
.sci-view{ |
|||
// flex-shrink: 0; |
|||
margin-right: 84rpx; |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="sclass-record-section"> |
|||
<view class="cds-tab"> |
|||
<view>课时编号</view> |
|||
<view>上课时间</view> |
|||
<view>考勤状态</view> |
|||
</view> |
|||
<view class="cds-list" v-for="(e,i) in 6" :key="i"> |
|||
<view class="cl-item"> |
|||
<view>第{{ i+1|| '-'}}节</view> |
|||
<!-- <view>{{formatDate({date: e.period_date, partition: '.'}) ||'-'}}{{`${' '+e.period_start_time || ''}-${e.period_end_time || ''}` ||''}}</view> --> |
|||
<view>2021.06.01 10:00-12:00</view> |
|||
<view |
|||
:class="[e.user_status==0?'ci-txt-green': |
|||
e.user_status==4?'ci-txt-red':'']" |
|||
>{{ '正常'||zh_status(e.user_status)}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
orderInfo: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
}, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
formatDate: util.formatDate, |
|||
zh_status(status){ |
|||
let arr = ["待上课","已上课","申请请假中","已请假","缺勤"] |
|||
return arr[status] || ''; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.sclass-record-section{ |
|||
.cds-tab{ |
|||
margin: 0 24rpx; |
|||
border: 2rpx solid #E8E8E8; |
|||
background-color: #F6F8F8; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
height: 110rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
@include centerFlex(center); |
|||
&:first-child { |
|||
width: 166rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
width: 338rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(3){ |
|||
width: 194rpx; |
|||
// border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.cds-list{ |
|||
.cl-item{ |
|||
margin: 0 24rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
border-bottom: 2rpx solid #E8E8E8; |
|||
background-color: #FFFFFF; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
height: 110rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
@include centerFlex(center); |
|||
&:first-child { |
|||
width: 166rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
width: 338rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(3){ |
|||
width: 194rpx; |
|||
} |
|||
} |
|||
.ci-txt-green{ |
|||
color: #009874; |
|||
} |
|||
.ci-txt-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<view class="tab-list"> |
|||
<block v-for="(e,i) in tabList" :key="i"> |
|||
<view :class="['tab_no', curTabID == e.id ? 'tab_yes':'']" @click="tabChange(e)"> |
|||
<view class="tab-txt">{{e.name}} |
|||
<!-- <view class="tab-hint" v-if="e.hint"><text>{{hintValue}}</text></view> --> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const tabArr = [{name:'全部订单',id:0},{name:'待上课',id:1},{name:'已上课',id:2},{name:'已取消',id:3}]; |
|||
export default { |
|||
name: 'tabBar', |
|||
props: { |
|||
tabList:{ |
|||
type: Array, |
|||
default: ()=>(tabArr), |
|||
}, |
|||
curTabID:{ |
|||
type: Number, |
|||
default:0 |
|||
}, |
|||
hintValue:{ |
|||
type: Number, |
|||
default:0 |
|||
}, |
|||
isBottomBorder: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
// curTabID: 0 |
|||
} |
|||
}, |
|||
methods:{ |
|||
tabChange(item){ |
|||
// this.curTabID = ID; |
|||
this.$emit('change', item) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.tab-list{ |
|||
width: 750rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
.tab_no{ |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
flex-grow: 1; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
|
|||
.tab-txt{ |
|||
position: relative; |
|||
display: inline-block; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
color: #9A9A9D; |
|||
&::after{ |
|||
content: ''; |
|||
transition: all .2s; |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 2rpx; |
|||
transform: translateX(-50%) translateY(50%); |
|||
display: block; |
|||
// width: 70%; |
|||
width: 40rpx; |
|||
height: 10rpx; |
|||
border-radius: 5rpx; |
|||
background-color: #009874; |
|||
opacity: 0; |
|||
} |
|||
|
|||
// .tab-hint{ |
|||
// position: absolute; |
|||
// top: 20rpx; |
|||
// right: -36rpx; |
|||
// width: 36rpx; |
|||
// height: 36rpx; |
|||
// border-radius: 50%; |
|||
// background-color: #EA5061; |
|||
|
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-around; |
|||
// >text{ |
|||
// color: #FFFFFF; |
|||
// font-size: 24rpx; |
|||
// font-weight: 400; |
|||
// } |
|||
// } |
|||
} |
|||
&.tab_yes{ |
|||
.tab-txt{ |
|||
color: #009874; |
|||
&::after{ |
|||
opacity: 1; |
|||
transform: translateX(-50%) translateY(0); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<view class="task-section"> |
|||
<view class="ts-list" v-for="(e,i) in taskList" :key="i"> |
|||
<view class="tl-item"> |
|||
<view class="ti-line"> |
|||
<!-- {{formatDate({date: e.created_at}) || '-'}} --> |
|||
<view>2020-09-08</view> |
|||
<view v-if="taskType==''" :class="[true?'status-red':'status-gray']">未完成</view> |
|||
<view v-if="taskType=='finish'" class="status-gray">完成情况：0/10</view> |
|||
</view> |
|||
|
|||
<view class="ti-desc" :class="e.expande?'desc-omit':''" :id="'noname'+i"> |
|||
{{e.work_content || ''}} |
|||
<image class="td-img" @click="expandeChange(i)" v-if="e.isShowExpande" src="/subpackage/course/static/images/icon/arrow_green.png"></image> |
|||
</view> |
|||
<view class="ti-end"> |
|||
<view hover-class="hover-active" @click="toTaskDetail(e)">查看</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
export default { |
|||
props:{ |
|||
// taskInfo: { |
|||
// type: Object, |
|||
// default: ()=>({}) |
|||
// }, |
|||
taskInfo:{ |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
} |
|||
}, |
|||
taskType:{ |
|||
type: String, |
|||
default: '' //finish |
|||
}, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
taskList: [], |
|||
} |
|||
}, |
|||
created() { |
|||
let _list = this.taskInfo || [] |
|||
if(_list.length > 0){ |
|||
_list.forEach((value,index)=>{ |
|||
value['expande'] = false |
|||
value['isShowExpande'] = false |
|||
}) |
|||
this.$nextTick(_=>{ |
|||
this.taskList = _list |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
formatDate: util.formatDate, |
|||
expandeChange(index){ |
|||
this.taskList[index].isShowExpande = false |
|||
this.taskList[index].expande = false |
|||
}, |
|||
async initDesc(){ |
|||
let that = this |
|||
let { taskList } = this |
|||
|
|||
for(var i in taskList){ |
|||
let res = await this.getQueryResult(i); |
|||
if(res==1){ |
|||
this.taskList[i].isShowExpande = true |
|||
this.taskList[i].expande = true |
|||
} |
|||
} |
|||
}, |
|||
getQueryResult(i){ |
|||
let that = this |
|||
return new Promise((rs,rj)=>{ |
|||
/**注意： |
|||
* 自定义组件需使用uni.createSelectorQuery().in(this)方法， |
|||
* 页面上直接使用uni.createSelectorQuery()方法即可。 |
|||
* **/ |
|||
let query = uni.createSelectorQuery().in(this); //wx.createSelectorQuery(); |
|||
//选择id |
|||
let _id = "noname"+i |
|||
query.select('#noname'+i).boundingClientRect() |
|||
query.exec(function (res) { |
|||
console.log("获取节点信息：",res) |
|||
//res就是 所有标签为mjltest的元素的信息的数组\ |
|||
if (res[0].height / 20 > 3) { |
|||
rs(1) |
|||
} else { |
|||
rs(2) |
|||
} |
|||
rj(false) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
toTaskDetail(item){ |
|||
// let _query = { |
|||
// work_number: item.work_number, |
|||
// work_coach_name: item.work_coach_name, |
|||
// created_at: item.created_at, |
|||
// } |
|||
|
|||
if(this.taskType == 'finish')return util.routeTo(`/subpackage/course/pages/task_finish_list/task_finish_list`,'nT');; |
|||
util.routeTo(`/subpackage/course/pages/task_detail/task_detail`,'nT'); |
|||
}, |
|||
|
|||
// toTaskDetail(item){ |
|||
|
|||
// // util.routeTo(`/subpackage/manage/pages/student/task_detail/task_detail?query=${util.jsonStr(item)}`,'nT') |
|||
// // util.routeTo(`/subpackage/manage/pages/student/task_detail/task_detail?id=${item.id}`,'nT') |
|||
// }, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.task-section{ |
|||
.ts-list{ |
|||
margin-bottom: 24rpx; |
|||
.tl-item{ |
|||
// flex-grow: 1; |
|||
padding: 30rpx 42rpx; |
|||
background-color: #FFFFFF; |
|||
.ti-line{ |
|||
margin-bottom: 20rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
&:first-child{ |
|||
color: #1A1A1A; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
line-height: 44rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
margin: 0 6rpx; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
.status-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.status-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.ti-desc{ |
|||
position: relative; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 20px; |
|||
.td-img{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
.desc-omit{ |
|||
@include textHide(3); |
|||
} |
|||
.ti-end{ |
|||
margin-top: 30rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
margin-left: 20rpx; |
|||
padding: 12rpx 0; |
|||
width: 156rpx; |
|||
border-radius: 6rpx; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
color: #009874; |
|||
border: 2rpx solid #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,427 @@ |
|||
<template> |
|||
<view class="arrange-class"> |
|||
<view class="ac-info"> |
|||
<view>{{pageInfo.brand_name || ''}}（{{pageInfo.stadium_name ||'-'}}）</view> |
|||
<view>课程名称：{{pageInfo.course_name || '-'}}</view> |
|||
<view>上课教练：{{pageInfo.course_coach || '-'}}</view> |
|||
<view> |
|||
<text>学员信息：{{pageInfo.student_name || ''}}{{pageInfo.student_gender!=''?`（${pageInfo.student_gender||''}）`:''}} {{userInfo.type==2?(' '+pageInfo.student_phone) : ''}}</text> |
|||
<image v-if="userInfo.type==2" src="/subpackage/course/static/images/icon/phone.png" @click="phoneCall(pageInfo.student_phone)"></image> |
|||
</view> |
|||
<view>剩余课时：{{pageInfo.period_nums_surplus || 0}}节 （共{{pageInfo.period_nums || 0}}节)</view> |
|||
</view> |
|||
|
|||
<view class="ac-section"> |
|||
<view class="as-tit">第{{pageInfo.next_class_number || '-'}}节</view> |
|||
<!-- 上课教练 --> |
|||
<view class="as-line"> |
|||
<view class="al-txt"><text>*</text>上课教练</view> |
|||
<picker class="al-picker" :value="coachName" :range="coachs" @change="coachBindChange"> |
|||
<view class="al-view al-box"> |
|||
<view>{{coachName || '请选择上课教练'}}</view> |
|||
<image src="/subpackage/course/static/images/icon/triangle.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<!-- 上课日期 --> |
|||
<view class="as-line"> |
|||
<view class="al-txt"><text>*</text>上课日期</view> |
|||
<picker class="al-picker" mode="date" :value="submitInfo.date" :start="startDate" :end="endDate" @change="bindDateChange" > |
|||
<view class="al-view al-date"> |
|||
<view class="ad-txt">{{submitInfo.date}}</view> |
|||
<view class="ad-img"> |
|||
<image src="/subpackage/course/static/images/icon/calendar.png"></image> |
|||
</view> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<!-- 上课时间 --> |
|||
<view class="as-line"> |
|||
<view class="al-txt"><text>*</text>上课时间</view> |
|||
<picker class="al-picker" :value="submitInfo.start" :range="timeList" @change="startBindChange"> |
|||
<view class="al-view al-time"> |
|||
<view>{{submitInfo.start}}</view> |
|||
<image src="/subpackage/course/static/images/icon/triangle.png"></image> |
|||
</view> |
|||
</picker> |
|||
<view class="al-to">至</view> |
|||
<picker class="al-picker" :value="submitInfo.end" :range="timeList" @change="endBindChange"> |
|||
<view class="al-view al-time"> |
|||
<view>{{submitInfo.end}}</view> |
|||
<image src="/subpackage/course/static/images/icon/triangle.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<!-- 上课场地 --> |
|||
<view class="as-line" v-if="pageInfo.is_booking_venue == true"> |
|||
<view class="al-txt"><text>*</text>上课场地<view class="at-type">({{pageInfo.course_venue_type || '-'}})</view></view> |
|||
<picker class="al-picker" :value="venueName" :range="venues" @change="venueBindChange"> |
|||
<view class="al-view al-box"> |
|||
<view>{{venueName || '请选择场地'}}</view> |
|||
<image src="/subpackage/course/static/images/icon/triangle.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="ac-fixed"> |
|||
<view hover-class="hover-active" @click="confirmChange">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
export default { |
|||
computed: { |
|||
startDate() { |
|||
return this.getDate('start'); |
|||
}, |
|||
endDate() { |
|||
return this.getDate('end'); |
|||
}, |
|||
userInfo(){ |
|||
return uni.getStorageSync('loginInfo') || {}; |
|||
}, |
|||
timeList(){ |
|||
let _list = [] |
|||
for(let i = 0; i<=24; i++){ |
|||
_list.push(`${i<10?'0'+i:i}:00`) |
|||
} |
|||
return _list; |
|||
}, |
|||
coachs(){ |
|||
let { coachList } = this |
|||
let _arr = [] |
|||
if(coachList.length > 0){ |
|||
_arr = this.coachList.map(e=>e.name) |
|||
} |
|||
return _arr || []; |
|||
}, |
|||
venues(){ |
|||
let { venueList } = this |
|||
let _arr = [] |
|||
if(venueList.length > 0){ |
|||
_arr = this.venueList.map(e=>e.name) |
|||
} |
|||
return _arr || []; |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
coachList: [], //教练列表 |
|||
coachName: "", //上课教练 |
|||
venueList: [], //场地列表 |
|||
venueName: "", //选择场地 |
|||
|
|||
pageInfo: {}, |
|||
|
|||
submitInfo: { |
|||
coach_id: "", |
|||
date: "", |
|||
start: "", |
|||
end: "", |
|||
venue_id: "", |
|||
}, |
|||
} |
|||
}, |
|||
async onLoad(options){ |
|||
// let _query = util.jsonPar(options.query); |
|||
// this.pageInfo = _query |
|||
// this.getStuInfo(options.order_no) |
|||
}, |
|||
methods: { |
|||
getDate(type) { |
|||
const date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
|
|||
if (type === 'start') { |
|||
year = year - 60; |
|||
} else if (type === 'end') { |
|||
year = year + 2; |
|||
} |
|||
month = month > 9 ? month : '0' + month; |
|||
day = day > 9 ? day : '0' + day; |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
//日期 |
|||
bindDateChange: function(e) { |
|||
let _selectDate = e.target.value |
|||
this.submitInfo.date = _selectDate |
|||
}, |
|||
|
|||
startBindChange(e){ |
|||
console.log(e); |
|||
let _list = this.timeList || []; |
|||
this.submitInfo.start = _list[e.detail.value] || '' |
|||
}, |
|||
endBindChange(e){ |
|||
console.log(e); |
|||
let _list = this.timeList || []; |
|||
this.submitInfo.end = _list[e.detail.value] || '' |
|||
}, |
|||
|
|||
coachBindChange(e){ |
|||
console.log(e); |
|||
let _list = this.coachs || []; |
|||
this.coachName = _list[e.detail.value] || '' |
|||
this.submitInfo.coach_id = this.coachList[e.detail.value].id |
|||
}, |
|||
|
|||
venueBindChange(e){ |
|||
console.log(e); |
|||
let _list = this.venues || []; |
|||
this.venueName = _list[e.detail.value] || '' |
|||
this.submitInfo.venue_id = this.venueList[e.detail.value].id |
|||
}, |
|||
|
|||
phoneCall(mobile) { |
|||
let _phoneStr = mobile || '' |
|||
let _phoneArr = _phoneStr.split(',') || []; |
|||
uni.showActionSheet({ |
|||
itemList: _phoneArr, |
|||
success: res =>{ |
|||
uni.makePhoneCall({ |
|||
phoneNumber: _phoneArr[res.tapIndex] |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
confirmChange(){ |
|||
let { pageInfo, submitInfo } = this |
|||
let { coach_id, date, start, end, venue_id } = this.submitInfo |
|||
|
|||
if(coach_id==''||date==""||start=="" ||end=="" || (pageInfo.is_booking_venue==true && venue_id==''))return util.showNone("请完善必选项！"); |
|||
|
|||
let nowTime = util.formatDate(new Date(),'-') //现在时间 格式为 2020-07-21 |
|||
if(new Date(nowTime).getTime() > new Date(date).getTime())return util.showNone("上课日期不能小于当前系统日期！"); |
|||
|
|||
// 主要比较两个时间段大小，2021-09-01这个日期随便给 |
|||
if(Date.parse('2021-09-01 '+ start) >= Date.parse('2021-09-01 '+ end))return util.showNone("上课时间的结束时间不能小于起始时间！"); |
|||
|
|||
let _data = { |
|||
order_no: pageInfo.order_no, |
|||
coach_id, //教练ID |
|||
date, //日期 |
|||
start, //开始时间段 |
|||
end, //结束时间段 |
|||
} |
|||
if(pageInfo.is_booking_venue == true)_data["venue_id"] = venue_id; //场馆ID |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.student.arrangeStudentAc, //安排上课[私教课] |
|||
data: _data, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
util.showNone("操作成功！"); |
|||
setTimeout(_=>{ uni.navigateBack() }, 1200) |
|||
}) |
|||
}, |
|||
|
|||
// 我的学员-详情 |
|||
getStuInfo(order_no){ |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.student.stuInfo, |
|||
data: { |
|||
order_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.pageInfo = res |
|||
this.getArrangeAcCoach(res.order_no); |
|||
|
|||
}) |
|||
}, |
|||
|
|||
// 安排上课[私教课] - 获取教练 |
|||
getArrangeAcCoach(order_no){ |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.student.arrangeStudentAcCoach, |
|||
data: { |
|||
order_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.coachList = res.coachs || [] |
|||
this.venueList = res.venues || [] |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #F2F2F7; |
|||
} |
|||
.arrange-class{ |
|||
position: relative; |
|||
padding-bottom: 150rpx; |
|||
.ac-info{ |
|||
padding: 28rpx 22rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
&:first-child{ |
|||
font-weight: 700; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
&+view{ |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
margin-left: 20rpx; |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ac-section{ |
|||
margin: 12rpx 0; |
|||
padding: 30rpx 28rpx 50rpx; |
|||
background-color: #FFFFFF; |
|||
.as-tit{ |
|||
padding-bottom: 4rpx; |
|||
color: #333333; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
line-height: 50rpx; |
|||
} |
|||
.as-line{ |
|||
margin: 20rpx 46rpx 0 6rpx; |
|||
@include centerFlex(flex-start); |
|||
.al-txt{ |
|||
position: relative; |
|||
margin-right: 18rpx; |
|||
flex-shrink: 0; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 44rpx; |
|||
>text{ |
|||
color: #EA5061; |
|||
font-size: 32rpx; |
|||
} |
|||
.at-type{ |
|||
position: absolute; |
|||
bottom: -36rpx; |
|||
left: 0; |
|||
min-width: 130rpx; |
|||
text-align: center; |
|||
color: #9C9C9F; |
|||
font-size: 24rpx; |
|||
line-height: 34rpx; |
|||
} |
|||
} |
|||
.al-picker{ |
|||
flex-grow: 1; |
|||
} |
|||
.al-view{ |
|||
flex-grow: 1; |
|||
padding-left: 20rpx; |
|||
height: 76rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(flex-start); |
|||
} |
|||
.al-box{ |
|||
>view{ |
|||
flex-grow: 1; |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
>image{ |
|||
margin: 0 18rpx; |
|||
flex-shrink: 0; |
|||
width: 22rpx; |
|||
height: 22rpx; |
|||
} |
|||
} |
|||
|
|||
.al-date{ |
|||
.ad-txt{ |
|||
flex-grow: 1; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
border-right: 2rpx solid #D8D8D8; |
|||
} |
|||
.ad-img{ |
|||
flex-shrink: 0; |
|||
height: 76rpx; |
|||
padding: 0 16rpx 0 18rpx; |
|||
@include centerFlex(center); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
} |
|||
} |
|||
} |
|||
.al-time{ |
|||
>view{ |
|||
flex-grow: 1; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
min-width: 80rpx; |
|||
} |
|||
>image{ |
|||
margin: 0 18rpx; |
|||
flex-shrink: 0; |
|||
width: 22rpx; |
|||
height: 22rpx; |
|||
} |
|||
} |
|||
.al-to{ |
|||
margin: 0 28rpx; |
|||
flex-shrink: 0; |
|||
color: #B2B2B2; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.ac-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 20rpx 0; |
|||
width: 750rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
margin: 0 auto; |
|||
padding: 24rpx 0; |
|||
width: 670rpx; |
|||
border-radius: 44rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<view class="add-student"> |
|||
<view class="as-search"> |
|||
<view class="as-box"> |
|||
<image src="/static/images/icon/search.png"></image> |
|||
<input class="ab-ipt" placeholder="请输入学员姓名/电话查找" confirm-type="search" v-model="searchText" @change="searchChange"/> |
|||
</view> |
|||
</view> |
|||
<view class="as-name">课程名称：{{pageInfo.course_name||'-'}}</view> |
|||
<!-- studentList --> |
|||
<view class="as-list" v-for="(e,i) in 3" :key="i"> |
|||
<view class="al-item" @click="itemChange(e,i)"> |
|||
<image :class="[submitInfo.order_no==e.order_no?'ai-img':'ai-icon']" :src="submitInfo.order_no==e.order_no?'/static/images/icon/selected_987.png':''"></image> |
|||
<view class="ai-info"> |
|||
<view>学员信息：{{e.student_name||'-'}}（{{e.student_gender || '-'}}） {{userInfo.type==2?e.student_phone:''}}</view> |
|||
<view>剩余课时：<text>{{e.course_period_nums_surplus || 0}}课时</text><text>（{{e.course_period_nums_use||0}}/{{e.course_period_nums_total||0}})</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="as-fixed"> |
|||
<view hover-class="hover-active" @click="btnChange(1)">确认添加学员</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
export default { |
|||
computed:{ |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
pageInfo: {}, |
|||
studentList: [], |
|||
searchText: "", |
|||
|
|||
submitInfo: { |
|||
order_no: "", |
|||
subscribe_no: "", |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
// this.submitInfo.subscribe_no = options.subscribe_no |
|||
// this.getSubStudent(options.subscribe_no) |
|||
}, |
|||
methods: { |
|||
// 搜索 |
|||
searchChange(e){ |
|||
let { searchText, pageInfo } = this |
|||
if(searchText == '')return this.studentList = pageInfo.students; |
|||
this.studentList = pageInfo.students.filter(e=>e.student_name.indexOf(searchText)!=-1||e.student_phone.indexOf(searchText)!=-1 ); |
|||
}, |
|||
itemChange(info){ |
|||
this.submitInfo.order_no = info.order_no |
|||
}, |
|||
btnChange(type){ |
|||
if(this.submitInfo.order_no=='')return util.showNone('请选择需要添加的学员！'); |
|||
util.showModal({ |
|||
title: '是否确认添加学员上课？', |
|||
content: '', |
|||
showCancel: true, |
|||
success: modalRes=>{ |
|||
if(modalRes.confirm){ |
|||
this.getSubAdd() |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 添加学员 |
|||
getSubAdd(){ |
|||
let { order_no, subscribe_no} = this.submitInfo |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.appointment.subAdd, |
|||
data: { |
|||
order_no, |
|||
subscribe_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
util.showNone('操作成功！'); |
|||
setTimeout(_=>{ |
|||
this.getSubStudent(subscribe_no); |
|||
util.previousPageFunction({ |
|||
fnName: 'refreshList', |
|||
query: { isLoad: false}, |
|||
}); |
|||
},1200); |
|||
}) |
|||
}, |
|||
|
|||
// 获取可添加学员列表 |
|||
getSubStudent(subscribe_no){ |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.appointment.subStudent, |
|||
data: { |
|||
subscribe_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.searchText = "" |
|||
this.submitInfo.order_no = "" |
|||
this.pageInfo = res || {}; |
|||
this.studentList = this.pageInfo.students || [] |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #F2F2F7; |
|||
} |
|||
.add-student{ |
|||
position: relative; |
|||
padding-bottom: 170rpx; |
|||
.as-search{ |
|||
padding: 26rpx 24rpx; |
|||
background-color: #FFFFFF; |
|||
.as-box{ |
|||
padding: 0rpx 20rpx; |
|||
height: 92rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.ab-ipt{ |
|||
flex-grow: 1; |
|||
color: #1A1A1A; |
|||
font-size: 32rpx; |
|||
} |
|||
} |
|||
} |
|||
.as-name{ |
|||
margin-top: 2rpx; |
|||
padding: 26rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
} |
|||
.as-list{ |
|||
margin-top: 2rpx; |
|||
.al-item{ |
|||
padding: 28rpx 40rpx; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
background-color: #FFFFFF; |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-right: 28rpx; |
|||
} |
|||
.ai-icon{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx solid #9A9A9D; |
|||
} |
|||
.ai-img{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.ai-info{ |
|||
flex-grow: 1; |
|||
margin-top: -10rpx; |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
&:first-child{ |
|||
color: #009874; |
|||
} |
|||
&:nth-child(2){ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.as-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 22rpx 0; |
|||
width: 750rpx; |
|||
background-color: #FFFFFF; |
|||
border-top: 2rpx solid #F2F2F7; |
|||
>view{ |
|||
margin: 0 auto; |
|||
padding: 34rpx 0; |
|||
width: 670rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<view class="class-student-detail"> |
|||
<view class="csd-section"> |
|||
<view class="cs-view">学员姓名：{{pageInfo.student_name||'-'}}（{{pageInfo.student_gender||'-'}}） </view> |
|||
<!-- 只有教务才有 --> |
|||
<view class="cs-view"> |
|||
<text>学员电话：{{pageInfo.student_phone ||'-'}}</text> |
|||
<image src="/subpackage/course/static/images/icon/phone.png" @click="phoneCall(pageInfo.student_phone)"></image> |
|||
</view> |
|||
<view class="cs-view">剩余课时：{{pageInfo.course_period_residue ||0}}课时 （{{pageInfo.course_period_nums_use||0}}/{{pageInfo.course_period_nums||0}})</view> |
|||
<view class="cs-end"> |
|||
<!-- 只有教务才有 --> |
|||
<view class="ce-btn1" hover-class="hover-active" @click="isShowClass=true">转班</view> |
|||
</view> |
|||
</view> |
|||
<view class="csd-record"> |
|||
<view class="cr-tit">上课记录</view> |
|||
<sclass-record-section ></sclass-record-section> |
|||
</view> |
|||
<!-- 转班弹框 --> |
|||
<class-reset-modal |
|||
:isShowClass="isShowClass" |
|||
:info="pageInfo" |
|||
:canlist="classList" |
|||
@confirmReset="confirmReset" |
|||
@closeReset="isShowClass=false" |
|||
></class-reset-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
import class_reset_modal from '../../components/class_reset_modal/class_reset_modal.vue'; |
|||
import sclass_record_section from '../../components/sclass_record_section/sclass_record_section.vue'; |
|||
export default { |
|||
components: { |
|||
'class-reset-modal': class_reset_modal, |
|||
'sclass-record-section': sclass_record_section, |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
pageInfo: {}, |
|||
isShowClass: false, |
|||
classList: [], |
|||
resetInfo: {}, |
|||
} |
|||
}, |
|||
async onLoad(options){ |
|||
// let _query = util.jsonPar(options.query); |
|||
// this.pageInfo = _query |
|||
// this.$nextTick(_=>{ |
|||
// }) |
|||
}, |
|||
methods: { |
|||
formatDate: util.formatDate, |
|||
phoneCall(mobile) { |
|||
let _phoneStr = mobile || '' |
|||
let _phoneArr = _phoneStr.split(',') || []; |
|||
uni.showActionSheet({ |
|||
itemList: _phoneArr, |
|||
success: res =>{ |
|||
uni.makePhoneCall({ |
|||
phoneNumber: _phoneArr[res.tapIndex] |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
zh_status(status){ |
|||
let arr = ["待上课","已上课","申请请假中","已请假","缺勤"] |
|||
return arr[status] || ''; |
|||
}, |
|||
// 去评价 |
|||
toAppraise(){ |
|||
let { pageInfo } = this |
|||
let _query = { |
|||
course_kind: "成班课", |
|||
course_name: pageInfo.course_name, |
|||
student_name: pageInfo.student_name, |
|||
student_gender: pageInfo.student_gender, |
|||
student_phone: pageInfo.student_phone, |
|||
sclass_name: pageInfo.sclass_name, |
|||
sclass_nums: pageInfo.sclass_nums, |
|||
} |
|||
util.routeTo(`/subpackage/manage/pages/appointment/appraise/appraise?order_no=${pageInfo.order_no}&query=${util.jsonStr(_query)}`,'nT'); |
|||
}, |
|||
|
|||
// 确认转班 |
|||
confirmReset(e){ |
|||
let { pageInfo } = this |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.class.reset, |
|||
data: { |
|||
old_id: pageInfo.sclass_id, |
|||
new_id: e.new_id, |
|||
user_id: pageInfo.user_id, |
|||
user_order_no: pageInfo.order_no, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
util.showNone('操作成功！'); |
|||
setTimeout(_=>{uni.navigateBack({delta:2})}, 1200) |
|||
}) |
|||
}, |
|||
|
|||
// 可换班级列表 |
|||
getCanlist(course_id){ |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.class.canlist, |
|||
data: { |
|||
course_id, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.classList = res.list || [] |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #FFFFFF; |
|||
} |
|||
.class-student-detail{ |
|||
position: relative; |
|||
padding-bottom: 160rpx; |
|||
.csd-section{ |
|||
padding: 24rpx 22rpx 0; |
|||
.cs-view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
margin-left: 30rpx; |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
.cs-end{ |
|||
margin-top: 16rpx; |
|||
padding: 30rpx 0; |
|||
border-top: 2rpx solid #E5E5E5; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
margin-left: 20rpx; |
|||
padding: 12rpx 0; |
|||
width: 156rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
border-radius: 6rpx; |
|||
border: 2rpx solid #009874; |
|||
} |
|||
.ce-btn1{ |
|||
color: #009874; |
|||
background-color: #FFFFFF; |
|||
} |
|||
.ce-btn2{ |
|||
color: #FFFFFF; |
|||
background-color: #009874; |
|||
} |
|||
} |
|||
} |
|||
.csd-record{ |
|||
padding-bottom: 26rpx; |
|||
border-top: 24rpx solid #F2F2F7; |
|||
.cr-tit{ |
|||
padding: 26rpx 22rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
} |
|||
.cds-tab{ |
|||
margin: 0 24rpx; |
|||
border: 2rpx solid #E8E8E8; |
|||
background-color: #F6F8F8; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
height: 110rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
@include centerFlex(center); |
|||
&:first-child { |
|||
width: 166rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
width: 338rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(3){ |
|||
width: 194rpx; |
|||
// border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.cds-list{ |
|||
.cl-item{ |
|||
margin: 0 24rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
border-bottom: 2rpx solid #E8E8E8; |
|||
background-color: #FFFFFF; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
height: 110rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
@include centerFlex(center); |
|||
&:first-child { |
|||
width: 166rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
width: 338rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(3){ |
|||
width: 194rpx; |
|||
} |
|||
} |
|||
.ci-txt-green{ |
|||
color: #009874; |
|||
} |
|||
.ci-txt-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,268 @@ |
|||
<template> |
|||
<view class="class-time-change"> |
|||
<view class="ctc-info"> |
|||
<view class="ci-weight">{{pageInfo.brand_name||'-'}}</view> |
|||
<view>课程名称：{{pageInfo.course_name||'-'}}</view> |
|||
<view>所在班级：{{pageInfo.sclass_name||'-'}}</view> |
|||
</view> |
|||
<view class="ctc-section"> |
|||
<view class="cs-tit">第{{pageInfo.lesson_no|| 0}}节</view> |
|||
<view class="cs-line"> |
|||
<view class="cl-txt"><text>*</text>上课日期</view> |
|||
<picker class="cl-picker" mode="date" :value="pageInfo.period_date" :start="startDate" :end="endDate" @change="bindDateChange" > |
|||
<view class="cl-box"> |
|||
<view class="cb-txt">{{pageInfo.period_date}}</view> |
|||
<view class="cb-img"> |
|||
<image src="/subpackage/course/static/images/icon/calendar.png"></image> |
|||
</view> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="cs-line"> |
|||
<view class="cl-txt"><text>*</text>上课时间</view> |
|||
<picker class="cl-picker" :value="pageInfo.period_start_time" :range="timeList" @change="startBindChange"> |
|||
<view class="cl-view"> |
|||
<view>{{pageInfo.period_start_time}}</view> |
|||
<image src="/subpackage/course/static/images/icon/triangle.png"></image> |
|||
</view> |
|||
</picker> |
|||
<view class="cl-to">至</view> |
|||
<picker class="cl-picker" :value="pageInfo.period_end_time" :range="timeList" @change="endBindChange"> |
|||
<view class="cl-view"> |
|||
<view>{{pageInfo.period_end_time}}</view> |
|||
<image src="/subpackage/course/static/images/icon/triangle.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
<view class="fixed-btn"> |
|||
<view hover-class="hover-active" @click="sclassTimeChange">确认更改</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
export default { |
|||
computed: { |
|||
startDate() { |
|||
return this.getDate('start'); |
|||
}, |
|||
endDate() { |
|||
return this.getDate('end'); |
|||
}, |
|||
timeList(){ |
|||
let _list = [] |
|||
for(let i = 0; i<=24; i++){ |
|||
_list.push(`${i<10?'0'+i:i}:00`) |
|||
} |
|||
return _list; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
pageInfo: { |
|||
period_date: "", |
|||
period_start_time: "", |
|||
period_end_time: "", |
|||
}, |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
// let _query = util.jsonPar(options.query); |
|||
// this.pageInfo = _query |
|||
}, |
|||
methods: { |
|||
getDate(type) { |
|||
const date = new Date(); |
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
|
|||
if (type === 'start') { |
|||
year = year - 60; |
|||
} else if (type === 'end') { |
|||
year = year + 2; |
|||
} |
|||
month = month > 9 ? month : '0' + month; |
|||
day = day > 9 ? day : '0' + day; |
|||
return `${year}-${month}-${day}`; |
|||
}, |
|||
//日期 |
|||
bindDateChange: function(e) { |
|||
let _selectDate = e.target.value |
|||
this.pageInfo.period_date = _selectDate |
|||
}, |
|||
|
|||
startBindChange(e){ |
|||
console.log(e); |
|||
let _list = this.timeList || []; |
|||
this.pageInfo.period_start_time = _list[e.detail.value] || '' |
|||
}, |
|||
endBindChange(e){ |
|||
console.log(e); |
|||
let _list = this.timeList || []; |
|||
this.pageInfo.period_end_time = _list[e.detail.value] || '' |
|||
}, |
|||
|
|||
// 成班课时间修改 |
|||
sclassTimeChange(){ |
|||
let { pageInfo } = this |
|||
if(pageInfo.period_date==''|| pageInfo.period_start_time==''|| pageInfo.period_end_time=='')return util.showNone("请完善必选项！"); |
|||
let nowTime = util.formatDate(new Date(),'-') //现在时间 格式为 2020-07-21 |
|||
if(new Date(nowTime).getTime() > new Date(pageInfo.period_date).getTime())return util.showNone("上课日期不能小于当前系统日期！"); |
|||
// 主要比较两个时间段大小，2021-09-01这个日期随便给 |
|||
if(Date.parse('2021-09-01 '+ pageInfo.period_start_time) >= Date.parse('2021-09-01 '+ pageInfo.period_end_time))return util.showNone("上课时间的结束时间不能小于起始时间！"); |
|||
this.$emit('closeChange') |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.schedule.sclassTimeChange, |
|||
data: { |
|||
id: pageInfo.sclass_id, |
|||
lesson_no: pageInfo.lesson_no, |
|||
period_date: pageInfo.period_date, |
|||
period_start_time: pageInfo.period_start_time, |
|||
period_end_time: pageInfo.period_end_time, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
util.showNone('操作成功！'); |
|||
setTimeout(_=>{ |
|||
uni.navigateBack() |
|||
util.previousPageFunction({ |
|||
fnName: 'refreshList', |
|||
query: { isLoad: false}, |
|||
}); |
|||
}, 1200) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #F2F2F7; |
|||
} |
|||
.class-time-change{ |
|||
position: relative; |
|||
padding-bottom: 160rpx; |
|||
.ctc-info{ |
|||
padding: 24rpx 22rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
} |
|||
.ci-weight{ |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
.ctc-section{ |
|||
margin: 12rpx 0; |
|||
padding: 30rpx 56rpx 58rpx 28rpx; |
|||
background-color: #FFFFFF; |
|||
.cs-tit{ |
|||
color: #333333; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
line-height: 50rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
.cs-line{ |
|||
margin-top: 32rpx; |
|||
@include centerFlex(flex-start); |
|||
.cl-txt{ |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
color: #1A1A1A; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
>text{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.cl-box{ |
|||
flex-grow: 1; |
|||
padding-left: 20rpx; |
|||
height: 88rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(flex-start); |
|||
.cb-txt{ |
|||
flex-grow: 1; |
|||
border-right: 2rpx solid #D8D8D8; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.cb-img{ |
|||
height: 88rpx; |
|||
padding: 0 22rpx 0 18rpx; |
|||
@include centerFlex(center); |
|||
>image{ |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
} |
|||
} |
|||
} |
|||
.cl-picker{ |
|||
flex-grow: 1; |
|||
} |
|||
.cl-view{ |
|||
padding-left: 20rpx; |
|||
flex-grow: 1; |
|||
height: 88rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
flex-grow: 1; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
min-width: 80rpx; |
|||
} |
|||
>image{ |
|||
margin: 0 18rpx; |
|||
flex-shrink: 0; |
|||
width: 22rpx; |
|||
height: 22rpx; |
|||
} |
|||
} |
|||
.cl-to{ |
|||
margin: 0 26rpx; |
|||
flex-shrink: 0; |
|||
color: #B2B2B2; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
} |
|||
} |
|||
} |
|||
.fixed-btn{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 750rpx; |
|||
padding: 20rpx 0 24rpx; |
|||
background-color: #FFFFFF; |
|||
z-index: 2; |
|||
>view{ |
|||
margin: auto; |
|||
padding: 24rpx 0; |
|||
width: 670rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,242 @@ |
|||
<template> |
|||
<view class="bclass-reserve-detail"> |
|||
<view class="brd-line"> |
|||
<view>欧轩智能场馆(羽毛球馆永泰店)</view> |
|||
<view :class="[false?'bl-gray':false?'bl-red':'bl-green']">待上课</view> |
|||
</view> |
|||
<view class="brd-section"> |
|||
<view>预约单号：<text>yy202106031256568595</text></view> |
|||
<view>预约时间：<text>2021.06.03 11:42:50 </text></view> |
|||
<!-- 已取消才显示 --> |
|||
<block v-if="false"> |
|||
<view>取消时间：<text>2021.06.03 11:42:50</text></view> |
|||
<view>取消原因：<text>学员取消（有事请假）</text></view> |
|||
</block> |
|||
</view> |
|||
<view class="brd-section"> |
|||
<view>上课信息</view> |
|||
<view>上课时间：<text>2021.06.02（周五） 14:00-16:00</text></view> |
|||
<view>上课地点：<text>羽毛球（3号场）</text></view> |
|||
<view>上课教练：<text>张瀚</text></view> |
|||
<view>课程名称：<text>羽毛球培训课</text></view> |
|||
<view>课程类型：<text>大班课</text></view> |
|||
</view> |
|||
<view class="brd-stu"> |
|||
<view class="bs-tit">学员信息</view> |
|||
<view class="bs-line"> |
|||
<view>已预约人数：3人<text>（上课区间：5-10）</text></view> |
|||
<!-- 待确认、待上课才显示 --> |
|||
<view v-if="true" @click="toAddStu">添加学员</view> |
|||
</view> |
|||
<view class="bs-list" v-for="i in 3" :key="i"> |
|||
<view class="bl-item"> |
|||
<view class="bi-info"> |
|||
<view>熊启(男) |
|||
<text>18096895331</text> |
|||
<image src="/subpackage/course/static/images/icon/phone.png"></image> |
|||
</view> |
|||
<view>预约时间：2020.12.27 22:55:56</view> |
|||
</view> |
|||
<!-- 待确认、待上课才显示 --> |
|||
<view class="bi-btn" hover-class="hover-active" v-if="true">取消上课</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 待确认、待上课才显示 --> |
|||
<view class="brd-fixed" v-if="true"> |
|||
<view class="bf-line"> |
|||
<view class="bl-btn1" hover-class="hover-active" @click="isCancelClass=true">取消上课</view> |
|||
<!-- v-if="pageInfo.status_text=='待确认'" --> |
|||
<view class="bl-btn2" hover-class="hover-active" >确认上课</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<cancel-class-modal |
|||
v-if="isCancelClass" |
|||
@reasonClose="isCancelClass=false" |
|||
></cancel-class-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../../js/course_server'; |
|||
import { BOX_API } from '../../../js/course_api'; |
|||
import cancel_class_modal from '../../../components/cancel_class_modal/cancel_class_modal.vue'; |
|||
export default { |
|||
components: { |
|||
'cancel-class-modal': cancel_class_modal, |
|||
}, |
|||
data() { |
|||
return { |
|||
isCancelClass: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
toAddStu(){ |
|||
util.routeTo(`/subpackage/course/pages/class_add_student/class_add_student`,'nT'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.bclass-reserve-detail{ |
|||
position: relative; |
|||
padding-bottom: 150rpx; |
|||
.brd-line{ |
|||
padding: 24rpx 44rpx 30rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
border-bottom: 2rpx solid #E5E5E5; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
&:first-child{ |
|||
color: #1A1A1A; |
|||
font-weight: 700; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
.bl-green{ |
|||
color: #009874; |
|||
} |
|||
.bl-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.bl-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.brd-section{ |
|||
margin-bottom: 2rpx; |
|||
padding: 25rpx 30rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
} |
|||
.brd-stu{ |
|||
margin-top: 24rpx; |
|||
// padding: 26rpx 30rpx 38rpx; |
|||
background-color: #FFFFFF; |
|||
.bs-tit{ |
|||
padding: 30rpx 30rpx 0; |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.bs-line{ |
|||
padding: 12rpx 44rpx 26rpx 26rpx; |
|||
border-bottom: 2rpx solid #F2F2F7; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #1A1A1A; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
margin-left: 10rpx; |
|||
flex-shrink: 0; |
|||
color: #009874; |
|||
line-height: 40rpx; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
.bs-list{ |
|||
.bl-item{ |
|||
margin: 0 30rpx; |
|||
padding: 30rpx 0rpx; |
|||
border-bottom: 2rpx solid #D8D8D8; |
|||
@include centerFlex(space-between); |
|||
.bi-info{ |
|||
>view{ |
|||
&:first-child{ |
|||
color: #333333; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
>text{ |
|||
margin: 0 28rpx 0 40rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: 6rpx; |
|||
color: #B2B2B2; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
.bi-btn{ |
|||
padding: 12rpx 0; |
|||
width: 140rpx; |
|||
border: 2rpx solid #EA5061; |
|||
border-radius: 6rpx; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.brd-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 30rpx 0; |
|||
width: 750rpx; |
|||
background-color: #FFFFFF; |
|||
.bf-line{ |
|||
margin-right: 32rpx; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
margin-left: 20rpx; |
|||
padding: 20rpx 0; |
|||
width: 192rpx; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
border-radius: 6rpx; |
|||
} |
|||
.bl-btn1{ |
|||
color: #EA5061; |
|||
border: 2rpx solid #EA5061; |
|||
background-color: #FFFFFF; |
|||
} |
|||
.bl-btn2{ |
|||
color: #FFFFFF; |
|||
border: 2rpx solid #009874; |
|||
background-color: #009874; |
|||
} |
|||
.bl-btn3{ |
|||
color: #009874; |
|||
border: 2rpx solid #009874; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,433 @@ |
|||
<template> |
|||
<view class="class-manage-detail" :class="[curTabID==2?'cmd-content':'']"> |
|||
<view class="cmd-tab"> |
|||
<tab-bar :tabList="tabList" :curTabID="curTabID" @change="tabChange"></tab-bar> |
|||
</view> |
|||
|
|||
<!-- 班级详情 --> |
|||
<block v-if="curTabID==0"> |
|||
<view class="cmd-status">课程状态：<text :class="[false?'cs-gray':false?'cs-red':'cs-green']">成班中</text></view> |
|||
<view class="cmd-section"> |
|||
<view>课程信息</view> |
|||
<view>欧轩智能羽毛球馆（番禺店）</view> |
|||
<view><text>课程名称：</text>羽毛球培训课</view> |
|||
<view><text>课程课时数量：</text>10节课</view> |
|||
<view><text>课时时长：</text>1小时</view> |
|||
<view><text>课程有效期：</text>2021.06.30-2021.09.30</view> |
|||
<!-- 成班中、失败 --> |
|||
<block v-if="true"> |
|||
<view><text>成班区间人数：</text>2-6人</view> |
|||
<view><text>报名截止时间：</text>2021.07.12 23:50:50</view> |
|||
</block> |
|||
</view> |
|||
<view class="cmd-section"> |
|||
<view>班级信息</view> |
|||
<view><text>班级id：</text>2-3</view> |
|||
<view><text>班级名称：</text></view> |
|||
<view><text>班级人数：</text>20</view> |
|||
<view><text>上课教练：</text></view> |
|||
<view><text>上课地点：</text></view> |
|||
<view><text>课程日期：</text></view> |
|||
</view> |
|||
<view class="cmd-fixed"> |
|||
<view hover-class="hover-active" @click="confirmClass()">确认成班</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<!-- 班级学员 --> |
|||
<view class="cmd-stu" v-for="(item,i) in 3" :key="i" v-if="curTabID==1"> |
|||
<view class="cs-item" @click="toStuDetail()"> |
|||
<view class="ci-line"> |
|||
<view>张安（男 ） |
|||
<text>18316536894</text> |
|||
<image src="/subpackage/course/static/images/icon/phone.png"></image> |
|||
</view> |
|||
<image src="/subpackage/course/static/images/icon/arrow_black.png"></image> |
|||
</view> |
|||
<view class="ci-view">剩余课时：10节 （共12节)</view> |
|||
<view class="ci-view"><text>有效期：2020.12.27 22:55:56</text></view> |
|||
<view class="ci-btn"> |
|||
<view hover-class="hover-active" @click.stop="isShowClass=true">转班</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 上课表 --> |
|||
<view class="cmd-schedule" v-if="curTabID==2"> |
|||
<block v-if="true"> |
|||
<view class="cs-tab"> |
|||
<view>课时</view> |
|||
<view>上课时间</view> |
|||
<view>上课状态</view> |
|||
<view>操作</view> |
|||
</view> |
|||
<view class="cs-list" v-for="(e,i) in 6" :key="i"> |
|||
<view class="cl-item"> |
|||
<view>第{{e.lesson_no|| '-'}}节</view> |
|||
<!-- ${formatDate({date: e.period_date, partition: '.'}) ||'-'} --> |
|||
<view>{{`${' '+e.period_start_time || ''}-${e.period_end_time || ''}`}}</view> |
|||
<view |
|||
:class="[!e.status?'ci-txt-green':'']" |
|||
>{{e.status?'已上课':'待上课'}}</view> |
|||
<view> |
|||
<view hover-class="hover-active" v-if="!e.status" @click="toChange(e)">更改</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<view class="cmd-no" v-if="false"> |
|||
<image src="/subpackage/course/static/images/no_order.png"></image> |
|||
<view>暂未排课</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 作业列表 --> |
|||
<view class="cmd-task" v-if="curTabID==3"> |
|||
<task-section ref="refTask" :taskInfo="taskList" taskType="finish" v-if="true"></task-section> |
|||
<view class="cmd-no" v-if="false"> |
|||
<image src="/subpackage/course/static/images/no_order.png"></image> |
|||
<view>暂未布置作业</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 转班弹框 --> |
|||
<class-reset-modal |
|||
:isShowClass="isShowClass" |
|||
:info="6" |
|||
:canlist="canlist" |
|||
@confirmReset="confirmReset" |
|||
@closeReset="isShowClass=false" |
|||
></class-reset-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../../js/course_server'; |
|||
import { BOX_API } from '../../../js/course_api'; |
|||
import tabBar from '../../../components/tab_bar/tab_bar.vue'; |
|||
import class_reset_modal from '../../../components/class_reset_modal/class_reset_modal.vue'; |
|||
import task_section from '../../../components/task_section/task_section.vue'; |
|||
const tabList=[ |
|||
{name: '班级详情', id: 0}, {name: '班级学员', id: 1}, {name: '上课表', id: 2}, {name: '作业列表', id: 3}, |
|||
]; |
|||
export default { |
|||
components: { |
|||
'tab-bar': tabBar, |
|||
'class-reset-modal': class_reset_modal, |
|||
'task-section': task_section, |
|||
}, |
|||
data() { |
|||
return { |
|||
tabList, |
|||
curTabID: 0, |
|||
isShowClass: false, |
|||
canlist: [], |
|||
|
|||
taskList: [ |
|||
{ |
|||
work_content: "今年第三批高考综合改革省份迎来“新高考”，目前，全国实施新高考的省份达到了14个。实施新高考的省份，由于考试科目安", |
|||
}, |
|||
{ |
|||
work_content: "今年第三批高考综合改革省份迎来“新高考”，目前，全国实施新高考的省份达到了14个。实施新高考的省份，由于考试科目安排的不同，大部分在9日到10日间仍有部分科目的考试。今年新增的8个高考综合改革省份的考生，将在明天完成高中学业水平选考科目的考试后结束高考。", |
|||
}, |
|||
{ |
|||
work_content: "今年第三批高考综合改革省份迎来“新高考”，目前，全国实施新高考的省份达到了14个。实施新高考的省份，由于考试科目安今年第三批高考综合改革省份迎来“新高考”，目前省份，由于考试科目安", |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
methods: { |
|||
formatDate: util.formatDate, |
|||
tabChange: util.debounce(function(e){ |
|||
this.curTabID = e.id; |
|||
this.refreshList(); |
|||
this.$nextTick(() => { |
|||
if(this.curTabID==3 && this.taskList.length>0)this.$refs.refTask.initDesc(); |
|||
}); |
|||
}, 300, true), |
|||
refreshList(){ |
|||
|
|||
}, |
|||
confirmClass(){ |
|||
util.showModal({ |
|||
title: '是否确认成班', |
|||
content: '确认后代表用户报名成功，提前成立班级安排上课', |
|||
showCancel: true, |
|||
success: modalRes=>{ |
|||
if(modalRes.confirm){ |
|||
// util.showLoad(); |
|||
// boxServer.get({ |
|||
// url: BOX_API.schedule.cancelBclassAc, |
|||
// data: { |
|||
// subscribe_no, |
|||
// }, |
|||
// failMsg: '加载失败！' |
|||
// }) |
|||
// .then(res=>{ |
|||
// util.hideLoad(); |
|||
// this.doSuccess() |
|||
// }) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
btnChange(){}, |
|||
|
|||
toStuDetail(){ |
|||
util.routeTo(`/subpackage/course/pages/class_student_detail/class_student_detail`,'nT'); |
|||
}, |
|||
// 转班 |
|||
confirmReset(e){ |
|||
// this.resetInfo["new_id"] = e.new_id |
|||
// this.$emit('confirmReset',this.resetInfo) |
|||
}, |
|||
|
|||
toChange(){ |
|||
util.routeTo(`/subpackage/course/pages/class_time_change/class_time_change`,'nT'); |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.class-manage-detail{ |
|||
position: relative; |
|||
padding: 102rpx 0 170rpx; |
|||
.cmd-tab{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 750rpx; |
|||
border-bottom: 2rpx solid #F2F2F7; |
|||
z-index: 10; |
|||
} |
|||
.cmd-status{ |
|||
margin-top: 24rpx; |
|||
padding: 24rpx 48rpx; |
|||
background-color: #FFFFFF; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
font-weight: 700; |
|||
.cs-green{ |
|||
color: #009874; |
|||
} |
|||
.cs-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.cs-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.cmd-section{ |
|||
margin-top: 2rpx; |
|||
padding: 38rpx 48rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
&:first-child{ |
|||
margin-bottom: 20rpx; |
|||
color: #9C9C9F; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
} |
|||
&+view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.cmd-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
padding: 22rpx 0; |
|||
width: 750rpx; |
|||
background-color: #FFFFFF; |
|||
border-top: 2rpx solid #F2F2F7; |
|||
>view{ |
|||
margin: 0 auto; |
|||
padding: 34rpx 0; |
|||
width: 670rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.cmd-stu{ |
|||
margin-top: 24rpx; |
|||
.cs-item{ |
|||
position: relative; |
|||
flex-grow: 1; |
|||
margin-top: 2rpx; |
|||
padding: 26rpx 22rpx 20rpx; |
|||
background-color: #FFFFFF; |
|||
.ci-line{ |
|||
margin: 0 26rpx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
margin: 0 30rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
.ci-view{ |
|||
margin-left: 26rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
.ci-btn{ |
|||
margin-top: 18rpx; |
|||
padding-top: 28rpx; |
|||
border-top: 2rpx solid #E5E5E5; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
padding: 12rpx 0; |
|||
width: 156rpx; |
|||
border-radius: 6rpx; |
|||
border: 2rpx solid #009874; |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.cmd-schedule{ |
|||
padding-top: 24rpx; |
|||
border-top: 24rpx solid #F2F2F7; |
|||
.cs-tab{ |
|||
margin: 0 24rpx; |
|||
border: 2rpx solid #E8E8E8; |
|||
background-color: #F6F8F8; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
height: 110rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
@include centerFlex(center); |
|||
&:first-child { |
|||
width: 130rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
width: 204rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(3){ |
|||
width: 204rpx; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(4){ |
|||
width: 158rpx; |
|||
|
|||
} |
|||
} |
|||
} |
|||
.cs-list{ |
|||
.cl-item{ |
|||
margin: 0 24rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
border-bottom: 2rpx solid #E8E8E8; |
|||
background-color: #FFFFFF; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
height: 110rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
@include centerFlex(center); |
|||
&:first-child { |
|||
width: 130rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
width: 204rpx; |
|||
border-left: 2rpx solid #E8E8E8; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(3){ |
|||
width: 204rpx; |
|||
border-right: 2rpx solid #E8E8E8; |
|||
} |
|||
&:nth-child(4){ |
|||
width: 158rpx; |
|||
>view{ |
|||
padding: 4rpx 0; |
|||
width: 110rpx; |
|||
border-radius: 6rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
.ci-txt-green{ |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.cmd-task{ |
|||
margin-top: 24rpx; |
|||
} |
|||
.cmd-no{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-direction: column; |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 150rpx; |
|||
>image{ |
|||
width: 346rpx; |
|||
height: 346rpx; |
|||
} |
|||
>view{ |
|||
margin-top: 46rpx; |
|||
color: #9C9C9F; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
.cmd-content{ |
|||
min-height: 100vh; |
|||
background-color: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<view class="private-reserve-detail"> |
|||
<view class="prd-line"> |
|||
<view>欧轩智能场馆(羽毛球馆永泰店)</view> |
|||
<view :class="[false?'pl-gray':false?'pl-red':'pl-green']">待上课</view> |
|||
</view> |
|||
<view class="prd-section"> |
|||
<view>预约单号：<text>yy202106031256568595</text></view> |
|||
<view>预约时间：<text>2021.06.03 11:42:50 </text></view> |
|||
<!-- 已取消才显示 --> |
|||
<block v-if="false"> |
|||
<view>取消时间：<text>2021.06.03 11:42:50</text></view> |
|||
<view>取消原因：<text>学员取消（有事请假）</text></view> |
|||
</block> |
|||
</view> |
|||
<view class="prd-section"> |
|||
<view>上课信息</view> |
|||
<view>上课时间：<text>2021.06.02（周五） 14:00-16:00</text></view> |
|||
<view>上课地点：<text>羽毛球（3号场）</text></view> |
|||
<view>上课教练：<text>张瀚</text></view> |
|||
<view>课程名称：<text>羽毛球培训课</text></view> |
|||
<view>课程类型：<text>私教课</text></view> |
|||
<view>课程节数：<text>第3节，共12节</text></view> |
|||
</view> |
|||
<view class="prd-stu"> |
|||
<view class="ps-tit">学员信息</view> |
|||
<view class="ps-line"> |
|||
<view class="pl-info"> |
|||
<view>熊启(男) |
|||
<text>18096895331</text> |
|||
<image src="/subpackage/course/static/images/icon/phone.png"></image> |
|||
</view> |
|||
<view>预约时间：2020.12.27 22:55:56</view> |
|||
</view> |
|||
<!-- 待上课才显示 --> |
|||
<view class="pl-btn" hover-class="hover-active" v-if="true" @click="isCancelClass=true">取消上课</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<cancel-class-modal |
|||
v-if="isCancelClass" |
|||
@reasonClose="isCancelClass=false" |
|||
></cancel-class-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../../js/course_server'; |
|||
import { BOX_API } from '../../../js/course_api'; |
|||
import cancel_class_modal from '../../../components/cancel_class_modal/cancel_class_modal.vue'; |
|||
export default { |
|||
components: { |
|||
'cancel-class-modal': cancel_class_modal, |
|||
}, |
|||
data() { |
|||
return { |
|||
isCancelClass: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.private-reserve-detail{ |
|||
.prd-line{ |
|||
padding: 24rpx 44rpx 30rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
border-bottom: 2rpx solid #E5E5E5; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
&:first-child{ |
|||
color: #1A1A1A; |
|||
font-weight: 700; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
.pl-green{ |
|||
color: #009874; |
|||
} |
|||
.pl-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.pl-red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.prd-section{ |
|||
margin-bottom: 2rpx; |
|||
padding: 25rpx 30rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
} |
|||
.prd-stu{ |
|||
margin-top: 24rpx; |
|||
padding: 26rpx 30rpx 38rpx; |
|||
background-color: #FFFFFF; |
|||
.ps-tit{ |
|||
color: #9A9A9D; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.ps-line{ |
|||
margin-top: 26rpx; |
|||
@include centerFlex(space-between); |
|||
.pl-info{ |
|||
>view{ |
|||
&:first-child{ |
|||
color: #333333; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
>text{ |
|||
margin: 0 28rpx 0 40rpx; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
&:nth-child(2){ |
|||
margin-top: 6rpx; |
|||
color: #B2B2B2; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
.pl-btn{ |
|||
padding: 12rpx 0; |
|||
width: 140rpx; |
|||
border: 2rpx solid #EA5061; |
|||
border-radius: 6rpx; |
|||
color: #EA5061; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,302 @@ |
|||
<template> |
|||
<view class="student-course-detail" :class="[false?'scd-content':'']"> |
|||
<view class="scd-section"> |
|||
<view class="ss-status">进行中</view> |
|||
<view class="ss-view">学员姓名：张安（男 ）</view> |
|||
<view class="ss-view">学员电话：18316536894 |
|||
<image src="/subpackage/course/static/images/icon/phone.png"></image> |
|||
</view> |
|||
<view class="ss-view">剩余课时：10课时 （共12节)</view> |
|||
<!-- 私教课、大班课 才有安排上课 --> |
|||
<view class="ss-line" v-if="true"> |
|||
<view hover-class="hover-active" @click="toArrangeClass">安排上课</view> |
|||
</view> |
|||
</view> |
|||
<view class="scd-tab"> |
|||
<tab-bar :tabList="tabList" :curTabID="curTabID" @change="tabChange"></tab-bar> |
|||
</view> |
|||
<!-- 课程详情 --> |
|||
<view class="scd-info" v-if="curTabID==0"> |
|||
<view class="si-tit">欧轩智能场馆(羽毛球馆永泰店)</view> |
|||
<view>羽毛球杀球训练（私教课）</view> |
|||
<view><text>课程类型：</text>私教课</view> |
|||
<view><text>总课时：</text>14</view> |
|||
<!-- 私教课、大班课 --> |
|||
<block v-if="true"> |
|||
<view><text>购买课时：</text>10</view> |
|||
<view><text>赠送课时：</text>4</view> |
|||
<view><text>有效期至：</text>至2022.06.02</view> |
|||
<view><text>课时时长：</text>2小时/节</view> |
|||
<view><text>上课教练：</text>一级教练</view> |
|||
<!-- 私教课才有上课内容 --> |
|||
<view v-if="true"><text>上课内容：</text></view> |
|||
<view><text>上课是否需要场地：</text>是（不含场地费用）</view> |
|||
</block> |
|||
|
|||
<!-- 成班课 --> |
|||
<block v-if="false"> |
|||
<view><text>课时时长：</text>45分钟/节</view> |
|||
<view><text>有效期至：</text>2022.06.02-2022.12.02</view> |
|||
<view class="si-tit si-mar">班级信息</view> |
|||
<view><text>班级id：</text>2-1</view> |
|||
<view><text>班级名称：</text>冲锋班</view> |
|||
<view><text>班级人数：</text>20</view> |
|||
<view><text>上课教练：</text>张三</view> |
|||
<view><text>上课地点：</text>欧轩智能场馆3号馆</view> |
|||
<view><text>课程日期：</text>2021.08.08-2021.10.10</view> |
|||
</block> |
|||
|
|||
</view> |
|||
<!-- 上课记录 --> |
|||
<view class="scd-record" v-if="curTabID==1"> |
|||
<!-- 私教课、大班课 --> |
|||
<view class="sr-list" v-for="i in 3" :key="i" v-if="false"> |
|||
<view class="sl-item"> |
|||
<view> |
|||
<view class="si-box"> |
|||
<view>预约单号：yy202106031256568595</view> |
|||
<view :class="[true?'sb-red':false?'sb-gray':'sb-green']">已取消</view> |
|||
</view> |
|||
<view class="si-time">2021.06.03 11:42:50 预约</view> |
|||
</view> |
|||
<view class="si-wei">课程节数：第3节，共12节</view> |
|||
<view><text>上课时间：</text>2021.06.02（周五） 14:00-16:00</view> |
|||
<view><text>上课地点：</text>羽毛球（3号场）</view> |
|||
<view><text>上课教练：</text>张三</view> |
|||
<!-- 已取消显示 --> |
|||
<block v-if="true"> |
|||
<view><text>取消时间：</text>2021.06.03 11:42:50</view> |
|||
<view><text>取消原因：</text>教练取消</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<view class="sr-sclass" v-if="true"> |
|||
<sclass-record-section ></sclass-record-section> |
|||
</view> |
|||
</view> |
|||
<!-- 作业列表 --> |
|||
<view class="scd-task" v-if="curTabID==2"> |
|||
<task-section ref="refTask" :taskInfo="taskList"></task-section> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../../js/course_server'; |
|||
import { BOX_API } from '../../../js/course_api'; |
|||
import { mapState } from 'vuex'; |
|||
import tabBar from '../../../components/tab_bar/tab_bar.vue'; |
|||
import sclass_record_section from '../../../components/sclass_record_section/sclass_record_section.vue'; |
|||
import task_section from '../../../components/task_section/task_section.vue'; |
|||
const tabList=[ |
|||
{name: '课程详情', id: 0}, {name: '上课记录', id: 1}, {name: '作业列表', id: 2}, |
|||
]; |
|||
export default { |
|||
components: { |
|||
'tab-bar': tabBar, |
|||
'sclass-record-section': sclass_record_section, |
|||
'task-section': task_section, |
|||
}, |
|||
data() { |
|||
return { |
|||
tabList, |
|||
curTabID: 0, |
|||
|
|||
taskList: [ |
|||
{ |
|||
// isShowExpande: false, |
|||
// expande: false, |
|||
work_content: "今年第三批高考综合改革省份迎来“新高考”，目前，全国实施新高考的省份达到了14个。实施新高考的省份，由于考试科目安", |
|||
}, |
|||
{ |
|||
// isShowExpande: false, |
|||
// expande: false, |
|||
work_content: "今年第三批高考综合改革省份迎来“新高考”，目前，全国实施新高考的省份达到了14个。实施新高考的省份，由于考试科目安排的不同，大部分在9日到10日间仍有部分科目的考试。今年新增的8个高考综合改革省份的考生，将在明天完成高中学业水平选考科目的考试后结束高考。", |
|||
}, |
|||
{ |
|||
// isShowExpande: false, |
|||
// expande: false, |
|||
work_content: "今年第三批高考综合改革省份迎来“新高考”，目前，全国实施新高考的省份达到了14个。实施新高考的省份，由于考试科目安今年第三批高考综合改革省份迎来“新高考”，目前省份，由于考试科目安", |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
tabChange: util.debounce(function(e){ |
|||
this.curTabID = e.id; |
|||
this.refreshList(); |
|||
|
|||
this.$nextTick(() => { |
|||
if(this.curTabID==2)this.$refs.refTask.initDesc(); |
|||
}); |
|||
}, 300, true), |
|||
refreshList(){ |
|||
|
|||
}, |
|||
toArrangeClass(){ |
|||
util.routeTo(`/subpackage/course/pages/arrange_class/arrange_class`,'nT'); |
|||
}, |
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #F2F2F7; |
|||
} |
|||
.student-course-detail{ |
|||
.scd-section{ |
|||
border-bottom: 26rpx solid #F2F2F7; |
|||
position: relative; |
|||
padding: 24rpx 24rpx 18rpx; |
|||
background-color: #FFFFFF; |
|||
.ss-status{ |
|||
position: absolute; |
|||
top: 24rpx; |
|||
right: 24rpx; |
|||
color: #009874; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
} |
|||
.ss-view{ |
|||
padding-right: 84rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
margin-left: 30rpx; |
|||
flex-shrink: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
.ss-line{ |
|||
margin-top: 18rpx; |
|||
padding: 28rpx 0 12rpx; |
|||
border-top: 2rpx solid #E5E5E5; |
|||
@include centerFlex(flex-end); |
|||
>view{ |
|||
padding: 12rpx 0; |
|||
width: 156rpx; |
|||
border-radius: 6rpx; |
|||
background-color: #009874; |
|||
color: #FFFFFF; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
.scd-tab{ |
|||
border-bottom: 2rpx solid #F2F2F7; |
|||
} |
|||
.scd-info{ |
|||
padding: 26rpx 44rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
.si-tit{ |
|||
margin: 0 2rpx 14rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
font-weight: 700; |
|||
} |
|||
.si-view{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
.si-mar{ |
|||
margin-top: 40rpx; |
|||
} |
|||
} |
|||
.scd-record{ |
|||
.sr-list{ |
|||
margin-bottom: 24rpx; |
|||
.sl-item{ |
|||
padding: 24rpx 44rpx 30rpx; |
|||
background-color: #FFFFFF; |
|||
>view{ |
|||
&:first-child{ |
|||
margin-bottom: 18rpx; |
|||
padding-bottom: 26rpx; |
|||
border-bottom: 2rpx solid #E8E8E8; |
|||
} |
|||
&+view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
>text{ |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
.si-box{ |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
&:first-child{ |
|||
color: #333333; |
|||
font-weight: 700; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
.sb-green{ |
|||
color: #009874; |
|||
} |
|||
.sb-gray{ |
|||
color: #9C9C9F; |
|||
} |
|||
.sb-red{ |
|||
color: #EA5061; |
|||
} |
|||
|
|||
} |
|||
.si-time{ |
|||
margin-top: 12rpx; |
|||
color: #9A9A9D; |
|||
font-size: 24rpx; |
|||
line-height: 34rpx; |
|||
} |
|||
.si-wei{ |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
.sr-sclass{ |
|||
padding: 20rpx 0 100rpx; |
|||
background-color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.scd-task{ |
|||
margin-top: 24rpx; |
|||
} |
|||
} |
|||
.scd-content{ |
|||
min-height: 100vh; |
|||
background-color: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<view class="manage-list"> |
|||
<block v-if="true"> |
|||
<view class="ml-head"> |
|||
<store-name></store-name> |
|||
<view class="mh-view"> |
|||
<image class="mv-icon" src="/static/images/icon/search.png"></image> |
|||
<input class="mv-ipt" :placeholder="plaTxt" /> |
|||
</view> |
|||
<tab-bar :tabList="tabList" :curTabID="curTabID" @change="tabChange"></tab-bar> |
|||
</view> |
|||
<view class="ml-list" v-for="(e,i) in 6" :key="i" v-if="true"> |
|||
<student-course-item :orderInfo="e" v-if="typeId == '0-0'"></student-course-item> |
|||
<private-reserve-item :orderInfo="e" v-if="typeId == '0-1'"></private-reserve-item> |
|||
<bclass-reserve-item :orderInfo="e" v-if="typeId == '0-2'"></bclass-reserve-item> |
|||
<class-manage-item :orderInfo="e" v-if="typeId == '0-3'"></class-manage-item> |
|||
</view> |
|||
<view class="no-item no-list" v-if="false"> |
|||
<image src="/subpackage/course/static/images/no_order.png"></image> |
|||
<view>{{ tipsText }}</view> |
|||
</view> |
|||
</block> |
|||
|
|||
<view class="no-list" v-if="false"> |
|||
<image src="/subpackage/course/static/images/no_order.png"></image> |
|||
<view>{{ tipsText }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
import { mapState } from 'vuex'; |
|||
import tabBar from '../../components/tab_bar/tab_bar.vue'; |
|||
import store_name from '../../components/store_name/store_name'; |
|||
import student_course_item from '../../components/manage/student_course_item/student_course_item.vue'; |
|||
import private_reserve_item from '../../components/manage/private_reserve_item/private_reserve_item.vue'; |
|||
import bclass_reserve_item from '../../components/manage/bclass_reserve_item/bclass_reserve_item.vue'; |
|||
import class_manage_item from '../../components/manage/class_manage_item/class_manage_item.vue'; |
|||
export default { |
|||
components: { |
|||
'tab-bar': tabBar, |
|||
'store-name': store_name, |
|||
'student-course-item': student_course_item, |
|||
'private-reserve-item': private_reserve_item, |
|||
'bclass-reserve-item': bclass_reserve_item, |
|||
'class-manage-item': class_manage_item, |
|||
}, |
|||
computed:{ |
|||
// ...mapState([ 'storeInfo' ]), |
|||
titleName(){ |
|||
let { typeId } = this; |
|||
if(typeId == '0-0')return '学员管理'; |
|||
if(typeId == '0-1')return '私教约课记录'; |
|||
if(typeId == '0-2')return '大班约课记录'; |
|||
if(typeId == '0-3')return '班级管理'; |
|||
return '订单管理列表'; |
|||
}, |
|||
tipsText(){ |
|||
let { typeId } = this; |
|||
if(typeId == '0-0')return '暂无学员'; |
|||
if(typeId == '0-1')return '暂无约课记录'; |
|||
if(typeId == '0-2')return '暂无约课记录'; |
|||
if(typeId == '0-3')return '暂无班级'; |
|||
return ''; |
|||
}, |
|||
plaTxt(){ |
|||
let { typeId } = this; |
|||
if(typeId == '0-0')return '请输入课程名称/学员姓名/电话查找'; |
|||
if(typeId == '0-1')return '请输入课程名称/学员姓名/电话查找'; |
|||
if(typeId == '0-2')return '请输入教练姓名查找'; |
|||
if(typeId == '0-3')return '请输入课程名称/班级名称查找'; |
|||
return ''; |
|||
}, |
|||
tabList(){ |
|||
let _list0 = [{name: '全部', id: 0}, {name: '进行中', id: 1}, {name: '已结束', id: 2}, {name: '已退款', id: 3}]; |
|||
let _list1 = [{name: '全部', id: 0}, {name: '待上课', id: 1}, {name: '已上课', id: 2}, {name: '已取消', id: 3}]; |
|||
let _list2 = [{name: '全部', id: 0}, {name: '待确认', id: 1}, {name: '待上课', id: 2}, {name: '已上课', id: 3}, {name: '已取消', id: 4}]; |
|||
let _list3 = [{name: '全部', id: 0}, {name: '成班中', id: 1}, {name: '进行中', id: 2}, {name: '已结束', id: 3}, {name: '失败', id: 4}]; |
|||
|
|||
let { typeId } = this; |
|||
if(typeId == '0-0')return _list0; |
|||
if(typeId == '0-1')return _list1; |
|||
if(typeId == '0-2')return _list2; |
|||
if(typeId == '0-3')return _list3; |
|||
return []; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
curTabID: 0, |
|||
page: 1, |
|||
typeId: "", |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
// let _query = util.jsonPar(options.query); |
|||
// this.optionsQuery = _query |
|||
this.typeId = options.type_id || '' |
|||
this.$nextTick(_=>{ |
|||
uni.setNavigationBarTitle({ |
|||
title: this.titleName |
|||
}) |
|||
// this.getCommentList({}); |
|||
}) |
|||
}, |
|||
methods: { |
|||
tabChange: util.debounce(function(e){ |
|||
this.curTabID = e.id; |
|||
this.refreshList(); |
|||
}, 300, true), |
|||
refreshList(){ |
|||
this.page = 1; |
|||
// this.subList = []; |
|||
// this.getSubscribeList({}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #F2F2F7; |
|||
} |
|||
.manage-list{ |
|||
position: relative; |
|||
padding-top: 292rpx; |
|||
padding-bottom: 24rpx; |
|||
.ml-head{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 750rpx; |
|||
background-color: #FFFFFF; |
|||
border-bottom: 2rpx solid #F2F2F7; |
|||
z-index: 6; |
|||
.mh-view{ |
|||
margin: 0 24rpx; |
|||
padding: 0 20rpx; |
|||
flex-grow: 1; |
|||
height: 92rpx; |
|||
border-radius: 10rpx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(flex-start); |
|||
.mv-icon{ |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
.mv-ipt{ |
|||
flex-grow: 1; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
} |
|||
} |
|||
} |
|||
.ml-list{ |
|||
margin-top: 24rpx; |
|||
} |
|||
.no-item{ |
|||
margin-top: 128rpx; |
|||
} |
|||
.no-list{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-direction: column; |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
>image{ |
|||
width: 346rpx; |
|||
height: 346rpx; |
|||
} |
|||
>view{ |
|||
margin: 46rpx 0; |
|||
color: #9C9C9F; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<view class="task-detail"> |
|||
<view class="td-info"> |
|||
<view class="td-txt">布置作业时间：{{formatDate({date: pageInfo.created_at, partition: '/'}) || '-'}}</view> |
|||
<view class="td-txt">发布人：{{pageInfo.work_coach_name || '-'}}</view> |
|||
<view class="td-txt td-tit">作业内容</view> |
|||
<view class="td-txt">{{pageInfo.work_content || '-'}}</view> |
|||
<view class="td-line"> |
|||
<view>视频链接：{{pageInfo.work_video || '无'}}</view> |
|||
<view @click="copyOrder(pageInfo.work_video)">复制</view> |
|||
</view> |
|||
<image class="td-img" mode="aspectFill" v-for="(e,i) in pageInfo.work_imgs" :key="i" :src="e || ''" @tap="previewImageWork(e)"></image> |
|||
</view> |
|||
|
|||
<view class="td-info"> |
|||
<view class="td-txt">作业提交时间：{{pageInfo.student_work_at!=''?formatDate({date: pageInfo.student_work_at, partition: '/'}) : ''}}</view> |
|||
<view class="td-txt">提交人：{{pageInfo.student_name || '-'}}</view> |
|||
<view class="td-txt td-tit">完成情况</view> |
|||
<view class="td-txt">{{pageInfo.student_work_content ||'无'}}</view> |
|||
<view class="td-line"> |
|||
<view>视频链接：{{pageInfo.student_work_video || '无'}}</view> |
|||
<view @click="copyOrder(pageInfo.student_work_video)">复制</view> |
|||
</view> |
|||
<image class="td-img" mode="aspectFill" v-for="(e,i) in pageInfo.student_work_imgs" :key="i" :src="e || ''" @tap="previewImageStu(e)"></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
pageInfo: {}, |
|||
} |
|||
}, |
|||
async onLoad(options){ |
|||
// let _query = util.jsonPar(options.query); |
|||
// this.pageInfo = _query |
|||
// this.getWorkInfo(options.id) |
|||
}, |
|||
methods: { |
|||
formatDate: util.formatDate, |
|||
copyOrder(data){ |
|||
uni.setClipboardData({ data }) |
|||
}, |
|||
previewImageWork(img){ |
|||
uni.previewImage({ |
|||
current: img, |
|||
urls: this.pageInfo.work_imgs |
|||
}) |
|||
}, |
|||
// 查看大图片 |
|||
previewImageStu(img) { |
|||
// var current = e.target.dataset.src |
|||
uni.previewImage({ |
|||
current: img, |
|||
urls: this.pageInfo.student_work_imgs |
|||
}) |
|||
}, |
|||
|
|||
// 作业 - 详情 |
|||
getWorkInfo(id){ |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.student.workInfo, |
|||
data: { |
|||
id, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.pageInfo = res |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
// page{ |
|||
// background: #F2F2F7; |
|||
// } |
|||
.task-detail{ |
|||
.td-info{ |
|||
margin-bottom: 12rpx; |
|||
padding: 24rpx 0 30rpx; |
|||
background-color: #FFFFFF; |
|||
.td-txt{ |
|||
margin: 0 60rpx 0 24rpx; |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.td-tit{ |
|||
font-weight: 700; |
|||
margin: 44rpx 24rpx 20rpx; |
|||
} |
|||
.td-line{ |
|||
margin: 30rpx 60rpx 0 26rpx; |
|||
flex-grow: 1; |
|||
padding: 30rpx 4rpx 6rpx; |
|||
border-top: 2rpx solid #D8D8D8; |
|||
@include centerFlex(flex-start); |
|||
>view{ |
|||
font-size: 28rpx; |
|||
&:first-child{ |
|||
color: #9A9A9D; |
|||
line-height: 40rpx; |
|||
@include textHide(1); |
|||
} |
|||
&:nth-child(2){ |
|||
margin-left: 20rpx; |
|||
flex-shrink: 0; |
|||
color: #009874; |
|||
} |
|||
} |
|||
} |
|||
.td-img{ |
|||
margin: 24rpx 16rpx 0 30rpx; |
|||
display: inline-block; |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<view class="task-finish-list"> |
|||
<!-- v-if="workList.length>0" --> |
|||
<block > |
|||
<view class="tfl-box"> |
|||
<view>布置作业时间：{{formatDate({date: pageInfo.created_at, partition: '/'}) || '-'}}</view> |
|||
<view>发布人：{{pageInfo.work_coach_name||'-'}}</view> |
|||
</view> |
|||
<!-- workList --> |
|||
<view class="tfl-list" v-for="(e,i) in 3" :key="i"> |
|||
<view class="tl-item" @click="toDetail(e)"> |
|||
<view class="ti-info"> |
|||
<view>{{e.student_name||'-'}}（{{e.student_gender||'-'}}）</view> |
|||
<view>{{'-'}}</view> |
|||
</view> |
|||
<view class="ti-section"> |
|||
<view v-if="e.work_status==1">{{formatDate({date: pageInfo.student_work_at,}) ||'-'}}</view> |
|||
<view class="ts-line"> |
|||
<view :class="[e.work_status==1?'':'tl-txt']">{{e.work_status==1?'已完成':'未完成'}}</view> |
|||
<image src="/subpackage/course/static/images/icon/arrow_black.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view class="fixed-btn"> |
|||
<view hover-class="hover-active" @click="batchRemind">批量提醒完成</view> |
|||
</view> --> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/utils/util'; |
|||
import boxServer from '../../js/course_server'; |
|||
import { BOX_API } from '../../js/course_api'; |
|||
export default { |
|||
computed:{ |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
pageInfo: {}, |
|||
workList: [], |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
// let _query = util.jsonPar(options.query); |
|||
// this.pageInfo = _query |
|||
// let { work_number } = options |
|||
// this.pageInfo = options |
|||
// this.$nextTick(_=>{ |
|||
// this.getClassWork() |
|||
// }) |
|||
}, |
|||
methods: { |
|||
formatDate: util.formatDate, |
|||
// 作业-完成情况 |
|||
getClassWork(){ |
|||
let { work_number } = this.pageInfo |
|||
util.showLoad(); |
|||
boxServer.get({ |
|||
url: BOX_API.class.classWork, |
|||
data: { |
|||
work_number, |
|||
}, |
|||
failMsg: '加载失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
let _list = res || [] |
|||
this.workList = _list |
|||
if(_list.length>0){ |
|||
this.pageInfo["created_at"] = _list[0].created_at |
|||
this.pageInfo["work_coach_name"] = _list[0].work_coach_name |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
toDetail(item){ |
|||
util.routeTo(`/subpackage/manage/pages/student/task_detail/task_detail?id=${item.id}`,'nT') |
|||
}, |
|||
|
|||
// 批量提醒 |
|||
batchRemind(){ |
|||
util.showNone('开发中！'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background: #F2F2F7; |
|||
} |
|||
.task-finish-list{ |
|||
position: relative; |
|||
padding-bottom: 160rpx; |
|||
.tfl-box{ |
|||
flex-grow: 1; |
|||
padding: 24rpx 22rpx; |
|||
background-color: #FFFFFF; |
|||
border-bottom: 12rpx solid #F2F2F7; |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
} |
|||
} |
|||
.tfl-list{ |
|||
.tl-item{ |
|||
padding: 20rpx 36rpx 20rpx 46rpx; |
|||
background-color: #FFFFFF; |
|||
border-bottom: 2rpx solid #F2F2F7; |
|||
@include centerFlex(space-between); |
|||
.ti-info{ |
|||
>view{ |
|||
color: #1A1A1A; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
} |
|||
} |
|||
.ti-section{ |
|||
color: #9C9C9F; |
|||
font-size: 28rpx; |
|||
line-height: 52rpx; |
|||
.ts-time{ |
|||
|
|||
} |
|||
.ts-line{ |
|||
@include centerFlex(flex-end); |
|||
>image{ |
|||
margin: 0 2rpx 0 20rpx; |
|||
flex-shrink: 0; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
.tl-txt{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 20 | Height: 20 | Size: 624 B |
|
After Width: 24 | Height: 24 | Size: 653 B |
|
After Width: 34 | Height: 34 | Size: 786 B |
|
After Width: 34 | Height: 34 | Size: 667 B |
|
After Width: 32 | Height: 32 | Size: 1.1 KiB |
|
After Width: 22 | Height: 22 | Size: 428 B |
|
After Width: 346 | Height: 346 | Size: 14 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue