@@ -1,414 +1,414 @@
< template >
< view >
<!-- < uni-popup ref = "timePopup" type = "bottom" > -- >
< view class = "content" >
<!-- < view class = "head" >
< text class = "title" > 选择时间 < / text >
< text class = "iconfont iconclose" @click ="close()" > < / text >
< / view > - - >
< view class = "container" >
< view class = "date-list-wrap" >
<!-- 日期列表 -- >
< scroll-view scroll -x >
< block v-for = "(item, index) in dateArr" :key="index" >
< div class = "flex-box" @click ="selectDateEvent(index, item)" >
< view class = "date-box" : style = "{ color: index == dateActive ? selectedTabColor : '#909399' }" >
< text > { { item . week } } { { item . date } } < / text >
< / view >
< / div >
< / block >
< / scroll-view >
< div class = "appointed-day" >
< uni-datetime-picker type = "date" :start = "pickerStartDay" :end = "pickerEndDay" @change ="change" >
< text class = "day-box" > 指定日期 < / text >
< text class = "iconfont iconyoujiantou" > < / text >
< / uni-datetime-picker >
< / div >
< / view >
<!-- 时间选项 -- >
< view class = "time-box" v-if = "!isSection" >
< block v-for = "(item, _index) in timeArr" :key="_index" >
< view class = "item" >
< view class = "item-box diy" : class = "{ disable: item.disable, active: isMultiple ? item.isActive : _index == timeActive }" @click ="selectTimeEvent(_index, item)" >
< ! - - : style = "{ color: isMultiple ? (item.isActive ? selectedItemColor : '#333') : _index == timeActive ? selectedItemColor : '#333' }" - - >
< text > { { item . time } } < / text >
<!-- < text class = "all" > { { item . disable ? disableText : undisableText } } < / text > -- >
< / view >
< / view >
< / block >
< / view >
<!-- 预约时间段 -- >
< view class = "time-box" v-else >
< block v-for = "(item, _index) in timeArr" :key="_index" >
< view class = "item" >
< view class = "item-box" : class = "{ disable: item.disable || item.isInclude, active: item.time == timeQuanBegin || item.time == timeQuanEnd }" @click ="handleSelectQuantum(_index, item)" >
< ! - - : style = "{ color: item.time == timeQuanBegin || item.time == timeQuanEnd ? selectedItemColor : '#333' }" - - >
< text > { { item . time } } < / text >
< text class = "all" > { { item . disable ? disableText : undisableText } } < / text >
< / view >
< / view >
< / block >
< / view >
< / view >
<!-- < view class = "bottom" >
< view class = "show-time" v-if = "!isMultiple && !isSection" >
< text > 预约时间 : < / text >
< text class = "color-base-text" > { { orderDateTime } } < / text >
< / view >
< button form -type = " submit " type = "primary" size = "mini" class = "submit-btn" @click ="handleSubmit" > 确认预约 < / button >
< / view > - - >
< / view >
<!-- < view class = "yuyue-date-desc" > 如不想线上预约 , 可致电商家电话预约 < / view > -- >
<!-- < / uni-popup > -- >
< / view >
< / template >
< script >
// 插件地址: https://ext.dcloud.net.cn/plugin?id=3593
import {
initData ,
initTime ,
timeStamp ,
currentTime ,
strFormat ,
weekDate
} from './yuyue-date.js' ;
export default {
name : 'times' ,
model : {
prop : 'showPop' ,
event : 'change'
} ,
props : {
isMultiple : {
//是否多选
type : Boolean ,
default : false
} ,
isSection : {
//预约时间段
type : Boolean ,
default : false
} ,
advanceTime : {
//提前预约时间
type : [ String , Number ] ,
default : "0"
} ,
disableText : {
//禁用显示的文本
type : String ,
default : '已约满'
} ,
undisableText : {
//未禁用显示的文本
type : String ,
default : '可预约'
} ,
timeInterval : {
// 时间间隔,小时为单位
type : String ,
default : "1"
} ,
selectedTabColor : {
// 日期栏选中的颜色
type : String ,
default : '#303133'
} ,
selectedItemColor : {
// 时间选中的颜色
type : String ,
default : '#D50AEF'
} ,
beginTime : {
type : String ,
default : '09:00'
} ,
endTime : {
type : String ,
default : '19:00'
} ,
appointTime : {
// 预约的时间
type : Array ,
default ( ) {
return [ ] ;
}
} ,
disableTimeSlot : {
// 预约开始和结束时间,来禁用时间段
type : Object ,
default ( ) {
return { } ;
}
} ,
disableWeek : {
// 限制周几不可以预约
type : Array ,
default ( ) {
return [ ] ;
}
}
} ,
watch : {
appointTime : {
handler ( val ) {
if ( val && val . length ) {
this . initOnload ( ) ;
}
}
} ,
beginTime : function ( nVal , oVal ) {
this . initOnload ( ) ;
this . handleSubmit ( ) ;
} ,
endTime : function ( nVal , oVal ) {
this . initOnload ( ) ;
this . handleSubmit ( ) ;
} ,
} ,
data ( ) {
return {
pickerStartDay : '' , // 指定开始日期
pickerEndDay : '' , // 指定结束日期
orderDateTime : '暂无选择' , // 选中时间
orderTimeArr : { } , //多选的时间
dateArr : [ ] , //日期数据
timeArr : [ ] , //时间数据
nowDate : '' , // 当前日期
dateActive : 0 , //选中的日期索引
timeActive : 0 , //选中的时间索引
timeQuanBeginIndex : 0 , //时间段开始的下标
selectDate : '' , //选择的日期
selectTime : '' , //选择的时间
timeQuanBegin : '' , //时间段开始时间
timeQuanEnd : '' //时间段结束时间
} ;
} ,
created ( props ) {
this . selectDate = this . nowDate = currentTime ( ) . date ;
this . pickerStartDay = currentTime ( ) . year + '-' + currentTime ( ) . date ;
const now = new Date ( this . pickerStartDay ) . getTime ( ) ; //获取当前日期的时间戳
let timeStr = 3600 * 24 * 1000 ; //一天的时间戳
let day = 90 ; // 未来3个月
this . pickerEndDay = timeStamp ( now + timeStr * day ) . allDate ;
this . initOnload ( ) ;
this . dateArr = initData ( ) ; // 日期栏初始化
} ,
methods : {
open ( ) {
this . $refs . timePopup . open ( ) ;
} ,
close ( ) {
this . $refs . timePopup . close ( ) ;
} ,
// 指定时间
change ( e ) {
let date = e . split ( "-" ) ;
date = date [ 1 ] + "-" + date [ 2 ] ;
if ( this . disableWeek . length && date >= weekDate ( ) [ 0 ] && date <= weekDate ( ) [ 1 ] ) {
let weekBox = [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ] ;
let index = new Date ( e ) . getDay ( ) ;
if ( this . disableWeek . indexOf ( weekBox [ index ] ) != - 1 ) {
uni . showToast ( {
title : weekBox [ index ] + '不可以预约' ,
icon : 'none'
} )
return false ;
}
}
this . initOnload ( e ) ;
this . dateArr = initData ( e ) ; // 日期栏初始化
this . selectDateEvent ( 0 , this . dateArr [ 0 ] ) ;
} ,
initOnload ( appointedDay ) {
this . timeArr = initTime ( this . beginTime , this . endTime , parseFloat ( this . timeInterval ) ) ; //时间选项初始化
this . timeQuanBegin = this . timeQuanEnd = '' ;
let isFullTime = true ;
this . timeArr . forEach ( ( item , index ) => {
// 判断默认是不能选择的周,则都禁止选中
if ( this . disableWeek . length && this . selectDate >= weekDate ( ) [ 0 ] && this . selectDate <=
weekDate ( ) [ 1 ] ) {
let weekBox = [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ] ;
let date = currentTime ( ) . year + '-' + this . selectDate ;
let index = new Date ( date ) . getDay ( ) ;
if ( this . disableWeek . indexOf ( weekBox [ index ] ) != - 1 ) {
item . disable = true ;
}
}
//判断是当前这一天,选中时间小于当前时间则禁用
if ( this . selectDate == this . nowDate && currentTime ( ) . time > item . time ) {
item . disable = true ;
}
// 将提前预约的时间禁用 advanceTime
var advTime = new Date ( new Date ( ) . setMinutes ( new Date ( ) . getMinutes ( ) + parseInt ( this . advanceTime ) * 60 ) ) ;
var advTimeStr = strFormat ( advTime . getHours ( ) ) + ":" + strFormat ( advTime . getMinutes ( ) ) + ":" + strFormat ( advTime . getSeconds ( ) ) ;
var advTimeStr1 = strFormat ( advTime . getMonth ( ) + 1 ) + "-" + strFormat ( advTime . getDate ( ) ) ;
if ( this . selectDate == advTimeStr1 && advTimeStr > item . time || advTimeStr1 > this . selectDate ) {
item . disable = true ;
}
// 将预约的时间禁用
this . appointTime . forEach ( t => {
let [ date , time ] = t . split ( ' ' ) ;
time = time . slice ( 0 , - 3 ) ;
if ( date == currentTime ( ) . year + '-' + this . selectDate && item . time == time ||
date == currentTime ( ) . year + '-' + advTimeStr1 && item . time == time ) {
item . disable = true ;
}
} ) ;
// 禁用时间段
const cur _time = ` ${ this . selectDate } ${ item . time } ` ;
const {
begin _time ,
end _time
} = this . disableTimeSlot ;
if ( begin _time && end _time && ( begin _time <= cur _time && cur _time <= end _time ) ) {
item . disable = true ;
}
// 判断是否当前日期时间都被预约
if ( ! item . disable ) {
isFullTime = false ;
}
this . isSection && ( item . isInclude = false ) ;
} ) ;
this . orderDateTime = isFullTime ? '暂无选择' : this . selectDate ;
this . timeActive = - 1 ;
for ( let i = 0 , len = this . timeArr . length ; i < len ; i ++ ) {
if ( ! this . timeArr [ i ] . disable ) {
this . orderDateTime = {
data : ` ${ this . selectDate } ` ,
time : ` ${ this . timeArr [ i ] . time } `
} ;
this . timeActive = i ;
return ;
}
}
} ,
// 日期选择事件
selectDateEvent ( index , item ) {
if ( this . disableWeek . length && item . date >= weekDate ( ) [ 0 ] && item . date <= weekDate ( ) [ 1 ] ) {
let weekBox = [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ] ;
let index = new Date ( item . timeStamp ) . getDay ( ) ;
if ( this . disableWeek . indexOf ( weekBox [ index ] ) != - 1 ) {
uni . showToast ( {
title : weekBox [ index ] + '不可以预约' ,
icon : 'none'
} )
return false ;
}
}
this . dateActive = index ;
this . selectDate = item . date ;
this . initOnload ( ) ;
this . handleSubmit ( ) ;
} ,
// 时间选择事件
selectTimeEvent ( index , item ) {
if ( item . disable ) return ;
if ( this . isMultiple ) {
item . isActive = ! item . isActive ;
this . timeArr = this . timeArr . slice ( ) ;
this . orderTimeArr [ this . selectDate ] = this . timeArr . reduce ( ( prev , cur ) => {
cur . isActive && prev . push ( cur . time ) ;
return prev ;
} , [ ] ) ;
} else {
this . timeActive = index ;
this . selectTime = item . time ;
this . orderDateTime = {
data : ` ${ this . selectDate } ` ,
time : ` ${ item . time } `
} ;
}
this . handleSubmit ( ) ;
} ,
// 选择时间段
handleSelectQuantum ( index , item ) {
if ( item . disable ) return ;
function clearTime ( ) {
this . timeQuanBeginIndex = index ;
this . timeQuanBegin = item . time ;
this . timeQuanEnd = '' ;
}
if ( ! this . timeQuanBegin ) {
clearTime . call ( this ) ;
return ;
}
if ( ! this . timeQuanEnd && this . timeQuanBegin ) {
let isDisble = false ;
let start = this . timeQuanBeginIndex ;
let end = index ;
start > end && ( [ start , end ] = [ end , start ] ) ;
for ( let i = start + 1 ; i < end ; i ++ ) {
if ( this . timeArr [ i ] . disable ) {
isDisble = true ;
clearTime . call ( this ) ;
return ;
}
}
if ( ! isDisble ) {
for ( let i = start + 1 ; i < end ; i ++ ) {
this . timeArr [ i ] . isInclude = true ;
}
}
this . timeQuanEnd = item . time ;
return ;
}
if ( this . timeQuanBegin && this . timeQuanEnd ) {
this . timeArr . forEach ( t => {
t . isInclude = false ;
} ) ;
clearTime . call ( this ) ;
}
} ,
handleChange ( ) {
this . timeQuanBegin > this . timeQuanEnd && ( [ this . timeQuanBegin , this . timeQuanEnd ] = [ this . timeQuanEnd , this . timeQuanBegin ] ) ;
} ,
handleSubmit ( ) {
if ( this . isSection ) {
this . handleChange ( ) ;
this . $emit ( 'change' , {
beginTime : ` ${ this . selectDate } ${ this . timeQuanBegin } ` ,
endTime : ` ${ this . selectDate } ${ this . timeQuanEnd } `
} ) ;
return ;
}
if ( this . isMultiple ) {
let time = [ ] ;
for ( let date in this . orderTimeArr ) {
this . orderTimeArr [ date ] . forEach ( item => {
time . push ( ` ${ date } ${ item } ` ) ;
} ) ;
}
this . $emit ( 'change' , time ) ;
} else {
// this.$emit('change', currentTime().year + '-' + this.orderDateTime);
this . $emit ( 'change' , {
date : currentTime ( ) . year + '-' + this . orderDateTime . data ,
time : this . orderDateTime . time
} ) ;
}
}
}
} ;
< / script >
< style lang = "scss" scoped >
@ import './yuyue-date.scss' ;
< template >
< view >
<!-- < uni-popup ref = "timePopup" type = "bottom" > -- >
< view class = "content" >
<!-- < view class = "head" >
< text class = "title" > 选择时间 < / text >
< text class = "iconfont iconclose" @click ="close()" > < / text >
< / view > - - >
< view class = "container" >
< view class = "date-list-wrap" >
<!-- 日期列表 -- >
< scroll-view scroll -x >
< block v-for = "(item, index) in dateArr" :key="index" >
< div class = "flex-box" @click ="selectDateEvent(index, item)" >
< view class = "date-box" : style = "{ color: index == dateActive ? selectedTabColor : '#909399' }" >
< text > { { item . week } } { { item . date } } < / text >
< / view >
< / div >
< / block >
< / scroll-view >
< div class = "appointed-day" >
< uni-datetime-picker type = "date" :start = "pickerStartDay" :end = "pickerEndDay" @change ="change" >
< text class = "day-box" > 指定日期 < / text >
< text class = "iconfont iconyoujiantou" > < / text >
< / uni-datetime-picker >
< / div >
< / view >
<!-- 时间选项 -- >
< view class = "time-box" v-if = "!isSection" >
< block v-for = "(item, _index) in timeArr" :key="_index" >
< view class = "item" >
< view class = "item-box diy" : class = "{ disable: item.disable, active: isMultiple ? item.isActive : _index == timeActive }" @click ="selectTimeEvent(_index, item)" >
< ! - - : style = "{ color: isMultiple ? (item.isActive ? selectedItemColor : '#333') : _index == timeActive ? selectedItemColor : '#333' }" - - >
< text > { { item . time } } < / text >
<!-- < text class = "all" > { { item . disable ? disableText : undisableText } } < / text > -- >
< / view >
< / view >
< / block >
< / view >
<!-- 预约时间段 -- >
< view class = "time-box" v-else >
< block v-for = "(item, _index) in timeArr" :key="_index" >
< view class = "item" >
< view class = "item-box" : class = "{ disable: item.disable || item.isInclude, active: item.time == timeQuanBegin || item.time == timeQuanEnd }" @click ="handleSelectQuantum(_index, item)" >
< ! - - : style = "{ color: item.time == timeQuanBegin || item.time == timeQuanEnd ? selectedItemColor : '#333' }" - - >
< text > { { item . time } } < / text >
< text class = "all" > { { item . disable ? disableText : undisableText } } < / text >
< / view >
< / view >
< / block >
< / view >
< / view >
<!-- < view class = "bottom" >
< view class = "show-time" v-if = "!isMultiple && !isSection" >
< text > 预约时间 : < / text >
< text class = "color-base-text" > { { orderDateTime } } < / text >
< / view >
< button form -type = " submit " type = "primary" size = "mini" class = "submit-btn" @click ="handleSubmit" > 确认预约 < / button >
< / view > - - >
< / view >
<!-- < view class = "yuyue-date-desc" > 如不想线上预约 , 可致电商家电话预约 < / view > -- >
<!-- < / uni-popup > -- >
< / view >
< / template >
< script >
// 插件地址: https://ext.dcloud.net.cn/plugin?id=3593
import {
initData ,
initTime ,
timeStamp ,
currentTime ,
strFormat ,
weekDate
} from './yuyue-date.js' ;
export default {
name : 'times' ,
model : {
prop : 'showPop' ,
event : 'change'
} ,
props : {
isMultiple : {
//是否多选
type : Boolean ,
default : false
} ,
isSection : {
//预约时间段
type : Boolean ,
default : false
} ,
advanceTime : {
//提前预约时间
type : [ String , Number ] ,
default : "0"
} ,
disableText : {
//禁用显示的文本
type : String ,
default : '已约满'
} ,
undisableText : {
//未禁用显示的文本
type : String ,
default : '可预约'
} ,
timeInterval : {
// 时间间隔,小时为单位
type : String ,
default : "1"
} ,
selectedTabColor : {
// 日期栏选中的颜色
type : String ,
default : '#303133'
} ,
selectedItemColor : {
// 时间选中的颜色
type : String ,
default : '#D50AEF'
} ,
beginTime : {
type : String ,
default : '09:00'
} ,
endTime : {
type : String ,
default : '19:00'
} ,
appointTime : {
// 预约的时间
type : Array ,
default ( ) {
return [ ] ;
}
} ,
disableTimeSlot : {
// 预约开始和结束时间,来禁用时间段
type : Object ,
default ( ) {
return { } ;
}
} ,
disableWeek : {
// 限制周几不可以预约
type : Array ,
default ( ) {
return [ ] ;
}
}
} ,
watch : {
appointTime : {
handler ( val ) {
if ( val && val . length ) {
this . initOnload ( ) ;
}
}
} ,
beginTime : function ( nVal , oVal ) {
this . initOnload ( ) ;
this . handleSubmit ( ) ;
} ,
endTime : function ( nVal , oVal ) {
this . initOnload ( ) ;
this . handleSubmit ( ) ;
} ,
} ,
data ( ) {
return {
pickerStartDay : '' , // 指定开始日期
pickerEndDay : '' , // 指定结束日期
orderDateTime : '暂无选择' , // 选中时间
orderTimeArr : { } , //多选的时间
dateArr : [ ] , //日期数据
timeArr : [ ] , //时间数据
nowDate : '' , // 当前日期
dateActive : 0 , //选中的日期索引
timeActive : 0 , //选中的时间索引
timeQuanBeginIndex : 0 , //时间段开始的下标
selectDate : '' , //选择的日期
selectTime : '' , //选择的时间
timeQuanBegin : '' , //时间段开始时间
timeQuanEnd : '' //时间段结束时间
} ;
} ,
created ( props ) {
this . selectDate = this . nowDate = currentTime ( ) . date ;
this . pickerStartDay = currentTime ( ) . year + '-' + currentTime ( ) . date ;
const now = new Date ( this . pickerStartDay ) . getTime ( ) ; //获取当前日期的时间戳
let timeStr = 3600 * 24 * 1000 ; //一天的时间戳
let day = 90 ; // 未来3个月
this . pickerEndDay = timeStamp ( now + timeStr * day ) . allDate ;
this . initOnload ( ) ;
this . dateArr = initData ( ) ; // 日期栏初始化
} ,
methods : {
open ( ) {
this . $refs . timePopup . open ( ) ;
} ,
close ( ) {
this . $refs . timePopup . close ( ) ;
} ,
// 指定时间
change ( e ) {
let date = e . split ( "-" ) ;
date = date [ 1 ] + "-" + date [ 2 ] ;
if ( this . disableWeek . length && date >= weekDate ( ) [ 0 ] && date <= weekDate ( ) [ 1 ] ) {
let weekBox = [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ] ;
let index = new Date ( e ) . getDay ( ) ;
if ( this . disableWeek . indexOf ( weekBox [ index ] ) != - 1 ) {
uni . showToast ( {
title : weekBox [ index ] + '不可以预约' ,
icon : 'none'
} )
return false ;
}
}
this . initOnload ( e ) ;
this . dateArr = initData ( e ) ; // 日期栏初始化
this . selectDateEvent ( 0 , this . dateArr [ 0 ] ) ;
} ,
initOnload ( appointedDay ) {
this . timeArr = initTime ( this . beginTime , this . endTime , parseFloat ( this . timeInterval ) ) ; //时间选项初始化
this . timeQuanBegin = this . timeQuanEnd = '' ;
let isFullTime = true ;
this . timeArr . forEach ( ( item , index ) => {
// 判断默认是不能选择的周,则都禁止选中
if ( this . disableWeek . length && this . selectDate >= weekDate ( ) [ 0 ] && this . selectDate <=
weekDate ( ) [ 1 ] ) {
let weekBox = [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ] ;
let date = currentTime ( ) . year + '-' + this . selectDate ;
let index = new Date ( date ) . getDay ( ) ;
if ( this . disableWeek . indexOf ( weekBox [ index ] ) != - 1 ) {
item . disable = true ;
}
}
//判断是当前这一天,选中时间小于当前时间则禁用
if ( this . selectDate == this . nowDate && currentTime ( ) . time > item . time ) {
item . disable = true ;
}
// 将提前预约的时间禁用 advanceTime
var advTime = new Date ( new Date ( ) . setMinutes ( new Date ( ) . getMinutes ( ) + parseInt ( this . advanceTime ) * 60 ) ) ;
var advTimeStr = strFormat ( advTime . getHours ( ) ) + ":" + strFormat ( advTime . getMinutes ( ) ) + ":" + strFormat ( advTime . getSeconds ( ) ) ;
var advTimeStr1 = strFormat ( advTime . getMonth ( ) + 1 ) + "-" + strFormat ( advTime . getDate ( ) ) ;
if ( this . selectDate == advTimeStr1 && advTimeStr > item . time || advTimeStr1 > this . selectDate ) {
item . disable = true ;
}
// 将预约的时间禁用
this . appointTime . forEach ( t => {
let [ date , time ] = t . split ( ' ' ) ;
time = time . slice ( 0 , - 3 ) ;
if ( date == currentTime ( ) . year + '-' + this . selectDate && item . time == time ||
date == currentTime ( ) . year + '-' + advTimeStr1 && item . time == time ) {
item . disable = true ;
}
} ) ;
// 禁用时间段
const cur _time = ` ${ this . selectDate } ${ item . time } ` ;
const {
begin _time ,
end _time
} = this . disableTimeSlot ;
if ( begin _time && end _time && ( begin _time <= cur _time && cur _time <= end _time ) ) {
item . disable = true ;
}
// 判断是否当前日期时间都被预约
if ( ! item . disable ) {
isFullTime = false ;
}
this . isSection && ( item . isInclude = false ) ;
} ) ;
this . orderDateTime = isFullTime ? '暂无选择' : this . selectDate ;
this . timeActive = - 1 ;
for ( let i = 0 , len = this . timeArr . length ; i < len ; i ++ ) {
if ( ! this . timeArr [ i ] . disable ) {
this . orderDateTime = {
data : ` ${ this . selectDate } ` ,
time : ` ${ this . timeArr [ i ] . time } `
} ;
this . timeActive = i ;
return ;
}
}
} ,
// 日期选择事件
selectDateEvent ( index , item ) {
if ( this . disableWeek . length && item . date >= weekDate ( ) [ 0 ] && item . date <= weekDate ( ) [ 1 ] ) {
let weekBox = [ '周日' , '周一' , '周二' , '周三' , '周四' , '周五' , '周六' ] ;
let index = new Date ( item . timeStamp ) . getDay ( ) ;
if ( this . disableWeek . indexOf ( weekBox [ index ] ) != - 1 ) {
uni . showToast ( {
title : weekBox [ index ] + '不可以预约' ,
icon : 'none'
} )
return false ;
}
}
this . dateActive = index ;
this . selectDate = item . date ;
this . initOnload ( ) ;
this . handleSubmit ( ) ;
} ,
// 时间选择事件
selectTimeEvent ( index , item ) {
if ( item . disable ) return ;
if ( this . isMultiple ) {
item . isActive = ! item . isActive ;
this . timeArr = this . timeArr . slice ( ) ;
this . orderTimeArr [ this . selectDate ] = this . timeArr . reduce ( ( prev , cur ) => {
cur . isActive && prev . push ( cur . time ) ;
return prev ;
} , [ ] ) ;
} else {
this . timeActive = index ;
this . selectTime = item . time ;
this . orderDateTime = {
data : ` ${ this . selectDate } ` ,
time : ` ${ item . time } `
} ;
}
this . handleSubmit ( ) ;
} ,
// 选择时间段
handleSelectQuantum ( index , item ) {
if ( item . disable ) return ;
function clearTime ( ) {
this . timeQuanBeginIndex = index ;
this . timeQuanBegin = item . time ;
this . timeQuanEnd = '' ;
}
if ( ! this . timeQuanBegin ) {
clearTime . call ( this ) ;
return ;
}
if ( ! this . timeQuanEnd && this . timeQuanBegin ) {
let isDisble = false ;
let start = this . timeQuanBeginIndex ;
let end = index ;
start > end && ( [ start , end ] = [ end , start ] ) ;
for ( let i = start + 1 ; i < end ; i ++ ) {
if ( this . timeArr [ i ] . disable ) {
isDisble = true ;
clearTime . call ( this ) ;
return ;
}
}
if ( ! isDisble ) {
for ( let i = start + 1 ; i < end ; i ++ ) {
this . timeArr [ i ] . isInclude = true ;
}
}
this . timeQuanEnd = item . time ;
return ;
}
if ( this . timeQuanBegin && this . timeQuanEnd ) {
this . timeArr . forEach ( t => {
t . isInclude = false ;
} ) ;
clearTime . call ( this ) ;
}
} ,
handleChange ( ) {
this . timeQuanBegin > this . timeQuanEnd && ( [ this . timeQuanBegin , this . timeQuanEnd ] = [ this . timeQuanEnd , this . timeQuanBegin ] ) ;
} ,
handleSubmit ( ) {
if ( this . isSection ) {
this . handleChange ( ) ;
this . $emit ( 'change' , {
beginTime : ` ${ this . selectDate } ${ this . timeQuanBegin } ` ,
endTime : ` ${ this . selectDate } ${ this . timeQuanEnd } `
} ) ;
return ;
}
if ( this . isMultiple ) {
let time = [ ] ;
for ( let date in this . orderTimeArr ) {
this . orderTimeArr [ date ] . forEach ( item => {
time . push ( ` ${ date } ${ item } ` ) ;
} ) ;
}
this . $emit ( 'change' , time ) ;
} else {
// this.$emit('change', currentTime().year + '-' + this.orderDateTime);
this . $emit ( 'change' , {
date : currentTime ( ) . year + '-' + this . orderDateTime . data ,
time : this . orderDateTime . time
} ) ;
}
}
}
} ;
< / script >
< style lang = "scss" scoped >
@ import './yuyue-date.scss' ;
< / style >