忙时设置
This commit is contained in:
parent
fa28348506
commit
f7da132d49
|
|
@ -14,7 +14,15 @@
|
|||
@click.stop="(nowTimes < item.timeStamp) || (msformatArr.indexOf(item.hours) == -1) ? hosts(item) : ''"
|
||||
:style="[{'color':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#999999' : '')},{'background':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#fff' : '')},{'fontSize':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '32rpx' : '30rpx'},
|
||||
{'letter-spacing':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '4rpx' : '0rpx'}]">
|
||||
{{ ((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1)) || (msformatArr.indexOf(item.hours) !== -1) ? '约满' : item.hours }}
|
||||
<view class="item-box">
|
||||
<span>{{item.hours}}</span>
|
||||
<span>
|
||||
{{(nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 )?'不可预约':'可预约'}}
|
||||
|
||||
<!-- {{ ((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1)) || (msformatArr.indexOf(item.hours) !== -1) ? '不可预约' : '' }} -->
|
||||
</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #096f4b;width: 100%;text-align: center;" @click="sub()">添加时间</view>
|
||||
|
|
@ -60,7 +68,7 @@
|
|||
let today = new Date();
|
||||
let nowTime = today.getTime() // 当前时间戳
|
||||
this.nowTimes = parseInt(nowTime / 1000)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let newDate = new Date(today.getTime() + i * 1000 * 60 * 60 * 24)
|
||||
let month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(
|
||||
newDate.getMonth()) + 1) // 当前月份
|
||||
|
|
@ -72,9 +80,9 @@
|
|||
if (remTime == 0) {
|
||||
week = "今天"
|
||||
} else if (remTime == 86400) {
|
||||
week = "明天"
|
||||
week = ""
|
||||
} else if (remTime == 172800) {
|
||||
week = "后天"
|
||||
week = ""
|
||||
} else {
|
||||
if (backDays == 0) {
|
||||
week = "周日"
|
||||
|
|
@ -102,7 +110,7 @@
|
|||
this.dayArr = dateArr
|
||||
|
||||
let timeArr = []
|
||||
for (let i = 0; i < 5; i++) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
// let as = new Date(new Date().toLocaleDateString()).getTime() / 1000
|
||||
let as = new Date(new Date().toLocaleDateString()).getTime() / 1000 + i * 60 * 60 * 24
|
||||
let staTime = this.sta_num * 60 * 60 + as
|
||||
|
|
@ -231,6 +239,18 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item-box{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 21px;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
page {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
|
@ -275,22 +295,31 @@
|
|||
overflow-y: auto;
|
||||
|
||||
.time_x {
|
||||
width: 25%;
|
||||
padding: 0 4px;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: 54rpx;
|
||||
// width: 20%;
|
||||
// height: 54rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 10rpx 0;
|
||||
// margin: 10rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
// background-color: #E8FAE1;
|
||||
}
|
||||
|
||||
.time_x_sty {
|
||||
background-color: #E8FAE1;
|
||||
border: 1px solid #096f4b;
|
||||
color: #096f4b;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
</view>
|
||||
</view>
|
||||
<view scroll-y class="calendar_time">
|
||||
<view class="time_x" :class="host_index == item.timeStamp ? 'time_x_sty' : '' "
|
||||
<view class="time_x" :class="{ time_x_sty: host_index.includes(item.timeStamp) }"
|
||||
v-for="(item, index) in hostArr[day_index]" :key="index"
|
||||
@click.stop="(nowTimes < item.timeStamp) || (msformatArr.indexOf(item.hours) == -1) ? hosts(item) : ''"
|
||||
:style="[{'color':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#999999' : '')},{'fontSize':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '32rpx' : '30rpx'},
|
||||
:style="[{'color':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#999999' : '')},{'background':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#fff' : '')},{'fontSize':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '32rpx' : '30rpx'},
|
||||
{'letter-spacing':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '4rpx' : '0rpx'}]">
|
||||
{{ ((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1)) || (msformatArr.indexOf(item.hours) !== -1) ? '约满' : item.hours }}
|
||||
</view>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
dayArr: [],
|
||||
hostArr: [],
|
||||
day_index: 0,
|
||||
host_index: '',
|
||||
host_index: [],
|
||||
host_All: [],
|
||||
nowTimes: '',
|
||||
isShow: true,
|
||||
|
|
@ -161,21 +161,24 @@
|
|||
},
|
||||
// 点击时间
|
||||
hosts(e) {
|
||||
if ( (this.nowTimes < e.timeStamp) && (this.msformatArr.indexOf(e.hours) == -1)) {
|
||||
this.host_All = e
|
||||
this.host_index = e.timeStamp
|
||||
var aa=[];
|
||||
if ( (this.nowTimes < e.timeStamp) && ( this.msformatArr.indexOf(e.hours)=== -1)) {
|
||||
// this.host_All.push(e);
|
||||
// this.host_index.push(e.timeStamp);
|
||||
var index=this.host_index.indexOf(e.timeStamp)
|
||||
if (index === -1) {
|
||||
this.host_All.push(e);
|
||||
this.host_index.push(e.timeStamp);
|
||||
} else {
|
||||
this.host_All.splice(index, 1);
|
||||
this.host_index.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 点击立即预约
|
||||
sub() {
|
||||
|
||||
console.log(this.host_All);
|
||||
delete this.host_All.timeStamp;
|
||||
|
||||
|
||||
|
||||
if (this.host_index == '') {
|
||||
if (this.host_index == []) {
|
||||
this.$queue.showToast('请选择时间')
|
||||
} else {
|
||||
let day = this.dayArr[this.day_index]
|
||||
|
|
@ -183,10 +186,11 @@
|
|||
let comTime = {
|
||||
days: day.days,
|
||||
weeks: day.weeks,
|
||||
hours: this.host_All.hours,
|
||||
timeStamp: this.host_All.timeStamp,
|
||||
hours: this.host_All,
|
||||
timeStamp: this.host_All,
|
||||
time: time
|
||||
}
|
||||
console.log("点击立即预约",comTime);
|
||||
this.$emit('getTime', comTime);
|
||||
}
|
||||
},
|
||||
|
|
@ -281,11 +285,12 @@
|
|||
margin: 10rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
// background-color: #E8FAE1;
|
||||
}
|
||||
|
||||
.time_x_sty {
|
||||
background-color: #E8FAE1;
|
||||
color: #096f4b !important;
|
||||
color: #096f4b;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="calendar">
|
||||
<view class="calendar_day">
|
||||
<view class="day_x" :style="{'color': (day_index == index ? '#52C375' : '')}"
|
||||
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 scroll-y class="calendar_time">
|
||||
<view class="time_x" :class="{ time_x_sty: host_index.includes(item.timeStamp) }"
|
||||
v-for="(item, index) in hostArr[day_index]" :key="index"
|
||||
@click.stop="(nowTimes < item.timeStamp) || (msformatArr.indexOf(item.hours) == -1) ? hosts(item) : ''"
|
||||
:style="[{'color':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#999999' : '')},{'background':((nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 ) ? '#fff' : '')},{'fontSize':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '32rpx' : '30rpx'},
|
||||
{'letter-spacing':((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1 )) || (msformatArr.indexOf(item.hours) !== -1 ) ? '4rpx' : '0rpx'}]">
|
||||
<view class="item-box">
|
||||
<span>{{item.hours}}</span>
|
||||
<span>
|
||||
{{(nowTimes > item.timeStamp) || (msformatArr.indexOf(item.hours) !== -1 )?'不可预约':'可预约'}}
|
||||
|
||||
<!-- {{ ((nowTimes < item.timeStamp) && (msformatArr.indexOf(item.hours) !== -1)) || (msformatArr.indexOf(item.hours) !== -1) ? '不可预约' : '' }} -->
|
||||
</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #096f4b;width: 100%;text-align: center;" @click="sub()">添加时间</view>
|
||||
</view>
|
||||
<!-- <view class="sub" @click="sub()">
|
||||
添加待选
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
sta_num: {
|
||||
type: Number | String,
|
||||
default: 9
|
||||
},
|
||||
end_num: {
|
||||
type: Number | String,
|
||||
default: 18
|
||||
},
|
||||
int_num: {
|
||||
type: Number | String,
|
||||
default: 30
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dayArr: [],
|
||||
hostArr: [],
|
||||
day_index: 0,
|
||||
host_index: [],
|
||||
host_All: [],
|
||||
nowTimes: '',
|
||||
isShow: true,
|
||||
msformatArr: [],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let dateArr = []
|
||||
let today = new Date();
|
||||
let nowTime = today.getTime() // 当前时间戳
|
||||
this.nowTimes = parseInt(nowTime / 1000)
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let newDate = new Date(today.getTime() + i * 1000 * 60 * 60 * 24)
|
||||
let month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(
|
||||
newDate.getMonth()) + 1) // 当前月份
|
||||
let day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate() //当前日期
|
||||
let backTime = newDate.getTime() // 几天后时间戳
|
||||
let backDays = newDate.getDay() // 几天后周几
|
||||
let remTime = (backTime - nowTime) / 1000 // 距离今天几天
|
||||
let week = ''
|
||||
if (remTime == 0) {
|
||||
week = "今天"
|
||||
} else if (remTime == 86400) {
|
||||
week = ""
|
||||
} else if (remTime == 172800) {
|
||||
week = ""
|
||||
} else {
|
||||
if (backDays == 0) {
|
||||
week = "周日"
|
||||
} else if (backDays == 1) {
|
||||
week = "周一"
|
||||
} else if (backDays == 2) {
|
||||
week = "周二"
|
||||
} else if (backDays == 3) {
|
||||
week = "周三"
|
||||
} else if (backDays == 4) {
|
||||
week = "周四"
|
||||
} else if (backDays == 5) {
|
||||
week = "周五"
|
||||
} else if (backDays == 6) {
|
||||
week = "周六"
|
||||
}
|
||||
}
|
||||
let fullDate = `${month}-${day}`
|
||||
let ass = {
|
||||
weeks: week,
|
||||
days: fullDate
|
||||
}
|
||||
dateArr.push(ass)
|
||||
}
|
||||
this.dayArr = dateArr
|
||||
|
||||
let timeArr = []
|
||||
for (let i = 0; i < 3; i++) {
|
||||
// let as = new Date(new Date().toLocaleDateString()).getTime() / 1000
|
||||
let as = new Date(new Date().toLocaleDateString()).getTime() / 1000 + i * 60 * 60 * 24
|
||||
let staTime = this.sta_num * 60 * 60 + as
|
||||
let endTime = this.end_num * 60 * 60 + as
|
||||
let int = this.int_num * 60
|
||||
let timeArr_s = []
|
||||
let datatime = {
|
||||
hours: '00:00',
|
||||
timeStamp: ''
|
||||
}
|
||||
|
||||
timeArr_s.push(datatime)
|
||||
for (staTime; staTime < endTime - int; staTime + int) {
|
||||
staTime = staTime + int
|
||||
let hours = this.times(staTime)
|
||||
let asb = {
|
||||
hours,
|
||||
timeStamp: staTime
|
||||
}
|
||||
timeArr_s.push(asb)
|
||||
if (timeArr_s.length == 2) {
|
||||
timeArr_s[0].timeStamp = timeArr_s[1].timeStamp - 1800
|
||||
}
|
||||
}
|
||||
timeArr.push(timeArr_s)
|
||||
|
||||
}
|
||||
|
||||
this.hostArr = timeArr;
|
||||
|
||||
uni.$on("sendChildMsList", (e) => {
|
||||
console.log(e);
|
||||
if (e) {
|
||||
this.msformatArr = e;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off("sendChildMsList");
|
||||
},
|
||||
destroyed() {
|
||||
uni.$off("sendChildMsList");
|
||||
},
|
||||
methods: {
|
||||
// 点击日期
|
||||
dayList(e, index) {
|
||||
this.day_index = index
|
||||
let day = this.dayArr[this.day_index]
|
||||
let comTime = {
|
||||
days: day.days,
|
||||
weeks: day.weeks
|
||||
}
|
||||
this.$emit('getDate', comTime);
|
||||
},
|
||||
// 点击时间
|
||||
hosts(e) {
|
||||
var aa=[];
|
||||
if ( (this.nowTimes < e.timeStamp) && ( this.msformatArr.indexOf(e.hours)=== -1)) {
|
||||
// this.host_All.push(e);
|
||||
// this.host_index.push(e.timeStamp);
|
||||
var index=this.host_index.indexOf(e.timeStamp)
|
||||
if (index === -1) {
|
||||
this.host_All.push(e);
|
||||
this.host_index.push(e.timeStamp);
|
||||
} else {
|
||||
this.host_All.splice(index, 1);
|
||||
this.host_index.splice(index, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击立即预约
|
||||
sub() {
|
||||
delete this.host_All.timeStamp;
|
||||
if (this.host_index == []) {
|
||||
this.$queue.showToast('请选择时间')
|
||||
} else {
|
||||
let day = this.dayArr[this.day_index]
|
||||
let time = this.time(this.host_index)
|
||||
let comTime = {
|
||||
days: day.days,
|
||||
weeks: day.weeks,
|
||||
hours: this.host_All,
|
||||
timeStamp: this.host_All,
|
||||
time: time
|
||||
}
|
||||
console.log("点击立即预约",comTime);
|
||||
this.$emit('getTime', comTime);
|
||||
}
|
||||
},
|
||||
// 格式化时间
|
||||
times(data) {
|
||||
let date = new Date(data * 1000);
|
||||
//时间戳为10位需*1000，时间戳为13位的话不需乘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);
|
||||
//时间戳为10位需*1000，时间戳为13位的话不需乘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">
|
||||
.item-box{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 21px;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
page {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #52C375;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 710rpx;
|
||||
height: min-content;
|
||||
background-color: #FFFFFF;
|
||||
margin: 20rpx auto 10rpx;
|
||||
border-radius: 8rpx;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.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: min-content;
|
||||
flex-flow: row wrap;
|
||||
align-content: flex-start;
|
||||
margin: 20rpx 0;
|
||||
overflow-y: auto;
|
||||
|
||||
.time_x {
|
||||
width: 25%;
|
||||
padding: 0 4px;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// width: 20%;
|
||||
// height: 54rpx;
|
||||
border-radius: 26rpx;
|
||||
// margin: 10rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
// background-color: #E8FAE1;
|
||||
}
|
||||
|
||||
.time_x_sty {
|
||||
border: 1px solid #096f4b;
|
||||
color: #096f4b;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.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: #096f4b;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
&.active{
|
||||
// background: #0094D7;
|
||||
border: 1px solid #FB5D6B;
|
||||
border: 1px solid rgb(40, 186, 146);
|
||||
font-weight: bold;
|
||||
}
|
||||
.all{
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
<view class="content">
|
||||
<view class="container">
|
||||
<!-- 日期列表 -->
|
||||
<view class="container-top">
|
||||
<span>设置不可接单时间</span>
|
||||
<span>(只能设置近3天的时间)</span>
|
||||
</view>
|
||||
<scroll-view class="scroll-view_H b-t b-b" scroll-x>
|
||||
<block v-for="(item,index) in dateArr" :key="index">
|
||||
<div class="flex-box" @click="selectDateEvent(index,item)" :class="{ borderb: index==dateActive}">
|
||||
|
|
@ -27,27 +31,10 @@
|
|||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<!-- 预约时间段 -->
|
||||
<view class="time-box" v-else>
|
||||
<template v-for="(item,_index) in timeArr">
|
||||
<view class="item" :key="_index">
|
||||
<view class="item-box" :class="{'disable':item.disable || item.isInclude,
|
||||
'active':item.time == timeQuanBegin || item.time == timeQuanEnd }"
|
||||
:style="{color:item.time == timeQuanBegin || item.time == timeQuanEnd? selectedItemColor:'#333'}"
|
||||
@click="handleSection(_index,item)">
|
||||
<text>{{item.time}}</text>
|
||||
<text class="all">{{item.disable?disableText:undisableText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="show-time" v-if="!isMultiple && !isSection && !isQuantum">
|
||||
预约时间：{{orderDateTime}}
|
||||
</view>
|
||||
<button form-type="submit" type="default" size="mini" class="submit-btn" @click="handleSubmit">
|
||||
保存
|
||||
添加时间
|
||||
</button>
|
||||
|
||||
</view>
|
||||
|
|
@ -102,9 +89,11 @@
|
|||
},
|
||||
beginTime: {
|
||||
type: String,
|
||||
default: "00:30"
|
||||
},
|
||||
endTime: {
|
||||
type: String,
|
||||
default: "23:30"
|
||||
},
|
||||
appointTime: { // 预约的时间
|
||||
type: Array,
|
||||
|
|
@ -124,6 +113,9 @@
|
|||
handler(val) {
|
||||
if (val && val.length) {
|
||||
this.initOnload()
|
||||
}else{
|
||||
this.orderTimeArr={}
|
||||
this.initOnload()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -156,8 +148,21 @@
|
|||
},
|
||||
methods: {
|
||||
initOnload() {
|
||||
this.dateArr = initData() // 日期栏初始化
|
||||
console.log(this.dateArr)
|
||||
var danqian=initData() // 日期栏初始化
|
||||
// this.dateArr = initData() // 日期栏初始化
|
||||
let newObj = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let key = danqian[i];
|
||||
if (key.week == '今天') {
|
||||
key.week = "今天"
|
||||
} else if (key.week == "明天") {
|
||||
key.week = ""
|
||||
} else if (key.week == '后天') {
|
||||
key.week = ""
|
||||
}
|
||||
newObj.push(key)
|
||||
}
|
||||
this.dateArr = newObj
|
||||
this.timeArr = initTime(this.beginTime, this.endTime, this.timeInterval, this.isQuantum) //时间选项初始化
|
||||
this.timeQuanBegin = this.timeQuanEnd = ""
|
||||
let isFullTime = true
|
||||
|
|
@ -185,7 +190,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
//判断是当前这一天，选中时间小于当前时间则禁用
|
||||
if (this.selectDate == this.nowDate && currentTime().time > item.time) {
|
||||
|
|
@ -218,13 +222,11 @@
|
|||
|
||||
// 对多选操作的已选时间的回显
|
||||
if (this.isMultiple && (this.orderTimeArr[this.selectDate] || []).includes(item.time)) {
|
||||
item.isActive = true
|
||||
item.isActive = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
this.orderDateTime = isFullTime ? "暂无选择" : this.selectDate
|
||||
this.timeActive = -1
|
||||
for (let i = 0, len = this.timeArr.length; i < len; i++) {
|
||||
|
|
@ -246,6 +248,7 @@
|
|||
// 时间选择事件
|
||||
selectTimeEvent(index, item) {
|
||||
if (this.isQuantum) {
|
||||
console.log("333333")
|
||||
return this.handleSelectQuantum(index, item)
|
||||
|
||||
}
|
||||
|
|
@ -265,6 +268,7 @@
|
|||
|
||||
// 选择时间段
|
||||
handleSection(index, item) {
|
||||
console.log("handleSection")
|
||||
if (item.disable) return
|
||||
|
||||
function clearTime() {
|
||||
|
|
@ -324,7 +328,7 @@
|
|||
end: `${this.selectDate} ${item.end}:00`,
|
||||
}
|
||||
}
|
||||
console.log(this.orderTimeArr)
|
||||
console.log("handleSelectQuantum",this.orderTimeArr)
|
||||
},
|
||||
handleChange() {
|
||||
this.timeQuanBegin > this.timeQuanEnd && ([this.timeQuanBegin, this.timeQuanEnd] = [this.timeQuanEnd, this
|
||||
|
|
@ -340,7 +344,6 @@
|
|||
})
|
||||
return
|
||||
}
|
||||
console.log(this.orderTimeArr)
|
||||
if (this.isMultiple) {
|
||||
if (this.isQuantum) {
|
||||
this.$emit('change', this.orderTimeArr)
|
||||
|
|
@ -363,11 +366,28 @@
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './pretty-times.scss';
|
||||
|
||||
.container-top span:nth-child(1){
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.container-top span:nth-child(2){
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
.container-top{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view-content{
|
||||
display:flex;
|
||||
}
|
||||
.content {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
|
|
@ -378,10 +398,10 @@
|
|||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
top: auto;
|
||||
left: 0px;
|
||||
// position: fixed;
|
||||
// bottom: 8px;
|
||||
// top: auto;
|
||||
// left: 0px;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
@ -397,15 +417,19 @@
|
|||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 25%;
|
||||
height: 40px;
|
||||
color: white;
|
||||
background-color: #CA89FF;
|
||||
font-size: 15px;
|
||||
line-height: 40px;
|
||||
color: rgb(9, 111, 75);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
// width: 25%;
|
||||
// height: 40px;
|
||||
// color: white;
|
||||
// background-color: #CA89FF;
|
||||
// font-size: 15px;
|
||||
// line-height: 40px;
|
||||
// text-align: center;
|
||||
// margin: auto;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
.fontw {
|
||||
|
|
@ -413,6 +437,6 @@
|
|||
}
|
||||
|
||||
.borderb {
|
||||
border-bottom: 2px solid #FB4B5C;
|
||||
border-bottom: 2px solid rgb(40, 186, 146);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,467 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="container">
|
||||
<!-- 日期列表 -->
|
||||
<view class="container-top">
|
||||
<span>设置不可接单时间</span>
|
||||
<span>(只能设置近3天的时间)</span>
|
||||
</view>
|
||||
<scroll-view class="scroll-view_H b-t b-b" scroll-x>
|
||||
<block v-for="(item,index) in dateArr" :key="index">
|
||||
<div class="flex-box" @click="selectDateEvent(index,item)" :class="{ borderb: index==dateActive}">
|
||||
<view class="date-box" :style="{color:index==dateActive?selectedTabColor:'#333'}">
|
||||
<text class="fontw">{{item.week}}</text>
|
||||
<text>{{item.date}}</text>
|
||||
</view>
|
||||
</div>
|
||||
</block>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 时间选项 -->
|
||||
<view class="time-box" v-if="!isSection || isQuantum">
|
||||
<template v-for="(item,_index) in timeArr">
|
||||
<view class="item" :key="_index">
|
||||
<view class="item-box" :class="{'disable':item.disable,
|
||||
'active':isMultiple?item.isActive:_index==timeActive}" :style="{color:isMultiple?item.isActive? selectedItemColor:'#333'
|
||||
:_index==timeActive?selectedItemColor:'#333'}" @click="selectTimeEvent(_index,item)">
|
||||
<text v-if="isQuantum">{{item.begin}}~{{item.end}}</text>
|
||||
<text v-else>{{item.time}}</text>
|
||||
<text class="all">{{item.disable?disableText:undisableText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<!-- 预约时间段 -->
|
||||
<view class="time-box" v-else>
|
||||
<template v-for="(item,_index) in timeArr">
|
||||
<view class="item" :key="_index">
|
||||
<view class="item-box" :class="{'disable':item.disable || item.isInclude,
|
||||
'active':item.time == timeQuanBegin || item.time == timeQuanEnd }"
|
||||
:style="{color:item.time == timeQuanBegin || item.time == timeQuanEnd? selectedItemColor:'#333'}"
|
||||
@click="handleSection(_index,item)">
|
||||
<text>{{item.time}}</text>
|
||||
<text class="all">{{item.disable?disableText:undisableText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="show-time" v-if="!isMultiple && !isSection && !isQuantum">
|
||||
预约时间：{{orderDateTime}}
|
||||
</view>
|
||||
<button form-type="submit" type="default" size="mini" class="submit-btn" @click="handleSubmit">
|
||||
添加时间
|
||||
</button>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
initData,
|
||||
initTime,
|
||||
timeStamp,
|
||||
currentTime
|
||||
} from '../../utils/date.js'
|
||||
export default {
|
||||
name: 'times',
|
||||
model: {
|
||||
prop: "showPop",
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
isQuantum: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMultiple: { //是否多选
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSection: { //预约时间段
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disableText: { //禁用显示的文本
|
||||
type: String,
|
||||
default: "不可预约"
|
||||
},
|
||||
undisableText: { //未禁用显示的文本
|
||||
type: String,
|
||||
default: "可预约"
|
||||
},
|
||||
timeInterval: { // 时间间隔，小时为单位
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
selectedTabColor: { // 日期栏选中的颜色
|
||||
type: String,
|
||||
default: "#FB4B5C"
|
||||
},
|
||||
selectedItemColor: { // 时间选中的颜色
|
||||
type: String,
|
||||
default: "#FB4B5C"
|
||||
},
|
||||
beginTime: {
|
||||
type: String,
|
||||
},
|
||||
endTime: {
|
||||
type: String,
|
||||
},
|
||||
appointTime: { // 预约的时间
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
disableTimeSlot: { // 预约开始和结束时间，来禁用时间段
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
appointTime: {
|
||||
handler(val) {
|
||||
if (val && val.length) {
|
||||
console.log("1111111111",val)
|
||||
this.initOnload()
|
||||
}else{
|
||||
console.log("2222222222",val)
|
||||
// this.selectDate=""
|
||||
// this.initOnload()
|
||||
}
|
||||
}
|
||||
},
|
||||
disableTimeSlot: {
|
||||
handler(val) {
|
||||
if (val && val.length) {
|
||||
this.initOnload()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderDateTime: '暂无选择', // 选中时间
|
||||
orderTimeArr: {}, //多选的时间
|
||||
dateArr: [], //日期数据
|
||||
timeArr: [], //时间数据
|
||||
nowDate: "", // 当前日期
|
||||
dateActive: 0, //选中的日期索引
|
||||
timeActive: 0, //选中的时间索引
|
||||
timeQuanBeginIndex: 0, //时间段开始的下标
|
||||
selectDate: "", //选择的日期
|
||||
timeQuanBegin: "", //时间段开始时间
|
||||
timeQuanEnd: "", //时间段结束时间
|
||||
}
|
||||
},
|
||||
created(props) {
|
||||
this.selectDate = this.nowDate = currentTime().date
|
||||
this.initOnload()
|
||||
},
|
||||
methods: {
|
||||
initOnload() {
|
||||
var danqian=initData() // 日期栏初始化
|
||||
// this.dateArr = initData() // 日期栏初始化
|
||||
let newObj = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let key = danqian[i];
|
||||
if (key.week == '今天') {
|
||||
key.week = "今天"
|
||||
} else if (key.week == "明天") {
|
||||
key.week = ""
|
||||
} else if (key.week == '后天') {
|
||||
key.week = ""
|
||||
}
|
||||
newObj.push(key)
|
||||
}
|
||||
this.dateArr = newObj
|
||||
this.timeArr = initTime(this.beginTime, this.endTime, this.timeInterval, this.isQuantum) //时间选项初始化
|
||||
this.timeQuanBegin = this.timeQuanEnd = ""
|
||||
let isFullTime = true
|
||||
this.timeArr.forEach((item, index) => {
|
||||
// 时间段
|
||||
if (this.isQuantum) {
|
||||
const cur_be_time = `${this.selectDate} ${item.begin}:00`
|
||||
const cur_end_time = `${this.selectDate} ${item.end}:00`
|
||||
for (let time of this.disableTimeSlot) {
|
||||
const [begin_time = "", end_time = ""] = time
|
||||
if (begin_time && end_time && (begin_time <= cur_be_time && cur_end_time <=
|
||||
end_time)) {
|
||||
item.disable = true
|
||||
}
|
||||
}
|
||||
if (this.selectDate == this.nowDate && currentTime().time > `${item.begin}:00`) {
|
||||
item.disable = true
|
||||
}
|
||||
// 多选时间段的切换日期不清除
|
||||
if (this.orderTimeArr[this.selectDate]) {
|
||||
for (let items of this.orderTimeArr[this.selectDate]) {
|
||||
if (items[0].split(' ')[1] === `${item.begin}:00` && items[1].split(' ')[1] ===
|
||||
`${item.end}:00`) {
|
||||
item.isActive = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
//判断是当前这一天，选中时间小于当前时间则禁用
|
||||
if (this.selectDate == this.nowDate && currentTime().time > item.time) {
|
||||
item.disable = true
|
||||
}
|
||||
|
||||
// 将预约的时间禁用
|
||||
this.appointTime.forEach(t => {
|
||||
let [date, time] = t.split(' ')
|
||||
if (date == this.selectDate && item.time == time) {
|
||||
item.disable = true
|
||||
}
|
||||
})
|
||||
|
||||
// 禁用时间段
|
||||
const cur_time = `${this.selectDate} ${item.time}`
|
||||
|
||||
for (let time of this.disableTimeSlot) {
|
||||
const [begin_time = "", end_time = ""] = time
|
||||
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)
|
||||
|
||||
// 对多选操作的已选时间的回显
|
||||
if (this.isMultiple && (this.orderTimeArr[this.selectDate] || []).includes(item.time)) {
|
||||
item.isActive = true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
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 = `${this.selectDate} ${this.timeArr[i].time}`
|
||||
this.timeActive = i
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 日期选择事件
|
||||
selectDateEvent(index, item) {
|
||||
this.dateActive = index
|
||||
this.selectDate = item.date
|
||||
this.initOnload()
|
||||
},
|
||||
|
||||
// 时间选择事件
|
||||
selectTimeEvent(index, item) {
|
||||
if (this.isQuantum) {
|
||||
console.log("333333")
|
||||
return this.handleSelectQuantum(index, item)
|
||||
|
||||
}
|
||||
if (item.disable){
|
||||
console.log("44444")
|
||||
}else{
|
||||
console.log("555555555")
|
||||
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.orderDateTime = `${this.selectDate} ${item.time}`
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 选择时间段
|
||||
handleSection(index, item) {
|
||||
console.log("handleSection")
|
||||
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)
|
||||
}
|
||||
|
||||
},
|
||||
handleSelectQuantum(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) => {
|
||||
const cur_be_time = `${this.selectDate} ${cur.begin}:00`
|
||||
const cur_end_time = `${this.selectDate} ${cur.end}:00`
|
||||
cur.isActive && prev.push([cur_be_time, cur_end_time])
|
||||
return prev
|
||||
}, [])
|
||||
} else {
|
||||
this.timeActive = index
|
||||
this.orderDateTime = {
|
||||
begin: `${this.selectDate} ${item.begin}:00`,
|
||||
end: `${this.selectDate} ${item.end}:00`,
|
||||
}
|
||||
}
|
||||
console.log("handleSelectQuantum",this.orderTimeArr)
|
||||
},
|
||||
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
|
||||
}
|
||||
console.log(this.orderTimeArr)
|
||||
if (this.isMultiple) {
|
||||
if (this.isQuantum) {
|
||||
this.$emit('change', this.orderTimeArr)
|
||||
return
|
||||
}
|
||||
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', this.orderDateTime)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './pretty-times.scss';
|
||||
.container-top span:nth-child(1){
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.container-top span:nth-child(2){
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
.container-top{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.uni-scroll-view-content{
|
||||
display:flex;
|
||||
}
|
||||
.content {
|
||||
width:100%;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 两个按钮 */
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// position: fixed;
|
||||
// bottom: 8px;
|
||||
// top: auto;
|
||||
// left: 0px;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.show-time {
|
||||
width: 70%;
|
||||
height: 47px;
|
||||
color: #505050;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
font-size: 15px;
|
||||
line-height: 47px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
color: rgb(9, 111, 75);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
// width: 25%;
|
||||
// height: 40px;
|
||||
// color: white;
|
||||
// background-color: #CA89FF;
|
||||
// font-size: 15px;
|
||||
// line-height: 40px;
|
||||
// text-align: center;
|
||||
// margin: auto;
|
||||
// padding: 0;
|
||||
}
|
||||
|
||||
.fontw {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.borderb {
|
||||
border-bottom: 2px solid rgb(40, 186, 146);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1553,7 +1553,7 @@
|
|||
</view>
|
||||
<!-- <view class="footers-btn footers-bor" @click="goMsg">联系客服11</view> -->
|
||||
<view class="footers-btn footers-bor" @click="goChat">联系客服</view>
|
||||
<view class="footers-btn footers-bor" @click="bindPhone" v-if="order.status==2||order.status==7||order.status==8||order.status==9">联系客户</view>
|
||||
<view class="footers-btn footers-bor" @click="bindPhone" v-if="order.status==2||order.status==7||order.status==8">联系客户</view>
|
||||
<!-- <view class="dian" @click="toggle('bottom',order)" v-if="order.status == 6">...</view> -->
|
||||
</view>
|
||||
<view class="footers" v-if="order.refusalContent!=null&&order.status=='9'">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,33 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="timeView">
|
||||
<!-- <times @change="getTime" :timeInterval="0.5" :appointTime="appointTime"
|
||||
:isMultiple="true" :disableTimeSlot = "disableTimeSlot"></times> -->
|
||||
<its-calendar :sta_num="0" :end_num="24" :int_num="msTimeDate" @getTime="TimeData" @getDate="SelData">
|
||||
</its-calendar>
|
||||
<view class="timeView-top">
|
||||
<span class="dx_title">是否接单 <!-- <text class="switchTxt">{{switchTxt=='true'?'接单':'不接单'}}</text> --></span>
|
||||
<switch checked style="transform:scale(0.7)" @change="switch1Change"/>
|
||||
</view>
|
||||
<view class="selectTimt">
|
||||
<view class="dx_title">选择接单时问</view>
|
||||
<view class="selectTimt-bottom">
|
||||
<picker class="selectTimt-time" mode="time" :value="starTime" :start="starTime" end="23:59" @change="bindTimeChange">
|
||||
<view class="selectTimt-time-title">开始时间</view>
|
||||
<view class="uni-input">{{starTime}}</view>
|
||||
</picker>
|
||||
<picker class="selectTimt-time" mode="time" :value="endTime" start="00:00" end="23:59" @change="bindTimeChangeEndTime">
|
||||
<view class="selectTimt-time-title">结束时间</view>
|
||||
<view class="uni-input">
|
||||
<span style="margin-right: 5px;">次日</span>
|
||||
<span>{{endTime}}</span>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<times selectedTabColor="#28BA92" selectedItemColor="#28BA92" @change="getTime" :timeInterval="0.5" :appointTime="msList"
|
||||
:isMultiple="true" :disableTimeSlot = "disableTimeSlot"></times>
|
||||
<!-- <its-calendar :sta_num="0" :end_num="24" :int_num="msTimeDate" @getTime="TimeData" @getDate="SelData">
|
||||
</its-calendar> -->
|
||||
<view class="dx_view margin-bottom-sm" v-if="msList.length > 0">
|
||||
<view class="dx_title">忙时时间</view>
|
||||
<view class="dx_title">不可接单时间</view>
|
||||
<view class="flex align-center flex-wrap ">
|
||||
<view v-for="(item,index) in msList" :key="index" class="btn flex align-center margin-top">
|
||||
<view>{{item}}</view>
|
||||
|
|
@ -14,12 +35,18 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sub" @click="sub()" >保存选择</view>
|
||||
<view class="sub" @click="sub()" v-if="switchTxt==true">保存选择1</view>
|
||||
<view class="sub" @click="sub()" v-if="switchTxt==false">保存选择2</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
currentTime,
|
||||
initData,
|
||||
tomorrow
|
||||
} from '../../utils/date.js'
|
||||
import times from '@/components/pretty-times/pretty-times.vue'
|
||||
import itsCalendar from '@/components/its-calendar/its-calendar.vue';
|
||||
export default {
|
||||
|
|
@ -29,16 +56,19 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
starTime:'',
|
||||
endTime: '00:00',
|
||||
endTimes:'23:30',
|
||||
appointTime:[],
|
||||
disableTimeSlot:[
|
||||
["2022-10-17 09:00:00", "2022-10-17 10:00:00"],
|
||||
["2022-05-05 16:30:00", "2022-05-05 18:30:00"]
|
||||
],
|
||||
disableTimeSlot:[],
|
||||
msTimeDate: 0,
|
||||
newmsList: [],
|
||||
msList: [],
|
||||
startTime: '',
|
||||
yearsDate: '',
|
||||
switchTxt:'',
|
||||
timeCurrent:'',
|
||||
tomorrowTime:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -47,6 +77,12 @@
|
|||
} else {
|
||||
this.msTimeDate = 60;
|
||||
}
|
||||
if(this.timeCurrent==''){
|
||||
this.timeCurrent=tomorrow().tomorrow+' '+this.endTime;
|
||||
}
|
||||
this.starTime=currentTime().times;
|
||||
this.tomorrowTime=currentTime().date+' '+currentTime().times;
|
||||
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
let month = (parseInt(date.getMonth()) + 1) > 9 ? (parseInt(date.getMonth()) + 1) : "0" + (parseInt(
|
||||
|
|
@ -55,33 +91,66 @@
|
|||
let fullDate = `${month}-${days}`
|
||||
let Time = year + '-' + fullDate
|
||||
this.yearsDate = Time;
|
||||
this.getMsTime(Time);
|
||||
// this.getMsTime(Time);
|
||||
},
|
||||
methods: {
|
||||
getTime(time){
|
||||
this.appointTime=time
|
||||
console.log(time, '时间')
|
||||
// this.disableTimeSlot=time
|
||||
bindTimeChange: function(e) {// 当天接单开始时间
|
||||
this.starTime = e.detail.value;
|
||||
this.tomorrowTime=currentTime().date+' '+this.starTime;
|
||||
},
|
||||
sub() {
|
||||
// if (this.msList.length == 0) {
|
||||
if(this.yearsDate === ''){
|
||||
this.$queue.showToast('请先添加待选时间！');
|
||||
return;
|
||||
bindTimeChangeEndTime(e){//次日接单结束时间
|
||||
this.endTime = e.detail.value;
|
||||
this.timeCurrent=tomorrow().tomorrow+' '+this.endTime;
|
||||
},
|
||||
switch1Change: function (e) {
|
||||
this.switchTxt=e.detail.value
|
||||
var time=''
|
||||
if(this.switchTxt==true){
|
||||
time='1'
|
||||
}else{
|
||||
time='2'
|
||||
}
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '是否将待选区的时间设置为忙时？',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.saveMangShi();
|
||||
this.sfJdan(time)
|
||||
|
||||
},
|
||||
sfJdan(time){//是否接单
|
||||
var data={
|
||||
flag:time,
|
||||
userId:uni.getStorageSync('userId')
|
||||
}
|
||||
this.$Request.postT('/app/artificerTime/setArtificerAccept',data).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$queue.showToast('设置成功！')
|
||||
} else {
|
||||
this.$queue.showToast(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
getTime(time){
|
||||
|
||||
this.msList=time;
|
||||
|
||||
},
|
||||
sub() {
|
||||
this.saveMangShi();
|
||||
// if (this.msList.length == 0) {
|
||||
// if(this.yearsDate === ''){
|
||||
// this.$queue.showToast('请先添加待选时间！');
|
||||
// return;
|
||||
// }
|
||||
// uni.showModal({
|
||||
// title: '温馨提示',
|
||||
// content: '是否将待选区的时间设置为忙时？',
|
||||
// showCancel: true,
|
||||
// cancelText: '取消',
|
||||
// confirmText: '确认',
|
||||
// success: res => {
|
||||
// if (res.confirm) {
|
||||
// this.saveMangShi();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
},
|
||||
//删除规格
|
||||
bindupdata(index1, item) {
|
||||
let over = false;
|
||||
|
|
@ -100,8 +169,13 @@
|
|||
}
|
||||
},
|
||||
saveMangShi() {
|
||||
this.$Request.postT('/app/artificerTime/updateArtificerTime?artificerDate=' + this.yearsDate + '×=' +
|
||||
this.msList.join(",") + '&artificerId=' + uni.getStorageSync('artificerId')).then(res => {
|
||||
// artificerId:uni.getStorageSync('artificerId')
|
||||
var data={
|
||||
idleTime:this.tomorrowTime+','+this.timeCurrent,
|
||||
busyTime:this.msList.toString(),
|
||||
userId:uni.getStorageSync('userId')
|
||||
}
|
||||
this.$Request.postT('/app/artificerTime/setArtificerTime',data).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$queue.showToast('设置成功！')
|
||||
} else {
|
||||
|
|
@ -111,13 +185,12 @@
|
|||
},
|
||||
getMsTime(artificerDate) {
|
||||
this.yearsDate = artificerDate;
|
||||
this.$Request.getT('/app/artificerTime/selectArtificerTimeByArtificerId?artificerId=' + uni.getStorageSync(
|
||||
'artificerId') + '&artificerDate=' + artificerDate).then(res => {
|
||||
this.$Request.getT('/selectArtificerTimeByArtificerId?userId=' + uni.getStorageSync('userId') + '&artificerDate=' + artificerDate).then(res => {
|
||||
if (res && res.code == 0 && res.data) {
|
||||
this.msList = [];
|
||||
this.newmsList = res.data;
|
||||
this.msList = res.data.map((item)=> item.artificerTime);
|
||||
console.log(this.msList);
|
||||
console.log('getMsTime',this.msList);
|
||||
uni.$emit("sendChildMsList",this.msList);
|
||||
}
|
||||
});
|
||||
|
|
@ -154,7 +227,56 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.selectTimt-time-title{
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/deep/.uni-input{
|
||||
text-align: center;
|
||||
color: #28BA92;
|
||||
}
|
||||
.selectTimt-time{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.selectTimt-bottom{
|
||||
margin-top:10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
.selectTimt{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 10px 5px;
|
||||
background: #fff;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.dx_title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.switchTxt{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
margin-left: 5px;
|
||||
color: #28BA92;
|
||||
}
|
||||
.timeView-top{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px 5px;
|
||||
background: #fff;
|
||||
margin: 10px auto;
|
||||
}
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
|
@ -176,7 +298,6 @@
|
|||
display: flex;
|
||||
width: 750rpx;
|
||||
flex-wrap: wrap;
|
||||
margin: 0rpx 20rpx;
|
||||
|
||||
.timeview_item {
|
||||
background: #F7F7F7;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,286 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="timeView">
|
||||
<!-- <times @change="getTime" :timeInterval="0.5" :appointTime="msList"
|
||||
:isMultiple="true" :disableTimeSlot = "disableTimeSlot"></times> -->
|
||||
<its-calendar :sta_num="0" :end_num="24" :int_num="msTimeDate" @getTime="TimeData" @getDate="SelData">
|
||||
</its-calendar>
|
||||
<view class="dx_view margin-bottom-sm" v-if="msList.length > 0">
|
||||
<view class="dx_title">忙时时间</view>
|
||||
<view class="flex align-center flex-wrap ">
|
||||
<view v-for="(item,index) in msList" :key="index" class="btn flex align-center margin-top">
|
||||
<view>{{item}}</view>
|
||||
<view class="margin-left-sm" @tap.stop="bindupdata(index,item)">x</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sub" @click="sub()" >保存选择</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import times from '@/components/pretty-times/pretty-times.vue'
|
||||
import itsCalendar from '@/components/its-calendar/its-calendar.vue';
|
||||
export default {
|
||||
components: {
|
||||
itsCalendar,
|
||||
times
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
appointTime:[],
|
||||
disableTimeSlot:[],
|
||||
msTimeDate: 0,
|
||||
newmsList: [],
|
||||
msList: [],
|
||||
startTime: '',
|
||||
yearsDate: '',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (this.$queue.getData('msTimeDate')) {
|
||||
this.msTimeDate = parseInt(this.$queue.getData('msTimeDate'));
|
||||
} else {
|
||||
this.msTimeDate = 60;
|
||||
}
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
let month = (parseInt(date.getMonth()) + 1) > 9 ? (parseInt(date.getMonth()) + 1) : "0" + (parseInt(
|
||||
date.getMonth()) + 1) // 当前月份
|
||||
let days = (date.getDate()) > 9 ? date.getDate() : "0" + date.getDate() //当前日期
|
||||
let fullDate = `${month}-${days}`
|
||||
let Time = year + '-' + fullDate
|
||||
this.yearsDate = Time;
|
||||
this.getMsTime(Time);
|
||||
},
|
||||
methods: {
|
||||
getTime(time){
|
||||
// this.appointTime=time
|
||||
this.msList=time
|
||||
console.log(time, '时间')
|
||||
},
|
||||
sub() {
|
||||
// if (this.msList.length == 0) {
|
||||
if(this.yearsDate === ''){
|
||||
this.$queue.showToast('请先添加待选时间！');
|
||||
return;
|
||||
}
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '是否将待选区的时间设置为忙时？',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.saveMangShi();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//删除规格
|
||||
bindupdata(index1, item) {
|
||||
console.log("111",index1,item)
|
||||
let over = false;
|
||||
for (var i = 0; i < this.newmsList.length; i++) {
|
||||
console.log("222",this.newmsList[i])
|
||||
if (this.newmsList[i].artificerTime === item) {
|
||||
console.log("3333")
|
||||
if (this.newmsList[i].classify == 1) {
|
||||
console.log("44444")
|
||||
over = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!over) {
|
||||
if(this.msList.length>1){
|
||||
console.log("55555",this.msList)
|
||||
this.msList.splice(index1, 1)
|
||||
}else{
|
||||
this.msList=[]
|
||||
console.log("6666",this.msList)
|
||||
}
|
||||
} else {
|
||||
console.log("6666")
|
||||
this.$queue.showToast('当前时间已被用户下单，禁止删除！')
|
||||
}
|
||||
},
|
||||
saveMangShi() {
|
||||
this.$Request.postT('/app/artificerTime/updateArtificerTime?artificerDate=' + this.yearsDate + '×=' +
|
||||
this.msList.join(",") + '&artificerId=' + uni.getStorageSync('artificerId')).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$queue.showToast('设置成功！')
|
||||
} else {
|
||||
this.$queue.showToast(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
getMsTime(artificerDate) {
|
||||
this.yearsDate = artificerDate;
|
||||
this.$Request.getT('/app/artificerTime/selectArtificerTimeByArtificerId?artificerId=' + uni.getStorageSync(
|
||||
'artificerId') + '&artificerDate=' + artificerDate).then(res => {
|
||||
if (res && res.code == 0 && res.data) {
|
||||
this.msList = [];
|
||||
this.newmsList = res.data;
|
||||
this.msList = res.data.map((item)=> item.artificerTime);
|
||||
console.log('getMsTime',this.msList);
|
||||
uni.$emit("sendChildMsList",this.msList);
|
||||
}
|
||||
});
|
||||
},
|
||||
SelData(e) {
|
||||
console.log(e)
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
let Time = year + '-' + e.days
|
||||
this.getMsTime(Time);
|
||||
this.msList = [];
|
||||
},
|
||||
// 时间段数据
|
||||
TimeData(e) {
|
||||
console.log(e, e.days)
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
this.startTime = year + '-' + e.days + ' ' + e.hours
|
||||
this.yearsDate = year + '-' + e.days
|
||||
console.log(this.yearsDate)
|
||||
var hours=e.hours;
|
||||
for(var i=0;i<hours.length;i++){
|
||||
if (!this.msList.includes(hours[i].hours)) {
|
||||
this.msList.push(hours[i].hours);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
console.log('忙时list' + JSON.stringify(this.msList) );
|
||||
|
||||
// this.msList.push(e.hours);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.dx_view {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx 20rpx 40rpx;
|
||||
width: 710rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.dx_title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.timeView {
|
||||
display: flex;
|
||||
width: 750rpx;
|
||||
flex-wrap: wrap;
|
||||
margin: 0rpx 20rpx;
|
||||
|
||||
.timeview_item {
|
||||
background: #F7F7F7;
|
||||
border-radius: 15rpx;
|
||||
width: 120rpx;
|
||||
height: 140rpx;
|
||||
text-align: center;
|
||||
padding-top: 14rpx;
|
||||
margin: 20rpx 20rpx 20rpx 6rpx;
|
||||
}
|
||||
|
||||
.timeview_acitem {
|
||||
width: 120rpx;
|
||||
height: 140rpx;
|
||||
text-align: center;
|
||||
background: #E8F9EF;
|
||||
border: 1px solid #00B88F;
|
||||
color: #00B88F;
|
||||
border-radius: 15rpx;
|
||||
padding-top: 14rpx;
|
||||
margin: 20rpx 20rpx 20rpx 6rpx;
|
||||
}
|
||||
|
||||
.item_text {
|
||||
width: 120rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1upx solid #CCCCCC;
|
||||
border-radius: 28px;
|
||||
padding: 15rpx 30rpx;
|
||||
margin-right: 25rpx;
|
||||
}
|
||||
|
||||
.btns {
|
||||
border: 1upx dashed #333333;
|
||||
border-radius: 28px;
|
||||
padding: 10rpx 30rpx;
|
||||
margin-right: 25rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
/* background: #FCD202; */
|
||||
/* border: none; */
|
||||
}
|
||||
|
||||
.topView {
|
||||
width: 750rpx;
|
||||
height: 180rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.topview_item {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
text-align: center;
|
||||
padding-top: 14rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
}
|
||||
|
||||
.topview_acitem {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
text-align: center;
|
||||
background: #E8F9EF;
|
||||
border: 1px solid #00B88F;
|
||||
color: #00B88F;
|
||||
border-radius: 20rpx;
|
||||
padding-top: 14rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
}
|
||||
|
||||
.item_text {
|
||||
width: 160rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 696rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
margin: 30rpx 10rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,20 @@ function strFormat(str) {
|
|||
return str < 10 ? `0${str}` : str
|
||||
}
|
||||
// 获取当前时间
|
||||
export function tomorrow() {
|
||||
|
||||
// 获取当前日期
|
||||
const today = new Date();
|
||||
// 增加一天
|
||||
today.setDate(today.getDate() + 1);
|
||||
// 格式化日期为YYYY-MM-DD
|
||||
const tomorrow = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
|
||||
|
||||
return {
|
||||
tomorrow
|
||||
}
|
||||
}
|
||||
// 获取当前时间
|
||||
export function currentTime() {
|
||||
const myDate = new Date();
|
||||
const y = myDate.getFullYear()
|
||||
|
|
@ -14,9 +28,11 @@ export function currentTime() {
|
|||
const min = myDate.getMinutes()
|
||||
const secon = myDate.getSeconds()
|
||||
const time = strFormat(hour) + ':' + strFormat(min) + ':' + strFormat(secon);
|
||||
const times = strFormat(hour) + ':' + strFormat(min)
|
||||
return {
|
||||
date,
|
||||
time
|
||||
time,
|
||||
times
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +50,8 @@ export function timeStamp(time, isQuantum) {
|
|||
allDate: `${year}/${strFormat(month)}/${strFormat(date)}`,
|
||||
date: `${strFormat(year)}-${strFormat(month)}-${strFormat(date)}`, //返回的日期 07-01
|
||||
day: `星期${days[day]}`, //返回的礼拜天数 星期一
|
||||
hour: strFormat(hour) + ':' + strFormat(min) + (isQuantum ? "" : ':00') //返回的时钟 08:00
|
||||
hour: strFormat(hour) + ':' + strFormat(min) //返回的时钟 08:00
|
||||
// hour: strFormat(hour) + ':' + strFormat(min) + (isQuantum ? "" : ':00') //返回的时钟 08:00
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue