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

pageMarket/discountActivity/add.vue

@@ -41,10 +41,10 @@
         <view class="u-flex u-row-between u-m-b-32">
           <text class="font-bold color-333">活动日期</text>
         </view>
-        <timeArea
+        <my-time-area
           v-model:startDate="form.validStartTime"
           v-model:endDate="form.validEndTime"
-        ></timeArea>
+        ></my-time-area>
       </view>
 	  <view class="u-m-t-32">
 		  <up-line ></up-line>
@@ -53,7 +53,7 @@
         <view class="u-flex u-row-between">
           <text class="font-bold color-333 u-m-b-32">可用周期</text>
         </view>
-        <weekSel  v-model="form.useDays"></weekSel>
+        <my-week-sel  v-model="form.useDays"></my-week-sel>
       </view>
     </view>
 
@@ -61,11 +61,11 @@
       <view class="u-flex u-row-between">
         <text class="font-bold color-333 u-m-b-32">指定时间段</text>
       </view>
-      <hourSel
+      <my-hour-area
         v-model:useTimeType="form.useTimeType"
         v-model:startValue="form.useStartTime"
         v-model:endValue="form.useEndTime"
-      ></hourSel>
+      ></my-hour-area>
     </view>
     <view class="u-m-t-32 container">
       <view class="u-flex u-row-between">
@@ -144,15 +144,11 @@
         ></up-switch>
       </view>
     </view>
-    <bottomBtnGroup @save="save" @cancel="cancel"></bottomBtnGroup>
+    <my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
   </view>
 </template>
 
 <script setup>
-import timeArea from "./components/time-area.vue";
-import weekSel from "./components/week-sel.vue";
-import hourSel from "./components/hour-area.vue";
-import bottomBtnGroup from "./components/bottom-btn-group.vue";
 import { reactive } from "vue";
 import * as discountActivityApi from "@/http/api/market/discountActivity.js";
 import {

pageMarket/discountActivity/components/bottom-btn-group.vue

@@ -1,29 +0,0 @@
-<template>
-  <view>
-    <view style="height: 180rpx"></view>
-
-    <view class="fixed-bottom u-flex gap-20">
-      <view class="u-flex-1">
-        <my-button type="primary" @click="save" shape="circle">
-          保存
-        </my-button>
-      </view>
-      <view class="u-flex-1">
-        <my-button bgColor="#fff" type="default" @click="cancel" shape="circle">
-          取消
-        </my-button>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-const emit= defineEmits(["save", "cancel"]);
-
-function save() {
-  emit("save");
-}
-function cancel() {
-  emit("cancel");
-}
-</script>

pageMarket/discountActivity/components/hour-area.vue

@@ -1,111 +0,0 @@
-<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>
-  

pageMarket/discountActivity/components/time-area.vue

@@ -1,79 +0,0 @@
-<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>

pageMarket/discountActivity/components/week-sel.vue

@@ -1,57 +0,0 @@
-<template>
-  <view>
-    <up-checkbox-group v-model="selectedWeek" :options="week">
-      <up-checkbox
-      :customStyle="customStyle"
-        v-for="item in week"
-        :key="item.value"
-        :value="item.value"
-        :name="item.value"
-        :label="item.value"
-        >{{ item.name }}</up-checkbox>
-    </up-checkbox-group>
-  </view>
-</template>
-<script setup>
-import { ref } from "vue";
-
-const customStyle={
-  marginRight: '40rpx',
-  marginBottom: '16rpx',
-}
-
-const selectedWeek=defineModel({
-  type: Array,
-  default: () => [],
-});
-const week = ref([
-  {
-    name: "周一",
-    value:"周一",
-  },
-  {
-    name: "周二",
-    value:"周二",
-  },
-  {
-    name: "周三",
-    value:"周三",
-  },
-  {
-    name: "周四",
-    value:"周四",
-  },
-  {
-    name: "周五",
-    value:"周五",
-  },
-  {
-    name: "周六",
-    value:"周六",
-  },
-  {
-    name: "周日",
-    value:"周日",
-  },
-]);
-</script>