uniapp 小程序自提时间预定商品

止语之语

已于 2024-02-26 13:21:09 修改

阅读量1.5k

点赞数 1

分类专栏： uniapp 文章标签： uni-app

于 2021-08-10 14:05:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36685539/article/details/119389859

版权

本文档展示了两种自提时间样式的实现，包括通过picker-view组件动态生成可预约时间段，并提供快速定位到今天或明天的功能。代码中包含了数据获取、时间格式化以及交互逻辑，确保用户能方便地选择预计到店时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自提时间样式一：

今天、明天上午 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