预约时间组件

效果图

如何使用

<template><view><button @click="pickerTime(0)">预约时间0</button><button @click="pickerTime(1)">预约时间1</button><button @click="pickerTime(2)">预约时间2</button><button @click="pickerTime(2)">预约时间3</button><hbxwTimepicker v-model:isShow="showTimePicker0" :isBtn="false" @change="pickerChange"></hbxwTimepicker><hbxwTimepicker v-model:isShow="showTimePicker1" :maxHour="16" :isBtn="false" @change="pickerChange"></hbxwTimepicker><hbxwTimepicker v-model:isShow="showTimePicker2" :dayRange="7" :minHour="8" :maxHour="20" @change="pickerChange"></hbxwTimepicker><hbxwTimepicker v-model:isShow="showTimePicker3" @change="pickerChange"><template #title="{title}"><view>{{title}}</view></template><template #btn="{result}"><button style="font-size: 24rpx;">{{result}}</button></template></hbxwTimepicker></view>
</template><script>import hbxwTimepicker from "../hbxwTimepicker.vue";export default {components: {hbxwTimepicker},data() {return {showTimePicker0: false,showTimePicker1: false,showTimePicker2: false,showTimePicker3: false}},methods: {pickerTime(index) {this['showTimePicker'+index] = true;},pickerChange(result) {console.log('---- pickerChange ----:',  result);}}}
</script><style></style>

组件内容

<template><view class="hbxw-timepicker" :class="{'hbxw-timepicker-ani': isAni}":style="{'z-index': zIndex, '--opacity': maskOpacity}"v-if="isShow"><view class="hbxw-timepicker-mask" @click="close"></view><view class="hbxw-timepicker-main" :class="{'hbxw-timepicker-main-ani': isAni}"><!-- 标题 --><view class="hbxw-timepicker-title"><slot name="title" :title="title" :subTitle="subTitle"><view class="hbxw-timepicker-title-main">{{title}}</view><view class="hbxw-timepicker-title-subtitle">{{subTitle}}</view></slot><image :src="closeImgSrc" class="hbxw-timepicker-close" @click="close"></image></view><!-- 主内容，日期和时间选择区 --><view class="hbxw-timepicker-content"><view class="hbxw-timepicker-day"><view class="hbxw-timepicker-day-item":class="{'hbxw-timepicker-day-item-active': dayActiveIndex === index}"v-for="(day, index) in days":key="index"@click="toggleDay(index)">{{anotherNames[index] ? anotherNames[index].replace('month', day.month).replace('day', day.day) : day.value}}</view></view><view class="hbxw-timepicker-time"><viewv-if="hours.length > 0"class="hbxw-timepicker-time-item" v-for="(hour, index) in hours" :key="index" :class="{'hbxw-timepicker-time-item-active': hourActiveIndex === index}"@click="toggleHour(index)"><text class="hbxw-timepicker-time-val">{{hour.hoursStr}}</text><view class="hbxw-timepicker-time-icon"><image :src="selectImgSrc" class="hbxw-timepicker-time-img"></image></view></view><view class="hbxw-timepicker-notime" v-else><text class="hbxw-timerpicker-nodata">{{noDateTips}}</text></view></view></view><!-- 底部按钮 --><slot name="btn" :result="result" v-if="isBtn"><view class="hbxw-timerpicker-btn-wrap"><view class="hbxw-timerpicker-sure" @click="sure" v-if="btnStr">{{btnStr}}</view></view></slot></view></view>
</template>
<script>
//   import guanbi from '../../static/guanbi.png'
//   import gougou from '../../static/gougou.png'export default {props: {isShow: {type: Boolean,default: false},title: {type: String,default: '请选择快递上门取件时间'},subTitle: {type: String,default: '快递1小时内上门取件，请自行做好数据备份'},// 是否显示1小时内isFast: {type: Boolean,default: true},// 日期别名，用于一些特殊场景，如需要显示今天明天后天...anotherNames: {type: Array,default() {return ['今天','明天','后天']}},dayRange: {type: Number,default: 3},minHour: {type: Number,default: 9},maxHour: {type: Number,default: 19},isBtn: {type: Boolean,default: true},isAni: {type: Boolean,default: true},zIndex: {type: Number,default: 9999},maskOpacity: {type: Number,default: .76},noDateTips: {type: String,default: '今日已暂无服务'},isTwo: {type: Boolean,default: true},isAutoClose: {type: Boolean,default: false},emitEventName: {type: String,default: 'timepicker'},closeImgSrc: {type: String,// default: guanbi// default: this.$imgBaseWebUrl+'/image/guanbi.png',default:''},selectImgSrc: {type: String,// default: gougou// default: this.$imgBaseWebUrl+'/image/gougou.png'default:''},},model: {prop: 'isShow',event: 'update'},watch: {isShow: {handler(newVal, oldVal) {if(newVal) {this.init();}},immediate: true}},mounted() {uni.$on(this.emitEventName, (type) => {this[type] && this[type]();})},// #ifdef VUE3unmounted() {uni.$off(this.emitEventName);},// #endif// #ifdef VUE2destroyed() {uni.$off(this.emitEventName);},// #endifdata() {return {days: [],dayActiveIndex: 0,hourActiveIndex: 0,}},computed: {// 可选时间列表hours() {let nowDate = new Date();let hoursResult = [];let firstHour = this.minHour;if (this.dayActiveIndex === 0) {firstHour = nowDate.getHours() > firstHour ? nowDate.getHours() : firstHour;if (firstHour >= this.maxHour) {return [];}if (this.isFast) {hoursResult.push({start: firstHour,end: firstHour,hoursStr: '1小时内'})firstHour = firstHour + 1;}}for(let i = firstHour; i<this.maxHour; i++) {hoursResult.push({start: i,end: i+1,hoursStr: `${this.isTwo ? ('0'+i).slice(-2) : i}:00~${this.isTwo ? ('0'+(i+1)).slice(-2) : i+1}:00`})}return hoursResult;},// 当前选中结果result() {if (this.days.length === 0 || this.hours.length === 0) {return null;}const {year,month,day} = this.days[this.dayActiveIndex];const {start, end, hoursStr} = this.hours[this.hourActiveIndex] || {};// console.log('---- result ----:',  year,month,day, start, end, hoursStr);return {year: year,month: this.isTwo ? ('0'+month).slice(-2) : month,day: this.isTwo ? ('0'+day).slice(-2) : day,hourStart: this.isTwo ? ('0'+start).slice(-2) : start,hourEnd: this.isTwo ? ('0'+end).slice(-2) : end,hoursStr: hoursStr,anotherName: this.anotherNames[this.dayActiveIndex] || ''}},btnStr() {let hoursStr = '';if (!this.result) {return '待选择';}if (this.result.hourStart === this.result.hourEnd) {hoursStr = `${this.result.hourStart}:00(${this.result.hoursStr})`} else {hoursStr = this.result.hoursStr;}return `预约${this.result.year}年${this.result.month}月${this.result.day}日 ${hoursStr}`}},methods: {// 插件初如化init() {let firstDate = new Date();this.days = [];for(let i = 0; i<this.dayRange; i++) {const dateItem = new Date(firstDate.setDate(firstDate.getDate() + (i === 0 ? 0 : 1)));this.days.push({year: dateItem.getFullYear(),month: dateItem.getMonth() + 1,day: dateItem.getDate(),value: `${dateItem.getMonth() + 1}月${dateItem.getDate()}日`})// console.log('---- dateItem ----:init',  dateItem, dateItem.getFullYear(),dateItem.getMonth() + 1,dateItem.getDate());}// console.log('---- hbxw-timepicker ----:',  this.days);},// 切换月份toggleDay(index) {this.dayActiveIndex = index;this.hourActiveIndex = 0;this.$nextTick(() => {this.$emit('change', {result: this.result,form: 'day'});});},// 切换时间toggleHour(index) {this.hourActiveIndex = index;this.$nextTick(() => {this.$emit('change', {result: this.result,form: 'hour'});if (this.isAutoClose) {this.$emit('update:isShow', false);}});},// 确认按钮sure() {this.$emit('change', {result: this.result,form: 'sure'});},// 关闭弹窗方法close() {this.$emit('change', {result: this.result,form: 'close'});this.$emit('update:isShow', false);}}}
</script>
<style lang="scss" scoped>@keyframes showAni {0%{opacity: 0;transform: translateY(40%);}100%{transform: translateY(0);opacity: 1;}}.hbxw-timepicker{width: 100%;height: 100%;position: fixed;top:0;left:0;right:0;bottom: 0;z-index: 9999}.hbxw-timepicker-mask{// background-color: rgba(0,0,0, var(--opacity));background-color: rgba(0,0,0, 0.3);position: absolute;top:0;left:0;right:0;bottom: 0;z-index: 9998;}.hbxw-timepicker-main{position: absolute;left:0;bottom: 0;z-index: 9999;width: 100%;display: flex;flex-direction: column;align-items: center;border-radius: 40rpx 40rpx 0 0;// background-color: #F7F9FA;background-color: white;transform-origin: center bottom;opacity: 0;&.hbxw-timepicker-main-ani{opacity: 0;}}.hbxw-timepicker-ani{.hbxw-timepicker-main-ani{animation: showAni .3s linear 0.1s 1 forwards;}}.hbxw-timepicker-title{width: 100%;display: flex;flex-direction: column;position: relative;padding: 39rpx 32rpx 27rpx 32rpx;box-sizing: border-box;border-bottom: 1px solid #DCDFE0;.hbxw-timepicker-title-main{font-size: 32rpx;font-weight: bold;line-height: 54rpx;color: #000;}.hbxw-timepicker-title-subtitle{font-size: 25rpx;line-height:48rpx;color: #000;}.hbxw-timepicker-close{width: 24rpx;height: 24rpx;position: absolute;top: 27rpx;right: 27rpx;}}.hbxw-timepicker-content{display: flex;flex-direction: row;width: 100%;border-radius: 40rpx;height: 740rpx;overflow: hidden;background-color: white;}.hbxw-timerpicker-btn-wrap{width: 100%;height: 160rpx;display: flex;justify-content: center;align-items: center;box-shadow: 0px -10rpx 36rpx 0px rgba(165,165,165,0.12);background-color: white;}.hbxw-timerpicker-sure{width: 686rpx;height: 100rpx;background-color: #AAF24E;border-radius: 50rpx;text-align: center;font-size: 32rpx;line-height:100rpx; font-weight: bold;color: #000;}.hbxw-timepicker-day{width: 200rpx;height: 100%;overflow-y: auto;background-color: #F7F9FA;.hbxw-timepicker-day-item{width: 100%;height: 110rpx;font-size: 26rpx;text-align: center;line-height: 110rpx;box-sizing: border-box;border-bottom: 1px solid #DCDFE0;color: #737E85;&:nth-last-of-type(1){border-bottom-color: transparent;}}.hbxw-timepicker-day-item-active{font-weight: bold;border-bottom: 1px solid white;background-color: white;color: #000000;}}.hbxw-timepicker-time{flex: 1;padding:0 32rpx;height: 100%;overflow-y: auto;.hbxw-timepicker-time-item{height: 110rpx;flex: none;box-sizing: border-box;width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;border-bottom: 1px solid #EBEDF0;}.hbxw-timepicker-time-item-active{.hbxw-timepicker-time-val{color:#549204;}.hbxw-timepicker-time-icon{background-color: #AAF24E;.hbxw-timepicker-time-img{opacity: 1;}}}.hbxw-timepicker-time-val{font-size: 28rpx;color: #000;}.hbxw-timepicker-time-icon{width: 32rpx;height: 32rpx;box-sizing: border-box;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;border:1px solid #A2A4A6;.hbxw-timepicker-time-img{width: 22rpx;height: 22rpx;opacity: 0;}}}.hbxw-timepicker-notime{width: 100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;}.hbxw-timerpicker-nodata{font-size: 24rpx;color:#737E85;}
</style>

组件内的默认图片，开启解除注释部分，默认没有，不会报错

js逻辑判断

pickerChange(result) {console.log('---- pickerChange ----:',  result);// console.log('1111')if(result.form=='close'){console.log('222')this.showTimePicker2=!this.showTimePicker2;}if(result.form=='sure'){this.selectedOption=result.result.year+"-"+result.result.month+"-"+result.result.day;if(result.result.hourStart==result.result.hourEnd){this.selectedOption=this.selectedOption+" "+result.result.hourStart+":00"+"~"+(Number(result.result.hourEnd)+1)+":00";}else{this.selectedOption=this.selectedOption+" "+result.result.hourStart+":00"+"~"+result.result.hourEnd+":00";}this.showTimePicker2=!this.showTimePicker2;console.log("888888888",result,this.selectedOption)}},