26 changed files with 214 additions and 416 deletions
-
14components/searchRow/searchRow.vue
-
2components/user-info/user-info.vue
-
10config/api.js
-
2pages.json
-
2pages/login/login.vue
-
31pages/recordEntry/operate/mySchedule/comp/mySchedulePopup.vue
-
334pages/recordEntry/operate/mySchedule/comp/pickDateTimer/pickDateTimer - 副本.vue
-
2pages/recordEntry/operate/mySchedule/mySchedule.vue
-
7pages/recordEntry/student/addStudent/addStudent.vue
-
2pages/recordEntry/student/addStudent/searchStudent.vue
-
2pages/tabbar/examSimulation/comp/simulation.vue
-
32pages/tabbar/examSimulation/comp/studentComment.vue
-
4pages/tabbar/examSimulation/index.vue
-
4pages/tabbar/mine/index.vue
-
30pages/tabbar/operateTrain/index.vue
-
2pages/tabbar/statistics/comp/comp.scss
-
2pages/tabbar/statistics/comp/principal.vue
-
4pages/tabbar/statistics/comp/topUserInfo.vue
-
65pages/tabbar/student/index.vue
-
2pages/userCenter/myCar/myCar.vue
-
27pages/userCenter/personaInfo/personaInfo.vue
-
2pages/userCenter/refund/refund.vue
-
4pages/userCenter/schoolCoach/coachComment/coachComment.vue
-
2pages/userCenter/schoolCoach/coachComment/comp/info.vue
-
2pages/userCenter/schoolSite/schoolSite.vue
-
40pages/userCenter/studentComment/studentComment.vue
@ -1,334 +0,0 @@ |
|||||
<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"> |
|
||||
<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 class="card"> |
|
||||
<view class="noDate"> |
|
||||
<image src="http://192.168.1.20:81/zhili/image/20230927/ad178ebdf5394518b27b020c03ee48ab.png" mode=""></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<u-datetime-picker |
|
||||
:show="show" |
|
||||
v-model="chooseMonth" |
|
||||
:minDate="minDate" |
|
||||
:maxDate="maxDate" |
|
||||
mode="year-month" |
|
||||
@confirm="changeMonth" |
|
||||
></u-datetime-picker> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { getDates, getMonthsBetweenDates } from '@/config/utils.js' |
|
||||
import { scheduleClassGetById, scheduleClassGet, getClassDateLimit } from '@/config/api.js' |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
maxDate: 0, |
|
||||
minDate: 0, |
|
||||
monthArr: [], |
|
||||
show: false, |
|
||||
dateArr: [], |
|
||||
currentDay: 0,//当前显示的日期组索引 |
|
||||
chooseDay: '', |
|
||||
chooseMonth: '', |
|
||||
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: '', |
|
||||
endDate: null, |
|
||||
startDate: null, |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
|
|
||||
this.initDate() |
|
||||
|
|
||||
}, |
|
||||
computed: { |
|
||||
currentMonth() { |
|
||||
let tiemr = new Date(this.chooseDay) * 1 |
|
||||
return this.$u.date(tiemr, 'yyyy.mm') |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取排课日期范围 |
|
||||
async getClassDateLimitFn() { |
|
||||
let obj = { |
|
||||
coachId: this.vuex_coachId |
|
||||
} |
|
||||
const {data: res} = await getClassDateLimit(obj) |
|
||||
this.startDate = res.beginDateLimit |
|
||||
this.endDate = res.endDateLimit |
|
||||
this.minDate = new Date(res.beginDateLimit)*1 + 86400000 |
|
||||
this.maxDate = new Date(res.endDateLimit)*1 |
|
||||
}, |
|
||||
// 获得排课 |
|
||||
async scheduleClassGetFn() { |
|
||||
let id = this.vuex_userInfo.user.id |
|
||||
let coachId = this.vuex_userInfo.user.coachId || '1591015108974329858' |
|
||||
let classDate = '2023-10-1' |
|
||||
const {data: res} = await scheduleClassGet({id, coachId, classDate: this.chooseDay}) |
|
||||
}, |
|
||||
// 初始化日期 |
|
||||
async initDate() { |
|
||||
await this.getClassDateLimitFn() |
|
||||
this.dateArr = getDates(this.startDate, this.endDate); |
|
||||
console.log('this.dateArr') |
|
||||
console.log(this.startDate) |
|
||||
console.log(this.endDate) |
|
||||
// this.chooseDay = this.dateArr[0][0].date |
|
||||
// console.log(this.chooseDay) |
|
||||
}, |
|
||||
// 点击月份 |
|
||||
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 |
|
||||
}, |
|
||||
// 选择时间 |
|
||||
chooseTimerClick(item) { |
|
||||
if(item.status!=1) return this.$u.toast('请选择可预约时间') |
|
||||
this.chooseTimerId = item.id |
|
||||
}, |
|
||||
// 选择日期 |
|
||||
chooseDate(item) { |
|
||||
this.chooseDay = item.date |
|
||||
this.scheduleClassGetFn() |
|
||||
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 |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</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; |
|
||||
.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; |
|
||||
} |
|
||||
.noDate { |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue