更新记录

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

增加 head 插槽

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

优化

1.0.6（2025-07-01） 下载此版本

1

平台兼容性

uni-app

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

组件介绍

x-delivery-time 是一个用于选择配送时间的弹窗组件，支持日期和时间段的选择，适用于外卖、快递等需要预约配送时间的场景。

特性

• 支持自定义可选日期范围（默认近7天）
• 支持设置每日可选时间范围
• 提供"尽快送达"选项
• 支持自定义样式和主题色

安装使用

基础用法，注意: vue2和vue3 控制显示绑定方式不同

<!-- vue2 -->
<x-delivery-time :model-value.sync="chooseTimeShow" @change="onChange">
    <template slot="icon">
        <check-one theme="filled" size="40" fill="skyblue"/>
    </template>
</x-delivery-time>

<!-- vue3 -->
<x-delivery-time v-model="chooseTimeShow" @change="onChange">
    <template v-slot:icon>
        <check-one theme="filled" size="40" fill="skyblue"/>
    </template>
</x-delivery-time>

<template>
  <view>
    <!-- 触发按钮 -->
    <button @click="showDeliveryTime = true">选择配送时间</button>

    <!-- 配送时间选择组件 -->
    <x-delivery-time 
      v-model="showDeliveryTime"
      @change="onDeliveryTimeChange"
    >
      <!-- 自定义选中图标 -->
      <template #icon>
        <text class="icon">✓</text>
      </template>
    </x-delivery-time>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDeliveryTime: false,
      selectedDeliveryTime: null
    }
  },
  methods: {
    onDeliveryTimeChange(data) {
      this.selectedDeliveryTime = data
      console.log('选择的配送时间：', data)
    }
  }
}
</script>

Props 属性

Events 事件

change 事件返回数据格式

{
  date: "2024/07/01",           // 选择的日期
  dateBegin: "2024/07/01 10:00", // 开始时间（具体时间段）
  dateEnd: "2024/07/01 10:30",   // 结束时间（具体时间段）
  time: "10:00-10:30",          // 时间段文本
  dateTime: "2024/07/01 10:00-10:30" // 完整时间描述
}

// 当选择"尽快送达"时：
{
  date: "2024/07/01",
  dateBegin: "2024/07/01",
  dateEnd: "2024/07/01",
  time: undefined,
  dateTime: "2024/07/01"
}

Slots 插槽

高级用法

1. 自定义时间范围

<x-delivery-time 
  v-model="showDeliveryTime"
  :date-num="3"
  limit-begin-time="1000"
  limit-end-time="2200"
  @change="onDeliveryTimeChange"
/>

2. 自定义样式

<x-delivery-time 
  v-model="showDeliveryTime"
  active-color="#FF6B6B"
  :custom-style="{
    height: '600rpx',
    backgroundColor: '#f5f5f5'
  }"
  @change="onDeliveryTimeChange"
/>

3. 隐藏"尽快送达"选项

<x-delivery-time 
  v-model="showDeliveryTime"
  :fastest-show="false"
  @change="onDeliveryTimeChange"
/>

4. 自定义标题和文本

<x-delivery-time 
  v-model="showDeliveryTime"
  title="预约送货时间"
  fastest-text="立即配送"
  @change="onDeliveryTimeChange"
/>

注意事项

1. 时间格式：limitBeginTime 和 limitEndTime 使用 4 位数字格式（HHMM），如 "0920" 表示 09:20

2. 依赖组件：组件依赖 uni-popup 组件

3. 时间过滤：当选择今天时，组件会自动过滤已过期的时间段

4. 平台差异：H5 平台会有 1 秒延迟处理，以解决 uni-popup 立即打开会自动关闭的问题

样式自定义

组件使用 SCSS 编写样式，支持以下自定义：

// 自定义弹窗样式
.popup {
  .title {
    // 标题样式
  }

  .left {
    // 左侧日期列表样式
    .date_item {
      // 日期项样式
    }
  }

  .right {
    // 右侧时间列表样式
    .time_item {
      // 时间项样式
    }
  }
}

完整示例

<template>
  <view class="container">
    <view class="selected-time" v-if="selectedTime">
      <text>已选择：{{ formatSelectedTime(selectedTime) }}</text>
    </view>

    <button @click="showPicker = true" class="select-btn">
      选择配送时间
    </button>

    <x-delivery-time 
      v-model="showPicker"
      :date-num="5"
      limit-begin-time="0900"
      limit-end-time="2100"
      title="选择配送时间"
      fastest-text="尽快送达"
      active-color="#007AFF"
      @change="handleTimeChange"
    >
      <template #icon>
        <text class="check-icon">✓</text>
      </template>
    </x-delivery-time>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedTime: null
    }
  },
  methods: {
    handleTimeChange(data) {
      this.selectedTime = data
    },

    formatSelectedTime(data) {
      if (!data.time) {
        return `${data.date} 尽快送达`
      }
      return `${data.date} ${data.time}`
    }
  }
}
</script>

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