|
|
<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="chooseCourse(item)" :class="{active: courseIds.indexOf(item.classTime)!=-1, disable: item.status==2}" > <view class="flex" v-if="item.status==0"> <view class="lab">{{ item.appointmentAlreadyCount ||0 }} <text>/</text> {{ item.appointmentSumCount}} </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">下午</view> <view class="time_box"> <view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseCourse(item)" :class="{active: courseIds.indexOf(item.classTime)!=-1, disable: item.status==2}"> <view class="flex" v-if="item.status==0"> <view class="lab">{{ item.appointmentAlreadyCount ||0 }} <text>/</text> {{ item.appointmentSumCount}} </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> <view class="card"> <view class="noDate"> <image src="http://192.168.1.20:81/zhili/image/20230927/ad178ebdf5394518b27b020c03ee48ab.png" mode=""></image> </view> </view> <view class="step2" v-if="step==2"> <view class=""> <u-radio-group v-model="radioVal" placement="row" size="14" > <u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in radioData" :key="index" :label="item.name" :name="item.id" labelSize="14" @change="changeRadio" > </u-radio> </u-radio-group> </view> <view class="btnBg" @click="confirmPopup">确认发布</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 { props: ['step'], 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, radioData: [ {name: '全选', id: 0}, {name: '取消选择', id: 1}, ], courseIds: [], radioVal: '', } }, mounted() { this.initDate() // uni.$on('refreshMySchedule',()=>{
// console.log('没监听到？')
// this.scheduleClassGetFn()
// })
}, 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 getClassDateLimitFn() { let obj = { coachId: this.vuex_coachId } const {data: res} = await getClassDateLimit(obj) this.startDate = new Date(res.beginDateLimit) this.endDate = new Date(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 let deptId = this.vuex_deptId const {data: res} = await scheduleClassGet({id, coachId, classDate: this.chooseDay, deptId}) this.timerArr = res.morningScheduleClass this.timerArr2 = res.afternoonScheduleClass 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() { await this.getClassDateLimitFn() this.dateArr = getDates(this.startDate, this.endDate); // let obj = {
// date: "2023-10-24",
// num: "24",
// week: "二"
// }
// this.dateArr[0][0] = obj
this.chooseDay = this.dateArr[0][0].date console.log(this.dateArr) this.scheduleClassGetFn() }, // 点击月份
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.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 }, chooseCourse(item) { // this.$goPage('/pages/recordEntry/operate/mySchedule/detail/detail?id='+ item.id)
// return
if(this.step!=2) { // 如果有预约
console.log(item) if(item.appointmentAlreadyCount&&item.status==0) { this.$goPage('/pages/recordEntry/operate/mySchedule/detail/detail?id='+ item.id) } }else { this.radioVal = -1 if(item.status!=1) return this.$u.toast('请选择未排课选项') let index = this.courseIds.indexOf(item.classTime) if(index!==-1) { this.courseIds.splice(index, 1) }else { this.courseIds.push(item.classTime) } } }, // 全选
changeRadio(val) { if(val==1) { this.courseIds = [] this.$emit('cancelChoose') // this.step = 1
}else { let allTimer = [...this.timerArr,...this.timerArr2] let total = allTimer.reduce((pre, item)=>{ if(item.status==1) { pre.push(item.classTime) } return pre },[]) // console.log(total.length)
// console.log(this.courseIds.length)
if(total.length==this.courseIds.length) { this.courseIds = [] // this.$emit('upDateCheck', [])
}else { this.courseIds = total } } }, // 确认发布
confirmPopup() { let pickDate = { timeList: this.courseIds, classDate: this.chooseDay } this.$emit('confirmPopup', pickDate) } } }</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>
|
