ZF sun
80d390886a
将所有组件内的语言key从components.yuyueDate改为components.yuyue-date，统一命名格式，确保多语言配置可以正确加载对应文案。
440 lines
13 KiB
Vue
440 lines
13 KiB
Vue
<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">{{ $lang('components.yuyue-date.appointedDate') }}</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 ? disableTextI18n : undisableTextI18n }}</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: '' //时间段结束时间
|
||
};
|
||
},
|
||
computed: {
|
||
disableTextI18n() {
|
||
return this.disableText && this.disableText !== '已约满'
|
||
? this.disableText
|
||
: this.$lang('components.yuyue-date.fullyBooked');
|
||
},
|
||
undisableTextI18n() {
|
||
return this.undisableText && this.undisableText !== '可预约'
|
||
? this.undisableText
|
||
: this.$lang('components.yuyue-date.available');
|
||
},
|
||
// 周几名称数组（索引 0-6 对应周日到周六，与 Date.getDay() 返回值一致）
|
||
// 用于显示层（Toast 等），会随语言切换
|
||
weekBox() {
|
||
return [
|
||
this.$lang('components.yuyue-date.weekSunday'),
|
||
this.$lang('components.yuyue-date.weekMonday'),
|
||
this.$lang('components.yuyue-date.weekTuesday'),
|
||
this.$lang('components.yuyue-date.weekWednesday'),
|
||
this.$lang('components.yuyue-date.weekThursday'),
|
||
this.$lang('components.yuyue-date.weekFriday'),
|
||
this.$lang('components.yuyue-date.weekSaturday'),
|
||
];
|
||
},
|
||
// 中文周几名称数组（用于与 disableWeek prop 做数据匹配，保持兼容性）
|
||
weekBoxCn() {
|
||
return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
},
|
||
},
|
||
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 dayIndex = new Date(e).getDay();
|
||
if (this.disableWeek.indexOf(this.weekBoxCn[dayIndex]) != -1) {
|
||
uni.showToast({
|
||
title: this.$lang('components.yuyue-date.weekdayCannotBook', { weekday: this.weekBox[dayIndex] }),
|
||
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 date = currentTime().year + '-' + this.selectDate;
|
||
let dayIndex = new Date(date).getDay();
|
||
if (this.disableWeek.indexOf(this.weekBoxCn[dayIndex]) != -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.$lang('components.yuyue-date.noSelection') : 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 dayIndex = new Date(item.timeStamp).getDay();
|
||
if (this.disableWeek.indexOf(this.weekBoxCn[dayIndex]) != -1) {
|
||
uni.showToast({
|
||
title: this.$lang('components.yuyue-date.weekdayCannotBook', { weekday: this.weekBox[dayIndex] }),
|
||
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> |