|
|
|
|
@ -1,163 +1,215 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, reactive } from 'vue'
|
|
|
|
|
const timePopup2 = ref<UniHelper.UniPopupInstance>()
|
|
|
|
|
|
|
|
|
|
const activeDayIndex = ref(0)
|
|
|
|
|
const activeTimeIndex = ref(0)
|
|
|
|
|
|
|
|
|
|
import { onReady } from '@dcloudio/uni-app'
|
|
|
|
|
const popup = ref<UniHelper.UniPopupInstance>()
|
|
|
|
|
// 定义返回给父组件的方法
|
|
|
|
|
const emit = defineEmits(['change'])
|
|
|
|
|
|
|
|
|
|
const dayList = reactive([
|
|
|
|
|
{
|
|
|
|
|
label: '今天',
|
|
|
|
|
val: "today",
|
|
|
|
|
active: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '明天',
|
|
|
|
|
val: 'tommrow',
|
|
|
|
|
active: false
|
|
|
|
|
}
|
|
|
|
|
const jmhDay = ref('')
|
|
|
|
|
const sendTime = ref('')
|
|
|
|
|
const sRightDate = ref('')
|
|
|
|
|
const sLDate = ref('')
|
|
|
|
|
let timeList = reactive([
|
|
|
|
|
{disabled:false,time:'11:00-13:00', id:1},
|
|
|
|
|
{disabled:false,time:'13:00-15:00', id:2},
|
|
|
|
|
{disabled:false,time:'15:00-17:00', id:3},
|
|
|
|
|
{disabled:false,time:'17:00-19:00',id:4},
|
|
|
|
|
{disabled:false,time:'19:00-21:00',id:5},
|
|
|
|
|
{disabled:false,time:'21:00-23:00',id:6}
|
|
|
|
|
])
|
|
|
|
|
const timeList = reactive([
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
label: '09:00-11:00',
|
|
|
|
|
val: '09:00-11:00',
|
|
|
|
|
active: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
label: '11:00-13:00',
|
|
|
|
|
val: '11:00-13:00',
|
|
|
|
|
active: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
label: '13:00-15:00',
|
|
|
|
|
val: '13:00-15:00',
|
|
|
|
|
active: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 4,
|
|
|
|
|
label: '15:00-17:00',
|
|
|
|
|
val: '15:00-17:00',
|
|
|
|
|
active: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 5,
|
|
|
|
|
label: '17:00-19:00',
|
|
|
|
|
val: '17:00-19:00',
|
|
|
|
|
active: false
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
const show = ()=> {
|
|
|
|
|
timePopup2.value?.open?.()
|
|
|
|
|
}
|
|
|
|
|
const hide = ()=> {
|
|
|
|
|
const daylabel = dayList[activeDayIndex.value].label
|
|
|
|
|
const timelabel = timeList[activeTimeIndex.value].label
|
|
|
|
|
const str = daylabel + ' ' + timelabel
|
|
|
|
|
emit('change', str)
|
|
|
|
|
timePopup2.value?.close?.()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleDayChange = (e) => {
|
|
|
|
|
const idx = e.target.dataset.val
|
|
|
|
|
activeDayIndex.value = idx
|
|
|
|
|
}
|
|
|
|
|
const handleTimeChange = (e) => {
|
|
|
|
|
const idx = e.target.dataset.val
|
|
|
|
|
activeTimeIndex.value = idx
|
|
|
|
|
const getDate = (date, AddDayCount = 0) => {
|
|
|
|
|
if (!date) {
|
|
|
|
|
date = new Date()
|
|
|
|
|
}
|
|
|
|
|
if (typeof date !== 'object'){
|
|
|
|
|
date = date.replace(/-/g, '/')
|
|
|
|
|
}
|
|
|
|
|
const dd = new Date(date)
|
|
|
|
|
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
|
|
|
|
const y = dd.getFullYear()
|
|
|
|
|
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
|
|
|
|
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
|
|
|
|
return {
|
|
|
|
|
fullDate: y + '-' + m + '-' + d,
|
|
|
|
|
year: y,
|
|
|
|
|
month: m,
|
|
|
|
|
date: d,
|
|
|
|
|
day: dd.getDay()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//获取当前日期的下一天日期
|
|
|
|
|
const getNextDay = () => {
|
|
|
|
|
const day = getWeekDate(new Date().getDay());
|
|
|
|
|
const newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(new Date())
|
|
|
|
|
const isDay = getDate().fullDate;
|
|
|
|
|
const nextDay = getWeekDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000).getDay());
|
|
|
|
|
const nDate = getDate(new Date(new Date().getTime()+ 24 * 60 * 60 * 1000)).fullDate;
|
|
|
|
|
console.log(nDate);
|
|
|
|
|
const HDay = getWeekDate(new Date(new Date().getTime() + 48 * 60 * 60 * 1000).getDay());
|
|
|
|
|
const hDate=getDate(new Date(new Date().getTime()+ 48 * 60 * 60 * 1000)).fullDate;
|
|
|
|
|
let d1 = hDate.substr(hDate.indexOf('-')+1)
|
|
|
|
|
sLDate.value = isDay;
|
|
|
|
|
selectLDate(1);
|
|
|
|
|
jmhDay.value = [{name:day,id:1,formatDate:isDay,desc:'今天'},{name:nextDay,id:2,formatDate:nDate,desc:'明天'},
|
|
|
|
|
{name:HDay,id:3,formatDate:hDate,desc:d1.substr(0,d1.indexOf('-'))+'月'+d1.substr(d1.indexOf('-')+1)+'日'}]
|
|
|
|
|
}
|
|
|
|
|
const getWeekDate = (day) => {
|
|
|
|
|
const weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
|
|
|
|
|
const week = weeks[day];
|
|
|
|
|
return week;
|
|
|
|
|
}
|
|
|
|
|
const selectRDate = (item) => {
|
|
|
|
|
if(item.disabled){
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
sRightDate.value = item.time;
|
|
|
|
|
sendTime.value = sLDate.value +' ' +item.time;
|
|
|
|
|
debugger
|
|
|
|
|
popup.value?.close?.()
|
|
|
|
|
emit('change', sendTime.value)
|
|
|
|
|
}
|
|
|
|
|
const selectLDate = (val) => {
|
|
|
|
|
console.log(val);
|
|
|
|
|
if(val!=1){
|
|
|
|
|
sLDate.value = val.formatDate;
|
|
|
|
|
}
|
|
|
|
|
let t = [
|
|
|
|
|
{disabled:false,time:'11:00-13:00', id:1 },
|
|
|
|
|
{disabled:false,time:'13:00-15:00', id:2 },
|
|
|
|
|
{disabled:false,time:'15:00-17:00', id:3 },
|
|
|
|
|
{disabled:false,time:'17:00-19:00',id:4},
|
|
|
|
|
{disabled:false,time:'19:00-21:00',id:5},
|
|
|
|
|
{disabled:false,time:'21:00-23:00',id:6}
|
|
|
|
|
]
|
|
|
|
|
if(val.desc=='今天'||val==1){
|
|
|
|
|
if(new Date().getHours()<=10){
|
|
|
|
|
timeList = t;
|
|
|
|
|
}else if(new Date().getHours()<=12){
|
|
|
|
|
t[0].disabled=true;
|
|
|
|
|
timeList = t;
|
|
|
|
|
}else if(new Date().getHours()<=14){
|
|
|
|
|
t[0].disabled=true;
|
|
|
|
|
t[1].disabled=true;
|
|
|
|
|
timeList = t;
|
|
|
|
|
}else if(new Date().getHours()<=16){
|
|
|
|
|
t[0].disabled=true;
|
|
|
|
|
t[1].disabled=true;
|
|
|
|
|
t[2].disabled=true;
|
|
|
|
|
timeList = t;
|
|
|
|
|
}else if(new Date().getHours()<=18){
|
|
|
|
|
t[0].disabled=true;
|
|
|
|
|
t[1].disabled=true;
|
|
|
|
|
t[2].disabled=true;
|
|
|
|
|
t[3].disabled=true;
|
|
|
|
|
timeList = t;
|
|
|
|
|
}else if(new Date().getHours()<=20){
|
|
|
|
|
t[0].disabled=true;
|
|
|
|
|
t[1].disabled=true;
|
|
|
|
|
t[2].disabled=true;
|
|
|
|
|
t[3].disabled=true;
|
|
|
|
|
t[4].disabled=true;
|
|
|
|
|
timeList = t;
|
|
|
|
|
}
|
|
|
|
|
console.log('最终的时间列表');
|
|
|
|
|
console.log(timeList);
|
|
|
|
|
} else {
|
|
|
|
|
timeList = t;
|
|
|
|
|
}
|
|
|
|
|
sRightDate.value = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 暴露方法给父组件
|
|
|
|
|
defineExpose({
|
|
|
|
|
show
|
|
|
|
|
// 页面加载
|
|
|
|
|
onReady(async () => {
|
|
|
|
|
getNextDay()
|
|
|
|
|
popup.value?.open?.()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
const hide = ()=> {
|
|
|
|
|
popup.value?.close?.()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<uni-popup class="time-popup" :is-mask-click="false" ref="timePopup2" type="bottom">
|
|
|
|
|
<view class="popup-root">
|
|
|
|
|
<view class="title">
|
|
|
|
|
<view class="text">期望上门时间</view>
|
|
|
|
|
<view class="close" @click="hide">X</view>
|
|
|
|
|
<uni-popup ref="popup" type="bottom">
|
|
|
|
|
<view class="pBoxUp">
|
|
|
|
|
<view class="textCenter f32 psTitle border-bottom">
|
|
|
|
|
请选择取件时间
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="time-cont">
|
|
|
|
|
<view class="left" @click="handleDayChange">
|
|
|
|
|
<view v-for="(item, index) in dayList" :class="[{ active: index == activeDayIndex }, 'item']" :key="item.id" :data-val="index">
|
|
|
|
|
{{item.label}}
|
|
|
|
|
<view class="shopPopup bgff justify-between default-flex">
|
|
|
|
|
<view class="f30 t666 lBox">
|
|
|
|
|
<view v-for="(item,index) in jmhDay" @click="selectLDate(item)" :class="sLDate==item.formatDate?'ed':''" class="boxLDate"
|
|
|
|
|
:key="index">{{item.desc}}({{item.name}})
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="right" @click="handleTimeChange">
|
|
|
|
|
<view v-for="(item, index2) in timeList" :class="[{ active: index2 == activeTimeIndex }, 'item']" :key="item.id" :data-val="index2">
|
|
|
|
|
<view>{{item.label}}</view>
|
|
|
|
|
<!-- <uni-icons type="checkmarkempty" v-if="index == activeTimeIndex" size="30"></uni-icons> -->
|
|
|
|
|
<view >
|
|
|
|
|
<view v-for="(item,index) in timeList" @click="selectRDate(item)"
|
|
|
|
|
:class="[sRightDate==item.time?'ed':'',item.disabled?'disabled':'']" :key="index" class="rBox"
|
|
|
|
|
>
|
|
|
|
|
{{item.time}}{{item.disabled?' (超出配送时间)':''}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="empty f28 text-center" style="color: #999;margin-top: 40rpx;"
|
|
|
|
|
v-if="timeList.length<1">
|
|
|
|
|
今天没有时间了,看看明天吧
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="cancelButton" @click="hide()">
|
|
|
|
|
取消
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-popup>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.time-popup {
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
line-height: 1;
|
|
|
|
|
padding: 40rpx 20rpx;
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.pBoxUp{
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
.psTitle{
|
|
|
|
|
line-height: 100rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-bottom: 1rpx solid #f7f7f7;
|
|
|
|
|
}
|
|
|
|
|
.shopPopup{
|
|
|
|
|
backgound:#ffffff;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
border-bottom: 1rpx solid #ddd;
|
|
|
|
|
color: #444;
|
|
|
|
|
background-color:#fff;
|
|
|
|
|
.close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 24rpx;
|
|
|
|
|
top: 40rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.time-cont {
|
|
|
|
|
min-height: 300rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.left {
|
|
|
|
|
width: 300rpx;
|
|
|
|
|
background-color: #F1F1F7;
|
|
|
|
|
.item {
|
|
|
|
|
margin: 10rpx 0;
|
|
|
|
|
padding: 20rpx 20rpx;
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
&.active {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
color: #3775F6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
flex: 1;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
.item {
|
|
|
|
|
margin: 10rpx 0;
|
|
|
|
|
padding: 40rpx 0;
|
|
|
|
|
&.active {
|
|
|
|
|
color: #3775F6;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.boxLDate{
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
height:80rpx;
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
width:273rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.lBox{
|
|
|
|
|
color:#666666;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
.boxLDate.ed{
|
|
|
|
|
color:#1DA337;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
.rBox.ed{
|
|
|
|
|
color:#1DA337;
|
|
|
|
|
}
|
|
|
|
|
.rBox{
|
|
|
|
|
width: 239px;
|
|
|
|
|
padding-left: 20rpx;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #333;
|
|
|
|
|
height:80rpx;
|
|
|
|
|
background: #fff;
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
}
|
|
|
|
|
.cancelButton{
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
color: #999;
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
line-height: 100rpx;
|
|
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
|
|
background: #FFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
王文杰
8 months ago