更新记录

1.0（2026-04-24） 下载此版本

时间段区间选择

平台兼容性

uni-app(3.7.6)

其他

MultiShopTimePicker 使用说明

基于 uni-app、Vue 2 的按小时（0:00–24:00）区间选择组件。支持 单区间 与 双区间 两种模式，可选 主题色覆盖，底部提供「保存时段」提交。

环境要求

引入方式

1. 拷贝组件

将本目录 multi-shop-time-picker.vue 复制到目标工程的组件目录，例如：

components/multi-shop-time-picker/multi-shop-time-picker.vue

2. 配置 easycom（推荐）

在 pages.json 中增加（路径按你项目调整）：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^multi-shop-time-picker$": "@/components/multi-shop-time-picker/multi-shop-time-picker.vue"
    }
  }
}

配置完成后，页面里可直接写标签 <multi-shop-time-picker>，无需手动 import。

3. 手动引入（可选）

<script>
import MultiShopTimePicker from '@/components/multi-shop-time-picker/multi-shop-time-picker.vue';

export default {
  components: { MultiShopTimePicker }
};
</script>

快速示例

<template>
  <view class="page">
    <multi-shop-time-picker
      :max-ranges="2"
      :default-list="[[10, 14], []]"
      :theme-colors="{}"
      @submit="onTimeSubmit"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onTimeSubmit(e) {
      console.log(e.timeRange);   // 例: ['9:00-14:00'] 或两段字符串数组
      console.log(e.checkList);   // 二维数组，元素为格子对象
      console.log(e.maxRanges);   // 1 或 2
    }
  }
};
</script>

Props

defaultList 格式

• 类型：二维数组，外层表示「第几条区间」，内层为该区间的 端点格子 id（1–24，对应 0:00–1:00 … 23:00–24:00）。
• 组件通过模拟点击这些 id 完成初始选中，因此应传入与交互规则一致的端点序列（通常每条区间两个 id：起点格、终点格）。

示例：

// 双区间模式：第一条约 9:00–14:00（id 含义与当前交互一致时）
[[10, 15], []]

// 单区间模式：只保留外层第一段
[[10, 15]]

修改 defaultList 或 maxRanges 时会重新同步内部格子状态（deep: true 监听 defaultList）。

主题色 themeColors

与组件内默认对象（青绿系）按 key 合并，常用字段如下：

示例（暖色）：

<multi-shop-time-picker
  :theme-colors="{
    buttonPrimaryStart: '#fb923c',
    buttonPrimaryEnd: '#c2410c',
    deputyRangeBg: '#ffedd5',
    slotSelectedBg: '#ea580c',
    summaryText: '#9a3412'
  }"
/>

事件

submit 载荷说明

• timeRange：string[]，仅包含有内容的区间文案，例如 ['9:00-14:00']；无选择时可能为空数组。
• checkList：Array[2]，每项为对象数组（格子引用），结构含 id、start、end 等，用于还原或提交后端。
• maxRanges：当前 1 或 2，便于与 UI 配置对齐。

交互说明（简要）

• 双区间（maxRanges === 2）：先完成第一条连续区间，再在空白格上开始第二条；相邻区间可能合并为一条。
• 单区间（maxRanges === 1）：仅保留一条连续区间；在第一段已选满后再点外侧格，会视为重新从该格起选（不会开第二段）。

具体规则以组件内状态机为准；建议在实际业务页做一次完整点击路径验收。

组件名

• name: 'MultiShopTimePicker'
• 模板标签（easycom）：multi-shop-time-picker

演示工程

本仓库中可参考页面：pages/demo/demo.vue（pages.json 已配置入口时可直接运行），内含：

• maxRanges 切换示例
• 多套 themeColors（青瓷 / 杏橘 / 海雾）切换示例

版本与许可

组件版本以仓库 manifest.json 中 versionName 或发布说明为准；使用及分发请遵守你项目自身的开源/商用协议。

如有问题，建议在业务仓库中提交 Issue 或内部工单，并附上 uni-app 版本、目标平台（微信/H5/App）及最小复现页面。