自提时间样式一：
今天、明天上午 7 点 - 10点 下单后15分钟可预约
组件：
picker-view、picker-view-column
<view class="pic_view" v-if="visible">
<view class="title">
<text>预计到店时间</text>
<text class="check" @click="visible=false">确定</text>
</view>
<picker-view :value=value @change="bindChange" class="picker-view" indicator-style='height:50px'
mask-style="">
<picker-view-column>
<view :class="value[0] == index ? 'p_item pic_style':'p_item'" v-for="(item,index) in subscribeDate"
:key="index">{{item.showtext}}</view>
</picker-view-column>
</picker-view>
</view>
//变量
data：value: [0], //时间数组默认值，下标
reservetime: '暂无可预约时间', //页面预定时间
reservetimes:{}, //传后台预定时间，多规格
subscribeDate: [], //可选时间数组
//选择时间绑定方法，返回值为选中的时间列表下标
bindChange: function(e) {
const val = e.detail.value
this.value = val;
this.reservetime = this.subscribeDate[val[0]].showtext;
this.reservetimes= this.subscribeDate[val[0]]
},
//获取时间数组
gettime() {
var self = this;
var day = self.commfunc('day') //今日可预约时间
if (day) {
self.subscribeDate = day;
self.reservetime = self.subscribeDate[0].showtext; //默认可预约时间
self.reservetimes= self.subscribeDate[0];
}else{
self.subscribeDate = [];
}
uni.getStorage({
key: 'supplier', //判断明日是否可预约
success: function(res) {
if (res.data.subscribe === 1) {
self.subscribeDate = self.subscribeDate.concat(self.commfunc('days')) //加上明日时间数组
self.reservetime = self.subscribeDate[0].showtext
self.reservetimes= self.subscribeDate[0];
}
},
});
},
commfunc(type = 'day', end = 10) {
var weekarray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
var myDate = new Date();
var year = myDate.getFullYear();
var hours = type === 'day' ? myDate.getHours()<= 7 ? 7 : myDate.getHours() : 7; //获取当前小时数(0-23)
var minu = type === 'day' ? myDate.getMinutes() : 0; //获取当前分钟数(0-59)
var week = ''
if (type != 'day') {
week = '明天(' + weekarray[(myDate.getDay() + 1) == 7 ? 0 : myDate.getDay() + 1] + ')';
} else {
week = '今天(' + weekarray[myDate.getDay()] + ')';
}
//获取当前星期X(0-6,0代表星期天)
var day = type === 'day' ? myDate.getDate() : myDate.getDate() + 1;
var month = myDate.getMonth() + 1;
var mdx = year + '-' + month + '-' + day + ' '
if (type != 'day') {
if (myDate.getDate() === this.sumdays()) {
month = myDate.getMonth() + 1;
}
}
if (hours >= end) {
return ''
}
var newminu = parseInt(minu) + 15 > 59 ? parseInt(minu) + 15 - 60 : parseInt(minu) + 15;
hours = parseInt(minu) + 15 > 59 ? ++hours : hours;
var array = [];
for (var i = 0; i <= 30; i++) {
var times = {};
var min = newminu
if (hours === end) {
min = parseInt(newminu) + 5
if (min < 15) {
if (min == 0) {
min = '00'
} else {
min = min < 10 ? min.toString().indexOf('0') != -1 ? min : '0' + min : min
}
var time = hours + ':' + min
times = this.dealtiems(mdx, month, day, time, week)
newminu = min
array.push(times)
continue
}
if (min >= 15) {
var time = hours + ':' + 15
times = this.dealtiems(mdx, month, day, time, week)
newminu = min
array.push(times)
break
}
}
if (i) {
var min = parseInt(newminu) + 5
}
if (min > 59) {
hours = parseInt(hours) + 1
min = parseInt(newminu) + 5 - 60
}
if (min == 0) {
min = '00'
} else {
min = min < 10 ? min.toString().indexOf('0') != -1 ? min : '0' + min : min
}
var time = hours + ':' + min
times = this.dealtiems(mdx, month, day, time, week)
newminu = min
array.push(times)
}
return array;
},
//多格式时间
dealtiems(mdx, month, day, time, week) {
var data = {}
data.date = mdx + time
data.hshowtext = month + '月' + day + ' ' + time
data.showtext = week + ' ' + time
return data;
},
sumdays() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var d = new Date(year, month, 0);
return d.getDate();
},
自提时间样式二：
可通过左侧快速定位
<view class="pic_view" v-if="visible">
<view class="title">
<text>预计到店时间</text>
<text class="check" @click="visible=false">确定</text>
</view>
<view class="picker_left">
<view v-if="day" @click="today" :class=" inday ? 'active' : '' ">今天</view>
<view v-if="days" @click="todays" :class=" indays ? 'active' : '' ">明天</view>
</view>
<picker-view :value=value @change="bindChange" class="picker-view" indicator-style='height:50px'
mask-style="">
<picker-view-column>
<view v-if="day" :class="value[0] == index ? 'p_item pic_style':'p_item'" v-for="(item,index) in subscribeDate1"
:key="index">{{item.showtext}}</view>
<view v-if="days" :class="value[0] == index1 + subscribeDate1.length ? 'p_item pic_style':'p_item'" v-for="(item,index1) in subscribeDate2"
:key="index1">{{item.showtext}}</view>
</picker-view-column>
</picker-view>
</view>
//变量
subscribeDate1: [],
subscribeDate2:[],
reservetime: '暂无可预约时间',
reservetimes:{},
day:false,
days:false,
inday:false,
indays:false,
todays(){
if(this.day){
var arr = [];
const subscribeDate = this.subscribeDate1.concat(this.subscribeDate2);
arr[0] = this.subscribeDate1.length;
this.value = arr;
this.indays= true;
this.inday = false;
this.reservetime = subscribeDate[arr[0]].showtext;
this.reservetimes= subscribeDate[arr[0]]
}
},
today(){
if(this.days){
var arr = [0];
const subscribeDate = this.subscribeDate1.concat(this.subscribeDate2);
this.value = arr;
this.inday = true;
this.indays= false;
this.reservetime = subscribeDate[arr[0]].showtext;
this.reservetimes= subscribeDate[arr[0]]
}
},
bindChange: function(e) {
const val = e.detail.value
this.value = val;
const subscribeDate = this.subscribeDate1.concat(this.subscribeDate2);
this.reservetime = subscribeDate[val[0]].showtext;
this.reservetimes= subscribeDate[val[0]]
},
gettime() {
var self = this;
var day = self.commfunc('day')
if (day) {
self.day = true;
self.subscribeDate1 = day;
self.reservetime = self.subscribeDate1[0].showtext;
self.reservetimes = self.subscribeDate1[0];
self.inday = true;
}else{
self.subscribeDate1 = [];
}
uni.getStorage({
key: 'supplier',
success: function(res) {
if (res.data.subscribe === 1) {
self.days = true;
self.subscribeDate2 = self.commfunc('days');
if(!day){
self.reservetime = self.subscribeDate2[0].showtext;
self.reservetimes = self.subscribeDate2[0];
self.indays = true;
}
}
},
});
},
commfunc(type = 'day', end = 10) {
var weekarray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
var myDate = new Date();
var year = myDate.getFullYear();
var hours = type === 'day' ? myDate.getHours()<= 7 ? 7 : myDate.getHours() : 7; //获取当前小时数(0-23)
var minu = type === 'day' ? myDate.getMinutes() : 0; //获取当前分钟数(0-59)
var week = ''
if (type != 'day') {
week = '明天(' + weekarray[(myDate.getDay() + 1) == 7 ? 0 : myDate.getDay() + 1] + ')';
} else {
week = '今天(' + weekarray[myDate.getDay()] + ')';
}
//获取当前星期X(0-6,0代表星期天)
var day = type === 'day' ? myDate.getDate() : myDate.getDate() + 1;
var month = myDate.getMonth() + 1;
var mdx = year + '-' + month + '-' + day + ' '
if (type != 'day') {
if (myDate.getDate() === this.sumdays()) {
month = myDate.getMonth() + 1;
}
}
if (hours >= end) {
return ''
}
var newminu = parseInt(minu) + 15 > 59 ? parseInt(minu) + 15 - 60 : parseInt(minu) + 15;
hours = parseInt(minu) + 15 > 59 ? ++hours : hours;
var array = [];
for (var i = 0; i <= 30; i++) {
var times = {};
var min = newminu
if (hours === end) {
min = parseInt(newminu) + 5
if (min < 15) {
if (min == 0) {
min = '00'
} else {
min = min < 10 ? min.toString().indexOf('0') != -1 ? min : '0' + min : min
}
var time = hours + ':' + min
times = this.dealtiems(mdx, month, day, time, week)
newminu = min
array.push(times)
continue
}
if (min >= 15) {
var time = hours + ':' + 15
times = this.dealtiems(mdx, month, day, time, week)
newminu = min
array.push(times)
break
}
}
if (i) {
var min = parseInt(newminu) + 5
}
if (min > 59) {
hours = parseInt(hours) + 1
min = parseInt(newminu) + 5 - 60
}
if (min == 0) {
min = '00'
} else {
min = min < 10 ? min.toString().indexOf('0') != -1 ? min : '0' + min : min
}
var time = hours + ':' + min
times = this.dealtiems(mdx, month, day, time, week)
newminu = min
array.push(times)
}
return array;
},
dealtiems(mdx, month, day, time, week) {
var data = {}
data.date = mdx + time
data.hshowtext = month + '月' + day + ' ' + time
data.showtext = week + ' ' + time
return data;
},
sumdays() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var d = new Date(year, month, 0);
return d.getDate();
},
版权声明：本文为qq_36685539原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。