增加状态管理持久化插件，提取日期选择，时间选择，周期选择为公共组件

components/my-components/my-hour-area.vue

@@ -0,0 +1,111 @@
+<template>
+  <view >
+    <up-radio-group v-model="useTimeType" placement="row">
+      <up-radio
+        v-for="item in useTimeTypeList"
+        :key="item.value"
+        :value="item.value"
+        :name="item.value"
+        :label="item.label"
+      ></up-radio>
+    </up-radio-group>
+
+    <view class="u-flex u-m-t-30 box" v-if="useTimeType=='custom'">
+        <view class="u-flex u-flex-1">
+            <view class="item " @click="pirckerShow(startValue, 'startValue')">
+        <text class="u-m-r-12" v-if="!startValue">开始时间</text>
+        <text class="u-m-r-12" v-else>{{ startValue }}</text>
+      </view>
+      <view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx;">—</view>
+      <view class="item " @click="pirckerShow(endValue, 'endValue')">
+        <text class="u-m-r-12" v-if="!endValue">结束时间</text>
+        <text class="u-m-r-12" v-else>{{ endValue }}</text>
+      </view>
+        </view>
+
+      <up-icon name="clock"></up-icon>
+    </view>
+
+    <up-datetime-picker
+      :show="show"
+      v-model="value1"
+      closeOnClickOverlay
+      @close="close"
+      @cancel="close"
+      @confirm="confirm"
+      mode="time"
+    ></up-datetime-picker>
+  </view>
+</template>
+  
+  <script setup>
+import { computed, ref } from "vue";
+const useTimeType = defineModel("useTimeType", {
+  type: String,
+  default: "all",
+});
+const useTimeTypeList = [
+  {
+    value: "all",
+    label: "全时段可用",
+  },
+  {
+    value: "custom",
+    label: "指定时间段可用",
+  },
+];
+import dayjs from "dayjs";
+const startValue = defineModel("startValue", {
+  type: String,
+  default: "",
+});
+const endValue = defineModel("endValue", {
+  type: String,
+  default: "",
+});
+
+function close() {
+  show.value = false;
+}
+const value1 = ref('');
+const show = ref(false);
+const nowKey = ref("");
+
+function pirckerShow(date, key) {
+  nowKey.value = key;
+  show.value = true;
+  value1.value = date||''
+}
+
+function confirm(e) {
+  console.log(e);
+
+  if (nowKey.value == "startValue") {
+    startValue.value=e.value
+  } else if (nowKey.value == "endValue") {
+    endValue.value = e.value;
+  }
+  value1.value = e.value;
+  show.value = false;
+}
+</script>
+  
+  <style lang="scss" scoped>
+.item {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 48rpx;
+  padding: 0 12rpx;
+  display: flex;
+  
+}
+.box{
+    border: 2rpx solid #dddfe6;
+    padding: 16rpx 30rpx;
+    box-sizing: border-box;
+    width: 564rpx;
+    border-radius: 4rpx;
+    overflow: hidden;
+}
+</style>
+