You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
8.6 KiB
356 lines
8.6 KiB
<template>
|
|
<view class="ns-time">
|
|
<uni-popup type="bottom" ref="selectTime">
|
|
<view class="box">
|
|
<view class="title">
|
|
<block v-if="obj.delivery && obj.delivery.delivery_type == 'local'">选择送达时间</block>
|
|
<block v-if="obj.delivery && obj.delivery.delivery_type == 'store'">选择自提时间</block>
|
|
<text class="iconfont icon-close" @click="close"></text>
|
|
</view>
|
|
<view class="body">
|
|
<!-- 左侧日期选择 -->
|
|
<scroll-view :scroll-y="true" class="left">
|
|
<view class="item" :class="index == keyJudge ? 'itemDay' : ''" v-for="(item, index) in dayData" :key="index" @click="selectTime('days', index, 'yes')">
|
|
<block v-if="item.title">{{ item.title }}</block>
|
|
<block v-else>{{ item.month }}</block>
|
|
<text class="itemtext">{{ item.Day }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 右侧时间选择 -->
|
|
<scroll-view :scroll-y="true" class="right">
|
|
<view
|
|
class="item"
|
|
:class="key == keyJudge && index == keys ? 'itemTime' : ''"
|
|
v-for="(item, index) in timeData"
|
|
:key="index"
|
|
@click="selectTime('time', index, 'yes')"
|
|
>
|
|
{{ item }}
|
|
<text v-if="key == keyJudge && index == keys" class="iconfont icon-yuan_checked color-base-text"></text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import unipopup from '@/components/uni-popup/uni-popup.vue';
|
|
export default {
|
|
name: "nsSelectTime",
|
|
components: {
|
|
unipopup
|
|
},
|
|
data() {
|
|
return {
|
|
//选中日期的键值
|
|
key: 0,
|
|
//选中时间的键值
|
|
keys: 0,
|
|
//渲染用数据
|
|
obj: {},
|
|
//左侧渲染时间
|
|
dayData: [],
|
|
// 右侧渲染数据
|
|
timeData: [],
|
|
//判断弹窗打开
|
|
judge: false,
|
|
//判断左侧列表是否为日期选中列表
|
|
keyJudge: 0,
|
|
//当前时间时间戳
|
|
dayTime: 0
|
|
};
|
|
},
|
|
methods: {
|
|
refresh(){
|
|
this.key = 0;
|
|
this.keys = 0;
|
|
this.keyJudge = 0;
|
|
},
|
|
/**
|
|
* 弹窗打开
|
|
*/
|
|
open(obj, type) {
|
|
this.dayData = [];
|
|
this.timeData = [];
|
|
this.obj = obj;
|
|
this.toDay(obj.dataTime.time_type, obj.dataTime.time_week);
|
|
if (this.judge) {
|
|
if (type == 'no') {
|
|
this.selectTime('', '', type);
|
|
} else {
|
|
this.$refs.selectTime.open();
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 时间选择
|
|
*/
|
|
selectTime(type, index, judge) {
|
|
if (type == 'days') {
|
|
this.keyJudge = index;
|
|
this.toTime();
|
|
} else if (type == 'time') {
|
|
this.keys = index;
|
|
this.key = this.keyJudge;
|
|
let obj = this.dayData[this.key];
|
|
obj.time = this.timeData[this.keys];
|
|
this.$emit('selectTime', { data: obj, type: judge });
|
|
this.$refs.selectTime.close();
|
|
}
|
|
|
|
if (judge == 'no') {
|
|
this.toTime(judge);
|
|
let obj = this.dayData[0];
|
|
obj.time = this.timeData[0];
|
|
this.$emit('selectTime', { data: obj, type: judge });
|
|
}
|
|
this.$forceUpdate();
|
|
},
|
|
/**
|
|
* 弹窗关闭
|
|
*/
|
|
close() {
|
|
this.$refs.selectTime.close();
|
|
},
|
|
/**
|
|
* 左侧数据处理
|
|
*/
|
|
toDay(type, obj) {
|
|
let today = new Date();
|
|
let nowYear = today.getFullYear(); //当前年
|
|
let nowMonth = today.getMonth() + 1; //当前月
|
|
let nowDate = today.getDate(); //当前日
|
|
let nowDay = today.getDay(); //当前星期几
|
|
let endDay = new Date(nowYear, nowMonth, 0).getDate(); //当月多少天
|
|
let Hours = today.getHours();
|
|
let Minutes = today.getMinutes();
|
|
this.dayTime = Number(Hours) * 3600 + Number(Minutes) * 60; //获取到当前时分秒的时间戳
|
|
let judge = false;
|
|
let num = 1; //记录循环执行过的次数
|
|
|
|
if (obj.time_week && obj.time_week.length == 7) {
|
|
//判断是否七天全有
|
|
judge = true;
|
|
}
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
let objects = {};
|
|
let dayStr = '';
|
|
switch (nowDay) {
|
|
case 1:
|
|
dayStr = '周一';
|
|
break;
|
|
case 2:
|
|
dayStr = '周二';
|
|
break;
|
|
case 3:
|
|
dayStr = '周三';
|
|
break;
|
|
case 4:
|
|
dayStr = '周四';
|
|
break;
|
|
case 5:
|
|
dayStr = '周五';
|
|
break;
|
|
case 6:
|
|
dayStr = '周六';
|
|
break;
|
|
case 0:
|
|
dayStr = '周日';
|
|
break;
|
|
}
|
|
//判断当天是否能够配送、自提
|
|
if (type == 0 || judge || obj.indexOf(nowDay.toString()) != -1) {
|
|
switch (num) {
|
|
case 1:
|
|
if (i == 0) {
|
|
if (this.obj.dataTime.end_time < this.dayTime) {
|
|
i = i - 1;
|
|
} else {
|
|
objects = {
|
|
title: '今天',
|
|
type: 'special',
|
|
month: nowMonth + '月' + nowDate + '日',
|
|
Day: '(' + dayStr + ')'
|
|
};
|
|
this.dayData.push(objects); //左侧日期数据处理
|
|
}
|
|
}
|
|
break;
|
|
case 2:
|
|
if (i == 0 || i == 1) {
|
|
objects = {
|
|
title: '明天',
|
|
month: nowMonth + '月' + nowDate + '日',
|
|
Day: '(' + dayStr + ')'
|
|
};
|
|
this.dayData.push(objects); //左侧日期数据处理
|
|
}
|
|
break;
|
|
default:
|
|
objects = {
|
|
title: '',
|
|
month: nowMonth + '月' + nowDate + '日',
|
|
Day: '(' + dayStr + ')'
|
|
};
|
|
this.dayData.push(objects); //左侧日期数据处理
|
|
}
|
|
} else {
|
|
i = i - 1;
|
|
}
|
|
|
|
if (nowDate != endDay) {
|
|
nowDate += 1;
|
|
} else {
|
|
if (nowMonth != 12) {
|
|
nowMonth += 1;
|
|
} else {
|
|
nowMonth = 1;
|
|
}
|
|
nowDate = 1;
|
|
}
|
|
|
|
if (nowDay != 6) {
|
|
nowDay += 1;
|
|
} else {
|
|
nowDay = 0;
|
|
}
|
|
num += 1;
|
|
|
|
if (i == 6) {
|
|
this.judge = true;
|
|
}
|
|
}
|
|
|
|
this.toTime(); //处理右侧时间数据
|
|
},
|
|
/**
|
|
* 处理右侧时间数据
|
|
*/
|
|
toTime(judge) {
|
|
//并非打开弹窗进入时，所有数据置零
|
|
if (judge == 'no') {
|
|
this.key = 0;
|
|
this.keys = 0;
|
|
this.keyJudge = 0;
|
|
}
|
|
|
|
let timeData = [];
|
|
|
|
if (!this.obj.dataTime.delivery_time) {
|
|
this.obj.dataTime.delivery_time = [ {start_time: this.obj.dataTime.start_time, end_time: this.obj.dataTime.end_time} ]
|
|
}
|
|
|
|
//判断选中是否为当天
|
|
let remainder = 0;
|
|
//当天配送自提的话，向后推迟30分钟
|
|
let newDayTime = JSON.parse(JSON.stringify(this.dayTime));
|
|
newDayTime = Math.ceil(this.dayTime / 600) * 600 + 1800;
|
|
|
|
//判断选中是否为当天
|
|
let timeJudage = false;
|
|
if (this.dayData[this.keyJudge] && this.dayData[this.keyJudge].type && newDayTime > this.obj.dataTime.start_time) timeJudage = true;
|
|
|
|
let timeInterval = this.obj.dataTime.time_interval ? this.obj.dataTime.time_interval * 60 : 1200;
|
|
|
|
this.obj.dataTime.delivery_time.forEach(item => {
|
|
item.end_time = item.end_time ? item.end_time : 86400;
|
|
let num = parseInt((parseInt(item.end_time) - parseInt(item.start_time)) / timeInterval);
|
|
let time = parseInt(item.start_time);
|
|
for (let i = 0; i < num; i++) {
|
|
if (timeJudage) {
|
|
if (time >= newDayTime) {
|
|
if (this.obj.dataTime.time_interval) {
|
|
if (time <= item.end_time) timeData.push(this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval));
|
|
} else {
|
|
timeData.push(this.$util.getTimeStr(time));
|
|
}
|
|
}
|
|
} else {
|
|
if (this.obj.dataTime.time_interval) {
|
|
if (time <= item.end_time) timeData.push(this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval));
|
|
} else {
|
|
timeData.push(this.$util.getTimeStr(time));
|
|
}
|
|
}
|
|
time = parseInt(time) + timeInterval;
|
|
}
|
|
})
|
|
this.timeData = timeData;
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
height: 728rpx;
|
|
.title {
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
position: relative;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-bottom: 1rpx solid #f7f4f4;
|
|
.icon-close {
|
|
font-size: 26rpx;
|
|
color: #909399;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
.body {
|
|
width: 100%;
|
|
height: calc(100% - 90rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
.left {
|
|
width: 230rpx;
|
|
background: #f8f8f8;
|
|
height: 100%;
|
|
.item {
|
|
width: 100%;
|
|
padding: 16rpx 30rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.itemDay {
|
|
background: #ffffff;
|
|
}
|
|
}
|
|
.right {
|
|
width: calc(100% - 230rpx);
|
|
height: 100%;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
.item {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 72rpx;
|
|
.icon-yuan_checked {
|
|
font-size: 38rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
.itemTime {
|
|
color: var(--main-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|