refactor(mobile/promotion): 促销移动端_和 PC 端的计划新增联动测试完毕

src/mobile/components/PickerCalendar/index.vue

+<template>
+  <van-calendar :show-mark="false"
+    :min-date="searchMinDate"
+    :max-date="searchMaxDate"
+    type="range"
+    allow-same-day
+    teleport="body" />
+</template>
+
+<script setup>
+const props = defineProps({
+  setNextMaxMonth: { // 设置下一个月的最大日期为最大范围
+    type: Boolean,
+    default: false
+  }
+})
+
+// 设置最小日期选择范围
+const searchMinDate = computed(() => {
+  // 默认为今年 1 月 1 日
+  return new Date(new Date().getFullYear(), 0, 1)
+})
+
+// 设置最大日期选择范围
+const searchMaxDate = computed(() => {
+  if (props.setNextMaxMonth) {
+    // 设置下个月最后一日为最大范围
+    return new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0)
+  } else {
+    // 默认为当前日期的六个月后
+    return new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate())
+  }
+})
+</script>

src/mobile/main.js

 import { isMobile } from '@/utils'
 // 移动端组件
+// 选择搜索列表
 import PickerSearch from './components/PickerSearch'
+// 选择日期
+import PickerCalendar from './components/PickerCalendar'
 
 // 只有在移动端引入
 if (isMobile()) {
@@ -20,6 +23,6 @@ if (isMobile()) {
 }
 
 export default function (app) {
-  // 移动端组件
-  app.component('PickerSearch', PickerSearch)
+  app.component('PickerSearch', PickerSearch);
+  app.component('PickerCalendar', PickerCalendar);
 }

src/mobile/views/promotion/plan/editing/index.vue

@@ -25,11 +25,11 @@
                   :value="form.storeName"
                   name="storeName"
                   placeholder="点击选择门店">
-                <p>{{ form.storeAddr }} - {{ form.storeCode }}</p>
+                <p v-if="form.storeName">{{ form.storeAddr }} - {{ form.storeCode }}</p>
               </div>
             </template>
           </van-field>
-          <van-field v-model="form.date"
+          <van-field :modelValue="parseTime(form.date, '{y}-{m}-{d}')"
             is-link
             readonly
             :disabled="!!planId"
@@ -38,7 +38,13 @@
             placeholder="点击选择时间"
             required
             :rules="[{ required: true, message: '请选择日期' }]"
-            @click="selDate" />
+            @click="selCalendar" />
+          <PickerCalendar v-model:show="showCalendar"
+            :default-date="form.date"
+            :min-date="new Date()"
+            setNextMaxMonth
+            type="single"
+            @confirm="confirmCalendar" />
           <van-field v-model="form.pattern"
             is-link
             readonly
@@ -128,14 +134,14 @@
       :searchShow="showPickerSearch"
       @search="search"
       @confirm="confirm"></PickerSearch>
-    <van-popup v-model:show="showDatePicker"
+    <!-- <van-popup v-model:show="showCalendar"
       destroy-on-close
       position="bottom">
-      <van-date-picker v-model="selDateArr"
+      <van-date-picker v-model="confirmCalendarArr"
         @confirm="onConfirmDate"
         :min-date="minDate"
         :max-date="maxDate" />
-    </van-popup>
+    </van-popup> -->
     <van-popup v-model:show="showInTimePicker"
       destroy-on-close
       position="bottom">
@@ -241,19 +247,27 @@ const getStoreList = async (storeName) => {
 getStoreList()
 
 // 活动日期
-const showDatePicker = ref(false)
-const selDateArr = ref([])
-const minDate = ref('')
-const maxDate = ref('')
-const selDate = () => {
-  showDatePicker.value = true
-  selDateArr.value = form.date ? form.date.split('-') : [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
-  minDate.value = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
-  // 最大值到下个月最后一天
-  maxDate.value = new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0)
+const showCalendar = ref(false)
+const selCalendar = () => {
+  showCalendar.value = true
+}
+const confirmCalendar = (value) => {
+  form.date = value
+  showCalendar.value = false
 }
+
+const searchMinDate = ref({}) // 最小日期范围
+const confirmCalendarArr = ref([])
+const maxDate = ref('')
+// const confirmCalendar = () => {
+//   showCalendar.value = true
+//   confirmCalendarArr.value = form.date ? form.date.split('-') : [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
+//   searchMinDate.value = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+//   // 最大值到下个月最后一天
+//   maxDate.value = new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0)
+// }
 const onConfirmDate = (value) => {
-  showDatePicker.value = false
+  showCalendar.value = false
   form.date = value?.selectedValues.join('-')
 }
 

src/mobile/views/promotion/plan/index/plan-search.vue

@@ -21,15 +21,9 @@
       placeholder="选择日期"
       @click="selSearchCalendar">
     </van-field>
-    <van-calendar v-model:show="showCalendar"
-      :min-date="searchMinDate"
-      :show-mark="false"
-      type="range"
-      allow-same-day
-      teleport="body"
+    <PickerCalendar v-model:show="showCalendar"
       :default-date="[query.activityStartDate, query.activityEndDate]"
       @confirm="confirmCalendar" />
-
     <!-- 活动类型 -->
     <van-field v-model="query.planStatus"
       is-link