You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
13 KiB
388 lines
13 KiB
<template>
|
|
<view class="shift-application fixed-bot-padding">
|
|
<view class="a-warn">注：私教课以及教练预约的课程不可换班</view>
|
|
<view class="a-tit">我的换班</view>
|
|
<view class="a-ipts">
|
|
<picker :range="courseList" range-key="name" @change="courseChange">
|
|
<view class="i-view">
|
|
<input placeholder="请选择课程" disabled v-model="selectInfo.courseInfo.name" />
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
|
|
</view>
|
|
</picker>
|
|
<picker :range="classList" range-key="class_name" @change="classChange">
|
|
<view class="i-view">
|
|
<input placeholder="请选择班级" disabled v-model="selectInfo.classInfo.class_name" />
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
|
|
</view>
|
|
</picker>
|
|
<picker :range="coachList" range-key="name" @change="coachChange">
|
|
<view class="i-view">
|
|
<input placeholder="请选择换班教练" disabled v-model="selectInfo.coachInfo.name" />
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
|
|
</view>
|
|
</picker>
|
|
<!-- <picker :range="timeList" range-key="_time" @change="timeChange"> -->
|
|
<view class="i-view" @click="showTimeModal">
|
|
<input placeholder="请选择换班时间" disabled v-model="selectedTimeTxt" />
|
|
<image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
|
|
</view>
|
|
<!-- </picker> -->
|
|
</view>
|
|
<view class="a-tip">
|
|
<view>换班需要换班教练的时间为空闲。</view>
|
|
<view>换班后您的时间为空闲，记得前往我的时间。</view>
|
|
<view>管理您的时间哦。</view>
|
|
</view>
|
|
<view class="a-mask" v-if="isShowTimeModal">
|
|
<view class="m-content">
|
|
<scroll-view class="c-list" scroll-y="">
|
|
<view v-for="(e, i) in timeList" :key="i" :class="['l-item', tempSelectTimeID.includes(e.id)?'active':'']" @click="timeSelect(e)">{{e._time || '-'}}</view>
|
|
</scroll-view>
|
|
<view class="c-btns">
|
|
<view hover-class="hover-active" @click="isShowTimeModal = false">取消</view>
|
|
<view hover-class="hover-active" @click="confirmTimeSelected">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fixed-bot-btn"><view hover-class="hover-active" @click="submitBtn">提交换班申请</view></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import { API } from '../../../js/api';
|
|
import { servers } from '../../../js/server';
|
|
import util from '../../../utils/util';
|
|
export default {
|
|
computed: {
|
|
...mapState([ 'storeInfo' ]),
|
|
selectedTimeTxt(){
|
|
let { selectTimeIDS, timeList } = this;
|
|
let txtArr = timeList.filter(e=>selectTimeIDS.includes(e.id)).map(e=>e._time);
|
|
return txtArr.join(',') || '';
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
courseList: [], // 课程列表
|
|
classList: [], // 班级列表
|
|
coachList: [], // 教练列表
|
|
timeList: [], // 时间列表
|
|
selectTimeIDS: [], // 已选时间
|
|
tempSelectTimeID: [], // 临时选中
|
|
isShowTimeModal: false,
|
|
selectInfo: {
|
|
courseInfo: {
|
|
name: ''
|
|
},
|
|
classInfo: {
|
|
class_name: ''
|
|
},
|
|
coachInfo: {
|
|
name: ''
|
|
},
|
|
}
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.getCourseList({});
|
|
},
|
|
methods: {
|
|
submitBtn: util.debounce(function(){
|
|
let { courseInfo, classInfo, coachInfo } = this.selectInfo;
|
|
let { selectTimeIDS } = this;
|
|
if(!courseInfo.id || !classInfo.id || !coachInfo.id || selectTimeIDS.length<=0 )return util.showNone('请选择完整！');
|
|
util.showLoad();
|
|
servers.post({
|
|
url: API.addShiftWorkRecord,
|
|
data: {
|
|
course_id: courseInfo.id,
|
|
class_id: classInfo.id,
|
|
accept_coach_id: coachInfo.id,
|
|
course_duration_ids: selectTimeIDS,
|
|
},
|
|
isDefaultGet: false,
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
if(res.data.code == 0){
|
|
util.showModal({
|
|
title: '提示',
|
|
content: res.data.message || '操作成功！',
|
|
success: ele=>{
|
|
if(ele.confirm)util.routeTo(`/pages/shift/record/record`, 'nT')
|
|
}
|
|
})
|
|
}else{
|
|
util.showModal({
|
|
title: '提示',
|
|
content: res.data.message || '操作失败！'
|
|
})
|
|
}
|
|
})
|
|
.catch(util.hideLoad)
|
|
|
|
|
|
}, 300, 300),
|
|
showTimeModal(){
|
|
this.isShowTimeModal = true;
|
|
this.tempSelectTimeID = [...this.selectTimeIDS];
|
|
},
|
|
timeSelect(e){
|
|
let { tempSelectTimeID } = this;
|
|
this.tempSelectTimeID = tempSelectTimeID.includes(e.id) ?
|
|
tempSelectTimeID.filter(el=>el!=e.id) :
|
|
[...tempSelectTimeID, e.id];
|
|
},
|
|
confirmTimeSelected(){
|
|
this.selectTimeIDS = [...this.tempSelectTimeID];
|
|
this.isShowTimeModal = false;
|
|
},
|
|
// 教练切换
|
|
coachChange(e){
|
|
let { coachList, selectInfo } = this;
|
|
if(!selectInfo.classInfo.id)return util.showNone('请选择班级！');
|
|
let _coachInfo = coachList[e.detail.value] || {};
|
|
this.timeList = [];
|
|
this.selectTimeIDS = [];
|
|
this.selectInfo = {
|
|
...selectInfo,
|
|
coachInfo: _coachInfo
|
|
};
|
|
|
|
this.getShiftWorkClassTimes(selectInfo.courseInfo.id);
|
|
},
|
|
// 班级切换
|
|
classChange(e){
|
|
let { classList, selectInfo } = this;
|
|
if(!selectInfo.courseInfo.id)return util.showNone('请选择课程！');
|
|
let _classInfo = classList[e.detail.value] || {};
|
|
this.timeList = [];
|
|
this.selectTimeIDS = [];
|
|
this.selectInfo = {
|
|
...selectInfo,
|
|
classInfo: _classInfo,
|
|
coachInfo: {
|
|
name: ''
|
|
}
|
|
};
|
|
this.getCoachList();
|
|
},
|
|
// 课程切换
|
|
courseChange(e){
|
|
let { courseList } = this;
|
|
let _courseInfo = courseList[e.detail.value] || {};
|
|
this.timeList = [];
|
|
this.selectTimeIDS = [];
|
|
this.selectInfo = {
|
|
courseInfo: _courseInfo,
|
|
classInfo: {
|
|
class_name: ''
|
|
},
|
|
coachInfo: {
|
|
name: ''
|
|
}
|
|
};
|
|
this.getClassList( _courseInfo.id );
|
|
|
|
},
|
|
|
|
// 时间列表
|
|
getShiftWorkClassTimes(courseId){
|
|
util.showLoad();
|
|
servers.get({
|
|
url: API.getShiftWorkClassTimes,
|
|
data: { courseId },
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
let _list = res || [];
|
|
|
|
this.timeList = _list.map(e=>{
|
|
return {
|
|
...e,
|
|
_time: `${e.date} ${e.start_duration}~${e.end_duration}`
|
|
}
|
|
});
|
|
})
|
|
},
|
|
// 教练列表
|
|
getCoachList(){
|
|
util.showLoad();
|
|
let { storeInfo } = this;
|
|
servers.get({
|
|
url: API.getCoachList,
|
|
data: { stadium_id: storeInfo.id },
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
let _list = res.list || [];
|
|
this.coachList = _list;
|
|
})
|
|
},
|
|
// 班级列表
|
|
getClassList( course_id ){
|
|
util.showLoad();
|
|
servers.get({
|
|
url: API.course.getClassList,
|
|
data: { course_id, type: 0 },
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
let _list = res.list || [];
|
|
this.classList = _list;
|
|
console.warn(_list)
|
|
})
|
|
},
|
|
// 课程列表
|
|
getCourseList({
|
|
is_experience_class = 0,
|
|
kind = '',
|
|
}){
|
|
let { storeInfo } = this;
|
|
util.showLoad();
|
|
servers.get({
|
|
url: API.course.courseList,
|
|
data: {
|
|
stadium_id: storeInfo.id,
|
|
is_experience_class,
|
|
kind,
|
|
have_class_way: 2,
|
|
},
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
let _list = res.list || [];
|
|
this.courseList = _list;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~style/public.scss";
|
|
.a-mask{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
background-color: rgba($color: #000000, $alpha: .5);
|
|
.m-content{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80%;
|
|
height: 800upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
padding: 24upx;
|
|
.c-list{
|
|
margin-bottom: 24upx;
|
|
height: 600upx;
|
|
.l-item{
|
|
margin-bottom: 12upx;
|
|
height: 80upx;
|
|
border: 2upx solid #d8d8d8;
|
|
color: #333;
|
|
line-height: 76upx;
|
|
text-align: center;
|
|
font-size: 36upx;
|
|
|
|
border-radius: 10upx;
|
|
&.active{
|
|
border-color: $themeColor;
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
.c-btns{
|
|
@include centerFlex(center);
|
|
>view{
|
|
margin: 0 24upx;
|
|
width: 200upx;
|
|
height: 88upx;
|
|
line-height: 88upx;
|
|
text-align: center;
|
|
border-radius: 44upx;
|
|
background-color: $themeColor;
|
|
font-size: 32upx;
|
|
color: #fff;
|
|
border: 2upx solid $themeColor;
|
|
&:first-child{
|
|
color: $themeColor;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.shift-application{
|
|
|
|
}
|
|
.a-warn{
|
|
margin-bottom: 52upx;
|
|
height: 92upx;
|
|
line-height: 92upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: #FF873D;
|
|
background-color: rgba($color: #FF873D, $alpha: .2);
|
|
}
|
|
.a-tit{
|
|
line-height: 44upx;
|
|
text-align: center;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
|
|
}
|
|
.a-ipts{
|
|
padding-top: 24upx;
|
|
.i-view{
|
|
margin: 0 auto 24upx;
|
|
width: 538upx;
|
|
height: 88upx;
|
|
border: 2upx solid #d8d8d8;
|
|
border-radius: 10upx;
|
|
padding: 0 20upx;
|
|
@include centerFlex(space-between);
|
|
>input{
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
>image{
|
|
margin-left: 20upx;
|
|
flex-shrink: 0;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.a-tip{
|
|
margin: 0 auto;
|
|
width: 538upx;
|
|
>view{
|
|
font-size: 26upx;
|
|
line-height: 36upx;
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
.fixed-bot-btn{
|
|
border-top: 2upx solid #D8D8D8;
|
|
}
|
|
|
|
</style>
|