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.
335 lines
7.8 KiB
335 lines
7.8 KiB
<!--课程-详情-->
|
|
<template>
|
|
<view class="main_box">
|
|
<view class="main_section">
|
|
<view class="section_1">
|
|
<view class="title_box">{{infoData.courses_name}}</view>
|
|
<view class="ul">
|
|
<view class="li">
|
|
<view class="title">课程名称</view>
|
|
<view class="content">{{infoData.courses_name}}</view>
|
|
</view>
|
|
|
|
<view class="li">
|
|
<view class="title">班级</view>
|
|
<view class="content">{{infoData.classes_name}}</view>
|
|
</view>
|
|
|
|
<view class="li">
|
|
<view class="title">上课时间</view>
|
|
<view class="content">{{infoData.date_time}} {{infoData.time_slot.replace(',', '-')}}</view>
|
|
</view>
|
|
|
|
<view class="li">
|
|
<view class="title">上课地址</view>
|
|
<view class="content">{{infoData.address}}</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="li">
|
|
<view class="title">教练</view>
|
|
<view class="content">{{infoData.staff_name}}</view>
|
|
</view>
|
|
|
|
<view class="li">
|
|
<view class="title">教练号码</view>
|
|
<view class="content">{{infoData.staff_phone}}</view>
|
|
</view>
|
|
|
|
<view class="li">
|
|
<view class="title">扣除课时</view>
|
|
<view class="content">{{infoData.hour}}个课时</view>
|
|
</view>
|
|
|
|
<!--1未上课 2已上课-->
|
|
<view class="state_box" v-if="infoData.status == 2">
|
|
<view>已上</view>
|
|
</view>
|
|
|
|
<view class="state_box_btn" v-if="infoData.status != 2">
|
|
<!--sign_status字段| 0未签到 1已签到 2请假-->
|
|
<view v-if="!['1','2'].includes(String(infoData.sign_status))" @click="askForLeave(1)">请假</view>
|
|
|
|
<view v-else @click="askForLeave(2)">取消请假</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 请假模态框-->
|
|
<fui-modal class="leave_section" :buttons="[{text: '取消',plain: true}, {text: '保存'}]" width="600" :show="leaveShow" @cancel="closeLeaveModal" @click="closeLeaveModal">
|
|
<text class="fui-title" style="font-size: 30rpx;padding: 15rpx">请假申请</text>
|
|
<view class="form_box" style="width: 100%;padding: 20rpx">
|
|
<view class="input_box" style="border: 1px solid #888888;font-size: 28rpx;">
|
|
<fui-input style="font-size: 28rpx;height: 60rpx;line-height: 60rpx;padding-left: 15rpx" :borderBottom="false" placeholder="请输入请假原因" v-model="leaveFormData.reason"></fui-input>
|
|
</view>
|
|
</view>
|
|
</fui-modal>
|
|
|
|
<!--取消请假-->
|
|
<fui-dialog :show="cancelLeaveShow" content="确定取消吗?" maskClosable @click="submitCancelLeave" @close="cancelLeaveShow=false"></fui-dialog>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import memberApi from '@/api/member.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
infoData:{},//详情数据
|
|
//筛选条件
|
|
filteredData: {
|
|
id: '',//课程id
|
|
},
|
|
|
|
leaveShow:false,//请假模态框显示状态
|
|
|
|
//请假表单
|
|
leaveFormData:{
|
|
schedules_id: '',//详情 id
|
|
courses_id: '',//课程id
|
|
reason: '',//请假原因
|
|
file_url: '',//附件
|
|
},
|
|
|
|
//取消请相关
|
|
cancelLeaveShow:false,//取消请假模态框显示状态
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.filteredData.id = options.id//课程id
|
|
this.leaveFormData.courses_id = options.id//课程id
|
|
|
|
},
|
|
onShow(){
|
|
this.init()
|
|
},
|
|
methods: {
|
|
//初始化
|
|
async init(){
|
|
await this.getInfo()
|
|
},
|
|
|
|
//获取课程详情
|
|
async getInfo(){
|
|
let res = await memberApi.courseInfo({
|
|
id: this.filteredData.id,
|
|
})
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.infoData = res.data
|
|
},
|
|
|
|
|
|
//打开课时详情页
|
|
openViewCourseInfo(item){
|
|
uni.navigateTo({
|
|
url: '/pages/coach/course/info'
|
|
})
|
|
},
|
|
|
|
//请假/取消请假 type|1=请求,2=取消请假
|
|
askForLeave(type){
|
|
if(type == 1){
|
|
//打开请假模态框
|
|
this.leaveShow = true
|
|
}else{
|
|
//取消请假
|
|
this.cancelLeaveShow = true
|
|
}
|
|
},
|
|
//打开请假模态框
|
|
openLeaveModal(){
|
|
this.leaveShow = true
|
|
},
|
|
//关闭请假模态框
|
|
closeLeaveModal(e){
|
|
if(e.index == 0){
|
|
//点击了取消
|
|
this.leaveFormData.reason = ''
|
|
}else{
|
|
//点击了确定
|
|
if (!this.leaveFormData.reason){
|
|
uni.showToast({
|
|
title: '请输入请假原因',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.submitLeave()//发送请假请求
|
|
}
|
|
this.leaveShow = false
|
|
},
|
|
//发送请假申请
|
|
async submitLeave(){
|
|
let data = {...this.leaveFormData}
|
|
let res = await memberApi.askForLeave(data)
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success'
|
|
})
|
|
//延迟1s执行
|
|
setTimeout(() => {
|
|
this.init()
|
|
}, 1000)
|
|
},
|
|
//发送取消请假申请
|
|
async submitCancelLeave(e){
|
|
if(e.index == 0){
|
|
//点击了取消按钮
|
|
return
|
|
}
|
|
|
|
uni.showToast({
|
|
title: '需要取消请假接口',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
|
|
//取消请假
|
|
let data = {...this.leaveFormData}
|
|
let res = await memberApi.askForLeave(data)
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success'
|
|
})
|
|
//延迟1s执行
|
|
setTimeout(() => {
|
|
this.init()
|
|
}, 1000)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.main_box{
|
|
background: #292929 ;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #292929;
|
|
.title{
|
|
padding: 20rpx 0;
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.main_section{
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 30rpx 24rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
|
|
.section_1{
|
|
border-radius: 22rpx;
|
|
padding: 20rpx 40rpx;
|
|
background: #fff;
|
|
color: #333333;
|
|
width: 100%;
|
|
.title_box{
|
|
padding: 10rpx;
|
|
padding-left: 30rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
.ul{
|
|
padding: 40rpx 10rpx;
|
|
padding-bottom: 350rpx;
|
|
margin-top: 10rpx;
|
|
border-top: 1px solid #555555;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40rpx;
|
|
|
|
position: relative;
|
|
|
|
.li{
|
|
display: flex;
|
|
gap: 72rpx;
|
|
.title{
|
|
width: 120rpx;
|
|
text-align: right;
|
|
}
|
|
.content{}
|
|
}
|
|
.state_box{
|
|
position: absolute;
|
|
bottom: 50rpx;
|
|
right: 10rpx;
|
|
view{
|
|
width: 154rpx;
|
|
height: 154rpx;
|
|
border-radius: 50%;
|
|
background-color: rgba(41,211,180,0.17);
|
|
color: rgba(41,211,180,1);
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
line-height: 150rpx;
|
|
transform: rotate(-35deg); /* 旋转 */
|
|
}
|
|
}
|
|
|
|
.state_box_btn{
|
|
position: absolute;
|
|
bottom: 50rpx;
|
|
right: 10rpx;
|
|
view{
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background-color: #00BE8C;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//请假模态框
|
|
.leave_section {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</style>
|