233 lines
7.0 KiB
Vue
233 lines
7.0 KiB
Vue
<template>
|
|
<view style="background-color: #242A38; height: auto; min-height: 100vh;">
|
|
<view class="nickname-pop">
|
|
<text class="nickname-label">预约练车</text>
|
|
<view class="nickname-input margin-bottom">
|
|
<text style="color: #d2c3af; width: 160rpx;">教练名称</text>
|
|
<input class="input-style" maxlength="10" v-model.trim="postData.instructorName" readonly
|
|
border="surround" :disabled="true" />
|
|
</view>
|
|
<view class="nickname-input margin-bottom">
|
|
<text style="color: #d2c3af; width: 160rpx;">预约项目</text>
|
|
<input class="input-style" placeholder="点击选择预约项目" v-model.trim=" postData.category"
|
|
@click="categoryShow = true" :readonly="true" border="surround" :disabled="true" />
|
|
<u-picker @confirm="chooseCategory" :show="categoryShow" :columns="categoryColumns"
|
|
@cancel="closePicker"></u-picker>
|
|
|
|
</view>
|
|
<view class="nickname-input margin-bottom">
|
|
<text style="color: #d2c3af; width: 160rpx;">预约日期</text>
|
|
<u-datetime-picker :show="appointmentDateShow" v-model="minDate" :maxDate="maxDate" :minDate="minDate"
|
|
confirmColor="#242a38" @confirm="appointmentDateConfirm" @cancel="appointmentDateShow = false"
|
|
mode="date" visibleItemCount="5" itemHeight="80"></u-datetime-picker>
|
|
<input class="input-style" @click="appointmentDateShow = true" :readonly="true"
|
|
v-model.trim="postData.appointmentDate" placeholder="点击选择预约日期" border="surround" :disabled="true" />
|
|
</view>
|
|
<view class="nickname-input margin-bottom">
|
|
<text style="color: #d2c3af; width: 160rpx;">预约时间</text>
|
|
<input class="input-style" @click="intervalShow = true" :disabled="true" :readonly="true"
|
|
v-model.trim="postData.appointmentInterval" placeholder="点击选择预约时间段" border="surround" />
|
|
<u-picker @confirm="chooseInterval" :show="intervalShow" :columns="intervalColumns"
|
|
@cancel="closePicker"></u-picker>
|
|
</view>
|
|
|
|
<view class="nickname-input margin-bottom">
|
|
<text style="color: #d2c3af; width: 160rpx;">姓名</text>
|
|
<input class="input-style" maxlength="10" v-model.trim="postData.realName" placeholder="请输入姓名"
|
|
border="surround" />
|
|
</view>
|
|
<view class="nickname-input margin-bottom ">
|
|
<text style="color: #d2c3af; width: 160rpx;">电话</text>
|
|
<input class="input-style" maxlength="11" v-model.trim="postData.phoneNumber" placeholder="请输入电话"
|
|
border="surround" />
|
|
</view>
|
|
|
|
<move-verify class="margin" @result='verifyResult' ref="verifyElement"></move-verify>
|
|
|
|
<view class="button-style">
|
|
<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))" text="提交"
|
|
throttleTime="3000" @click="addWx" :disabled="!resultData.flag"
|
|
:customStyle="{color:'#000',height:'60rpx'}"></u-button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moveVerify from "@/subSchoolPages/helang-moveVerify/helang-moveVerify"
|
|
export default {
|
|
data() {
|
|
return {
|
|
postData: {
|
|
realName: null,
|
|
phoneNumber: '',
|
|
appointmentDate: null,
|
|
appointmentInterval: '',
|
|
instructorId: '',
|
|
instructorName: '',
|
|
category: '',
|
|
},
|
|
categoryShow: false,
|
|
categoryColumns: [
|
|
['科目二', '科目三']
|
|
],
|
|
intervalShow: false,
|
|
intervalColumns: [
|
|
['上午', '下午', '全天']
|
|
],
|
|
appointmentDateShow: false,
|
|
maxDate: null,
|
|
minDate: null,
|
|
carRecordDatePickerShow: false,
|
|
resultData: {}
|
|
}
|
|
},
|
|
components: {
|
|
"move-verify": moveVerify
|
|
},
|
|
onLoad(option) {
|
|
this.postData.instructorId = option.instructorId
|
|
this.postData.instructorName = decodeURIComponent(option.instructorName)
|
|
this.getMaxDateAndMinDate()
|
|
this.getUserInfo()
|
|
},
|
|
methods: {
|
|
/* 校验结果回调函数 */
|
|
verifyResult(res) {
|
|
console.log(res);
|
|
this.resultData = res;
|
|
},
|
|
/* 校验插件重置 */
|
|
verifyReset() {
|
|
this.$refs.verifyElement.reset();
|
|
/* 删除当前页面的数据 */
|
|
this.resultData = {};
|
|
},
|
|
// 项目选择器
|
|
chooseCategory(e) {
|
|
this.postData.category = e.value[0]
|
|
this.closePicker()
|
|
},
|
|
closePicker() {
|
|
this.categoryShow = false
|
|
this.intervalShow = false
|
|
},
|
|
// 时间段选择器
|
|
chooseInterval(e) {
|
|
this.postData.appointmentInterval = e.value[0]
|
|
this.closePicker()
|
|
},
|
|
// 获取最大日期和最小日期
|
|
getMaxDateAndMinDate() {
|
|
const currentDate = new Date(); // 获取当前日期
|
|
const thirtyYearsAgo = new Date(currentDate.getFullYear(), currentDate.getMonth() + 3, currentDate
|
|
.getDate()); // 30年之前的日期
|
|
this.maxDate = thirtyYearsAgo.getTime();
|
|
this.minDate = Number(currentDate);
|
|
},
|
|
// 选择预约日期
|
|
appointmentDateConfirm(e) {
|
|
console.log(e.value);
|
|
this.postData.appointmentDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
|
this.appointmentDateShow = false
|
|
},
|
|
|
|
// 获取用户信息
|
|
async getUserInfo() {
|
|
const res = await this.$request({
|
|
url: '/getInfo',
|
|
})
|
|
if (res.code == 200 && res.hasOwnProperty('user')) {
|
|
this.user = res.user
|
|
this.postData.phoneNumber = res.user.phonenumber
|
|
this.postData.realName = res.user.realName
|
|
}
|
|
},
|
|
// 预约提交数据
|
|
async addWx() {
|
|
if (uni.$u.test.isEmpty(this.postData.instructorId)) {
|
|
return this.$modal.msgError('请选择教练')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.instructorName)) {
|
|
return this.$modal.msgError('请选择教练')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.appointmentDate)) {
|
|
return this.$modal.msgError('请选择预约日期')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.appointmentInterval)) {
|
|
return this.$modal.msgError('请选择预约时间')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.category)) {
|
|
return this.$modal.msgError('请选择练车项目')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.realName)) {
|
|
return this.$modal.msgError('请填写姓名')
|
|
}
|
|
if (uni.$u.test.isEmpty(this.postData.phoneNumber)) {
|
|
return this.$modal.msgError('请填写联系电话')
|
|
}
|
|
|
|
const res = await this.$request({
|
|
url: '/system/schoolAppointmentInfo/addWx',
|
|
method: 'POST',
|
|
data: this.postData
|
|
})
|
|
this.$modal.msgSuccess('预约成功')
|
|
setTimeout(() => {
|
|
this.$tab.navigateTo("/subSchoolPages/appointment/appointment?tab=1")
|
|
}, 1500)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/deep/.u-icon__icon {
|
|
font-size: 30px !important;
|
|
}
|
|
|
|
|
|
|
|
.nickname-pop {
|
|
width: 700rpx;
|
|
padding: 70rpx 50rpx 0rpx;
|
|
background: #242a38;
|
|
border-radius: 10rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.nickname-input {
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nickname-label {
|
|
font-size: 60rpx;
|
|
display: block;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
color: #d2c3af;
|
|
}
|
|
|
|
.input-style {
|
|
border-bottom: 1px solid #d2c3af;
|
|
display: block;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
color: #d2c3af;
|
|
}
|
|
|
|
.button-style {
|
|
width: 600rpx;
|
|
margin: 20rpx auto;
|
|
|
|
}
|
|
</style> |