背景: 近期做的项目有个需求是做一个类似菜鸟的取件时间选择器,去找了很久没找到合适的,没办法只能自己收撸,经过好几个小版本修改之后也算是定型了,这里总结一篇文档备忘,把源码贴出来后续方便后续copy
技术
uniapp + vue2 + uni-popup
兼容
因为目前我的项目只用到这三端,其他的都还没测,所以兼容不保证
- 支付宝小程序开发者工具popup弹出来会直接滚到最顶部,显示异常,但真机上面没问题,可以不用管
环境 | 兼容 |
---|---|
支付宝小程序 | ✔ |
微信小程序 | ✔ |
H5 | ✔ |
菜鸟上门时间选择器
需求分析:
1、弹窗从底部弹出
- 点击蒙层不可关闭
- 弹窗header左侧title , 右侧关闭按钮
2、左侧日期选择器
- 显示近3天日期
- 显示(今天、明天、周一、周二等)
3、右侧时间选择器
- 可选时间可配置
- 过期时间显示 “已过期”
- 选中效果
- 当前已无可选时间,应该删除今天日期,只可以选未来日期
代码实现:
1.popup弹窗
先做一下基础布局,简单的分成上左右三大块,并做一些基础的配置
<template>
<uni-popup
mask-background-color="rgba(0, 0, 0, .8)"
ref="datePickerPop"
type="bottom"
background-color="#fff"
:is-mask-click="false"
>
<view class="date_pop">
<view class="popup_header">
<view class="pop_title">请选择取件时间</view>
<view class="pop-close" @click="handleClose('datePop')" />
</view>
<!-- 日期 -->
<view class="date_con">
<scroll-view scroll-y="true" class="date_box">
</scroll-view>
<!-- 时间 -->
<scroll-view scroll-y="true" class="time_box">
</scroll-view>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
name: 'TimePicker',
props: {
visible: {
required: true,
default: false
}
},
watch: {
visible(newVal) {
if (newVal) {
if (!this.selectedDate.date_zh) {
this.selectedDate = this.effectRecentDate[0];
}
this.$refs.datePickerPop.open();
} else {
this.$refs.datePickerPop.close();
}
}
},
methods: {
handleClose() {
this.$emit('update:visible', false);
},
}
};
</script>
<style scoped lang="scss">
.date_pop {
padding: 0;
height: 750rpx;
.popup_header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 60rpx 40rpx;
.pop_title {
font-weight: bold;
font-size: 32rpx;
width: 90%;
}
.pop-close {
width: 60rpx;
height: 60rpx;
background: url('~@/static/images/close.png');
background-size: 22rpx;
background-position: center;
background-repeat: no-repeat;
}
}
.date_con {
font-size: 28rpx;
position: relative;
height: 600rpx;
}
.date_box {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: #f7f7f9;
overflow-y: scroll;
.date_item {
padding: 0 40rpx;
line-height: 100rpx;
}
}
.time_box {
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
}
.date_active {
background: #fff;
}
}
</style>
2.日期+时间选择器
按照需求我重新设计了一下功能及交互
日期选择器
- 日期可配置,支持显示最近n天日期
- 显示今天、明天、后台及工作日
- 默认选中当日(今天)
时间选择器
基础功能
- 删除过期时间
- 今日所有可选日期都过期之后删除日期选框(今天)选项
- 选中时间后面打钩,并关闭弹窗
可选功能
- 显示已过期时间 (逻辑几个版本之前已经删除了,现在只剩类名,需要的同学可以大概看下代码把它加上或者评论区留个言我把给你找找代码 , 功能样式就类似菜鸟)
- 直接删除已过期时间
先看效果