304 lines
7.5 KiB
Vue
304 lines
7.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="calendar">
|
|||
|
|
<view class="calendar_day">
|
|||
|
|
<view class="day_x" :style="{'color': (day_index == index ? '#52C375' : '')}"
|
|||
|
|
v-for="(item, index) in dayArr" :key="index" @click.stop="dayList(item,index)">
|
|||
|
|
<view class="day_x_a">{{item.weeks}}</view>
|
|||
|
|
<view class="day_x_b">{{item.days}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view scroll-y class="calendar_time">
|
|||
|
|
<view class="time_x" :class="host_index == item.timeStamp ? 'time_x_sty' : '' "
|
|||
|
|
v-for="(item, index) in hostArr[day_index]" :key="index"
|
|||
|
|
@click.stop="(nowTimes < item.timeStamp) || (msformatArr.indexOf(item.hours) == -1) ? hosts(item) : ''"
|
|||
|
|
:style="[{'color':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#999999' : '')},{'fontSize':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '32rpx' : '30rpx'},
|
|||
|
|
{'letter-spacing':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '4rpx' : '0rpx'}]">
|
|||
|
|
{{ ((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1)) || (msformatArr.indexOf(item.hours) !== -1) ? '约满' : item.hours }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="color: #096f4b;width: 100%;text-align: center;" @click="sub()">添加时间</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="sub" @click="sub()">
|
|||
|
|
添加待选
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
sta_num: {
|
|||
|
|
type: Number | String,
|
|||
|
|
default: 9
|
|||
|
|
},
|
|||
|
|
end_num: {
|
|||
|
|
type: Number | String,
|
|||
|
|
default: 18
|
|||
|
|
},
|
|||
|
|
int_num: {
|
|||
|
|
type: Number | String,
|
|||
|
|
default: 30
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dayArr: [],
|
|||
|
|
hostArr: [],
|
|||
|
|
day_index: 0,
|
|||
|
|
host_index: '',
|
|||
|
|
host_All: [],
|
|||
|
|
nowTimes: '',
|
|||
|
|
isShow: true,
|
|||
|
|
msformatArr: [],
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
let dateArr = []
|
|||
|
|
let today = new Date();
|
|||
|
|
let nowTime = today.getTime() // 当前时间戳
|
|||
|
|
this.nowTimes = parseInt(nowTime / 1000)
|
|||
|
|
for (let i = 0; i < 5; i++) {
|
|||
|
|
let newDate = new Date(today.getTime() + i * 1000 * 60 * 60 * 24)
|
|||
|
|
let month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(
|
|||
|
|
newDate.getMonth()) + 1) // 当前月份
|
|||
|
|
let day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate() //当前日期
|
|||
|
|
let backTime = newDate.getTime() // 几天后时间戳
|
|||
|
|
let backDays = newDate.getDay() // 几天后周几
|
|||
|
|
let remTime = (backTime - nowTime) / 1000 // 距离今天几天
|
|||
|
|
let week = ''
|
|||
|
|
if (remTime == 0) {
|
|||
|
|
week = "今天"
|
|||
|
|
} else if (remTime == 86400) {
|
|||
|
|
week = "明天"
|
|||
|
|
} else if (remTime == 172800) {
|
|||
|
|
week = "后天"
|
|||
|
|
} else {
|
|||
|
|
if (backDays == 0) {
|
|||
|
|
week = "周日"
|
|||
|
|
} else if (backDays == 1) {
|
|||
|
|
week = "周一"
|
|||
|
|
} else if (backDays == 2) {
|
|||
|
|
week = "周二"
|
|||
|
|
} else if (backDays == 3) {
|
|||
|
|
week = "周三"
|
|||
|
|
} else if (backDays == 4) {
|
|||
|
|
week = "周四"
|
|||
|
|
} else if (backDays == 5) {
|
|||
|
|
week = "周五"
|
|||
|
|
} else if (backDays == 6) {
|
|||
|
|
week = "周六"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let fullDate = `${month}-${day}`
|
|||
|
|
let ass = {
|
|||
|
|
weeks: week,
|
|||
|
|
days: fullDate
|
|||
|
|
}
|
|||
|
|
dateArr.push(ass)
|
|||
|
|
}
|
|||
|
|
this.dayArr = dateArr
|
|||
|
|
|
|||
|
|
let timeArr = []
|
|||
|
|
for (let i = 0; i < 5; i++) {
|
|||
|
|
// let as = new Date(new Date().toLocaleDateString()).getTime() / 1000
|
|||
|
|
let as = new Date(new Date().toLocaleDateString()).getTime() / 1000 + i * 60 * 60 * 24
|
|||
|
|
let staTime = this.sta_num * 60 * 60 + as
|
|||
|
|
let endTime = this.end_num * 60 * 60 + as
|
|||
|
|
let int = this.int_num * 60
|
|||
|
|
let timeArr_s = []
|
|||
|
|
let datatime = {
|
|||
|
|
hours: '00:00',
|
|||
|
|
timeStamp: ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
timeArr_s.push(datatime)
|
|||
|
|
for (staTime; staTime < endTime - int; staTime + int) {
|
|||
|
|
staTime = staTime + int
|
|||
|
|
let hours = this.times(staTime)
|
|||
|
|
let asb = {
|
|||
|
|
hours,
|
|||
|
|
timeStamp: staTime
|
|||
|
|
}
|
|||
|
|
timeArr_s.push(asb)
|
|||
|
|
if (timeArr_s.length == 2) {
|
|||
|
|
timeArr_s[0].timeStamp = timeArr_s[1].timeStamp - 1800
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
timeArr.push(timeArr_s)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.hostArr = timeArr;
|
|||
|
|
|
|||
|
|
uni.$on("sendChildMsList", (e) => {
|
|||
|
|
console.log(e);
|
|||
|
|
if (e) {
|
|||
|
|
this.msformatArr = e;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
uni.$off("sendChildMsList");
|
|||
|
|
},
|
|||
|
|
destroyed() {
|
|||
|
|
uni.$off("sendChildMsList");
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 点击日期
|
|||
|
|
dayList(e, index) {
|
|||
|
|
this.day_index = index
|
|||
|
|
let day = this.dayArr[this.day_index]
|
|||
|
|
let comTime = {
|
|||
|
|
days: day.days,
|
|||
|
|
weeks: day.weeks
|
|||
|
|
}
|
|||
|
|
this.$emit('getDate', comTime);
|
|||
|
|
},
|
|||
|
|
// 点击时间
|
|||
|
|
hosts(e) {
|
|||
|
|
if ( (this.nowTimes < e.timeStamp) && (this.msformatArr.indexOf(e.hours) == -1)) {
|
|||
|
|
this.host_All = e
|
|||
|
|
this.host_index = e.timeStamp
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 点击立即预约
|
|||
|
|
sub() {
|
|||
|
|
|
|||
|
|
console.log(this.host_All);
|
|||
|
|
delete this.host_All.timeStamp;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (this.host_index == '') {
|
|||
|
|
this.$queue.showToast('请选择时间')
|
|||
|
|
} else {
|
|||
|
|
let day = this.dayArr[this.day_index]
|
|||
|
|
let time = this.time(this.host_index)
|
|||
|
|
let comTime = {
|
|||
|
|
days: day.days,
|
|||
|
|
weeks: day.weeks,
|
|||
|
|
hours: this.host_All.hours,
|
|||
|
|
timeStamp: this.host_All.timeStamp,
|
|||
|
|
time: time
|
|||
|
|
}
|
|||
|
|
this.$emit('getTime', comTime);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 格式化时间
|
|||
|
|
times(data) {
|
|||
|
|
let date = new Date(data * 1000);
|
|||
|
|
//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|||
|
|
let h = date.getHours();
|
|||
|
|
h = h < 10 ? ('0' + h) : h; //小时补0
|
|||
|
|
let m = date.getMinutes();
|
|||
|
|
m = m < 10 ? ('0' + m) : m; //分钟补0
|
|||
|
|
return h + ':' + m
|
|||
|
|
},
|
|||
|
|
time(data, type) {
|
|||
|
|
let date = new Date(data * 1000);
|
|||
|
|
//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|||
|
|
let y = date.getFullYear();
|
|||
|
|
let MM = date.getMonth() + 1;
|
|||
|
|
MM = MM < 10 ? ('0' + MM) : MM; //月补0
|
|||
|
|
let d = date.getDate();
|
|||
|
|
d = d < 10 ? ('0' + d) : d; //天补0
|
|||
|
|
let h = date.getHours();
|
|||
|
|
h = h < 10 ? ('0' + h) : h; //小时补0
|
|||
|
|
let m = date.getMinutes();
|
|||
|
|
m = m < 10 ? ('0' + m) : m; //分钟补0
|
|||
|
|
let s = date.getSeconds();
|
|||
|
|
s = s < 10 ? ('0' + s) : s; //秒补0
|
|||
|
|
if (type == 'yymmdd') {
|
|||
|
|
return y + '-' + MM + '-' + d
|
|||
|
|
} else if (type == 'hhmmss') {
|
|||
|
|
return h + ':' + m + ':' + s;
|
|||
|
|
} else {
|
|||
|
|
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #F4F4F4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.act {
|
|||
|
|
color: #52C375;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar {
|
|||
|
|
width: 710rpx;
|
|||
|
|
height: min-content;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
margin: 20rpx auto 10rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar_day {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 120rpx;
|
|||
|
|
|
|||
|
|
.day_x {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: column nowrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 20%;
|
|||
|
|
height: 100%;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar_time {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
height: min-content;
|
|||
|
|
flex-flow: row wrap;
|
|||
|
|
align-content: flex-start;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
.time_x {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 20%;
|
|||
|
|
height: 54rpx;
|
|||
|
|
border-radius: 26rpx;
|
|||
|
|
margin: 10rpx 0;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time_x_sty {
|
|||
|
|
background-color: #E8FAE1;
|
|||
|
|
color: #096f4b !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 710rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
margin: 30rpx auto;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
background-color: #096f4b;
|
|||
|
|
}
|
|||
|
|
</style>
|