From 4ddb75324a60a5a5753f98b055faf8e1020895d5 Mon Sep 17 00:00:00 2001
From: doublekou <951513186@qq.com>
Date: Fri, 22 Sep 2023 14:51:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=81=E5=B8=82=E5=8C=BA?=
 =?UTF-8?q?=E5=92=8C=E8=90=A5=E4=B8=9A=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/geopoliticalCustomers/types.ts        |    1 +
 .../geopoliticalCustomersModal copy.vue       | 1318 +++++++++++++++++
 .../geopoliticalCustomersModal.vue            |   52 +-
 vite.config.ts                                |    4 +-
 4 files changed, 1369 insertions(+), 6 deletions(-)
 create mode 100644 src/views/geopoliticalCustomers/geopoliticalCustomersModal copy.vue

diff --git a/src/api/geopoliticalCustomers/types.ts b/src/api/geopoliticalCustomers/types.ts
index e6513c2..d675ebb 100644
--- a/src/api/geopoliticalCustomers/types.ts
+++ b/src/api/geopoliticalCustomers/types.ts
@@ -154,6 +154,7 @@ interface customStoreEntitiesItem {
   // customStoreId: number
   // storeId: number
   // customId: number
+  option?: any
   //门店id
   customStoreId?: number
   //预约id
diff --git a/src/views/geopoliticalCustomers/geopoliticalCustomersModal copy.vue b/src/views/geopoliticalCustomers/geopoliticalCustomersModal copy.vue
new file mode 100644
index 0000000..a078cc3
--- /dev/null
+++ b/src/views/geopoliticalCustomers/geopoliticalCustomersModal copy.vue	
@@ -0,0 +1,1318 @@
+<template>
+  <a-modal
+    :title="title"
+    :visible="visible"
+    :mask-closable="false"
+    :centered="true"
+    :body-style="{ padding: '24px 40px 8px 40px' }"
+    :confirm-loading="submitLoading"
+    :width="850"
+    @cancel="handleClose"
+  >
+    <a-form
+      ref="formRef"
+      :model="formModel"
+      :rule="formRule"
+      :label-col="{ sm: { span: 24 }, md: { span: 5 } }"
+      :wrapper-col="
+        title === '详情' || title === '审核'
+          ? { sm: { span: 24 }, md: { span: 16 } }
+          : { sm: { span: 24 }, md: { span: 19 } }
+      "
+    >
+      <a-form-item
+        label="称呼"
+        name="customName"
+        :rules="[{ required: true, message: '请输入称呼', trigger: 'blur' }]"
+        :label-col="{ sm: { span: 24 }, md: { span: 5 } }"
+        :wrapper-col="
+          title === '详情' || title === '审核'
+            ? { sm: { span: 24 }, md: { span: 9 } }
+            : { sm: { span: 24 }, md: { span: 11 } }
+        "
+      >
+        <a-input
+          v-model:value="formModel.customName"
+          placeholder="请输入称呼"
+          style="width: 65%"
+          :readonly="title === '详情' || title === '审核'"
+        />
+      </a-form-item>
+      <a-form-item
+        label="联系方式"
+        name="customNid"
+        :rules="[
+          {
+            required: true,
+            message: '请输入正确的手机号码',
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            trigger: ['blur', 'change']
+          }
+        ]"
+        :label-col="{ sm: { span: 24 }, md: { span: 5 } }"
+        :wrapper-col="
+          title === '详情' || title === '审核'
+            ? { sm: { span: 24 }, md: { span: 9 } }
+            : { sm: { span: 24 }, md: { span: 11 } }
+        "
+      >
+        <a-input
+          v-model:value="formModel.customNid"
+          placeholder="请输入联系方式"
+          style="width: 65%"
+          :readonly="title === '详情' || title === '审核'"
+        />
+      </a-form-item>
+      <a-form-item
+        label="备注"
+        name="remark"
+        :label-col="{ sm: { span: 24 }, md: { span: 5 } }"
+        :wrapper-col="
+          title === '详情' || title === '审核'
+            ? { sm: { span: 24 }, md: { span: 9 } }
+            : { sm: { span: 24 }, md: { span: 11 } }
+        "
+      >
+        <a-input
+          v-model:value="formModel.remark"
+          placeholder="请输入备注"
+          style="width: 65%"
+          :readonly="title === '详情' || title === '审核'"
+        />
+      </a-form-item>
+      <a-row :gutter="16">
+        <a-col :xl="14" :md="14" :sm="14">
+          <a-form-item
+            label="请输入您的地址信息"
+            :label-col="{ sm: { span: 24 }, md: { span: 9 } }"
+            :wrapper-col="{ sm: { span: 24 }, md: { span: 15 } }"
+            :rules="[{ required: true, message: '请选择地址信息', trigger: ['blur', 'change'] }]"
+            name="address"
+          >
+            <a-cascader
+              v-model:value="formModel.address"
+              :options="provincesAndCitiesAndAutonomousOptions"
+              placeholder="请选择"
+              :show-search="{ filter }"
+              style="margin-right: 20px"
+              :disabled="isDisabled"
+              :class="dynamicClass"
+              class="readonly-cascader"
+              :allow-clear="title === '新建预约' || title === '编辑预约'"
+              @change="addressChange"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :xl="10" :md="10" :sm="10">
+          <a-form-item
+            :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]"
+            name="detailAddress"
+          >
+            <a-input
+              v-model:value="formModel.detailAddress"
+              placeholder="请输入小区名称"
+              :disabled="title === '编辑预约'"
+              :readonly="title === '详情' || title === '审核'"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-form-item
+        label="请输入区域半径"
+        class="radius"
+        name="radius"
+        :rules="[{ required: true, message: '请选择区域半径', trigger: 'blur' }]"
+      >
+        <a-select
+          ref="select"
+          v-model:value="formModel.radius"
+          :style="{ width: title === '详情' || title === '审核' ? '37%' : '38%' }"
+          :options="radiusOptions"
+          :field-names="{ label: 'name', value: 'id', options: 'children' }"
+          :disabled="isDisabled"
+          :class="dynamicClass"
+          @change="radiusChange"
+        ></a-select>
+        <div>
+          <a-button
+            v-if="title === '新建预约' || title === '编辑预约'"
+            type="primary"
+            @click="match"
+            >匹配</a-button
+          >
+          <a-button v-if="title === '新建预约'" style="margin-left: 10px" @click="resetForm"
+            >重置</a-button
+          >
+        </div>
+      </a-form-item>
+      <a-form-item
+        v-if="title === '新建预约' || title === '编辑预约'"
+        style="display: flex; justify-content: center"
+      >
+        <!-- 地图 -->
+        <div class="clueImport-page">
+          <div class="drawStation">
+            <div class="input"></div>
+            <div id="draw-station-container">
+              <div
+                v-if="listData.length > 0"
+                id="aa"
+                style="
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  background-color: #fff;
+                  width: 175px;
+                  overflow-y: auto;
+                "
+              >
+                <!--_blank：链接会在新窗口或标签页中打开。-->
+                <a-list item-layout="horizontal" :data-source="listData">
+                  <template #renderItem="{ item, index }">
+                    <a-list-item @click="storeItemClick(item, index)">
+                      <a-list-item-meta>
+                        <template #title>
+                          <a-tooltip :title="item.title" :overlay-style="tooltipStyle">
+                            <div
+                              style="
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                font-size: 14px;
+                              "
+                            >
+                              {{ item.title }}
+                            </div>
+                          </a-tooltip>
+                          <a-tooltip :title="item.description" :overlay-style="tooltipStyle">
+                            <div
+                              style="
+                                color: rgba(0, 0, 0, 0.45);
+                                font-size: 12px;
+                                margin-top: 6px;
+                                line-height: 1.5715;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                              "
+                            >
+                              地址：{{ item.description }}
+                            </div>
+                          </a-tooltip>
+                          <a-tooltip
+                            :title="item.tel"
+                            :overlay-style="tooltipStyle"
+                            :mouse-enter-delay="0"
+                            :mouse-leave-delay="0"
+                          >
+                            <div
+                              style="
+                                color: rgba(0, 0, 0, 0.45);
+                                font-size: 12px;
+                                margin-top: 6px;
+                                line-height: 1.5715;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                              "
+                            >
+                              电话：{{ item.tel }}
+                            </div>
+                          </a-tooltip>
+                        </template>
+                      </a-list-item-meta>
+                      <template #actions>
+                        <!-- <img width="35" height="35" alt="logo" :src="item.href" /> -->
+                        <a-button size="small" :disabled="item.disabled" @click="addStore(item)"
+                          >添加</a-button
+                        >
+                      </template>
+                    </a-list-item>
+                  </template>
+                </a-list>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-form-item>
+      <!-- 门店预约信息表单 -->
+      <div v-if="formModel.customStoreEntities.length > 0">
+        <div
+          v-for="(item, index) in formModel.customStoreEntities"
+          :key="index"
+          style="display: flex; justify-content: space-between"
+        >
+          <a-form-item
+            style="width: 45%"
+            label="预约门店名称"
+            :label-col="
+              title === '详情' || title === '审核'
+                ? { sm: { span: 24 }, md: { span: 11 } }
+                : { sm: { span: 24 }, md: { span: 8 } }
+            "
+            :wrapper-col="
+              title === '详情' || title === '审核'
+                ? { sm: { span: 24 }, md: { span: 13 } }
+                : { sm: { span: 24 }, md: { span: 16 } }
+            "
+            :rules="{
+              required: true,
+              message: '请输入预约门店名称',
+              trigger: 'change'
+            }"
+            :name="['customStoreEntities', index, 'storeName']"
+          >
+            <a-input
+              v-model:value="item.storeName"
+              placeholder="请输入"
+              :readonly="title === '详情' || title === '审核'"
+              :style="{ width: title === '详情' || title === '审核' ? '103%' : '100%' }"
+            />
+          </a-form-item>
+          <a-form-item
+            style="width: 30%"
+            label="预约时间"
+            :label-col="
+              title === '详情' || title === '审核'
+                ? { sm: { span: 24 }, md: { span: 9 } }
+                : { sm: { span: 24 }, md: { span: 9 } }
+            "
+            :wrapper-col="
+              title === '详情' || title === '审核'
+                ? { sm: { span: 24 }, md: { span: 15 } }
+                : { sm: { span: 24 }, md: { span: 15 } }
+            "
+            :rules="{
+              required: true,
+              message: '请选择预约日期',
+              trigger: 'change'
+            }"
+            :name="['customStoreEntities', index, 'reservationDate']"
+          >
+            <a-space direction="vertical">
+              <a-date-picker
+                v-model:value="item.reservationDate"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :disabled="title === '详情' || title === '审核'"
+                :class="reservationTimeClass"
+              />
+            </a-space>
+          </a-form-item>
+          <a-form-item
+            style="width: 18%"
+            :label-col="
+              title === '详情' || title === '审核'
+                ? { sm: { span: 24 }, md: { span: 0 } }
+                : { sm: { span: 24 }, md: { span: 0 } }
+            "
+            :wrapper-col="
+              title === '详情' || title === '审核'
+                ? { sm: { span: 24 }, md: { span: 24 } }
+                : { sm: { span: 24 }, md: { span: 24 } }
+            "
+            :rules="{
+              required: true,
+              message: '请选择预约时间',
+              trigger: 'change'
+            }"
+            :name="['customStoreEntities', index, 'reservationTime']"
+          >
+            <a-space style="width: 100%">
+              <a-select
+                ref="select"
+                v-model:value="item.reservationTime"
+                :allow-clear="title === '新建预约' || title === '编辑预约'"
+                :options="item.option"
+                :class="reservationTimeClass"
+                :style="{ width: title === '详情' || title === '审核' ? '103%' : '100%' }"
+              >
+              </a-select>
+            </a-space>
+          </a-form-item>
+        </div>
+      </div>
+    </a-form>
+    <template #footer>
+      <div v-if="title === '新建预约' || title === '编辑预约'">
+        <a-button @click="storeResetForm">重置</a-button>
+        <a-button type="primary" html-type="submit" style="margin-left: 10px" @click="showModal"
+          >报名</a-button
+        >
+        <a-button
+          type="primary"
+          html-type="submit"
+          style="margin-left: 10px"
+          @click="temporaryStorage"
+          >暂存</a-button
+        >
+      </div>
+      <a-button v-if="title === '详情'" type="primary" html-type="submit" @click="visible = false"
+        >确定</a-button
+      >
+      <div v-if="title === '审核'">
+        <a-button @click="retrial">重审</a-button>
+        <a-button type="primary" html-type="submit" style="margin-left: 10px" @click="distribute"
+          >分发</a-button
+        >
+      </div>
+    </template>
+    <!-- 报名、审核信息确认弹窗 -->
+    <a-modal v-model:visible="registerVisible" title="确认信息" @ok="handleOk">
+      <p>您提交的表单信息为：</p>
+      <p>称呼：{{ formModel.customName }}</p>
+      <p>联系方式：{{ formModel.customNid }}</p>
+      <div style="overflow-y: auto; max-height: 200px">
+        <p v-for="(item, index) in formModel.customStoreEntities" :key="index">
+          {{ `报名的门店${index + 1}为` }}： {{ item.storeName }} --
+          {{ `${item.reservationDate?.toString().split(' ')[0]} ${item.reservationTime}` }}
+        </p>
+      </div>
+    </a-modal>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRefs, computed } from 'vue'
+import { useModal } from '@/hooks/modal'
+import { useAdminForm, useFormAction, FormAction } from '@/hooks/form'
+import type { FormRequestMapping } from '@/hooks/form'
+import { doRequest } from '@/utils/axios/request'
+import { message } from 'ant-design-vue'
+import type { FormInstance } from 'ant-design-vue'
+//预约时间
+import type { SelectValue } from 'ant-design-vue/es/select'
+import type { SelectProps } from 'ant-design-vue'
+import type { Dayjs } from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import {
+  addCustomer,
+  updateCustomer,
+  auditCustomer,
+  getDetail,
+  getStoreData
+} from '@/api/geopoliticalCustomers'
+import type { CustomerDTO, GeopoliticalCustomersRecord } from '@/api/geopoliticalCustomers/types'
+
+//dom中可以写成:rules = 'rulesData'
+// const rulesData = {
+//   required: true,
+//   trigger: 'change'
+// }
+
+onMounted(() => {
+  //把半小时一个时间区间数据赋值给预约时间下拉框列表数据
+  time_array.forEach((item: string) => {
+    appointmentTimeOptions.value?.push({ value: item, label: item })
+  })
+  //省市区下拉框列表数据
+  // provincesAndCitiesAndAutonomousOptions.value = provincesAndCitiesAndAutonomousRegions
+  provincesAndCitiesAndAutonomousOptions.value = window.globalProvincesAndCitiesAndAutonomousRegions
+})
+
+//动态生成只读/禁用样式
+const isDisabled = ref(false)
+const isReadOnly = ref(false)
+
+const dynamicClass = computed(() => ({
+  'custom-disabled-style': isDisabled.value,
+  'custom-readonly-style': isReadOnly.value
+}))
+const reservationTimeisReadOnly = ref(false)
+const reservationTimeClass = computed(() => ({
+  'custom-readonly-style': reservationTimeisReadOnly.value
+}))
+
+const formRef = ref<FormInstance>()
+
+//省市区下拉框列表数据
+const provincesAndCitiesAndAutonomousOptions: any = ref([])
+//省市区change
+const addressChange = (value: any) => {
+  if (value) {
+    formModel.economize = value[0]
+    formModel.market = value[1]
+    formModel.distinguish = value[2]
+  }
+}
+
+//区域半径下拉框列表数据(不需要改变的数据不要绑定ref)
+const radiusOptions = ref<SelectProps['options']>([
+  {
+    id: '3000',
+    name: '3km'
+  },
+  {
+    id: '5000',
+    name: '5km'
+  },
+  {
+    id: '10000',
+    name: '10km'
+  }
+])
+//区域半径change
+const radiusChange = (value: SelectValue) => {
+  formModel.radius = value
+}
+
+//根据地址搜索出来的门店数据
+const listData: any = ref([])
+
+//预约时间下拉框列表数据
+const appointmentTimeOptions = ref<any>([])
+const time_array = [
+  '0:00~0:30',
+  '0:30~1:00',
+  '1:00~1:30',
+  '1:30~2:00',
+  '2:00~2:30',
+  '2:30~3:00',
+  '3:00~3:30',
+  '3:30~4:00',
+  '4:00~4:30',
+  '4:30~5:00',
+  '5:00~5:30',
+  '5:30~6:00',
+  '6:00~6:30',
+  '6:30~7:00',
+  '7:00~7:30',
+  '7:30~8:00',
+  '8:00~8:30',
+  '8:30~9:00',
+  '9:00~9:30',
+  '9:30~10:00',
+  '10:00~10:30',
+  '10:30~11:00',
+  '11:00~11:30',
+  '11:30~12:00',
+  '12:00~12:30',
+  '12:30~13:00',
+  '13:00~13:30',
+  '13:30~14:00',
+  '14:00~14:30',
+  '14:30~15:00',
+  '15:00~15:30',
+  '15:30~16:00',
+  '16:00~16:30',
+  '16:30~17:00',
+  '17:00~17:30',
+  '17:30~18:00',
+  '18:00~18:30',
+  '18:30~19:00',
+  '19:00~19:30',
+  '19:30~20:00',
+  '20:00~20:30',
+  '20:30~21:00',
+  '21:00~21:30',
+  '21:30~22:00',
+  '22:00~22:30',
+  '22:30~23:00',
+  '23:00~23:30',
+  '23:30~0:00'
+]
+// 营业开始时间
+// const tradeStartTime = ref('')
+// 营业结束时间
+// const tradeEndTime = ref('')
+// const selectedStoreId: any = ref('')
+function generateTimeSlots(tradeStartTime: string, tradeEndTime: string) {
+  const startHour = Number(tradeStartTime.split(':')[0])
+  const startMinute = Number(tradeStartTime.split(':')[1])
+  const endHour = Number(tradeEndTime.split(':')[0])
+  const endMinute = Number(tradeEndTime.split(':')[1])
+
+  const timeSlots = []
+  for (let hour = startHour; hour < endHour; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      if (hour === startHour && minute < startMinute) {
+        continue
+      }
+
+      const startTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+      const endTime = `${(hour + Math.floor(minute / 30)).toString().padStart(2, '0')}:${(
+        (minute + 30) %
+        60
+      )
+        .toString()
+        .padStart(2, '0')}`
+      const timeSlot = `${startTime}~${endTime}`
+      timeSlots.push(timeSlot)
+    }
+  }
+  console.log(timeSlots, 'timeSlots')
+  return timeSlots
+}
+
+//经纬度
+const lng = ref<number | undefined>()
+const lat = ref<number | undefined>()
+//圆形覆盖物
+const circle = ref()
+//标记物数组
+const pois: any = reactive([])
+//信息窗体
+const infoWindows = ref<any>({})
+//上一次点击的标记物id
+let previousId: any = null
+//匹配查询
+const pagingQuery = () => {
+  if (circle.value) {
+    map.value.remove(circle.value)
+  }
+  const color = '#DFEBF3'
+  // 创建圆形覆盖物
+  circle.value = new AMap.Circle({
+    center: [lng.value, lat.value], // 圆心坐标
+    radius: formModel.radius, // 半径，单位为米
+    fillColor: color, // 填充颜色
+    strokeColor: '#a1ceeb', // 边框颜色
+    strokeWeight: 1 // 边框宽度
+  })
+  // 将圆形覆盖物添加到地图
+  map.value.add(circle.value)
+
+  doRequest(
+    getStoreData({ longitude: lng.value, latitude: lat.value, distance: formModel.radius }),
+    {
+      onSuccess: (result: any) => {
+        if (result.code === 200) {
+          if (result.data.length === 0) {
+            message.info('当前位置附近暂无相关门店')
+          } else {
+            const ids = formModel.customStoreEntities.map(item => item.storeId)
+            listData.value.length = 0
+            result.data &&
+              result.data.forEach((item: any) => {
+                const disabled = ids.includes(Number(item.id))
+
+                // item.timeSlots = generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
+                // console.log(
+                //   generateTimeSlots(item.tradeStartTime, item.tradeEndTime),
+                //   'item.timeSlots'
+                // )
+                // item.timeSlots.forEach((i: string) => {
+                //   // console.log(i, 'i')
+                //   item.appointmentTimeOptions.push({ value: i, label: i })
+                // })
+                console.log(
+                  generateTimeSlots(item.tradeStartTime, item.tradeEndTime),
+                  'generateTimeSlots(item.tradeStartTime, item.tradeEndTime)'
+                )
+                listData.value.push({
+                  title: item.storeName,
+                  description: item.address,
+                  content: item.nid ? item.nid : '',
+                  disabled: disabled,
+                  lat: item.latitude,
+                  lng: item.longitude,
+                  id: item.id,
+                  index: item.index,
+                  tel: item.nid ? item.nid : '',
+                  reservationDate: item.reservationDate,
+                  option: generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
+                })
+              })
+            pois.push(...listData.value)
+            // 设置缩放级别,设置地图视图级别为
+            const targetZoom = 10
+
+            //回调函数
+            const placeSearch_CallBack = (data: any) => {
+              const poiArr = data
+              infoWindows.value = new AMap.InfoWindow({
+                autoMove: true,
+                isCustom: true,
+                offset: { x: 0, y: -30 } // 信息窗体的偏移量
+              })
+              //添加marker
+              const markers = new AMap.Marker({
+                map: map.value,
+                position: [poiArr.lng, poiArr.lat],
+                // clickable: true,//表示某个元素可以接收用户点击事件,默认值为true
+                // offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置
+                zIndex: 0, // 设置标记点的层级为 1000
+                extData: {
+                  id: `${poiArr.id}`
+                  // 其他属性...
+                }
+              })
+              markers.on('click', function (data: any) {
+                const currentId = data.target.getExtData().id
+
+                if (
+                  infoWindows.value.getIsOpen() &&
+                  (currentId === previousId || currentId === currentStoreId.value)
+                ) {
+                  // 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同
+                  currentStoreId.value = currentId
+                  previousId = currentId
+                  return false
+                }
+
+                infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置
+                map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示
+                map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置
+                infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中
+
+                // 更新上一次点击的标记物ID
+                currentStoreId.value = currentId
+                previousId = currentId
+              })
+            }
+            for (let i = 0; i < pois.length; i++) {
+              placeSearch_CallBack(pois[i])
+            }
+          }
+        }
+      }
+    }
+  )
+}
+//匹配
+const match = () => {
+  const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
+  formRef.value
+    ?.validateFields(fields)
+    .then(() => {
+      pois.length = 0
+      listData.value = []
+      lng.value = undefined
+      lat.value = undefined
+      map.value.clearMap()
+      AMap.plugin('AMap.Geocoder', function () {
+        geocoder.value = new AMap.Geocoder({
+          city: '杭州' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+        })
+      })
+      const addressValue =
+        formModel.address?.toString().split(',').join('') + formModel.detailAddress
+      geocoder.value.getLocation(addressValue, function (status: any, result: any) {
+        if (status === 'complete' && result.info === 'OK') {
+          // result中对应详细地理坐标信息
+          lng.value = result.geocodes[0].location.lng
+          lat.value = result.geocodes[0].location.lat
+        }
+        pagingQuery()
+      })
+    })
+    .catch(() => {
+      // 校验失败
+      console.log('校验失败')
+    })
+}
+//重置
+const resetForm = () => {
+  formModel.address = []
+  formModel.detailAddress = ''
+  formModel.radius = ''
+  // initMap()
+  listData.value.length = 0
+  map.value.clearMap()
+}
+//提示文字样式
+const tooltipStyle = {
+  fontSize: '12px',
+  borderRadius: '4px'
+}
+//添加
+const addStore = (item: any) => {
+  item.disabled = true
+  formModel.customStoreEntities.push({
+    storeName: item.title,
+    reservationTime: '',
+    storeId: item.id,
+    reservationDate: ''
+  })
+}
+//门店重置
+const storeResetForm = () => {
+  formModel.customName = ''
+  formModel.customNid = ''
+  if (title.value !== '编辑预约') {
+    formModel.address = []
+    formModel.detailAddress = ''
+    formModel.radius = ''
+    formModel.customStoreEntities.length = 0
+  }
+
+  listData.value.length = 0
+  // 清除地图上的所有标记物
+  map.value.clearMap()
+}
+//控制报名信息确认弹窗显隐
+const registerVisible = ref<boolean>(false)
+//报名
+const showModal = () => {
+  formRef.value
+    ?.validate()
+    .then(() => {
+      if (formModel.customStoreEntities.length === 0) {
+        message.info('请先添加预约门店')
+      } else {
+        registerVisible.value = true
+      }
+    })
+    .catch(err => {
+      console.log('校验失败err', err)
+    })
+}
+interface customStoreEntitiesItem {
+  //门店id
+  customStoreId?: number
+  //预约id
+  storeId: number
+  //门店名称
+  storeName?: string
+  //预约日期
+  reservationDate?: Dayjs | string
+  //预约时间
+  reservationTime: string
+}
+//是否发送请求了,发送了就要就行表格刷新
+const isSubmit = ref(false)
+//提交请求操作
+const submitOperate = (status?: number) => {
+  //移除address属性
+  const filteredObj = Object.fromEntries(
+    Object.entries(formModel).filter(([key]) => key !== 'address')
+  ) as CustomerDTO
+  //移除customStoreEntities中的storeName属性
+  filteredObj.customStoreEntities = filteredObj.customStoreEntities.map(
+    (item: customStoreEntitiesItem) => {
+      const obj: customStoreEntitiesItem = {
+        storeId: item.storeId,
+        reservationTime: item.reservationTime,
+        reservationDate: item.reservationDate
+      }
+      if (title.value === '编辑预约') {
+        if (item.customStoreId) {
+          obj.customStoreId = item.customStoreId
+        }
+      }
+      return obj
+    }
+  )
+  const handleSuccess = (res: any) => {
+    if (res.code === 200) {
+      isSubmit.value = true
+      registerVisible.value = false
+      handleSubmit()
+      message.success('操作成功')
+      // if (type === 'zc' || title.value === '审核') {
+
+      // }
+    }
+  }
+
+  if (title.value === '新建预约' || title.value === '编辑预约') {
+    const requestFn = title.value === '新建预约' ? addCustomer : updateCustomer
+    doRequest(requestFn(filteredObj), {
+      onSuccess: handleSuccess
+    })
+  } else if (title.value === '审核') {
+    doRequest(auditCustomer({ customId: formModel.customId, status: status }), {
+      onSuccess: handleSuccess
+    })
+  }
+}
+//报名信息确认弹窗确定点击事件
+const handleOk = async () => {
+  if (title.value === '审核') {
+    //重审
+    await submitOperate(1)
+  } else {
+    //报名
+    await submitOperate()
+  }
+}
+//暂存
+const temporaryStorage = async () => {
+  formRef.value
+    ?.validate()
+    .then(() => {
+      if (formModel.customStoreEntities.length === 0) {
+        message.info('请先添加预约门店')
+      } else {
+        formModel.enrollStatus = 0
+        submitOperate()
+        // handleSubmit()
+      }
+    })
+    .catch(err => {
+      console.log('校验失败err', err)
+    })
+}
+
+//重审
+const retrial = () => {
+  submitOperate(0)
+}
+//分发
+const distribute = () => {
+  registerVisible.value = true
+}
+
+const emits = defineEmits<{
+  (e: 'submit-success', resetPageIndex?: boolean): void
+}>()
+
+const { title, visible, openModal, closeModal } = useModal()
+
+const { formAction } = useFormAction()
+// 表单模型
+const formModel = reactive<CustomerDTO>({
+  customId: undefined,
+  customName: '',
+  customNid: '',
+  remark: '',
+  address: [],
+  economize: '',
+  market: '',
+  distinguish: '',
+  detailAddress: '',
+  radius: '5000',
+  enrollStatus: 1,
+  customStoreEntities: []
+})
+
+const formRule = ref<any>({
+  customName: [{ required: true, message: '请输入称呼', trigger: ['blur', 'change'] }],
+  customNid: [
+    {
+      required: true,
+      message: '请输入正确的手机号码',
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      trigger: ['blur', 'change']
+    }
+  ],
+  address: [{ required: true, message: '请选择地址信息', trigger: ['blur', 'change'] }],
+  detailAddress: [{ required: true, message: '请输入小区名称', trigger: 'change' }],
+  radius: [{ required: true, message: '请选择区域半径', trigger: 'change' }]
+})
+
+// 表单的提交请求
+const formRequestMapping: FormRequestMapping<CustomerDTO> = {
+  [FormAction.CREATE]: addCustomer,
+  [FormAction.UPDATE]: auditCustomer
+}
+
+// 获取 useAdminForm 的返回值
+const adminForm = useAdminForm(formAction, formRequestMapping, formModel, formRule)
+
+// 使用 toRefs 创建响应式解构副本
+const { submitLoading, validateAndSubmit, resetFields, validateInfos } = toRefs(adminForm)
+
+//表单提交处理
+const handleSubmit = () => {
+  handleClose()
+  emits('submit-success')
+}
+
+//弹窗关闭方法
+const handleClose = () => {
+  isReadOnly.value = isDisabled.value = reservationTimeisReadOnly.value = false
+  if (isSubmit.value) {
+    emits('submit-success')
+  }
+  closeModal()
+  formRule.value = {
+    customName: [{ required: true, message: '请输入称呼' }],
+    customNid: [
+      { required: true, message: '请输入正确的手机号码', pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ }
+    ]
+  }
+  listData.value.length = 0
+  formRef.value?.resetFields()
+  // resetFields.value()
+  delete formModel.description
+  submitLoading.value = false
+}
+
+interface openObj {
+  newFormAction: FormAction
+  type?: string
+  record?: GeopoliticalCustomersRecord
+}
+
+defineExpose({
+  open(opendata: openObj) {
+    isSubmit.value = false
+    openModal()
+    resetFields.value()
+
+    const handleSuccess = (res: any) => {
+      const data = res.data || {}
+      const {
+        customId,
+        customName,
+        customNid,
+        remark,
+        economize,
+        market,
+        distinguish,
+        detailAddress,
+        radius,
+        customStoreVOList
+      } = data
+
+      formModel.customId = customId
+      formModel.customName = customName
+      formModel.customNid = customNid
+      formModel.remark = remark
+      formModel.address = [economize, market, distinguish]
+      formModel.economize = economize
+      formModel.market = market
+      formModel.distinguish = distinguish
+      formModel.detailAddress = detailAddress
+      formModel.radius = radius
+      formModel.customStoreEntities.push(...customStoreVOList)
+    }
+
+    const handleMapInit = () => {
+      nextTick(() => {
+        initMap()
+      })
+    }
+
+    if (opendata.newFormAction === FormAction.CREATE) {
+      handleMapInit()
+      title.value = '新建预约'
+      formModel.customStoreEntities.length = 0
+    } else if (opendata.newFormAction === FormAction.UPDATE) {
+      doRequest(getDetail({ id: opendata.record?.customId }), {
+        onSuccess: handleSuccess
+      })
+      if (opendata.type === 'view') {
+        isReadOnly.value = true
+        reservationTimeisReadOnly.value = true
+        title.value = '详情'
+      } else if (opendata.type === 'audit') {
+        isReadOnly.value = true
+        reservationTimeisReadOnly.value = true
+        handleMapInit()
+        title.value = '审核'
+        formModel.description = 1
+      } else {
+        isDisabled.value = true
+        handleMapInit()
+        title.value = '编辑预约'
+      }
+    }
+    formAction.value = opendata.newFormAction
+  }
+})
+
+//地图
+// import { provincesAndCitiesAndAutonomousRegions } from '@/utils/geopolitical-customers'
+import type { ShowSearchType } from 'ant-design-vue/es/cascader'
+import console from 'console'
+
+declare const AMap: any
+
+const filter: ShowSearchType['filter'] = (inputValue, path) => {
+  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
+}
+
+//输入提示插件AMap.Autocomplete
+const autoComplete = ref()
+//POI搜索插件AMap.PlaceSearch
+// const placeSearch = ref()
+//点标记AMap.Marker
+//创建的一个 Marker 实例
+const marker = ref<any>({})
+//创建地图AMap.Map
+const map = ref<any>({})
+//使用geocoder做地理/逆地理编码
+//正向地理编码： 将地址 描述信息 转换成 地理坐标（经纬度），对应为AMap.Geocoder的getLocation方法
+//逆向地理编码：将 地理坐标（经纬度） 转换成 地址描述信息，对应为AMap.Geocoder的getAddress方法
+const geocoder = ref<any>({})
+
+//创建地图
+
+const initMap = () => {
+  map.value = new AMap.Map('draw-station-container', {
+    center: [120.1551, 30.2741], // 地图中心点经纬度
+    zoom: 10 // 缩放级别
+  })
+
+  // marker.value = new AMap.Marker({
+  //   position: [116.397428, 39.90923] // 标记位置经纬度
+  // })
+  // const geolocation = new AMap.Geolocation({
+  //   enableHighAccuracy: true, // 是否使用高精度定位，默认为false
+  //   timeout: 10000, // 超时时间，单位毫秒，默认为无穷大
+  //   maximumAge: 0, // 设置缓存时间，单位毫秒，默认为0
+  //   showCircle: false, // 是否显示定位精度圈，默认为true
+  //   showMarker: false, // 是否显示定位图标，默认为true
+  //   zoomToAccuracy: true // 定位成功后是否自动调整地图视野以适配定位精度范围，默认为true
+  // })
+  // geolocation.getCurrentPosition(function (status: any, result: any) {
+  //   if (status === 'complete') {
+  //     const position = result.position // 获取经纬度信息
+  //   } else {
+  //     console.log('定位失败：', result.message)
+  //   }
+  // })
+
+  AMap.plugin('AMap.AutoComplete', function () {
+    // 实例化Autocomplete
+    const autoOptions = {
+      //city 限定城市，默认全国
+      input: 'tipinput'
+    }
+
+    autoComplete.value = new AMap.AutoComplete(autoOptions)
+    // geocoder.value = new AMap.Geocoder({
+    //   city: '010' //城市设为北京，默认：“全国”
+    // })
+  })
+
+  // map.value.add(marker.value)
+}
+// 创建自定义气泡卡片
+const createContent = (poi: any) => {
+  //信息窗体内容
+  const parentBox = document.createElement('div')
+  parentBox.className = 'amap-content-body'
+  Object.assign(parentBox.style, {
+    marginTop: '-4px',
+    minWidth: '200px',
+    maxWidth: '240px',
+    fontFamily: 'Helvetica, Hiragino Sans GB, Microsoft Yahei, 微软雅黑, Arial, sans-serif',
+    boxShadow: '0 0 0.5px rgba(0, 0, 100, .6)',
+    background: 'none repeat scroll 0 0 #fff',
+    borderRadius: '2px',
+    textAlign: 'left',
+    border: '1px solid silver'
+  })
+  const childBox = document.createElement('div')
+  childBox.className = 'amap-lib-infowindow'
+  Object.assign(childBox.style, {
+    padding: '0',
+    position: 'relative',
+    backgroundColor: '#fff',
+    margin: '6.855px 8px 0px 8px'
+  })
+  parentBox.appendChild(childBox)
+  const titleBox = document.createElement('div')
+  titleBox.className = 'amap-lib-infowindow-title'
+  Object.assign(titleBox.style, {
+    lineHeight: '22px',
+    fontSize: '14px',
+    marginBottom: '1px',
+    borderBottom: '1px solid #99adce',
+    paddingRight: '15px'
+  })
+  titleBox.innerHTML = `${poi.index + 1}.${poi.title}`
+  childBox.appendChild(titleBox)
+  const contentBox = document.createElement('div')
+  contentBox.className = 'amap-lib-infowindow-content'
+  Object.assign(contentBox.style, {
+    paddingTop: '5px',
+    overflow: 'hidden',
+    fontSize: '12px'
+  })
+  childBox.appendChild(contentBox)
+  const contentWrapBox = document.createElement('div')
+  contentWrapBox.className = 'amap-lib-infowindow-content-wrap'
+  Object.assign(contentWrapBox.style, {
+    wordBreak: 'break-all',
+    overflow: 'hidden'
+  })
+  contentBox.appendChild(contentWrapBox)
+  const createDivBox = (text: string) => {
+    const divBox = document.createElement('div')
+    Object.assign(divBox.style, {
+      fontSize: '12px',
+      boxSizing: 'border-box',
+      display: 'block',
+      wordBreak: 'break-all'
+    })
+    divBox.textContent = text
+    contentWrapBox.appendChild(divBox)
+  }
+
+  createDivBox(`地址：${poi.description}`)
+  if (poi.tel) {
+    createDivBox(`电话：${poi.tel}`)
+  }
+  const closeBox = document.createElement('div')
+  closeBox.className = 'amap-combo-close'
+  Object.assign(closeBox.style, {
+    position: 'absolute',
+    top: '2px',
+    right: '1px',
+    background: 'url(http://webapi.amap.com/theme/v1.3/images/amap-info.png) no-repeat -1px -151px',
+    width: '12px',
+    height: '12px',
+    cursor: 'pointer'
+  })
+  childBox.appendChild(closeBox)
+  closeBox.addEventListener('click', function () {
+    infoWindows.value.close()
+  })
+  const triangleBox = document.createElement('div')
+  triangleBox.className = 'amap-combo-sharp'
+  Object.assign(triangleBox.style, {
+    margin: '0 auto',
+    bottom: '-8px',
+    position: 'relative',
+    background: 'url(http://webapi.amap.com/theme/v1.3/images/amap-info.png) no-repeat -5px -564px',
+    width: '18px',
+    height: '8.15px'
+  })
+  childBox.appendChild(triangleBox)
+  return parentBox
+}
+const currentStoreId = ref<number | null>()
+//门店点击定位
+const storeItemClick = (item: any, index: number) => {
+  previousId = null
+  currentStoreId.value = item.id
+  map.value.remove(marker.value)
+  infoWindows.value = new AMap.InfoWindow({
+    autoMove: true,
+    isCustom: true,
+    offset: { x: 0, y: -30 }
+  })
+  // 创建标记点
+  marker.value = new AMap.Marker({
+    // map: map.value,
+    position: [item.lng, item.lat],
+    clickable: true,
+    // content: content,
+    offset: new AMap.Pixel(-90, -60), // 设置偏移量以调整卡片位置
+    zIndex: 1000 // 设置标记点的层级为 1000
+  })
+
+  infoWindows.value.setContent(
+    createContent({
+      title: item.title,
+      description: item.description,
+      index: index,
+      tel: item.tel
+    })
+  )
+
+  // 添加标记点到地图上
+  // map.value.add(marker.value)
+  // 设置定位点和缩放级别
+  const targetPosition = [item.lng, item.lat]
+  const targetZoom = 10 //设置地图视图级别为
+
+  infoWindows.value.open(map.value, targetPosition)
+  // 定义定位函数
+  map.value.setZoomAndCenter(targetZoom, targetPosition)
+}
+</script>
+<style lang="less" scoped>
+//必填校验置灰移除
+// ::v-deep .ant-form-item-explain-success {
+//   display: none !important;
+// }
+
+//请输入区域半径
+.radius {
+  ::v-deep .ant-form-item-control-input-content {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+//动态只读/禁用(请输入您的地址信息/请输入区域半径)
+.custom-disabled-style ::v-deep .ant-select-selector {
+  /* 自定义禁用状态下的样式 */
+  background-color: #f5f5f5;
+  color: #ccc;
+}
+
+.custom-readonly-style ::v-deep .ant-select-selector {
+  /* 自定义只读状态下的样式 */
+  border-color: #ddd;
+  background-color: #fff;
+  pointer-events: none;
+
+  background: #fff;
+  cursor: not-allowed;
+  cursor: context-menu;
+  color: black;
+  // color: rgba(0, 0, 0, 0.25);
+}
+//动态只读/禁用(预约时间)
+::v-deep .ant-picker.ant-picker-disabled {
+  background-color: #fff;
+  pointer-events: none;
+}
+::v-deep .ant-space-item {
+  cursor: pointer;
+}
+::v-deep .ant-picker-input > input[disabled] {
+  color: rgba(0, 0, 0, 0.85);
+}
+.custom-readonly-style ::v-deep .ant-picker {
+  /* 自定义只读状态下的样式 */
+  border-color: #ddd;
+  background-color: #fff;
+  pointer-events: none;
+  background: #fff;
+  cursor: not-allowed;
+  cursor: context-menu;
+  color: rgba(0, 0, 0, 0.25);
+}
+//日期选择器
+::v-deep .ant-picker,
+.ant-space {
+  width: 100%;
+}
+
+//地图
+.drawStation {
+  //地图
+  #draw-station-container {
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    min-height: 400px;
+    max-height: 800px;
+    // height: calc(100vh - 184px);
+  }
+  //地图展示容器
+  #aa {
+    padding: 0px;
+    margin: 0px;
+    // width: 100%;
+    // height: calc(100% - 20px);
+    // min-height: 100px;
+    max-height: calc(100% - 20px);
+    // max-height: 800px;
+    // height: calc(100vh - 214px);
+  }
+}
+//地图展示容器item
+::v-deep .ant-list-item {
+  //width: 330px;
+  padding: 8px 0;
+  width: 165px;
+  padding-right: 3px;
+}
+
+//添加按钮区域
+::v-deep .ant-list-item-action {
+  margin-left: 5px;
+}
+//添加按钮
+.ant-btn-sm {
+  font-size: 12px;
+  height: 20px;
+  padding: 0px 3px;
+}
+
+//地图的最大宽度
+::v-deep .ant-col-md-19 {
+  max-width: 100%;
+}
+//预约时间
+::v-deep .ant-space-item {
+  width: 100% !important;
+}
+</style>
diff --git a/src/views/geopoliticalCustomers/geopoliticalCustomersModal.vue b/src/views/geopoliticalCustomers/geopoliticalCustomersModal.vue
index 94c21a9..7ed91bb 100644
--- a/src/views/geopoliticalCustomers/geopoliticalCustomersModal.vue
+++ b/src/views/geopoliticalCustomers/geopoliticalCustomersModal.vue
@@ -322,7 +322,7 @@
                 ref="select"
                 v-model:value="item.reservationTime"
                 :allow-clear="title === '新建预约' || title === '编辑预约'"
-                :options="appointmentTimeOptions"
+                :options="item.option"
                 :class="reservationTimeClass"
                 :style="{ width: title === '详情' || title === '审核' ? '103%' : '100%' }"
               >
@@ -457,7 +457,7 @@ const radiusChange = (value: SelectValue) => {
 const listData: any = ref([])
 
 //预约时间下拉框列表数据
-const appointmentTimeOptions = ref<SelectProps['options']>([])
+const appointmentTimeOptions = ref<any>([])
 const time_array = [
   '0:00~0:30',
   '0:30~1:00',
@@ -509,6 +509,37 @@ const time_array = [
   '23:30~0:00'
 ]
 
+const generateTimeSlots = (tradeStartTime: string, tradeEndTime: string) => {
+  const startHour = Number(tradeStartTime.split(':')[0])
+  const startMinute = Number(tradeStartTime.split(':')[1])
+  const endHour = Number(tradeEndTime.split(':')[0])
+  const endMinute = Number(tradeEndTime.split(':')[1])
+
+  const timeSlots = []
+  for (let hour = startHour; hour < endHour; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      if (hour === startHour && minute < startMinute) {
+        continue
+      }
+
+      const startTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+      const endTime = `${(hour + Math.floor(minute / 30)).toString().padStart(2, '0')}:${(
+        (minute + 30) %
+        60
+      )
+        .toString()
+        .padStart(2, '0')}`
+      const timeSlot = {
+        label: `${startTime}~${endTime}`,
+        value: `${startTime}~${endTime}`
+      }
+      timeSlots.push(timeSlot)
+    }
+  }
+
+  return timeSlots
+}
+
 //经纬度
 const lng = ref<number | undefined>()
 const lat = ref<number | undefined>()
@@ -550,6 +581,16 @@ const pagingQuery = () => {
             result.data &&
               result.data.forEach((item: any) => {
                 const disabled = ids.includes(Number(item.id))
+                // console.log(
+                //   generateTimeSlots(item.tradeStartTime, item.tradeEndTime),
+                //   'generateTimeSlots(item.tradeStartTime, item.tradeEndTime)'
+                // )
+                // generateTimeSlots(item.tradeStartTime, item.tradeEndTime).forEach((i: string) => {
+                //   generateTimeSlots(item.tradeStartTime, item.tradeEndTime).push({
+                //     value: i,
+                //     label: i
+                //   })
+                // })
                 listData.value.push({
                   title: item.storeName,
                   description: item.address,
@@ -560,8 +601,10 @@ const pagingQuery = () => {
                   id: item.id,
                   index: item.index,
                   tel: item.nid ? item.nid : '',
-                  reservationDate: item.reservationDate
+                  reservationDate: item.reservationDate,
+                  option: generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
                 })
+                console.log(listData.value, 'listData.value')
               })
             pois.push(...listData.value)
             // 设置缩放级别,设置地图视图级别为
@@ -672,7 +715,8 @@ const addStore = (item: any) => {
     storeName: item.title,
     reservationTime: '',
     storeId: item.id,
-    reservationDate: ''
+    reservationDate: '',
+    option: item.option
   })
 }
 //门店重置
diff --git a/vite.config.ts b/vite.config.ts
index c42433a..52fd77b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,11 +24,11 @@ import { antdvStyleDeps } from './src/utils/resolvers'
 //xy
 // const serverAddress = 'http://172.18.0.225:8000'
 //jt
-// const serverAddress = 'http://172.18.1.8:8000'
+const serverAddress = 'http://172.18.1.8:8000'
 //ts
 // const serverAddress = 'http://172.18.0.228:8000'
 //测试
-const serverAddress = 'http://39.100.77.21:8000'
+// const serverAddress = 'http://39.100.77.21:8000'
 
 //线上ip
 // const serverAddress = 'http://175.27.212.74:80'