|
|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="calendar">
|
|
|
+ <view class="calendar_day">
|
|
|
+ <view class="day_x" :style="{'color': (day_index == index ? '#FE3B3C' : '')}"
|
|
|
+ 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 class="calendar_time">
|
|
|
+ <view class="time_x"
|
|
|
+ :class="{
|
|
|
+ 'time_x_sty': host_index == item?.timeStamp,
|
|
|
+ 'disabled-time': shouldDisable(item)
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in timeHostArr[day_index]"
|
|
|
+ :key="index"
|
|
|
+ @click="handleTimeClick(item)">
|
|
|
+ <text>{{item?.hours}}</text>
|
|
|
+ <text v-if="item.hasReservation === 1" class="hasRe-text">已预约</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="sub" @click="sub()">
|
|
|
+ 立即预约
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ timeArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+
|
|
|
+ timeHostArr: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ businessDuration: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ } // 从父组件接收的服务时长（分钟）
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dayArr: [],
|
|
|
+ day_index: 0,
|
|
|
+ host_index: '',
|
|
|
+ nowTimes: new Date().getTime(), // 只保留一个定义
|
|
|
+ disableAfterTime: null,
|
|
|
+ selectedTime: null,
|
|
|
+ selectedDay: null // 新增：记录选择的日期
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ timeArr: {
|
|
|
+ handler(newVal) {
|
|
|
+
|
|
|
+ let dateArr = newVal.map(item => {
|
|
|
+ let day = new Date(item)
|
|
|
+ const daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
|
|
+ return {
|
|
|
+ weeks: daysOfWeek[day.getDay()],
|
|
|
+ days: item.slice(5)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.dayArr = dateArr
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ handleTimeClick(item) {
|
|
|
+ if (!this.shouldDisable(item)) {
|
|
|
+ this.hosts(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击日期
|
|
|
+ dayList(e, index) {
|
|
|
+ this.day_index = index
|
|
|
+ this.$emit('getByDate', this.timeArr[index])
|
|
|
+ },
|
|
|
+ // 转换时间戳为毫秒
|
|
|
+ ensureMillisecond(timestamp) {
|
|
|
+ return timestamp > 9999999999 ? timestamp : timestamp * 1000;
|
|
|
+ },
|
|
|
+
|
|
|
+ shouldDisable(item) {
|
|
|
+ if (!item) return true;
|
|
|
+
|
|
|
+ const itemTime = this.ensureMillisecond(item.timeStamp);
|
|
|
+
|
|
|
+ // 已预约
|
|
|
+ if (item.hasReservation === 1) return true;
|
|
|
+
|
|
|
+ // 过去时间
|
|
|
+ if (this.nowTimes > itemTime) return true;
|
|
|
+
|
|
|
+ // 选择后的时间段
|
|
|
+ if (this.selectedTime) {
|
|
|
+ return itemTime > this.selectedTime &&
|
|
|
+ itemTime <= this.disableAfterTime;
|
|
|
+ }
|
|
|
+
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ hosts(item) {
|
|
|
+ const itemTime = this.ensureMillisecond(item.timeStamp);
|
|
|
+
|
|
|
+ this.host_index = item.timeStamp; // 显示用原始值
|
|
|
+ this.selectedTime = itemTime;
|
|
|
+ this.disableAfterTime = itemTime + (this.businessDuration * 60 * 1000);
|
|
|
+ this.$emit('getByTime', {
|
|
|
+ ...item,
|
|
|
+ timeStamp: itemTime // 传递转换后的值
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击立即预约
|
|
|
+ sub() {
|
|
|
+ if (this.host_index == '') {
|
|
|
+ this.$tool.toast('请选择时间');
|
|
|
+ } else {
|
|
|
+ let day = this.dayArr[this.day_index];
|
|
|
+ let time = this.times(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);
|
|
|
+ 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);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .calendar {
|
|
|
+ width: 710rpx;
|
|
|
+ height: 460rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin: 20rpx auto 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 448rpx;
|
|
|
+ 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;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .hasRe-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .time_x_sty {
|
|
|
+ background-color: #FFE97B;
|
|
|
+ color: #000000 !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: #FE3B3C;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .time_x {
|
|
|
+ /* 正常状态样式 */
|
|
|
+ &.disabled-time {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ color: #999999;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.time_x_sty {
|
|
|
+ background-color: #FFE97B;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
贾宇博