308 lines
9.9 KiB
Vue
308 lines
9.9 KiB
Vue
<template>
|
||
<view class="page flex-col">
|
||
<view class="header">
|
||
<headers titles="预约">
|
||
<uni-icons type="left" color="#000000" size="22px"></uni-icons>
|
||
</headers>
|
||
</view>
|
||
<view class="form_">
|
||
<view class="" style="background-color: white;padding: 10rpx 15rpx;border-radius: 15rpx">
|
||
<u-form labelPosition="left" labelWidth="auto" labelAlign="center" :model="appointmentInfo"
|
||
:rules="rules" ref="uForm">
|
||
<u-form-item label="课程名称" prop="courseName" @click="showCourse = true" ref="item1">
|
||
<u-input v-model="appointmentInfo.courseName" disabled disabledColor="#ffffff"
|
||
placeholder="请选择课程" border="none"></u-input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="训练类型" prop="courseType" ref="item1">
|
||
<u-input v-model="appointmentInfo.courseType" disabled disabledColor="#ffffff"
|
||
placeholder="请选择训练类型" border="none"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="选择科目" prop="subject" ref="item1">
|
||
<u-input v-model="appointmentInfo.subjectStr" disabled disabledColor="#ffffff"
|
||
placeholder="请选择科目" border="none"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="教练名称" prop="coachName" ref="item1">
|
||
<u-input v-model="appointmentInfo.coachName" disabled disabledColor="#ffffff"
|
||
placeholder="请选择教练" border="none"></u-input>
|
||
</u-form-item>
|
||
</u-form>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="form_">
|
||
<view class="" style="background-color: white;padding: 10rpx 15rpx;border-radius: 15rpx">
|
||
<u-form labelPosition="left" labelWidth="auto" :model="appointmentInfo" :rules="rules" ref="uForm">
|
||
<u-form-item label="累计训练时长" prop="name" ref="item1">
|
||
<u-input v-model="appointmentInfo.trainTime" disabled disabledColor="#ffffff"
|
||
border="none"></u-input>
|
||
</u-form-item>
|
||
<u-form-item label="日期选择" prop="dateStr" @click="showDate = true;"
|
||
ref="item1">
|
||
<u-input v-model="appointmentInfo.dateStr" disabled disabledColor="#ffffff"
|
||
placeholder="请选择日期" border="none"></u-input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="时间范围" prop="time" borderBottom @click="showTime = true;"
|
||
ref="item1" :borderBottom="false">
|
||
<u-input v-model="appointmentInfo.time" disabled disabledColor="#ffffff"
|
||
placeholder="请选择时间范围" border="none"></u-input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
<u-picker :show="showCourse" @close="showCourse = false" keyName="courseName" @cancel="showCourse = false"
|
||
@confirm="confirmCourse" :columns="[courseList]"></u-picker>
|
||
<u-picker :show="showTime" @close="showTime = false" keyName="label" @cancel="showTime = false"
|
||
@confirm="confirmTime" :columns="[timeColumns]"></u-picker>
|
||
<u-calendar :show="showDate" @confirm="confirmDate" @close="showDate = false"></u-calendar>
|
||
<view class="section_4 flex-col bottom_">
|
||
<view class="text-wrapper_5 flex-col" @click="submit">
|
||
<text class="text_10">开始预约</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import headers from "@/components/header/headers.vue";
|
||
import request from "@/utils/request";
|
||
import {getDictDataByType} from "@/utils/utils";
|
||
import {getLocalUserInfo} from "@/utils/auth";
|
||
|
||
export default {
|
||
components: {
|
||
headers
|
||
},
|
||
data() {
|
||
return {
|
||
constants: {},
|
||
appointmentInfo: {
|
||
subjectStr: '',
|
||
courseName: '',
|
||
coachName: '',
|
||
trainTime: '',
|
||
dateStr: '',
|
||
time: '',
|
||
coachId: '',
|
||
}, // 预约信息
|
||
showCourse: false,
|
||
courseList: [], //报名的课程信息
|
||
showDate: false,
|
||
showTime: false,
|
||
tenantId: '',
|
||
subjectColumns: [{
|
||
label: '科目二',
|
||
value: 2
|
||
},
|
||
{
|
||
label: '科目三',
|
||
value: 3
|
||
},
|
||
],
|
||
//时间段数组 查询字典
|
||
timeColumns: '',
|
||
showSubject: false,
|
||
rules: {
|
||
time: [{
|
||
required: true,
|
||
message: '请选择时间',
|
||
trigger: 'change'
|
||
}],
|
||
courseName: [{
|
||
required: true,
|
||
message: '请选择课程',
|
||
trigger: 'change'
|
||
}],
|
||
dateStr: [{
|
||
required: true,
|
||
message: '请选择日期',
|
||
trigger: 'change'
|
||
}],
|
||
coachName: [{
|
||
required: true,
|
||
message: '请选择教练',
|
||
trigger: 'change'
|
||
}],
|
||
subject: [{
|
||
required: true,
|
||
message: '请选择科目',
|
||
trigger: 'change'
|
||
}],
|
||
}
|
||
};
|
||
},
|
||
async onLoad() {
|
||
this.getLoginUserCourseInfoList()
|
||
this.timeColumns = await getDictDataByType('school_reserv_time');
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
goback() {
|
||
uni.navigateBack()
|
||
},
|
||
confirmCourse(e) {
|
||
this.restForm()
|
||
this.appointmentInfo.courseId = e.value[0].courseId
|
||
this.appointmentInfo.courseName = e.value[0].courseName
|
||
this.appointmentInfo.courseType = e.value[0].courseType
|
||
this.tenantId = e.value[0].tenantId
|
||
this.appointmentInfo.userName = e.value[0].userName
|
||
this.appointmentInfo.userId = e.value[0].userId
|
||
this.getAllByCourseId(e.value[0].courseId)
|
||
this.showCourse = false
|
||
},
|
||
confirmDate(e) {
|
||
this.appointmentInfo.dateStr = e[0]
|
||
this.showDate = false
|
||
},
|
||
confirmTime(e) {
|
||
this.appointmentInfo.time = e.value[0].label
|
||
this.showTime = false
|
||
},
|
||
restForm() {
|
||
this.appointmentInfo = {
|
||
subjectStr: '',
|
||
courseName: '',
|
||
coachName: '',
|
||
trainTime: '',
|
||
}
|
||
},
|
||
// 查询所有报名科目
|
||
getLoginUserCourseInfoList() {
|
||
request({
|
||
url: '/app-api/small/drive/school-course-order/getCourseByLoginUser',
|
||
method: 'GET'
|
||
}).then(res => {
|
||
if (res.data.length == 0) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先报名课程',
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
uni.navigateBack()
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
this.courseList = res.data
|
||
})
|
||
},
|
||
//根据课程id查询报名进度
|
||
async getAllByCourseId(courseId) {
|
||
const res = await request({
|
||
url: '/app-api/process/getAllByCourseId',
|
||
method: 'GET',
|
||
params: {
|
||
courseId: courseId
|
||
}
|
||
})
|
||
// 找出正在训练中的科目并且科目不是1和4
|
||
// && item.subject != 1 && item.subject != 4
|
||
const progress = res.data.filter(item => {
|
||
return item.status == 1 && item.subject != 1 && item.subject != 4
|
||
})
|
||
if (progress.length > 0) {
|
||
// 找出正在训练中的科目并且科目不是1和4
|
||
const subject = progress[0].subject
|
||
this.$nextTick(() => {
|
||
this.appointmentInfo.subject = subject
|
||
this.appointmentInfo.subjectStr = this.subjectColumns.find(item => item.value == subject).label
|
||
})
|
||
this.appointmentInfo.coachName = progress[0].coachName
|
||
this.appointmentInfo.coachId = progress[0].coachId
|
||
this.appointmentInfo.trainTime = progress[0].trainTime
|
||
} else {
|
||
// 弹窗只能预约训练科目二
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '只能预约训练科目二和科目三',
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
uni.navigateBack()
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 查询训练地址
|
||
getTrainAddress() {
|
||
request({
|
||
url: '/app-api/small/address/getList',
|
||
method: 'GET',
|
||
params: {
|
||
type: 0,
|
||
subject: this.appointmentInfo.subject,
|
||
tenantId: this.tenantId
|
||
}
|
||
}).then(res => {
|
||
console.log(res)
|
||
})
|
||
},
|
||
submit() {
|
||
// 获取当前登陆人
|
||
this.$refs.uForm.validate().then(res => {
|
||
const userInfo = getLocalUserInfo()
|
||
const data = {
|
||
...this.appointmentInfo,
|
||
userId: userInfo.id,
|
||
userName: userInfo.nickname,
|
||
tenantId: this.tenantId,
|
||
reservDay: this.appointmentInfo.dateStr,
|
||
reservTime: this.appointmentInfo.time,
|
||
subject: this.appointmentInfo.subject,
|
||
}
|
||
request({
|
||
url: '/app-api/reservation-course/create',
|
||
method: 'PUT',
|
||
data: data
|
||
}).then(res => {
|
||
console.log(res)
|
||
uni.showToast({
|
||
title: '预约成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
setTimeout(() => {
|
||
uni.$emit('refresh');
|
||
uni.navigateBack()
|
||
}, 2000)
|
||
})
|
||
}).catch(errors => {
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang='scss'>
|
||
@import '../common/common.scss';
|
||
@import './assets/style/index.rpx.scss';
|
||
|
||
.bottom_ {
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 88px;
|
||
}
|
||
|
||
.form_ {
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
</style>
|