更新记录

1.0.9（2025-08-26） 下载此版本

优化

1.0.8（2025-07-09） 下载此版本

增加 head 插槽

1.0.7（2025-07-02） 下载此版本

优化

平台兼容性

uni-app(4.07)

x-delivery-time 送达时间选择组件使用说明

组件概述

x-delivery-time 送达时间选择组件，提供日期和时间段的双向选择功能。组件采用底部弹窗形式展示，支持自定义时间范围、样式配置等功能。

属性配置

基础属性

日期配置

时间配置

样式配置

事件回调

change

• 触发时机：选择日期或时间时实时触发
• 参数：result - 当前选择结果对象

confirm

• 触发时机：点击确认按钮
• 参数：result - 最终选择结果对象

cancel

• 触发时机：点击取消按钮
• 参数：无

update:modelValue

• 触发时机：弹窗显示状态改变
• 参数：Boolean - 当前显示状态

返回数据格式

所有回调函数返回的 result 对象包含以下字段：

{
  date: "2024/03/15",           // 选中日期
  dateBegin: "2024/03/15 09:30", // 开始时间（完整）
  dateEnd: "2024/03/15 10:00",   // 结束时间（完整）
  time: "09:30-10:00",          // 时间段文本
  dateTime: "2024/03/15 09:30-10:00" // 完整时间描述
}

使用示例

基础用法

<template>
  <view>
    <button @click="showPicker = true">选择送达时间</button>

    <x-delivery-time 
      v-model="showPicker"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />

    <text v-if="selectedTime">
      选择的时间：{{ selectedTime.dateTime }}
    </text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedTime: null
    }
  },
  methods: {
    handleConfirm(result) {
      this.selectedTime = result
      console.log('选择的送达时间：', result)
    },
    handleCancel() {
      console.log('取消选择')
    }
  }
}
</script>

自定义配置

<template>
  <x-delivery-time 
    v-model="showPicker"
    title="配送时间选择"
    :date-num="14"
    limit-begin-time="0800"
    limit-end-time="2200"
    :time-interval="15"
    :fastest-show="false"
    active-color="#ff6b6b"
    :custom-style="customPopupStyle"
    @change="handleTimeChange"
    @confirm="handleConfirm"
  />
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      customPopupStyle: {
        borderRadius: '30rpx 30rpx 0 0'
      }
    }
  },
  methods: {
    handleTimeChange(result) {
      console.log('时间选择变化：', result)
    },
    handleConfirm(result) {
      console.log('确认选择：', result)
    }
  }
}
</script>

餐厅营业时间场景

<template>
  <x-delivery-time 
    v-model="showPicker"
    title="选择取餐时间"
    :date-num="3"
    limit-begin-time="1100"
    limit-end-time="2100"
    :time-interval="30"
    fastest-text="立即取餐"
    active-color="#e6a23c"
    @confirm="handlePickupTime"
  />
</template>

<script>
export default {
  methods: {
    handlePickupTime(result) {
      // 处理取餐时间选择
      this.bookingTime = result
    }
  }
}
</script>

组件方法

组件实例提供以下方法，可通过 ref 调用：

getCurrentSelection()

获取当前选择状态

this.$refs.deliveryTime.getCurrentSelection()
// 返回: { dateIdx, timeIdx, activeDate, activeTime }

resetSelection()

重置选择到初始状态

this.$refs.deliveryTime.resetSelection()

注意事项

1. 时间格式：limitBeginTime 和 limitEndTime 使用 HHMM 格式，如 "0920" 表示 09:20
2. 日期范围：dateNum 的有效范围是 1-30 天
3. 时间间隔：timeInterval 只支持 15、30、60 三个值
4. 今日限制：选择今日时，会自动过滤已过期的时间段
5. 双向绑定：Vue2 使用 :model-value.sync，Vue3 使用 v-model

自定义插槽

组件提供两个插槽用于自定义：

head 插槽

自定义弹窗头部

<x-delivery-time v-model="showPicker">
  <template #head>
    <view class="custom-header">
      <!-- 自定义头部内容 -->
    </view>
  </template>
</x-delivery-time>

icon 插槽

自定义选中状态图标

<x-delivery-time v-model="showPicker">
  <template #icon>
    <image src="/static/check-icon.png" class="check-icon"></image>
  </template>
</x-delivery-time>

样式定制

组件支持通过 customStyle 属性和 CSS 变量进行样式定制：

<x-delivery-time 
  v-model="showPicker"
  :custom-style="{
    borderRadius: '30rpx 30rpx 0 0',
    backgroundColor: '#f8f8f8'
  }"
/>

插件如果对你有帮助给个好评吧~