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

components/my-components/my-time-area.vue

@@ -0,0 +1,79 @@
+<template>
+  <view>
+    <view class="u-flex">
+      <view class="item" @click="pirckerShow(startDate, 'startDate')">
+        <text class="u-m-r-12" v-if="!startDate">请选择日期范围</text>
+        <text class="u-m-r-12" v-else>{{ startDate }}</text>
+        <up-icon name="arrow-down" size="14"></up-icon>
+      </view>
+      <view class="u-m-l-8 u-m-r-8">—</view>
+      <view class="item" @click="pirckerShow(endDate, 'endDate')">
+        <text class="u-m-r-12" v-if="!endDate">请选择日期范围</text>
+        <text class="u-m-r-12" v-else>{{ endDate }}</text>
+        <up-icon name="arrow-down" size="14"></up-icon>
+      </view>
+    </view>
+
+    <up-datetime-picker
+      :show="show"
+      v-model="value1"
+      closeOnClickOverlay
+      @close="close"
+      @cancel="close"
+      @confirm="confirm"
+      mode="date"
+    ></up-datetime-picker>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import dayjs from "dayjs";
+const startDate = defineModel("startDate", {
+  type: String,
+  default: "",
+});
+const endDate = defineModel("endDate", {
+  type: String,
+  default: "",
+});
+
+const minDate = ref(0);
+const maxDate = ref(dayjs().add(80, "year").valueOf());
+function close() {
+  show.value = false;
+}
+const value1 = ref(Date.now());
+const show = ref(false);
+const nowKey = ref("");
+
+function pirckerShow(date, key) {
+  nowKey.value = key;
+  console.log(date);
+  show.value = true;
+}
+
+function confirm(e) {
+  console.log(e);
+
+  if (nowKey.value == "startDate") {
+    startDate.value = dayjs(e.value).format("YYYY-MM-DD");
+  } else if (nowKey.value == "endDate") {
+    endDate.value = dayjs(e.value).format("YYYY-MM-DD");
+  }
+  value1.value = e.value
+  show.value = false;
+
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 64rpx;
+  border: 2rpx solid #dddfe6;
+  padding: 0 12rpx;
+  display: flex;
+}
+</style>