12 changed files with 814 additions and 213 deletions
-
2config/api.js
-
2manifest.json
-
8pages/carEntry/examineAppointment/comp/pickDate.vue
-
380pages/carEntry/operaAppointment/comp/pickDate.vue
-
9pages/carEntry/operaAppointment/comp/searchBox.vue
-
131pages/carEntry/operaAppointment/comp/step1.vue
-
87pages/carEntry/operaAppointment/comp/step2.vue
-
188pages/carEntry/operaAppointment/comp/step3.vue
-
168pages/carEntry/operaAppointment/operaAppointment.vue
-
10pages/carEntry/simulateAppointment/comp/step3.vue
-
7pages/mineEntry/myAppointment/comp/examin.vue
-
35pages/mineEntry/myAppointment/myAppointment.vue
@ -0,0 +1,380 @@ |
|||
<template> |
|||
<view class="step1"> |
|||
<view class="card"> |
|||
<view class="dateBox"> |
|||
<view class="month-row"> |
|||
<view class="month" @click="show=true">{{ currentMonth }}</view> |
|||
<view class="arrow"> |
|||
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="date_row"> |
|||
<view class="icon left" @click="changeDateIndex(-1)"> |
|||
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
|||
</view> |
|||
<view class="dateArr" > |
|||
<view class="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" > |
|||
<view class="date" :class="{active: chooseDay==item.date}"> |
|||
<!-- <view class="dian"></view> --> |
|||
<view class="week">{{ item.week }}</view> |
|||
<view class="num">{{ item.num }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="icon right" @click="changeDateIndex(1)"> |
|||
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card" > |
|||
<view class="timeCon" v-if="timerArr.length||timerArr2.length"> |
|||
<view class="h2" v-if="timerArr.length">上午</view> |
|||
<view class="time_box"> |
|||
<view class="time_item" v-for="(item,index) in timerArr" :key="index" @click="chooseCourse(item)" :class="{active: courseIds==item.id, disable: item.status!=0}" > |
|||
<view class="flex" v-if="item.status==0"> |
|||
<view class="lab">{{ item.appointmentAlreadyCount ||0 }} <text>/</text> {{ item.appointmentSum}} </view> |
|||
<view class="iconArrowBg" v-if="item.appointmentAlreadyCount"> |
|||
<u-icon name="arrow-right" :size="10" :color="'#fff'"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="lab" v-else>{{ statusTxt[item.status] }}</view> |
|||
<view class="time">{{ item.classTime }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="h2" v-if="timerArr2.length">下午</view> |
|||
<view class="time_box"> |
|||
<view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseCourse(item)" :class="{active: courseIds==item.id, disable: item.status!=0}"> |
|||
<view class="flex" v-if="item.status==0"> |
|||
<view class="lab">{{ item.appointmentAlreadyCount ||0 }} <text>/</text> {{ item.appointmentSum}} </view> |
|||
<view class="iconArrowBg" v-if="item.appointmentAlreadyCount"> |
|||
<u-icon name="arrow-right" :size="10" :color="'#fff'"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="lab" v-else>{{ statusTxt[item.status] }}</view> |
|||
<view class="time">{{ item.classTime }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="card" v-if="!timerArr2.length&&!timerArr.length" style="padding: 0 0 60rpx 0;"> |
|||
<nodata>暂无预约排课</nodata> |
|||
</view> |
|||
</view> |
|||
|
|||
<u-datetime-picker |
|||
:show="show" |
|||
v-model="chooseMonth" |
|||
:minDate="minDate" |
|||
:maxDate="maxDate" |
|||
mode="year-month" |
|||
@confirm="changeMonth" |
|||
@cancel="show=false" |
|||
></u-datetime-picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getDates, getMonthsBetweenDates } from '@/config/utils.js' |
|||
import { scheduleClass } from '@/config/api.js' |
|||
export default { |
|||
props: ['step', 'FormData'], |
|||
data() { |
|||
return { |
|||
maxDate: 0, |
|||
minDate: 0, |
|||
monthArr: [], |
|||
show: false, |
|||
dateArr: [], |
|||
currentDay: 0,//当前显示的日期组索引 |
|||
chooseDay: '', |
|||
chooseMonth: '', |
|||
timerArr: [], |
|||
statusTxt: ['可预约', '未开放', '已过期', '已约满', '已约过'], //状态0、未过期 1、无排课,2、已过期,3已约满 |
|||
timerArr2: [], |
|||
chooseTimerId: '', |
|||
endDate: null, |
|||
startDate: null, |
|||
courseIds: '', |
|||
radioVal: '', |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initDate() |
|||
}, |
|||
computed: { |
|||
currentMonth() { |
|||
let tiemr = new Date(this.chooseDay) * 1 |
|||
return this.$u.date(tiemr, 'yyyy.mm') |
|||
} |
|||
}, |
|||
watch: { |
|||
courseIds: { |
|||
handler(val) { |
|||
let allTimer = [...this.timerArr,...this.timerArr2] |
|||
let total = allTimer.reduce((pre, item)=>{ |
|||
if(item.status==1) { |
|||
pre.push(item.classTime) |
|||
} |
|||
return pre |
|||
},[]) |
|||
if(total.length==this.courseIds.length) { |
|||
this.radioVal = 0 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获得排课 |
|||
async scheduleClassFn() { |
|||
let obj = { "coachId": this.vuex_userInfo.coachId, "trainType": this.FormData.trainType, "subject": this.FormData.subject, "classDate": this.chooseDay, "studentId": this.userId} |
|||
const {data: res} = await scheduleClass(obj) |
|||
return |
|||
this.timerArr2 = res.afternoonSimulationClass |
|||
this.timerArr = res.morningSimulationClass |
|||
// 如果是今天的日期检查有没有过期 |
|||
if(this.chooseDay==this.dateArr[0][0].date) { |
|||
let arr = [...this.timerArr,...this.timerArr2] |
|||
arr.forEach(item=>{ |
|||
let timer = new Date() * 1 |
|||
let date = this.chooseDay+' '+(item.classTime.split('-')[0]) |
|||
date = date.replace(/-/g,'/'); |
|||
let timer2 = new Date(date).getTime(); |
|||
// console.log(timer) |
|||
// console.log(timer2) |
|||
// console.log(date) |
|||
if(timer>timer2) { |
|||
item.status = 2 |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
// 初始化日期 |
|||
async initDate() { |
|||
this.startDate = this.$u.timeFormat(new Date()*1, 'yyyy-mm-dd'); |
|||
this.maxDate = this.endDate = new Date('2023-11-30')*1 |
|||
this.minDate = new Date()*1 |
|||
|
|||
this.dateArr = getDates(this.startDate, this.endDate); |
|||
this.chooseDay = this.dateArr[0][0].date |
|||
console.log(this.dateArr) |
|||
this.scheduleClassFn() |
|||
}, |
|||
// 点击月份 |
|||
changeMonth(val) { |
|||
let startDate = this.$u.date(val.value, 'yyyy-mm-dd') |
|||
for(let i=0; i<this.dateArr.length; i++) { |
|||
for(let j=0; j<this.dateArr[i].length; j++) { |
|||
let date = this.dateArr[i][j].date |
|||
if(startDate==date) { |
|||
this.currentDay = i |
|||
this.chooseDay = date |
|||
} |
|||
} |
|||
} |
|||
this.show = false |
|||
}, |
|||
// 选择日期 |
|||
chooseDate(item) { |
|||
this.chooseDay = item.date |
|||
this.scheduleClassFn() |
|||
// console.log('*****') |
|||
// console.log(this.chooseDay) |
|||
}, |
|||
changeDateIndex(num) { |
|||
if(this.currentDay==0&&num==-1) return this.$u.toast('已是可选最小日期') |
|||
if(this.currentDay==this.dateArr.length-1&&num==1) return this.$u.toast('已是可选最大日期') |
|||
this.currentDay = this.currentDay + num |
|||
this.chooseDay = this.dateArr[this.currentDay][0].date |
|||
this.scheduleClassFn() |
|||
}, |
|||
chooseCourse(item) { |
|||
this.FormData.courseIds = this.courseIds = item.id |
|||
this.FormData.classDate = item.classDate |
|||
this.FormData.classTime = item.classTime |
|||
console.log(item) |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.card { |
|||
width: 100%; |
|||
margin-bottom: 24rpx; |
|||
overflow: hidden; |
|||
.dateBox { |
|||
padding: 36rpx 0 40rpx 0; |
|||
.month-row { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 36rpx; |
|||
.month { |
|||
font-size: 32rpx; |
|||
color: $themC; |
|||
} |
|||
|
|||
.arrow { |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
|
|||
.date_row { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
position: relative; |
|||
.icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
background: rgba(51,51,51,0.18); |
|||
backdrop-filter: blur(4rpx); |
|||
position: absolute; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
&.left { |
|||
left: 16rpx; |
|||
} |
|||
&.right { |
|||
right: 16rpx; |
|||
} |
|||
} |
|||
|
|||
.dateArr { |
|||
display: flex; |
|||
padding: 0 70rpx; |
|||
// justify-content: space-between; |
|||
&.oneDate { |
|||
justify-content: center; |
|||
} |
|||
.dateWidth { |
|||
width: 20%; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.date { |
|||
width: 74rpx; |
|||
height: 100rpx; |
|||
border-radius: 16rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
.dian { |
|||
width: 12rpx; |
|||
height: 12rpx; |
|||
background: #D8D8D8; |
|||
border-radius: 50%; |
|||
&.active { |
|||
background: #1989FA; |
|||
} |
|||
} |
|||
&.active { |
|||
background: rgba(25,137,250,0.1); |
|||
border: 2rpx solid #1989FA; |
|||
color: $themC; |
|||
} |
|||
.week { |
|||
|
|||
} |
|||
|
|||
.num { |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
.timeCon { |
|||
padding: 0 24rpx 40rpx 24rpx; |
|||
} |
|||
.h2 { |
|||
line-height: 90rpx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
.time_box { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
&::after{ |
|||
display:block; |
|||
content:""; |
|||
width: 32%; |
|||
height:0px; |
|||
} |
|||
.time_item { |
|||
width: 30%; |
|||
height: 120rpx; |
|||
background: #F8F8F8; |
|||
border-radius: 12rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 20rpx; |
|||
color: #333; |
|||
&.active { |
|||
background: rgba(25,137,250,0.1); |
|||
border: 2rpx solid #1989FA; |
|||
color: $themC; |
|||
} |
|||
&.disable { |
|||
opacity: 0.4; |
|||
} |
|||
.lab { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.time { |
|||
font-size: 24rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
margin: 108rpx auto 50rpx auto; |
|||
} |
|||
.iconArrowBg { |
|||
background: #D8D8D8; |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-left: 4px; |
|||
} |
|||
.step2 { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-bottom: 40px; |
|||
.btnBg { |
|||
width: 310rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,72 +1,117 @@ |
|||
<template> |
|||
<view class="step1"> |
|||
<coachInfo @click.native="showStep2"/> |
|||
<view class="h1">预约时间</view> |
|||
<pickDate :FormData="FormData"/> |
|||
<view class="h1">教练车</view> |
|||
<view class="card"> |
|||
<view class="list"> |
|||
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
|||
{{ item.text }}</view> |
|||
<view class="car"> |
|||
<view class="carTag">赣A98299学</view> |
|||
</view> |
|||
</view> |
|||
<view class="h1">训练场地</view> |
|||
<view class="card" > |
|||
<view class="site"> |
|||
<view class="leftTxt"> |
|||
<view class="adrs">某某场地</view> |
|||
<view class="adrsTxt">江西省江西市江西区尚坤丁兰国际1190</view> |
|||
</view> |
|||
<view class="icon"> |
|||
<image src="@/static/images/car/btn_daohang.png" mode=""></image> |
|||
<!-- <image src="@/static/images/car/btn_daohang_cli.png" mode=""></image> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="poz_btn"> |
|||
<view class="btn_row" > |
|||
<view class="btnBg" @click="changeStep(2)">下一步</view> |
|||
</view> |
|||
</view> |
|||
<view class="btn" @click="changeStep(2)">下一步</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import coachInfo from './coachInfo' |
|||
import pickDate from './pickDate' |
|||
export default { |
|||
components: { coachInfo, pickDate }, |
|||
props: ['FormData'], |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
text: '科目二', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
text: '科目三', |
|||
id: 3 |
|||
}, |
|||
], |
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
changeStep(val) { |
|||
this.$emit('changeStep', val) |
|||
} |
|||
changeStep(num) { |
|||
if(this.FormData.coachId) { |
|||
|
|||
} |
|||
this.$emit('changeStep', num) |
|||
}, |
|||
showStep2() { |
|||
this.$emit('showStep2') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
padding: 24rpx; |
|||
.listItem { |
|||
width: 32.4%; |
|||
.poz_btn { |
|||
// position: fixed; |
|||
// bottom: 0; |
|||
// left: 0; |
|||
// padding: 32rpx; |
|||
// width: 100%; |
|||
// background: #F6F6F6; |
|||
.btn_row { |
|||
display: flex; |
|||
height: 200rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.btnBg { |
|||
width: 396rpx; |
|||
} |
|||
} |
|||
} |
|||
.h1 { |
|||
line-height: 100rpx; |
|||
} |
|||
.car { |
|||
padding: 32rpx 28rpx; |
|||
.carTag { |
|||
height: 120rpx; |
|||
background: #F8F8F8; |
|||
padding: 0 18rpx; |
|||
color: $themC; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
width: fit-content; |
|||
line-height: 120rpx; |
|||
margin-right: 20rpx; |
|||
&.active { |
|||
width: 200rpx; |
|||
height: 120rpx; |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
margin: 108rpx auto 50rpx auto; |
|||
.site { |
|||
padding: 28rpx 40rpx 28rpx 36rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.leftTxt { |
|||
width: 0; |
|||
flex: 1; |
|||
color: $themC; |
|||
.adrs { |
|||
font-size: 32rpx; |
|||
font-weight: 550; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.adrsTxt { |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.icon { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue