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.
482 lines
16 KiB
482 lines
16 KiB
<template>
|
|
<view class="course-list">
|
|
<view class="cl-tab">
|
|
<view :class="[curTabIdx == 0?'active':'']" @click="tabChange(0)">正式课</view>
|
|
<view :class="[curTabIdx == 1?'active':'']" @click="tabChange(1)">体验课</view>
|
|
</view>
|
|
<view class="cl-list">
|
|
<block v-for="(e, i) in courseList" :key="i">
|
|
<view class="cl-item" v-if="curTabIdx == 0">
|
|
<view class="ci-name">
|
|
<view>{{e.name || '-'}}</view>
|
|
<view>{{e.kind || '-'}}</view>
|
|
</view>
|
|
<view class="ci-lines" v-if="getCourseType(e.kind) === 0">
|
|
<text>班级数: </text>{{e.class_number || 0}}
|
|
</view>
|
|
<view class="ci-lines">
|
|
<text>学员人数: </text>{{e.join_person_number || 0}}
|
|
</view>
|
|
<view class="cl-btns">
|
|
<block v-if="getCourseType(e.kind) === 0">
|
|
<view hover-class="hover-active" v-if="e.have_class_way == 1" @click="orderCourseBtn(e)">预约上课</view>
|
|
<view hover-class="hover-active" @click="toClass(e)">班级</view>
|
|
</block>
|
|
<view hover-class="hover-active" v-if="getCourseType(e.kind) === 1" @click="toStudentList(e)">详情</view>
|
|
</view>
|
|
</view>
|
|
<view class="cl-ex-item" v-if="curTabIdx == 1">
|
|
<view class="ei-tit">
|
|
<view>{{e.name || '-'}}</view>
|
|
<view>{{e.experience_class_status || '-'}}</view>
|
|
</view>
|
|
<view class="ei-line"><text>预约人数:</text>{{e.experience_person_number || 0}}</view>
|
|
<view class="ei-btns">
|
|
<view hover-class="hover-active" @click="toExInfo(e)">查看详情</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
</view>
|
|
<view class="cl-mask" v-if="isOrderCourseModal">
|
|
<view class="cl-modal">
|
|
<view class="cm-line">
|
|
<view>选择班级</view>
|
|
<picker mode="selector" :range="orderClassList" range-key="class_name" @change="modalClassChange">
|
|
<view class="cl-frame">
|
|
<input disabled placeholder="请选择班级" v-model="orderInfo.classInfo.class_name" />
|
|
<image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="cm-line">
|
|
<view>选择日期</view>
|
|
<picker mode="date" @change="modalDateChange">
|
|
<view class="cl-frame">
|
|
<input disabled placeholder="请选择日期" v-model="orderInfo.date" />
|
|
<image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="cm-line">
|
|
<view>选择时间</view>
|
|
<view class="cl-content">
|
|
<picker mode="time" @change="modalStartTime">
|
|
<view class="cc-frame">
|
|
<input disabled placeholder="请选择时间" v-model="orderInfo.startTime"/>
|
|
<image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
|
|
</view>
|
|
</picker>
|
|
<view>-</view>
|
|
<picker mode="time" @change="modalEndTime">
|
|
<view class="cc-frame">
|
|
<input disabled placeholder="请选择时间" v-model="orderInfo.endTime"/>
|
|
<image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="cm-btns">
|
|
<view hover-class="hover-active" @click="isOrderCourseModal = false">取消</view>
|
|
<view hover-class="hover-active" @click="orderModalConfirm" >确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { API } from '../../../js/api'
|
|
import { servers } from '../../../js/server'
|
|
import util from '../../../utils/util'
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapState([ 'storeInfo' ]),
|
|
},
|
|
data(){
|
|
return {
|
|
curTabIdx: 0,
|
|
courseList: [],
|
|
isOrderCourseModal: false,
|
|
orderClassList: [], // 预约上课班级列表
|
|
orderInfo: { // 预约信息
|
|
classInfo: {
|
|
id: '',
|
|
class_name: '',
|
|
},
|
|
date: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
}
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.getCourseList({});
|
|
},
|
|
methods: {
|
|
orderModalConfirm: util.debounce(function(){
|
|
let { orderInfo } = this;
|
|
util.showLoad();
|
|
this.isOrderCourseModal = false;
|
|
servers.post({
|
|
url: API.course.addCoachBooking,
|
|
data: {
|
|
course_id: orderInfo.classInfo.course_id,
|
|
class_id: orderInfo.classInfo.id,
|
|
date: orderInfo.date || '',
|
|
start_duration: orderInfo.startTime || '',
|
|
end_duration: orderInfo.endTime || ''
|
|
},
|
|
isDefaultGet: false
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
if(res.data.code == 0){
|
|
util.showNone(res.data.message || '操作成功！');
|
|
}else{
|
|
util.showNone(res.data.message || '操作失败！');
|
|
}
|
|
})
|
|
}, 300, 300),
|
|
modalStartTime(e){
|
|
console.warn(e);
|
|
this.orderInfo.startTime = e.detail.value;
|
|
this.$nextTick(_=>this.$forceUpdate());
|
|
},
|
|
modalEndTime(e){
|
|
console.warn(e);
|
|
this.orderInfo.endTime = e.detail.value;
|
|
this.$nextTick(_=>this.$forceUpdate());
|
|
},
|
|
modalDateChange(e){
|
|
console.warn(e);
|
|
this.orderInfo.date = e.detail.value;
|
|
this.$nextTick(_=>this.$forceUpdate());
|
|
},
|
|
//
|
|
modalClassChange(e){
|
|
let { orderClassList } = this;
|
|
this.orderInfo.classInfo = orderClassList[e.detail.value];
|
|
this.$nextTick(_=>this.$forceUpdate());
|
|
},
|
|
// 体验
|
|
toExInfo(e){
|
|
util.routeTo(`/pages/course/experience/experience?course_id=${e.id}`, 'nT');
|
|
},
|
|
toClass(e){
|
|
console.warn(e);
|
|
let _query = {
|
|
course_id: e.id,
|
|
course_name: e.name,
|
|
}
|
|
util.routeTo(`/pages/course/class_list/class_list?query=${util.jsonStr(_query)}`, 'nT');
|
|
},
|
|
toStudentList(e){
|
|
let _query = {
|
|
course_id: e.id,
|
|
course_name: e.name,
|
|
}
|
|
util.routeTo(`/pages/course/student_list/student_list?query=${util.jsonStr(_query)}`, 'nT');
|
|
},
|
|
orderCourseBtn: util.debounce(function(e){
|
|
this.orderInfo = { // 预约信息
|
|
classInfo: {
|
|
id: '',
|
|
class_name: '',
|
|
},
|
|
date: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
}
|
|
util.showLoad();
|
|
servers.get({
|
|
url: API.course.getClassList,
|
|
data: {
|
|
course_id: e.id,
|
|
type: 0, // 0教练的班级，1换班的班级
|
|
},
|
|
failMsg: '加载班级失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
this.orderClassList = res.list || [];
|
|
this.isOrderCourseModal = true;
|
|
})
|
|
|
|
}, 300, 300),
|
|
// 课程类型映射 成班课(0)/私教课(1);
|
|
getCourseType(type = ''){
|
|
return ['成班课', '私教课'].findIndex(e=>e===type);
|
|
},
|
|
tabChange: util.debounce(function(i){
|
|
this.curTabIdx = i;
|
|
this.courseList = [];
|
|
this.getCourseList({
|
|
is_experience_class: i
|
|
})
|
|
},300,300),
|
|
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,
|
|
},
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
util.hideLoad();
|
|
let _list = res.list || [];
|
|
if(_list.length<=0)return util.showNone('没有更多！');
|
|
this.courseList = _list;
|
|
console.warn(res);
|
|
})
|
|
.catch(util.hideLoad)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~style/public.scss";
|
|
.course-list{
|
|
|
|
}
|
|
.cl-tab{
|
|
height: 96upx;
|
|
background-color: #fff;
|
|
@include centerFlex(space-around);
|
|
>view{
|
|
width: 160upx;
|
|
height: 64upx;
|
|
line-height: 64upx;
|
|
text-align: center;
|
|
border-radius: 32upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
&.active{
|
|
background-color: $themeColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.cl-list{
|
|
padding: 24upx;
|
|
.cl-item{
|
|
margin-bottom: 24upx;
|
|
padding: 30upx 20upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
.ci-name{
|
|
margin-bottom: 10upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
flex-grow: 1;
|
|
line-height: 44upx;
|
|
font-weight: 500;
|
|
font-size: 32upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
&:nth-child(2){
|
|
flex-shrink: 0;
|
|
margin-left: 10upx;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
.ci-lines{
|
|
margin-bottom: 10upx;
|
|
line-height: 52upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
>text{
|
|
margin-right: 12upx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
.cl-btns{
|
|
@include centerFlex(flex-end);
|
|
>view{
|
|
width: 192upx;
|
|
height: 72upx;
|
|
text-align: center;
|
|
line-height: 72upx;
|
|
border-radius: 36upx;
|
|
font-size: 28upx;
|
|
font-weight: 500;
|
|
background-color: $themeColor;
|
|
color: #fff;
|
|
&:not(:first-child){
|
|
margin-left: 24upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cl-ex-item{
|
|
margin-bottom: 24upx;
|
|
padding: 44upx 24upx 34upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
.ei-tit{
|
|
margin-bottom: 18upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
&+view{
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
font-size: 28upx;
|
|
color: #9A9A9D;
|
|
&.active{
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ei-line{
|
|
margin-bottom: 20upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
>text{
|
|
margin-right: 20upx;
|
|
color: #9A9A9D;
|
|
}
|
|
}
|
|
.ei-btns{
|
|
@include centerFlex(flex-end);
|
|
>view{
|
|
width: 192upx;
|
|
height: 72upx;
|
|
line-height: 68upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
border: 2upx solid $themeColor;
|
|
border-radius: 36upx;
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.cl-mask{
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba($color: #000000, $alpha: .5);
|
|
}
|
|
.cl-modal{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 660upx;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 10upx;
|
|
padding: 50upx 34upx;
|
|
background-color: #fff;
|
|
.cm-line{
|
|
margin-bottom: 24upx;
|
|
@include centerFlex(flex-start);
|
|
>view:first-child{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-right: 14upx;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
.cl-frame{
|
|
padding: 0 26upx;
|
|
width: 460upx;
|
|
height: 88upx;
|
|
border: 2upx solid #D8D8D8;
|
|
border-radius: 10upx;
|
|
@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;
|
|
}
|
|
}
|
|
.cl-content{
|
|
width: 460upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
}
|
|
.cc-frame{
|
|
padding: 0 12upx;
|
|
height: 88upx;
|
|
width: 212upx;
|
|
border: 2upx solid #D8D8D8;
|
|
border-radius: 10upx;
|
|
@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;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.cm-btns{
|
|
@include centerFlex(center);
|
|
>view{
|
|
margin: 0 14upx;
|
|
height: 88upx;
|
|
width: 240upx;
|
|
line-height: 84upx;
|
|
text-align: center;
|
|
border-radius: 44upx;
|
|
border: 2upx solid #D8D8D8;
|
|
font-size: 32upx;
|
|
color: #9A9A9D;
|
|
&+view{
|
|
background-color: $themeColor;
|
|
border-color: $themeColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|