uni-app 实现星期几和时间段选择功能的插件需求

可以做，联系QQ：1804945430

在实现uni-app项目中，如果需要实现星期几和时间段选择的功能，可以自定义一个组件来封装这些功能。以下是一个简化的代码示例，展示了如何实现星期几和时间段的选择功能。

1. 创建组件 WeekTimePicker.vue

<template>
  <view class="container">
    <picker mode="multiSelector" :range="weekRange" v-model="weekSelected">
      <view class="picker">
        {{ weekSelected.map(index => weekOptions[index]).join('、') }}
      </view>
    </picker>
    <picker mode="time" :value="timeValue" @change="bindTimeChange">
      <view class="picker">
        {{ formatTime(timeValue) }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weekOptions: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      weekRange: Array.from({ length: 7 }, (_, i) => [i, this.weekOptions[i]]),
      weekSelected: [0], // 默认选中星期一
      timeValue: [9, 0] // 默认时间为09:00
    };
  },
  methods: {
    bindTimeChange(e) {
      this.timeValue = e.detail.value;
    },
    formatTime(value) {
      const hours = String(value[0]).padStart(2, '0');
      const minutes = String(value[1]).padStart(2, '0');
      return `${hours}:${minutes}`;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.picker {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

2. 使用组件

在需要使用该组件的页面中，引入并使用该组件。

<template>
  <view>
    <WeekTimePicker />
  </view>
</template>

<script>
import WeekTimePicker from '@/components/WeekTimePicker.vue';

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

说明

• 星期选择：使用了uni-app的picker组件，并设置了mode为multiSelector，range属性设置了星期的选项。weekSelected用于存储选中的星期索引。
• 时间段选择：同样使用了picker组件，但mode设置为time，value属性用于绑定当前选中的时间，bindTimeChange方法用于处理时间变化事件。
• 样式：简单的样式定义，可以根据实际需求进行调整。

该示例展示了一个基本的星期几和时间段选择功能，你可以根据具体需求进一步扩展和优化，例如添加验证逻辑、格式化输出等。