Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
ZF Sun
2025-10-27 15:55:29 +08:00
commit 6632080b83
513 changed files with 117442 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pages_promotion/components/yuyue-date/yuyue-date.js Normal file
View File

@@ -0,0 +1,98 @@
//字符串拼接
export function strFormat(str) {
return str < 10 ? `0${str}` : str
}
// 获取当前时间
export function currentTime() {
const myDate = new Date();
const year = myDate.getFullYear()
const m = myDate.getMonth() + 1;
const d = myDate.getDate();
// const date = year + '-' + strFormat(m) + '-' + strFormat(d); // 隐藏年
const date = strFormat(m) + '-' + strFormat(d);
const hour = myDate.getHours()
const min = myDate.getMinutes()
const secon = myDate.getSeconds()
const time = strFormat(hour) + ':' + strFormat(min) + ':' + strFormat(secon);
return {
year,
date,
time
}
}
//时间戳转日期
export function timeStamp(time) {
const dates = new Date(time)
const year = dates.getFullYear()
const month = dates.getMonth() + 1
const date = dates.getDate()
const day = dates.getDay()
const hour = dates.getHours()
const min = dates.getMinutes()
const days = ['日', '一', '二', '三', '四', '五', '六']
return {
allDate: `${year}/${strFormat(month)}/${strFormat(date)}`,
date: `${strFormat(month)}-${strFormat(date)}`, //返回的日期 07-01，${strFormat(year)}-${strFormat(month)}-${strFormat(date)}
day: `周${days[day]}`, //返回的礼拜天数 星期一
hour: strFormat(hour) + ':' + strFormat(min) // + ':00' //返回的时钟 08:00
}
}
//获取最近7天的日期和礼拜天数
export function initData(appointedDay = '') {
const time = []
const date = appointedDay ? new Date(appointedDay) : new Date()
const now = date.getTime() //获取当前日期的时间戳
let timeStr = 3600 * 24 * 1000 //一天的时间戳
let obj = {
0: "今天",
1: "明天",
2: "后天"
}
for (let i = 0; i < 7; i++) {
const timeObj = {}
timeObj.date = timeStamp(now + timeStr * i).date //保存日期
timeObj.timeStamp = now + timeStr * i //保存时间戳
timeObj.week = appointedDay == '' ? (obj[i] ?? timeStamp(now + timeStr * i).day) : timeStamp(now + timeStr * i)
.day
time.push(timeObj)
}
return time
}
//时间数组
export function initTime(startTime = '09:00', endTime = '18:30', timeInterval = 1) {
const time = []
const date = timeStamp(Date.now()).allDate
const startDate = `${date} ${startTime}`
const endDate = `${date} ${endTime}`
const startTimeStamp = new Date(startDate).getTime()
const endTimeStamp = new Date(endDate).getTime()
const timeStr = 3600 * 1000 * timeInterval
for (let i = startTimeStamp; i <= endTimeStamp; i = i + timeStr) {
const timeObj = {}
timeObj.time = timeStamp(i).hour
timeObj.disable = false
time.push(timeObj)
}
return time
}
export function weekDate(){
var now = new Date(); //当前日期
var nowDayOfWeek = now.getDay(); //今天本周的第几天
var nowDay = now.getDate(); //当前日
var nowMonth = now.getMonth(); //当前月
var nowYear = now.getYear(); //当前年
var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);
var weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek));
var arr = [];
arr[0] = strFormat(weekStartDate.getMonth()+1) + '-' + strFormat(weekStartDate.getDate());
arr[1] = strFormat(weekEndDate.getMonth()+1) + '-' + strFormat(weekEndDate.getDate());
return arr;
}

158
pages_promotion/components/yuyue-date/yuyue-date.scss Normal file
View File

@@ -0,0 +1,158 @@
.content {
text-align: center;
height: 100%;
.head {
position: relative;
font-weight: bold;
padding: 32rpx 0 24rpx;
font-size: $font-size-toolbar;
.iconfont {
position: absolute;
right: 20rpx;
}
}
.container {
view,
text,
image {
box-sizing: border-box;
}
.date-list-wrap {
display: flex;
align-items: center;
border-bottom: 2rpx solid #e6e6e6;
scroll-view {
width: 80%;
white-space: nowrap;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
position: relative;
.flex-box {
display: inline-block;
width: 25%;
&.active {
.date-box {
border: none;
.days {
font-weight: bold;
color: #818181;
}
.date {
font-weight: bold;
color: #818181;
}
}
}
.date-box {
color: #909399;
text {
font-size: $font-size-tag;
}
}
}
}
.appointed-day {
flex: 1;
border-left: 2rpx solid #e6e6e6;
.day-box,
.iconfont {
font-size: $font-size-tag;
color: #909399;
}
.iconfont {
margin-left: 4rpx;
}
}
}
.time-box {
padding: 0 12rpx;
display: flex;
flex-wrap: wrap;
overflow: scroll;
background-color: #fff;
height: auto;
.item {
width: 25%;
padding: 0 8rpx;
margin-top: 30rpx;
&-box {
width: 100%;
height: 140rpx;
padding: 0 40rpx;
background: #fff;
color: #333;
border: 2rpx solid #eeeeee;
font-size: $font-size-base;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.disable {
background: #f1f3f6 !important;
color: #999 !important;
}
&.active {
background: $base-color;
color:#fff;
// background: #0094D7;
border: 2rpx solid $base-color;
font-weight: bold;
}
.all {
font-size: $font-size-tag;
padding-top: 10rpx;
}
// 自定义样式
&.diy{
height: 60rpx;
border-radius: 40rpx;
.all{
display: none;
}
}
}
}
}
}
.bottom {
display: flex;
flex-direction: row;
position: fixed;
align-items: center;
bottom: 0;
top: auto;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx #bcbcbc;
.show-time {
width: 66%;
height: 100rpx;
line-height: 100rpx;
font-size: $font-size-base;
text-align: left;
margin-left: 40rpx;
}
.submit-btn {
width: 25%;
height: 70rpx;
line-height: 70rpx;
font-size: $font-size-base;
}
}
}
.yuyue-date-desc{
padding-top: 2rpx;
padding-bottom: 4rpx;
font-size: $font-size-tag;
color: $color-sub;
text-align: center;
}

414
pages_promotion/components/yuyue-date/yuyue-date.vue Normal file
View File

@@ -0,0 +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';
</style>