510 lines
10 KiB
Vue
510 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<headers :titles="titles"><uni-icons @click="goback()" type="arrow-left" color="#000000"
|
|
size="22px"></uni-icons></headers>
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item,index) in 4" :key="index">
|
|
<view class="img-swiper">
|
|
<image :src=" baseUrl + jlInfo.image" mode=""></image>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
<view class="top-box">
|
|
<view class="box-title">{{jlInfo.instructorName}}</view>
|
|
<!-- <view v-if="jxInfo.businessStartTime" class="box-hui">营业中 {{jxInfo.businessStartTime}}:{{jxInfo.businessEndTime}}</view> -->
|
|
<view style="padding: 10rpx 0;" class="box-hui">{{jlInfo.phone}}</view>
|
|
|
|
<view v-if="jlInfo.student" class="">学员人数:{{jlInfo.student}}</view>
|
|
|
|
<view class="wrap-box">
|
|
<view class="icon-box">{{jxInfo.announcement}}</view>
|
|
</view>
|
|
<view class="top-bottom">
|
|
<view class="">
|
|
<view class="l-box">{{jxInfo.address}}</view>
|
|
<!-- <view class="h-box">距离4.9km</view> -->
|
|
</view>
|
|
<view class="right-box" @click="gettel()">
|
|
<image src="../../static/imgs/dh.png" mode=""></image>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- -->
|
|
<view class="ri-box">
|
|
<view class="ri-title">选择日期</view>
|
|
<scroll-view scroll-x="true" class="tap-top">
|
|
<view class="sz" v-for="(item,index) in recentlyDate" :key="index" @click="getqh(index)">
|
|
<view @click="findAfternoonNumber(item.dateInfo)" class="box"
|
|
:class="{'xztap': qhindex == index}">
|
|
<!-- <view style="margin-bottom: 10px;">周{{}}</view> -->
|
|
<view @click="changeCurrentIndex(index)" class="">{{item.dateInfo}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="ri-title">选择科目</view>
|
|
<view class="up-box">
|
|
<view class="">科目</view>
|
|
<view class="right-text" @click="show = true">
|
|
<view class="" v-if="!courseSubject">选择科目</view>
|
|
<view class="" v-else>{{courseSubject}}</view>
|
|
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="ri-title">选择时段</view>
|
|
<view class="ri-bs">
|
|
<view @click="changeLvanniuClick(0)" class="hui-box" :class="{ 'lvanniu':swxw == 0 }">
|
|
<view class="">上午</view>
|
|
<view v-if="payNumberVo.swCount" class="">预约人数为{{payNumberVo.swCount}}</view>
|
|
<view v-else class="">预约人数为0</view>
|
|
</view>
|
|
<view @click="changeLvanniuClick(1)" class="hui-box" :class="{ 'lvanniu':swxw == 1 }">
|
|
<view class="">下午</view>
|
|
<view v-if="payNumberVo.xwCount" class="">预约人数为{{payNumberVo.xwCount}}</view>
|
|
<view v-else class="">预约人数为0</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="bottom-bo">
|
|
<view @click="bookingClick()" class="lv-anniu">
|
|
立即预约
|
|
</view>
|
|
</view>
|
|
<view class="bottom-bo">
|
|
<view @click="gogogocar()" class="lv-anniu">
|
|
立即练车
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker :show="show" keyName="name" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from '../../components/header/headers.vue'
|
|
import request from '@/utils/request.js'
|
|
import {
|
|
yearTime
|
|
} from '@/utils/dateUtil.js'
|
|
import {
|
|
appleTime
|
|
} from '@/utils/dateUtil.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
titles: "预约训练",
|
|
baseUrl: this.$baseUrl,
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
qhindex: 0,
|
|
swxw: 1,
|
|
jlId: null,
|
|
jlInfo: [],
|
|
courseSubject: null,
|
|
courseSubjectid: null,
|
|
show: false,
|
|
columns: [
|
|
[{
|
|
name: '科目二',
|
|
id: 2
|
|
}, {
|
|
name: '科目三',
|
|
id: 3
|
|
}, ]
|
|
],
|
|
payNumberVo: [],
|
|
recentlyDate: [],
|
|
currentTime: null,
|
|
currentIndex: 0,
|
|
currentDate: {
|
|
currentDaeSun: null,
|
|
currentWeek: null
|
|
}
|
|
}
|
|
},
|
|
onLoad: function(option) {
|
|
|
|
},
|
|
onShow() {
|
|
// this.actList = ["1", "1", "1", "1", "1", ]
|
|
// this.status = "nomore" 底部刷新结束
|
|
this.findJlInfoByJlId(),
|
|
|
|
this.findRecentlyDate()
|
|
},
|
|
onPullDownRefresh() {
|
|
console.log("刷新");
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
// this.show = true
|
|
setTimeout(() => {
|
|
console.log("加载执行");
|
|
}, 2000)
|
|
},
|
|
// 发送好友
|
|
onShareAppMessage(res) {
|
|
return {
|
|
title: this.titles,
|
|
path: '/pages/index/index',
|
|
}
|
|
},
|
|
// 分享朋友圈
|
|
onShareTimeline(res) {
|
|
return {
|
|
title: this.titles,
|
|
path: '/pages/index/index',
|
|
}
|
|
},
|
|
components: {
|
|
headers
|
|
|
|
},
|
|
methods: {
|
|
confirm(e) {
|
|
console.log(e);
|
|
this.courseSubject = e.value[0].name
|
|
this.courseSubjectid = e.value[0].id
|
|
this.show = false
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
gettel() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.jlInfo.phone //仅为示例
|
|
});
|
|
},
|
|
getqh(index) {
|
|
this.qhindex = index
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
},
|
|
async findJlInfoByJlId() {
|
|
let res = await request({
|
|
url: '/driving/findSelfInfo',
|
|
method: 'get'
|
|
})
|
|
console.log(res, 143);
|
|
this.jlInfo = res.driveSchoolCoach
|
|
},
|
|
async findAfternoonNumber(myDate) {
|
|
console.log("当前时间为 ======>>>", myDate)
|
|
|
|
let res = await request({
|
|
url: `/driving/findAfternoonNumber/${myDate}`,
|
|
method: 'get'
|
|
})
|
|
this.payNumberVo = res,
|
|
console.log(this.payNumberVo, "==========>", this.payNumberVo)
|
|
},
|
|
changeCurrentIndex(index) {
|
|
if (!index) {
|
|
index = 0
|
|
}
|
|
this.currentIndex = index,
|
|
console.log("当前索引为 ======>", index)
|
|
},
|
|
async findRecentlyDate() {
|
|
let res = await request({
|
|
url: `/driving/findRecentlyDate`,
|
|
method: 'get'
|
|
})
|
|
this.findAfternoonNumber(res[0].dateInfo)
|
|
this.recentlyDate = res
|
|
},
|
|
changeLvanniuClick(number) {
|
|
this.swxw = number
|
|
},
|
|
changeCurrentTime(currentTime) {
|
|
this.currentTime = currentTime
|
|
},
|
|
async bookingClick() {
|
|
if (!this.courseSubjectid) {
|
|
uni.showToast({
|
|
title: '请选择科目几',
|
|
icon: 'error'
|
|
})
|
|
return
|
|
}
|
|
let res = await request({
|
|
url: '/drivingSchool/system/reservationCourse',
|
|
method: 'post',
|
|
data: {
|
|
|
|
timePeriod: this.swxw++,
|
|
type: 1,
|
|
currentDate: this.recentlyDate[this.currentIndex].dateInfo,
|
|
accountType: this.courseSubjectid,
|
|
}
|
|
})
|
|
uni.showToast({
|
|
title: "预约成功",
|
|
icon: "success",
|
|
duration: 4000
|
|
})
|
|
if (res.code == 200) {
|
|
console.log('进了', res);
|
|
uni.navigateTo({
|
|
url: '/pages/reservation/reservation'
|
|
})
|
|
}
|
|
|
|
},
|
|
gogogocar() {
|
|
if (!this.courseSubjectid) {
|
|
uni.showToast({
|
|
title: '请选择科目几',
|
|
icon: 'error'
|
|
})
|
|
return
|
|
}
|
|
let res = request({
|
|
url: '/drivingSchool/system/reservationCourse',
|
|
method: 'post',
|
|
data: {
|
|
|
|
timePeriod: this.swxw++,
|
|
type: 2,
|
|
currentDate: this.recentlyDate[this.currentIndex].dateInfo,
|
|
accountType: this.courseSubjectid,
|
|
}
|
|
})
|
|
uni.showToast({
|
|
title: "预约成功",
|
|
icon: "success",
|
|
duration: 4000
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages/reservation/reservation'
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #f4f5f6;
|
|
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
background: #f4f5f6;
|
|
box-sizing: border-box;
|
|
padding-top: 88px;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 280px;
|
|
}
|
|
|
|
.img-swiper {
|
|
width: 100%;
|
|
height: 280px;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.top-box {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
background: #fff;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.wrap-box {
|
|
width: 100%;
|
|
display: flex;
|
|
margin: 10px 0px;
|
|
|
|
}
|
|
|
|
.top-bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.right-box {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 25px;
|
|
box-sizing: border-box;
|
|
padding-left: 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #4AA76F;
|
|
|
|
image {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
|
|
.l-box {
|
|
font-size: 12px;
|
|
color: #333333;
|
|
}
|
|
|
|
.h-box {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
}
|
|
|
|
.icon-box {
|
|
|
|
background: #E6F5F0;
|
|
border-radius: 2px 2px 2px 2px;
|
|
font-size: 10px;
|
|
color: #4AA76F;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
.box-title {
|
|
font-weight: 800;
|
|
font-size: 20px;
|
|
color: #333333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.box-hui {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #666666;
|
|
}
|
|
|
|
//
|
|
.ri-box {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
background: #fff;
|
|
margin-bottom: 15px;
|
|
|
|
}
|
|
|
|
.ri-title {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
|
|
.tap-top {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
.sz {
|
|
display: inline-block;
|
|
}
|
|
|
|
.box {
|
|
background: #fff;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
margin-right: 50rpx;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
// font-weight: bold;
|
|
color: #4AA76F;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
}
|
|
|
|
.xztap {
|
|
color: #fff !important;
|
|
background-color: #4AA76F !important;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ri-bs {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.hui-box {
|
|
width: 47%;
|
|
border-radius: 8px;
|
|
border: 1px solid #d3d3d3;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: #adadad;
|
|
}
|
|
|
|
.lvanniu {
|
|
color: #4AA76F !important;
|
|
border: 1px solid #4AA76F;
|
|
}
|
|
|
|
.bottom-bo {
|
|
width: 100%;
|
|
height: 60px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lv-anniu {
|
|
width: 318px;
|
|
height: 40px;
|
|
background: #4AA76F;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.up-box {
|
|
width: 95%;
|
|
border-bottom: 1px solid #ebebeb;
|
|
margin: 10px auto;
|
|
padding: 10px 0px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.right-text {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |