feat:自提点

src/components/BusinessHours/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="business-hours-container">
+    <div class="business-hours-header">
+      <span class="title">营业时间设置</span>
+      <el-button type="primary" size="small" @click="addBusinessHour" :icon="Plus">
+        添加时间段
+      </el-button>
+    </div>
+
+    <div class="business-hours-list">
+      <div v-for="(item, index) in businessHours" :key="item.id" class="business-hour-item">
+        <div class="item-header">
+          <span class="item-index">{{ index + 1 }}</span>
+          <el-button type="danger" size="small" :icon="Delete" circle @click="removeBusinessHour(index)"
+            :disabled="businessHours.length <= 1" />
+        </div>
+
+        <div class="item-content">
+          <el-row :gutter="16">
+            <el-col :span="24" class="mb16">
+              <el-form-item :label="`时间段${index + 1}标题`" :prop="`businessHours.${index}.title`">
+                <el-input v-model="item.title" placeholder="请输入时间段标题(如:工作日、周末、上午、下午等)" @input="handleChange" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12" class="mb16">
+              <el-form-item :label="`开始时间`" :prop="`businessHours.${index}.startTime`">
+                <el-time-picker v-model="item.startTime" placeholder="选择开始时间" format="HH:mm" value-format="HH:mm"
+                  @change="handleChange" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12" class="mb16">
+              <el-form-item :label="`结束时间`" :prop="`businessHours.${index}.endTime`">
+                <el-time-picker v-model="item.endTime" placeholder="选择结束时间" format="HH:mm" value-format="HH:mm"
+                  @change="handleChange" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="businessHours.length === 0" class="empty-state">
+      <el-empty description="暂无营业时间，请点击上方按钮添加" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="BusinessHours">
+import { Plus, Delete } from '@element-plus/icons-vue'
+
+// 定义接口
+interface BusinessHour {
+  id: string
+  title: string
+  startTime: string
+  endTime: string
+}
+
+// 定义props
+interface Props {
+  modelValue?: BusinessHour[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => []
+})
+
+// 定义emits
+const emit = defineEmits<{
+  'update:modelValue': [value: BusinessHour[]]
+  'change': [value: BusinessHour[]]
+}>()
+
+// 响应式数据
+const businessHours = ref<BusinessHour[]>([])
+
+// 生成唯一ID
+const generateId = () => {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}
+
+// 创建默认营业时间项
+const createDefaultBusinessHour = (): BusinessHour => ({
+  id: generateId(),
+  title: '',
+  startTime: '09:00',
+  endTime: '18:00'
+})
+
+// 初始化数据
+const initData = () => {
+  if (props.modelValue && props.modelValue.length > 0) {
+    businessHours.value = props.modelValue.map(item => ({
+      ...item,
+      id: item.id || generateId()
+    }))
+  } else {
+    businessHours.value = [createDefaultBusinessHour()]
+  }
+}
+
+// 添加营业时间
+const addBusinessHour = () => {
+  businessHours.value.push(createDefaultBusinessHour())
+  handleChange()
+}
+
+// 删除营业时间
+const removeBusinessHour = (index: number) => {
+  if (businessHours.value.length > 1) {
+    businessHours.value.splice(index, 1)
+    handleChange()
+  }
+}
+
+// 时间转换为分钟
+const timeToMinutes = (time: string): number => {
+  const [hours, minutes] = time.split(':').map(Number)
+  return hours * 60 + minutes
+}
+
+// 处理数据变化
+const handleChange = () => {
+  const validBusinessHours = businessHours.value.filter(item =>
+    item.startTime && item.endTime
+  )
+  emit('update:modelValue', [...businessHours.value])
+  emit('change', validBusinessHours)
+}
+
+// 监听props变化
+watch(() => props.modelValue, (newValue) => {
+  if (JSON.stringify(newValue) !== JSON.stringify(businessHours.value)) {
+    initData()
+    handleChange()
+  }
+}, { deep: true })
+
+// 组件挂载时初始化
+onMounted(() => {
+  initData()
+  handleChange()
+})
+
+// 暴露验证方法
+const validate = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    let isValid = true
+
+    for (let i = 0; i < businessHours.value.length; i++) {
+      const item = businessHours.value[i]
+
+      if (!item.title || !item.startTime || !item.endTime) {
+        isValid = false
+        break
+      }
+
+      const startMinutes = timeToMinutes(item.startTime)
+      const endMinutes = timeToMinutes(item.endTime)
+
+      if (endMinutes <= startMinutes) {
+        isValid = false
+        break
+      }
+    }
+
+    resolve(isValid)
+  })
+}
+
+defineExpose({
+  validate
+})
+</script>
+
+<style scoped lang="scss">
+.business-hours-container {
+  .business-hours-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  .business-hours-list {
+    .business-hour-item {
+      border: 1px solid #e4e7ed;
+      border-radius: 6px;
+      padding: 16px;
+      margin-bottom: 16px;
+      background-color: #fafafa;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .item-index {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          background-color: #409eff;
+          color: white;
+          border-radius: 50%;
+          font-size: 12px;
+          font-weight: 500;
+        }
+      }
+
+      .item-content {
+        .mb16 {
+          margin-bottom: 16px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 40px 0;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 13px;
+  color: #606266;
+}
+</style>

src/components/map/map-dialog.vue

@@ -2,67 +2,39 @@
     <el-dialog v-model="state.visibleMapDialog" title="地图位置选择器" width="80%" :before-close="handleClose"
         class="map-picker-dialog">
         <div class="map-picker-container">
-            <!-- 搜索栏 -->
-            <div class="search-bar">
-                <el-input v-model="state.searchKeyword" placeholder="请输入地址或POI名称进行搜索" class="search-input"
-                    @keyup.enter="handleSearch">
-                    <template #append>
-                        <el-button @click="handleSearch" :loading="state.searching">
-                            <el-icon>
-                                <Search />
-                            </el-icon>
-                        </el-button>
-                    </template>
-                </el-input>
-            </div>
-
             <!-- 地图容器 -->
             <div class="map-container">
-                <tmap-map ref="mapRef" style="width: 100%; height: 500px;" mapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA"
-                    :center="map.center" :zoom="map.zoom" :doubleClickZoom="map.doubleClickZoom"
-                    @click="handleMapClick">
+                <tmap-map ref="mapRef" style="width: 100%; height: 500px; cursor: pointer;"
+                    mapKey="CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA" :center="map.center" :zoom="map.zoom"
+                    :doubleClickZoom="map.doubleClickZoom" :events="{
+                        click: handleMapClick,
+                        mousemove: handleMapMouseMove,
+                        mouseleave: handleMapMouseLeave,
+                    }">
                     <!-- 标记点 -->
                     <tmap-marker v-if="state.selectedLocation" :position="state.selectedLocation" :draggable="true"
-                        @dragend="handleMarkerDragEnd" />
+                        @dragend="handleMarkerDragEnd">
+                        <template #default>
+                            <div class="custom-marker">
+                                <div class="marker-icon">
+                                    <i class="el-icon-location-outline"></i>
+                                    手动发送发送到发送方
+                                </div>
+                                <div class="marker-shadow"></div>
+                            </div>
+                        </template>
+                    </tmap-marker>
                 </tmap-map>
 
-                <!-- 地图中心十字标 -->
-                <div class="map-crosshair">
-                    <div class="crosshair-horizontal"></div>
-                    <div class="crosshair-vertical"></div>
-                </div>
-            </div>
-
-            <!-- 信息面板 -->
-            <div class="info-panel">
-                <div class="location-info">
-                    <div class="info-row">
-                        <span class="label">选中地址：</span>
-                        <span class="value">{{ state.selectedAddress || '请在地图上点击选择位置' }}</span>
-                    </div>
-                    <div class="info-row">
-                        <span class="label">经纬度：</span>
-                        <span class="value">
-                            {{ state.selectedLocation ? `${state.selectedLocation.lng}, ${state.selectedLocation.lat}` :
-                                '未选择' }}
-                        </span>
-                    </div>
-                </div>
-
-                <!-- 搜索结果列表 -->
-                <div v-if="state.searchResults.length > 0" class="search-results">
-                    <div class="results-title">搜索结果</div>
-                    <div class="results-list">
-                        <div v-for="(item, index) in state.searchResults" :key="index" class="result-item"
-                            @click="selectSearchResult(item)">
-                            <div class="result-title">{{ item.title }}</div>
-                            <div class="result-address">{{ item.address }}</div>
-                        </div>
+                <!-- 鼠标悬停坐标显示 -->
+                <div v-if="state.showHoverCoords && state.hoverLocation" class="hover-coords">
+                    <div class="coords-tooltip">
+                        <span>经度: {{ state.hoverLocation.lng.toFixed(6) }}</span>
+                        <span>纬度: {{ state.hoverLocation.lat.toFixed(6) }}</span>
                     </div>
                 </div>
             </div>
         </div>
-
         <template #footer>
             <div class="dialog-footer">
                 <el-button @click="handleClose">取消</el-button>
@@ -75,28 +47,24 @@
 </template>
 
 <script setup lang="ts" name="map-picker-dialog">
-import { reactive, ref, onMounted, nextTick } from 'vue'
+import { reactive, ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
-import { TencentMapAPI } from '../../utils/jsonp'
 
 // 定义事件
 const emit = defineEmits(['confirm', 'close'])
 
 // 响应式状态
-const state = reactive<any>({
+const state = reactive({
     visibleMapDialog: false,
-    searchKeyword: '',
-    searching: false,
-    selectedLocation: null,
-    selectedAddress: '',
-    searchResults: []
+    selectedLocation: null as any,
+    hoverLocation: null as any, // 鼠标悬停位置
+    showHoverCoords: false // 是否显示悬停坐标
 })
 
 // 地图配置
 const map = reactive<any>({
-    // 默认县府
-    center: { lat: 29.453297, lng: 119.89259 },
+    // 默认中心点（可以根据需要调整）
+    center: { lat: 39.908823, lng: 116.397470 }, // 北京天安门
     zoom: 15,
     doubleClickZoom: true,
 })
@@ -104,16 +72,6 @@ const map = reactive<any>({
 // 地图引用
 const mapRef = ref()
 
-// 腾讯地图API密钥 <mcreference link="https://lbs.qq.com/getPoint/#J" index="0">0</mcreference>
-const TENCENT_MAP_KEY = "4INBZ-UIUCZ-ILHXD-7P2GM-6C2LZ-S7BNI"
-
-// 创建腾讯地图API实例 (启用调试模式)
-const mapAPI = new TencentMapAPI(TENCENT_MAP_KEY, true)
-
-onMounted(() => {
-    // 初始化地图相关功能
-})
-
 // 打开对话框
 const open = (initialLocation?: any) => {
     state.visibleMapDialog = true
@@ -123,13 +81,11 @@ const open = (initialLocation?: any) => {
     if (initialLocation) {
         state.selectedLocation = { ...initialLocation }
         map.center = initialLocation
-        state.selectedAddress = '正在获取地址...'
-        reverseGeocode(initialLocation)
     }
 
     // 等待DOM更新后初始化地图
     nextTick(() => {
-        initMap(initialLocation)
+        console.log('地图对话框已打开')
     })
 }
 
@@ -142,62 +98,36 @@ const handleClose = () => {
 
 // 重置状态
 const resetState = () => {
-    state.searchKeyword = ''
-    state.searching = false
     state.selectedLocation = null
-    state.selectedAddress = ''
-    state.searchResults = []
+    state.hoverLocation = null
+    state.showHoverCoords = false
+}
+
+// 地图鼠标移动事件
+const handleMapMouseMove = (event: any) => {
+    const { lat, lng } = event.latLng
+    state.hoverLocation = { lat, lng }
+    state.showHoverCoords = true
+}
+
+// 地图鼠标离开事件
+const handleMapMouseLeave = () => {
+    state.showHoverCoords = false
+    state.hoverLocation = null
 }
 
 // 地图点击事件
 const handleMapClick = (event: any) => {
     const { lat, lng } = event.latLng
     state.selectedLocation = { lat, lng }
-
-    // 逆地址解析
-    reverseGeocode({ lat, lng })
+    console.log('选中位置:', { lat, lng })
 }
 
 // 标记拖拽结束事件
 const handleMarkerDragEnd = (event: any) => {
     const { lat, lng } = event.latLng
     state.selectedLocation = { lat, lng }
-
-    // 逆地址解析
-    reverseGeocode({ lat, lng })
-}
-
-// 搜索地址
-const handleSearch = async () => {
-    if (!state.searchKeyword.trim()) {
-        ElMessage.warning('请输入搜索关键词')
-        return
-    }
-
-    state.searching = true
-    try {
-        const results = await searchLocation(state.searchKeyword)
-        state.searchResults = results
-        if (results.length === 0) {
-            ElMessage.info('未找到相关地址')
-        }
-    } catch (error) {
-        console.error('搜索失败:', error)
-        ElMessage.error('搜索失败，请重试')
-    } finally {
-        state.searching = false
-    }
-}
-
-// 选择搜索结果
-const selectSearchResult = (item: any) => {
-    state.selectedLocation = { lat: item.location.lat, lng: item.location.lng }
-    state.selectedAddress = item.address
-    map.center = state.selectedLocation
-
-    // 清空搜索结果
-    state.searchResults = []
-    state.searchKeyword = item.title
+    console.log('拖拽到位置:', { lat, lng })
 }
 
 // 确认选择
@@ -209,65 +139,20 @@ const handleConfirm = () => {
 
     const result = {
         location: state.selectedLocation,
-        address: state.selectedAddress,
-        coordinates: `${state.selectedLocation.lng},${state.selectedLocation.lat}`
+        coordinates: `${state.selectedLocation.lng},${state.selectedLocation.lat}`,
+        // 提供多种坐标格式
+        formats: {
+            lngLat: `${state.selectedLocation.lng},${state.selectedLocation.lat}`,
+            latLng: `${state.selectedLocation.lat},${state.selectedLocation.lng}`,
+            lng: state.selectedLocation.lng,
+            lat: state.selectedLocation.lat
+        }
     }
 
     emit('confirm', result)
     handleClose()
 }
 
-// 逆地址解析
-const reverseGeocode = async (location: { lat: number, lng: number }) => {
-    try {
-        const data = await mapAPI.reverseGeocode(location.lat, location.lng)
-
-        if (data.status === 0) {
-            state.selectedAddress = data.result.address
-        } else {
-            console.error('逆地址解析失败:', data.message)
-            state.selectedAddress = `纬度:${location.lat}, 经度:${location.lng}`
-        }
-    } catch (error) {
-        console.error('逆地址解析错误:', error)
-        state.selectedAddress = `纬度:${location.lat}, 经度:${location.lng}`
-    }
-}
-
-// 地址搜索
-const searchLocation = async (keyword: string) => {
-    try {
-        const data = await mapAPI.searchLocation(keyword)
-
-        if (data.status === 0) {
-            return data.data.map((item: any) => ({
-                title: item.title,
-                address: item.address,
-                location: item.location
-            }))
-        } else {
-            console.error('地址搜索失败:', data.message)
-            return []
-        }
-    } catch (error) {
-        console.error('地址搜索错误:', error)
-        return []
-    }
-}
-
-// 初始化地图
-const initMap = (initialLocation?: any) => {
-    // 这里应该初始化腾讯地图
-    // 由于需要腾讯地图SDK，这里提供一个基础的实现框架
-    console.log('初始化地图', initialLocation)
-
-    // 如果有初始位置，设置地图中心
-    if (initialLocation) {
-        // 设置地图中心到初始位置
-        // map.setCenter(new TMap.LatLng(initialLocation.lat, initialLocation.lng))
-    }
-}
-
 // 暴露方法
 defineExpose({
     open
@@ -303,33 +188,76 @@ defineExpose({
     overflow: hidden;
 }
 
-.map-crosshair {
+/* 鼠标悬停坐标显示 */
+.hover-coords {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 10px;
+    left: 10px;
     pointer-events: none;
     z-index: 1000;
 }
 
-.crosshair-horizontal,
-.crosshair-vertical {
-    position: absolute;
-    background: #ff4757;
+.coords-tooltip {
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 0px 6px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    backdrop-filter: blur(4px);
 }
 
-.crosshair-horizontal {
+.coords-tooltip i {
+    font-size: 14px;
+    color: #67c23a;
+}
+
+/* 自定义标记点样式 */
+.custom-marker {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+}
+
+.marker-icon {
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+    border: 3px solid white;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
+    transition: all 0.3s ease;
+}
+
+.marker-icon:hover {
+    transform: rotate(-45deg) scale(1.1);
+    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.6);
+}
+
+.marker-icon i {
+    color: white;
+    font-size: 16px;
+    transform: rotate(45deg);
+    font-weight: bold;
+}
+
+.marker-shadow {
     width: 20px;
-    height: 2px;
-    top: -1px;
-    left: -10px;
-}
-
-.crosshair-vertical {
-    width: 2px;
-    height: 20px;
-    top: -10px;
-    left: -1px;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    margin-top: 2px;
+    filter: blur(2px);
 }
 
 .info-panel {

src/views/mch/mch-pick-up/form.vue

@@ -22,7 +22,7 @@
 
         <el-col :span="24" class="mb20">
           <el-form-item label="营业时间" prop="businessHoursJson">
-            <el-input v-model="form.businessHoursJson" placeholder="请输入营业时间" />
+            <BusinessHours v-model="form.businessHoursJson" />
           </el-form-item>
         </el-col>
 
@@ -63,10 +63,17 @@
 </template>
 
 <script setup lang="ts" name="MchPickUpDialog">
-import { useDict } from '/@/hooks/dict';
 import { useMessage } from "/@/hooks/message";
 import * as mchPickUpApi from '/@/api/wallet/mch-pick-up'
-import { rule } from '/@/utils/validate';
+import BusinessHours from '/@/components/BusinessHours/index.vue'
+
+// 定义营业时间接口
+interface BusinessHour {
+  id: string
+  title: string
+  startTime: string
+  endTime: string
+}
 const emit = defineEmits(['refresh']);
 
 // 定义变量内容
@@ -86,7 +93,7 @@ const form = reactive({
   latitude: '',
   longitude: '',
   detailAddress: '',
-  businessHoursJson: '',
+  businessHoursJson: [] as BusinessHour[],
   mchIds: [],
 });
 
@@ -95,16 +102,17 @@ const dataRules = ref({
   name: [{ required: true, message: "门店名称不能为空", trigger: "blur" }],
 })
 
+
 // 打开弹窗
 const openDialog = (id: string) => {
   visible.value = true
   form.id = ''
-
   // 重置表单数据
   nextTick(() => {
     dataFormRef.value?.resetFields();
   });
-
+  // 重置营业时间数据
+  form.businessHoursJson = []
   // 获取mchPickUp信息
   if (id) {
     form.id = id
@@ -118,7 +126,11 @@ const onSubmit = async () => {
   if (!valid) return false;
   try {
     loading.value = true;
-    form.id ? await mchPickUpApi.putObj(form) : await mchPickUpApi.addObj(form);
+    const _data: any = { ...form }
+    if (_data.businessHoursJson && _data.businessHoursJson.length) {
+      _data.businessHoursJson = JSON.stringify(_data.businessHoursJson)
+    }
+    form.id ? await mchPickUpApi.putObj(_data) : await mchPickUpApi.addObj(_data);
     useMessage().success(form.id ? '修改成功' : '添加成功');
     visible.value = false;
     emit('refresh');
@@ -136,6 +148,14 @@ const getmchPickUpData = (id: string) => {
   loading.value = true
   mchPickUpApi.getObj(id).then((res: any) => {
     Object.assign(form, res.data)
+    if (res.data.businessHoursJson) {
+      try {
+        form.businessHoursJson = JSON.parse(res.data.businessHoursJson)
+      } catch (error) {
+        console.warn('解析营业时间JSON失败:', error)
+        form.businessHoursJson = []
+      }
+    }
   }).finally(() => {
     loading.value = false
   })

src/views/mch/mch-pick-up/index.vue

@@ -54,7 +54,17 @@
           </template>
         </el-table-column>
         <el-table-column prop="detailAddress" label="门店详细地址" show-overflow-tooltip />
-        <el-table-column prop="businessHoursJson" label="营业时间" show-overflow-tooltip />
+        <el-table-column prop="businessHoursJson" label="营业时间">
+          <template #default="{ row }">
+            <div v-for="v in JSON.parse(row.businessHoursJson)" :key="v">
+              <span>{{ v.title }}</span>
+              <span>:</span>
+              <span>{{ v.startTime }}</span>
+              <span>-</span>
+              <span>{{ v.endTime }}</span>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="150">
           <template #default="scope">
             <el-button icon="edit-pen" text type="primary" v-auth="'mch_mchPickUp_edit'"