22 changed files with 703 additions and 608 deletions
-
11common/js/utils.js
-
248components/pickDateTimer/pickDateTimer.vue
-
2config/api.js
-
5config/request.js
-
2config/site.config.js
-
225pages/carEntry/examineAppointment/comp/step1.vue
-
59pages/carEntry/examineAppointment/comp/step2.vue
-
113pages/carEntry/examineAppointment/comp/step3.vue
-
153pages/carEntry/examineAppointment/comp/step4.vue
-
177pages/carEntry/examineAppointment/comp/step5.vue
-
86pages/carEntry/examineAppointment/comp/选择科目备份.vue
-
14pages/carEntry/examineAppointment/examineAppointment.vue
-
59pages/carEntry/operaAppointment/comp/step4.vue
-
4pages/carEntry/simulateAppointment/comp/step1.vue
-
55pages/indexEntry/enroll/registInfo/chooseCoach/chooseCoach.vue
-
33pages/indexEntry/enroll/registInfo/comp/searchSchool.vue
-
32pages/indexEntry/enroll/registInfo/registInfo.vue
-
2pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue
-
17pages/indexEntry/publicVideo/publicVideo.vue
-
6pages/mineEntry/carData/carData.vue
-
4pages/tabbar/index/index.vue
-
4pages/tabbar/learnCar/index.vue
@ -0,0 +1,248 @@ |
|||
<template> |
|||
<view class="step1"> |
|||
<view class="card"> |
|||
<view class="dateBox"> |
|||
<view class="month-row"> |
|||
<view class="month">2032.08</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="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"> |
|||
<view class="h2">上午</view> |
|||
<view class="time_box"> |
|||
<view class="time_item" v-for="(item,index) in timerArr" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId, disable: item.status!==1}"> |
|||
<view class="lab" v-if="item.status==3">已过期</view> |
|||
<view class="lab" v-if="item.status==2">已约满</view> |
|||
<view class="lab" v-if="item.status==1">可预约</view> |
|||
<view class="time">{{ item.timer }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="h2">下午</view> |
|||
<view class="time_box"> |
|||
<view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId,disable: item.status!==1}"> |
|||
<view class="lab" v-if="item.status==3">已过期</view> |
|||
<view class="lab" v-if="item.status==2">已约满</view> |
|||
<view class="lab" v-if="item.status==1">可预约</view> |
|||
<view class="time">{{ item.timer }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getDates } from '@/config/utils.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
dateArr: [], |
|||
currentDay: 0, |
|||
chooseDay: '', |
|||
timerArr: [ |
|||
{status: 1, timer: '06:00-07:00', id: 1}, |
|||
{status: 2, timer: '06:00-07:00', id: 2}, |
|||
{status: 3, timer: '06:00-07:00', id: 3}, |
|||
], |
|||
timerArr2: [ |
|||
{status: 1, timer: '06:00-07:00', id: 4}, |
|||
{status: 2, timer: '06:00-07:00', id: 5}, |
|||
{status: 3, timer: '06:00-07:00', id: 6}, |
|||
], |
|||
chooseTimerId: '' |
|||
} |
|||
}, |
|||
mounted() { |
|||
const startDate = new Date('2023-09-06'); |
|||
const endDate = new Date(); |
|||
this.dateArr = getDates(startDate, endDate); |
|||
}, |
|||
methods: { |
|||
// 选择时间 |
|||
chooseTimerClick(item) { |
|||
if(item.status!=1) return this.$u.toast('请选择可预约时间') |
|||
this.chooseTimerId = item.id |
|||
}, |
|||
// 选择日期 |
|||
chooseDate(item) { |
|||
this.chooseDay = item.date |
|||
console.log(this.chooseDay) |
|||
}, |
|||
changeDateIndex(num) { |
|||
if(this.currentDay==0&&num==-1) return |
|||
if(this.currentDay==this.dateArr.length-1&&num==1) return |
|||
this.currentDay = this.currentDay + num |
|||
console.log(this.currentDay) |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</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; |
|||
&.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; |
|||
.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; |
|||
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; |
|||
} |
|||
</style> |
|||
@ -1,177 +0,0 @@ |
|||
<template> |
|||
<view class="step3"> |
|||
<view class="card"> |
|||
<view class="list"> |
|||
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
|||
<view class="num">{{index+1}}号车</view> |
|||
<view class="text">{{ item.text }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="btn_row" style="margin-top: 108rpx;"> |
|||
<view class="border btn" @click="changeStep(4)">返回上一步</view> |
|||
<view class="btn" @click="show = true">确认预约</view> |
|||
</view> |
|||
|
|||
<u-popup :show="show" mode="center" :round="8"> |
|||
<view class="popupCon"> |
|||
<view class="h2">再次确认预约信息</view> |
|||
<view class="content"> |
|||
<view class="row"> |
|||
<view class="lab">预约类型</view> |
|||
<view class="val">xxx</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约科目</view> |
|||
<view class="val">xxx</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约考场</view> |
|||
<view class="val">2023/08/08 08:00—9:00</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约车型</view> |
|||
<view class="val">xxx</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约车辆</view> |
|||
<view class="val">xxx</view> |
|||
</view> |
|||
<view class="row"> |
|||
<view class="lab">预约时间</view> |
|||
<view class="val">2023/08/08 08:00—9:00</view> |
|||
</view> |
|||
</view> |
|||
<view class="btn_row"> |
|||
<view class="border btn" @click="show = false">返回修改</view> |
|||
<view class="btn">确认</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
text: '00001', |
|||
id: 1 |
|||
}, |
|||
{ |
|||
text: '00002', |
|||
id: 1 |
|||
}, |
|||
{ |
|||
text: '00003', |
|||
id: 1 |
|||
}, |
|||
], |
|||
show: true |
|||
} |
|||
}, |
|||
methods: { |
|||
changeStep(val) { |
|||
this.$emit('changeStep', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.card { |
|||
padding: 28rpx 24rpx; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.listItem { |
|||
width: 32.4%; |
|||
height: 120rpx; |
|||
background: #F8F8F8; |
|||
border-radius: 12rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.num { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
&.active { |
|||
width: 200rpx; |
|||
height: 120rpx; |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
|
|||
&.border { |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popupCon { |
|||
padding: 30rpx 50rpx; |
|||
|
|||
.h2 { |
|||
font-weight: 600; |
|||
color: #333333; |
|||
line-height: 70rpx; |
|||
font-size: 36rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.content { |
|||
padding-bottom: 20rpx; |
|||
|
|||
.row { |
|||
padding: 22rpx 0; |
|||
display: flex; |
|||
font-size: 28rpx; |
|||
align-items: center; |
|||
|
|||
.lab { |
|||
width: 180rpx; |
|||
color: #686B73; |
|||
|
|||
} |
|||
|
|||
.val { |
|||
flex: 1; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<view class="step1"> |
|||
<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> |
|||
</view> |
|||
|
|||
<view class="btn_row" style="margin-top: 108rpx;"> |
|||
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
|||
<view class="btn" @click="changeStep(3)">下一步</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
text: '科目二', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
text: '科目三', |
|||
id: 3 |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
methods: { |
|||
changeStep(val) { |
|||
this.$emit('changeStep', val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
padding: 24rpx; |
|||
.listItem { |
|||
width: 32.4%; |
|||
height: 120rpx; |
|||
background: #F8F8F8; |
|||
border-radius: 12rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
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_row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.btn { |
|||
width: 47%; |
|||
height: 72rpx; |
|||
background: #1989FA; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
|
|||
&.border { |
|||
background: rgba(25, 137, 250, 0.1); |
|||
border: 2rpx solid $themC; |
|||
color: $themC; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue