更新记录

1.0.0（2025-07-04） 下载此版本

初始版本，首次发布。

平台兼容性

uni-app(4.05)

lxm-appoint-date 组件使用说明lxm-appoint-date 是一个用于选择预约日期和时间段的 Vue 组件，适用于需要用户选择服务人员上门时间的场景。组件支持以下功能：默认选中某一天，但不默认选中时间段。 用户可选择任意日期和该日期下的任意时间段（上午、下午、晚上、全天），每次选择覆盖之前的选择。 时间段按类型（type: 1=上午，2=下午，3=晚上，5=全天）分组显示。 提供确认和关闭功能，确认时需已选择时间段。

以下是在组件中使用 lxm-appoint-date 组件的详细说明，包括 props、事件、测试数据和使用示例。

1. 组件概述功能日期选择：显示多个日期，用户可选择一天，默认选中第一天。 时间段选择：显示选中日期的可用时间段，按类型（上午、下午、晚上、全天）分组，用户可选择任意时间段。 单一选择：每次选择新日期或时间段，覆盖之前的选择。 确认与关闭：点击“确认”保存选择，点击遮罩层关闭组件。

数据结构后端返回的数据结构如下：

{
  "status": "success",
  "data": {
    "dates": [
      {
        "date": "YYYY-MM-DD",
        "week": "星期X",
        "isActive": Boolean,
        "timePeriods": [
          {
            "time": "HH:MM-HH:MM",
            "type": Number, // 1=上午, 2=下午, 3=晚上, 5=全天
            "isActive": Boolean
          }
        ]
      }
    ],
    "selectedDate": {
      "date": "YYYY-MM-DD",
      "week": "星期X",
      "time": "HH:MM-HH:MM", // 可选
      "type": Number // 可选，1, 2, 3, 5
    }
  }
}

2. 在父组件中使用

2.1 引入组件在父组件中引入 AppointDate 组件：

import AppointDate from './AppointDate.vue';

2.2 PropsProp

2.4 示例代码以下是父组件的完整代码示例，展示如何使用 AppointDate 组件：vue

<template>
  <div>
    <button @click="isVisible = true">选择预约时间</button>
    <div v-if="selectedDate.date" class="selected-info">
      当前选择: {{ selectedDate.date }} {{ selectedDate.week }}
      <template v-if="selectedDate.time">
        {{ selectedDate.time }} ({{ periodTitles[selectedDate.type] }})
      </template>
    </div>
    <appoint-date
      :visible="isVisible"
      :dates="dates"
      :selectedDate="selectedDate"
      @close="isVisible = false"
      @confirm="handleConfirm"
      @update:dates="dates = $event"
      @update:selectedDate="selectedDate = $event"
    />
  </div>
</template>

<script>
import AppointDate from './AppointDate.vue';

export default {
  components: { AppointDate },
  data() {
    return {
      isVisible: false,
      periodTitles: {
        1: '上午',
        2: '下午',
        3: '晚上',
        5: '全天',
      },
      dates: [
        {
          date: '2025-07-04',
          week: '星期五',
          isActive: true,
          timePeriods: [
            { time: '08:00-08:30', type: 1, isActive: false },
            { time: '08:30-09:00', type: 1, isActive: false },
            { time: '14:00-14:30', type: 2, isActive: false },
            { time: '18:00-18:30', type: 3, isActive: false },
            { time: '09:00-17:00', type: 5, isActive: false },
          ],
        },
        {
          date: '2025-07-05',
          week: '星期六',
          isActive: false,
          timePeriods: [
            { time: '09:00-09:30', type: 1, isActive: false },
            { time: '15:00-15:30', type: 2, isActive: false },
            { time: '19:00-19:30', type: 3, isActive: false },
          ],
        },
        {
          date: '2025-07-06',
          week: '星期日',
          isActive: false,
          timePeriods: [
            { time: '10:00-10:30', type: 1, isActive: false },
            { time: '16:00-16:30', type: 2, isActive: false },
          ],
        },
        {
          date: '2025-07-07',
          week: '星期一',
          isActive: false,
          timePeriods: [
            { time: '09:00-17:00', type: 5, isActive: false },
          ],
        },
      ],
      selectedDate: {
        date: '2025-07-04',
        week: '星期五',
      },
    };
  },
  methods: {
    handleConfirm(selected) {
      console.log('确认选择:', selected);
      this.isVisible = false;
      // 可调用后端接口保存
      // fetch('/api/appointments/confirm', { method: 'POST', body: JSON.stringify(selected) })
    },
  },
};
</script>

<style>
.selected-info {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}
button {
  padding: 10px 20px;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

代码说明：

• 初始化：isVisible 控制组件显示，dates 和 selectedDate 初始化测试数据。

• 事件处理：

  • @close：关闭组件，设置 isVisible = false。
  • @confirm：接收 selectedDate，可调用后端接口保存。
  • @update:dates 和 @update:selectedDate：同步组件内部数据变化。

• 显示当前选择：通过 selected-info 显示当前选中的日期和时间段（若已选择）。