|
|
|
@ -113,22 +113,6 @@
|
|
|
|
|
:rules="[{ required: true, message: '请输入小区名称', trigger: 'change' }]"
|
|
|
|
|
name="detailAddress"
|
|
|
|
|
>
|
|
|
|
|
<!-- <a-input id="tipinput" ref="detailAddressRef" v-model:value="formModel.detailAddress" autocomplete="off"
|
|
|
|
|
placeholder="请输入小区名称" :title="(formModel.address && formModel.address.length < 2) || !formModel.address
|
|
|
|
|
? '请先选择省市区'
|
|
|
|
|
: ''
|
|
|
|
|
" class="custom-tooltip" :disabled="title === '编辑预约' || title === '编辑'" :readonly="title === '详情' ||
|
|
|
|
|
title === '分发' ||
|
|
|
|
|
(formModel.address && formModel.address.length < 2) ||
|
|
|
|
|
!formModel.address
|
|
|
|
|
" /> -->
|
|
|
|
|
<!-- {{ formModel.address.length }} -->
|
|
|
|
|
<!-- :readonly="
|
|
|
|
|
title === '详情' ||
|
|
|
|
|
title === '分发' ||
|
|
|
|
|
(formModel.address && formModel.address.length < 2) ||
|
|
|
|
|
!formModel.address
|
|
|
|
|
" -->
|
|
|
|
|
<a-select
|
|
|
|
|
v-model:value="formModel.detailAddress"
|
|
|
|
|
show-search
|
|
|
|
@ -441,7 +425,155 @@ import {
|
|
|
|
|
import type { CustomerDTO, GeopoliticalCustomersRecord } from '@/api/geopoliticalCustomers/types'
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
|
|
//获取小区下拉框提示列表数据
|
|
|
|
|
//省市区二级
|
|
|
|
|
// import { provincesAndCitiesAndAutonomousRegions } from '@/utils/geopolitical-customers'
|
|
|
|
|
|
|
|
|
|
//dom中可以写成:rules = 'rulesData'
|
|
|
|
|
// const rulesData = {
|
|
|
|
|
// required: true,
|
|
|
|
|
// trigger: 'change'
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
//省市区下拉框列表数据
|
|
|
|
|
provincesAndCitiesAndAutonomousOptions.value = window.globalProvincesAndCitiesAndAutonomousRegions
|
|
|
|
|
// if (provincesAndCitiesAndAutonomousRegions) {
|
|
|
|
|
// const addressArray = JSON.parse(JSON.stringify(provincesAndCitiesAndAutonomousRegions))
|
|
|
|
|
// const arr: any[] = []
|
|
|
|
|
// addressArray.forEach((item: any) => {
|
|
|
|
|
// item.children.forEach((it: any) => {
|
|
|
|
|
// if (it.children) {
|
|
|
|
|
// delete it.children
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// arr.push(item)
|
|
|
|
|
// })
|
|
|
|
|
// provincesAndCitiesAndAutonomousOptions.value = arr
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
//省市区、半径动态生成只读/禁用样式
|
|
|
|
|
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 isDetailAddressDisabled = ref(false)
|
|
|
|
|
const isDetailAddressReadOnly = ref(false)
|
|
|
|
|
|
|
|
|
|
const isDetailAddressReadOnlyDynamicClass = computed(() => ({
|
|
|
|
|
'custom-disabled-style': isDetailAddressDisabled.value,
|
|
|
|
|
'custom-readonly-style':
|
|
|
|
|
isDetailAddressReadOnly.value ||
|
|
|
|
|
(formModel.address && formModel.address.length < 2) ||
|
|
|
|
|
!formModel.address
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
const formRef = ref<FormInstance>()
|
|
|
|
|
|
|
|
|
|
// const city = ref<string | undefined>('')
|
|
|
|
|
// const cityAnddistinguish = ref<string | undefined>('')
|
|
|
|
|
|
|
|
|
|
//省市区下拉框列表数据
|
|
|
|
|
const provincesAndCitiesAndAutonomousOptions: any = ref([])
|
|
|
|
|
//省市区change
|
|
|
|
|
const addressChange = async (value: any) => {
|
|
|
|
|
// console.log(value, 'value')
|
|
|
|
|
formModel.detailAddress = ''
|
|
|
|
|
|
|
|
|
|
if (value) {
|
|
|
|
|
formModel.economize = value[0]
|
|
|
|
|
formModel.market = value[1]
|
|
|
|
|
formModel.distinguish = value[2]
|
|
|
|
|
// console.log(value.length, 'value.length')
|
|
|
|
|
// if (value.length === 2) {
|
|
|
|
|
// formModel.detailAddress = value[0] + value[1]
|
|
|
|
|
// } else if (value.length === 3) {
|
|
|
|
|
// formModel.detailAddress = value[0] + value[1] + value[2]
|
|
|
|
|
// }
|
|
|
|
|
console.log('formModel.detailAddress', formModel.detailAddress)
|
|
|
|
|
|
|
|
|
|
// city.value = value[1].slice(0, -1)
|
|
|
|
|
// cityAnddistinguish.value = value[1] + value[2]
|
|
|
|
|
// await auto(value[1])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//区域半径下拉框列表数据(不需要改变的数据不要绑定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 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
|
|
|
|
|
}
|
|
|
|
|
if (hour === endHour && minute >= endMinute) {
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//创建 AMap.Geocoder 实例,AMap.Geocoder 是高德地图 JavaScript API 中的一个类,用于将地理描述转换为经纬度坐标或将经纬度坐标转换为地理描述
|
|
|
|
|
const newAmapGeocoder = () => {
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function () {
|
|
|
|
|
geocoder.value = new AMap.Geocoder({
|
|
|
|
|
city: '全国' // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//通过接口获取小区下拉框提示列表数据
|
|
|
|
|
const key = ref('435631c2ed6e33af778b42b46b2260ee') //web服务 高德api
|
|
|
|
|
const searchData = (city: string, keywords: string, callback: any) => {
|
|
|
|
|
axios
|
|
|
|
@ -468,7 +600,7 @@ const searchData = (city: string, keywords: string, callback: any) => {
|
|
|
|
|
//小区下拉框提示列表数据
|
|
|
|
|
const searchDataList = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
//获取小区下拉框提示列表数据防抖节流
|
|
|
|
|
//获取小区下拉框提示列表数据
|
|
|
|
|
let timeout: any
|
|
|
|
|
function fetch(val: string, callback: any) {
|
|
|
|
|
const dist: string = formModel.distinguish ? formModel.distinguish : formModel.market || ''
|
|
|
|
@ -496,20 +628,11 @@ function fetch(val: string, callback: any) {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//节流控制
|
|
|
|
|
timeout = setTimeout(fake, 300)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//创建 AMap.Geocoder 实例,AMap.Geocoder 是高德地图 JavaScript API 中的一个类,用于将地理描述转换为经纬度坐标或将经纬度坐标转换为地理描述
|
|
|
|
|
const newAmapGeocoder = () => {
|
|
|
|
|
AMap.plugin('AMap.Geocoder', function () {
|
|
|
|
|
geocoder.value = new AMap.Geocoder({
|
|
|
|
|
city: '全国' // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//小区a-select鼠标移入/移出触发事件
|
|
|
|
|
//小区a-select鼠标移入/移出触发事件(文本框值变化时回调)
|
|
|
|
|
const handleSearch = (val: string) => {
|
|
|
|
|
if (val) {
|
|
|
|
|
formModel.detailAddress = val
|
|
|
|
@ -522,24 +645,23 @@ const handleSearch = (val: string) => {
|
|
|
|
|
|
|
|
|
|
//小区a-select select事件
|
|
|
|
|
const handleSelect = (val: string) => {
|
|
|
|
|
console.log(val, 'val')
|
|
|
|
|
formModel.detailAddress = val
|
|
|
|
|
// getLocation('')
|
|
|
|
|
newAmapGeocoder()
|
|
|
|
|
getCenterMarkerAddress()
|
|
|
|
|
}
|
|
|
|
|
//根据门店名称去获取中心点
|
|
|
|
|
//小区a-select的select事件时根据门店名称去获取中心点
|
|
|
|
|
const accordingStorenameGetCenter = (pois: any) => {
|
|
|
|
|
isName.value = false
|
|
|
|
|
getCenterMarker('select', pois[0].location.lng, pois[0].location.lat)
|
|
|
|
|
}
|
|
|
|
|
//根据详细地址区获取中心点
|
|
|
|
|
//小区a-select的select事件时根据详细地址区获取中心点
|
|
|
|
|
const accordingAddressGetCenter = () => {
|
|
|
|
|
isName.value = true
|
|
|
|
|
newAmapGeocoder()
|
|
|
|
|
getLocation('select')
|
|
|
|
|
}
|
|
|
|
|
//标记中心点封装的方法
|
|
|
|
|
|
|
|
|
|
//输入详细地址去获取经纬度从而标记中心点封装的方法
|
|
|
|
|
const getLocation = (type: string) => {
|
|
|
|
|
// console.log(address, '标记中心点address')
|
|
|
|
|
const addressValue =
|
|
|
|
@ -585,6 +707,42 @@ const getLocation = (type: string) => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//标记中心点封装的方法
|
|
|
|
|
const getCenterMarker = (type: string, lng: number, lat: number) => {
|
|
|
|
|
formModel.otherAddressesInfo = `${lng},${lat}`
|
|
|
|
|
console.log(lng, lat, 'lng')
|
|
|
|
|
// 设置地图中心点
|
|
|
|
|
map.value.setCenter([lng, lat]) // 将经度和纬度作为参数传入
|
|
|
|
|
if (type === 'match' || type === 'select') {
|
|
|
|
|
//修改地图的缩放级别
|
|
|
|
|
map.value.setZoom(12) // 设置新的缩放级别,例如12
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (previousMarker.value && type === 'select') {
|
|
|
|
|
map.value.remove(markerCenter.value) // 从地图上移除之前的中心点标记物
|
|
|
|
|
}
|
|
|
|
|
// 创建标记并添加到地图上
|
|
|
|
|
markerCenter.value = new AMap.Marker({
|
|
|
|
|
position: [lng, lat], // 设定标记的位置为地图中心点
|
|
|
|
|
zIndex: 100 // 设置标记点的 z-index 值为 100
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 设置标记点的样式
|
|
|
|
|
markerCenter.value.setIcon(
|
|
|
|
|
new AMap.Icon({
|
|
|
|
|
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 使用红色标记点的图标 URL
|
|
|
|
|
size: new AMap.Size(18, 30), // 图标尺寸
|
|
|
|
|
imageSize: new AMap.Size(18, 30) // 图片尺寸
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
markerCenter.value.setMap(map.value) // 将标记添加到地图上
|
|
|
|
|
previousMarker.value = marker // 将新的中心点标记物赋值给 previousMarker
|
|
|
|
|
|
|
|
|
|
if (type === 'match') {
|
|
|
|
|
pagingQuery(lng, lat)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//标记中心点封装的方法
|
|
|
|
|
const getCenterMarkerAddress = () => {
|
|
|
|
|
createSearchService()
|
|
|
|
|
const addressValue = formModel.address?.toString().split(',').join('') + formModel.detailAddress
|
|
|
|
@ -659,145 +817,6 @@ const getCenterMarkerAddress = () => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//省市区二级
|
|
|
|
|
// import { provincesAndCitiesAndAutonomousRegions } from '@/utils/geopolitical-customers'
|
|
|
|
|
|
|
|
|
|
//dom中可以写成:rules = 'rulesData'
|
|
|
|
|
// const rulesData = {
|
|
|
|
|
// required: true,
|
|
|
|
|
// trigger: 'change'
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
//省市区下拉框列表数据
|
|
|
|
|
provincesAndCitiesAndAutonomousOptions.value = window.globalProvincesAndCitiesAndAutonomousRegions
|
|
|
|
|
// if (provincesAndCitiesAndAutonomousRegions) {
|
|
|
|
|
// const addressArray = JSON.parse(JSON.stringify(provincesAndCitiesAndAutonomousRegions))
|
|
|
|
|
// const arr: any[] = []
|
|
|
|
|
// addressArray.forEach((item: any) => {
|
|
|
|
|
// item.children.forEach((it: any) => {
|
|
|
|
|
// if (it.children) {
|
|
|
|
|
// delete it.children
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// arr.push(item)
|
|
|
|
|
// })
|
|
|
|
|
// provincesAndCitiesAndAutonomousOptions.value = arr
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
//省市区、半径动态生成只读/禁用样式
|
|
|
|
|
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 isDetailAddressDisabled = ref(false)
|
|
|
|
|
const isDetailAddressReadOnly = ref(false)
|
|
|
|
|
|
|
|
|
|
const isDetailAddressReadOnlyDynamicClass = computed(() => ({
|
|
|
|
|
'custom-disabled-style': isDetailAddressDisabled.value,
|
|
|
|
|
'custom-readonly-style':
|
|
|
|
|
isDetailAddressReadOnly.value ||
|
|
|
|
|
(formModel.address && formModel.address.length < 2) ||
|
|
|
|
|
!formModel.address
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
const formRef = ref<FormInstance>()
|
|
|
|
|
|
|
|
|
|
// const city = ref<string | undefined>('')
|
|
|
|
|
// const cityAnddistinguish = ref<string | undefined>('')
|
|
|
|
|
|
|
|
|
|
//省市区下拉框列表数据
|
|
|
|
|
const provincesAndCitiesAndAutonomousOptions: any = ref([])
|
|
|
|
|
//省市区change
|
|
|
|
|
const addressChange = async (value: any) => {
|
|
|
|
|
// console.log(value, 'value')
|
|
|
|
|
formModel.detailAddress = ''
|
|
|
|
|
|
|
|
|
|
if (value) {
|
|
|
|
|
formModel.economize = value[0]
|
|
|
|
|
formModel.market = value[1]
|
|
|
|
|
formModel.distinguish = value[2]
|
|
|
|
|
// console.log(value.length, 'value.length')
|
|
|
|
|
// if (value.length === 2) {
|
|
|
|
|
// formModel.detailAddress = value[0] + value[1]
|
|
|
|
|
// } else if (value.length === 3) {
|
|
|
|
|
// formModel.detailAddress = value[0] + value[1] + value[2]
|
|
|
|
|
// }
|
|
|
|
|
console.log('formModel.detailAddress', formModel.detailAddress)
|
|
|
|
|
|
|
|
|
|
// city.value = value[1].slice(0, -1)
|
|
|
|
|
// cityAnddistinguish.value = value[1] + value[2]
|
|
|
|
|
// await auto(value[1])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//区域半径下拉框列表数据(不需要改变的数据不要绑定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 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
|
|
|
|
|
}
|
|
|
|
|
if (hour === endHour && minute >= endMinute) {
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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>()
|
|
|
|
@ -910,6 +929,11 @@ const pagingQuery = (lng: number | undefined, lat: number | undefined) => {
|
|
|
|
|
const accordingStorenameMatch = (pois: any) => {
|
|
|
|
|
isName.value = false
|
|
|
|
|
getCenterMarker('match', pois[0].location.lng, pois[0].location.lat)
|
|
|
|
|
console.log(
|
|
|
|
|
pois[0].location.lng,
|
|
|
|
|
pois[0].location.lat,
|
|
|
|
|
'pois[0].location.lng, pois[0].location.lat'
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
//匹配时根据详细地址区获取中心点
|
|
|
|
|
const accordingAddressMatch = () => {
|
|
|
|
@ -1107,9 +1131,9 @@ interface customStoreEntitiesItem {
|
|
|
|
|
//预约时间
|
|
|
|
|
reservationTime: string
|
|
|
|
|
}
|
|
|
|
|
//是否发送请求了,发送了就要就行表格刷新
|
|
|
|
|
//是否发送请求了,发送了就要执行表格刷新
|
|
|
|
|
const isSubmit = ref(false)
|
|
|
|
|
//提交请求操作
|
|
|
|
|
//报名、暂存提交请求操作
|
|
|
|
|
const submitOperate = () => {
|
|
|
|
|
//移除address属性
|
|
|
|
|
const filteredObj = Object.fromEntries(
|
|
|
|
@ -1392,41 +1416,6 @@ const map = ref<any>({})
|
|
|
|
|
//逆向地理编码:将 地理坐标(经纬度) 转换成 地址描述信息,对应为AMap.Geocoder的getAddress方法
|
|
|
|
|
const geocoder = ref<any>({})
|
|
|
|
|
|
|
|
|
|
//标记中心点封装的方法
|
|
|
|
|
const getCenterMarker = (type: string, lng: number, lat: number) => {
|
|
|
|
|
// 设置地图中心点
|
|
|
|
|
map.value.setCenter([lng, lat]) // 将经度和纬度作为参数传入
|
|
|
|
|
if (type === 'match' || type === 'select') {
|
|
|
|
|
//修改地图的缩放级别
|
|
|
|
|
map.value.setZoom(12) // 设置新的缩放级别,例如12
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (previousMarker.value && type === 'select') {
|
|
|
|
|
map.value.remove(markerCenter.value) // 从地图上移除之前的中心点标记物
|
|
|
|
|
}
|
|
|
|
|
// 创建标记并添加到地图上
|
|
|
|
|
markerCenter.value = new AMap.Marker({
|
|
|
|
|
position: [lng, lat], // 设定标记的位置为地图中心点
|
|
|
|
|
zIndex: 100 // 设置标记点的 z-index 值为 100
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 设置标记点的样式
|
|
|
|
|
markerCenter.value.setIcon(
|
|
|
|
|
new AMap.Icon({
|
|
|
|
|
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 使用红色标记点的图标 URL
|
|
|
|
|
size: new AMap.Size(18, 30), // 图标尺寸
|
|
|
|
|
imageSize: new AMap.Size(18, 30) // 图片尺寸
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
markerCenter.value.setMap(map.value) // 将标记添加到地图上
|
|
|
|
|
previousMarker.value = marker // 将新的中心点标记物赋值给 previousMarker
|
|
|
|
|
|
|
|
|
|
if (type === 'match') {
|
|
|
|
|
console.log(type, 'type')
|
|
|
|
|
pagingQuery(lng, lat)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const searchService = ref<any>({})
|
|
|
|
|
// 创建地点搜索服务实例
|
|
|
|
|
const createSearchService = () => {
|
|
|
|
@ -1443,155 +1432,152 @@ const createSearchService = () => {
|
|
|
|
|
// getCenterMarkerAddress('select')
|
|
|
|
|
// }
|
|
|
|
|
const isName = ref<boolean>(false)
|
|
|
|
|
const selectedTipCurrent = ref<any>()
|
|
|
|
|
// 当用户选择输入提示结果后进行查询操作
|
|
|
|
|
const performQuery = (selectedTip: any, detailAddress: string) => {
|
|
|
|
|
console.log('performQuery')
|
|
|
|
|
|
|
|
|
|
selectedTipCurrent.value = selectedTip
|
|
|
|
|
//标记中心点
|
|
|
|
|
// 创建地点搜索服务实例
|
|
|
|
|
const searchService = new AMap.PlaceSearch({
|
|
|
|
|
// 在这里填写您的高德地图 API Key
|
|
|
|
|
key: '1d3839a0fe4ad113f7d88ec3775107b7',
|
|
|
|
|
// 指定地点搜索服务的版本号
|
|
|
|
|
version: '2.0'
|
|
|
|
|
})
|
|
|
|
|
const addressValue = formModel.address?.toString().split(',').join('') + selectedTip.name
|
|
|
|
|
// 执行地点搜索
|
|
|
|
|
searchService.search(addressValue, (status: any, result: any) => {
|
|
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// 处理搜索结果
|
|
|
|
|
const pois = result.poiList.pois
|
|
|
|
|
console.log(pois, 'pois')
|
|
|
|
|
console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
// 对获取到的兴趣点列表进行处理
|
|
|
|
|
// console.log(pois, 'pois')
|
|
|
|
|
// console.log(pois[0].location.lng, pois[0].location.lat, 'pois经纬度')
|
|
|
|
|
if (pois[0].name === formModel.detailAddress) {
|
|
|
|
|
isName.value = false
|
|
|
|
|
getCenterMarker('select', pois[0].location.lng, pois[0].location.lat)
|
|
|
|
|
formModel.otherAddressesInfo = `${pois[0].location.lng},${pois[0].location.lat}`
|
|
|
|
|
} else {
|
|
|
|
|
isName.value = true
|
|
|
|
|
console.log(selectedTipCurrent.value, 'selectedTipCurrent.value')
|
|
|
|
|
// getLocation(selectedTipCurrent.value)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 地点搜索失败的处理逻辑
|
|
|
|
|
console.log('地点搜索失败')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// if (isName.value) {
|
|
|
|
|
// console.log(isName.value, 'isName.value')
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
// const geocoder = new AMap.Geocoder()
|
|
|
|
|
// const location = selectedTip.location
|
|
|
|
|
// if (location) {
|
|
|
|
|
// // 使用地理编码查询
|
|
|
|
|
// geocoder.getAddress(location, function (status: any, result: any) {
|
|
|
|
|
// if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// // 处理查询结果
|
|
|
|
|
// const address = result.regeocode.formattedAddress
|
|
|
|
|
// console.log('查询结果:', address)
|
|
|
|
|
// console.log(detailAddress, 'detailAddress')
|
|
|
|
|
|
|
|
|
|
// // 进行其他操作...
|
|
|
|
|
// match()
|
|
|
|
|
|
|
|
|
|
// // detailAddress = detailAddress.substring(0, 14)
|
|
|
|
|
// // if (detailAddress === '浙江省杭州市上城区九和路8号华侨国际·新侨创智中心') {
|
|
|
|
|
// // detailAddress = detailAddress.substring(0, detailAddress.indexOf('号') + 1)
|
|
|
|
|
// // console.log(detailAddress, 'detailAddress1111')
|
|
|
|
|
// // //标记中心点
|
|
|
|
|
// // getCenterMarker('select', detailAddress)
|
|
|
|
|
// // formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
// // } else {
|
|
|
|
|
// // //标记中心点
|
|
|
|
|
// // getCenterMarker('select', detailAddress)
|
|
|
|
|
// // formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
// // }
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// } else {
|
|
|
|
|
// message.info('地址错误,请重新进行选择')
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const detailAddress = ref<string>('')
|
|
|
|
|
const detailAddressRef = ref()
|
|
|
|
|
const auto = async (value: string) => {
|
|
|
|
|
await AMap.plugin('AMap.AutoComplete', function () {
|
|
|
|
|
console.log(autoComplete.value, 'value')
|
|
|
|
|
//AutoComplete实例已存在,赋值失败;想变成动态的,就得动态赋值;死就没有发生变化,不需要重新赋值
|
|
|
|
|
// if (autoComplete.value) {
|
|
|
|
|
// autoComplete.value.setCity(value)
|
|
|
|
|
// } else {
|
|
|
|
|
// 实例化Autocomplete
|
|
|
|
|
const autoOptions = {
|
|
|
|
|
// city: value, // 限定城市,默认全国
|
|
|
|
|
// city: '330000', // 限定城市,默认全国
|
|
|
|
|
input: 'tipinput'
|
|
|
|
|
// keywords: formModel.address?.toString().split(',').join('') + formModel.detailAddress,
|
|
|
|
|
// citylimit: true, // 设置要限制的省市区
|
|
|
|
|
// noLocation: true // 禁用定位功能
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 创建新的 AMap.AutoComplete 实例
|
|
|
|
|
autoComplete.value = new AMap.AutoComplete(autoOptions)
|
|
|
|
|
// }
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
autoComplete.value?.on('select', (e: any) => {
|
|
|
|
|
// detailAddressRef.value.stateValue.getValue()
|
|
|
|
|
// detailAddressRef.value.stateValue = 123
|
|
|
|
|
console.log(
|
|
|
|
|
detailAddressRef.value.stateValue,
|
|
|
|
|
'detailAddressRef.value.stateValue.getValue()'
|
|
|
|
|
)
|
|
|
|
|
console.log(detailAddressRef.value, 'detailAddressRef.value.value')
|
|
|
|
|
console.log(e.poi, 'e.poi')
|
|
|
|
|
const selectedTip = e.poi // 获取用户选择的提示结果对象
|
|
|
|
|
console.log(
|
|
|
|
|
formModel.economize,
|
|
|
|
|
formModel.market,
|
|
|
|
|
formModel.distinguish,
|
|
|
|
|
'formModel.economize && formModel.market && formModel.distinguish'
|
|
|
|
|
)
|
|
|
|
|
if (formModel.distinguish) {
|
|
|
|
|
if (formModel.economize && formModel.market) {
|
|
|
|
|
const result = selectedTip.name.replace(
|
|
|
|
|
formModel.economize + formModel.market + formModel.distinguish,
|
|
|
|
|
''
|
|
|
|
|
)
|
|
|
|
|
const address = formModel.economize + formModel.market + formModel.distinguish + result // 将选中的提示项名称赋值给输入框的值(使用 v-model 来绑定)
|
|
|
|
|
// formModel.detailAddress = address
|
|
|
|
|
const tipInput = document.querySelector('#tipinput') as HTMLElement
|
|
|
|
|
// const selectedTipCurrent = ref<any>()
|
|
|
|
|
// // 当用户选择输入提示结果后进行查询操作
|
|
|
|
|
// const performQuery = (selectedTip: any, detailAddress: string) => {
|
|
|
|
|
// selectedTipCurrent.value = selectedTip
|
|
|
|
|
// //标记中心点
|
|
|
|
|
// // 创建地点搜索服务实例
|
|
|
|
|
// const searchService = new AMap.PlaceSearch({
|
|
|
|
|
// // 在这里填写您的高德地图 API Key
|
|
|
|
|
// key: '1d3839a0fe4ad113f7d88ec3775107b7',
|
|
|
|
|
// // 指定地点搜索服务的版本号
|
|
|
|
|
// version: '2.0'
|
|
|
|
|
// })
|
|
|
|
|
// const addressValue = formModel.address?.toString().split(',').join('') + selectedTip.name
|
|
|
|
|
// // 执行地点搜索
|
|
|
|
|
// searchService.search(addressValue, (status: any, result: any) => {
|
|
|
|
|
// if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// // 处理搜索结果
|
|
|
|
|
// const pois = result.poiList.pois
|
|
|
|
|
// console.log(pois, 'pois')
|
|
|
|
|
// console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
// // 对获取到的兴趣点列表进行处理
|
|
|
|
|
// // console.log(pois, 'pois')
|
|
|
|
|
// // console.log(pois[0].location.lng, pois[0].location.lat, 'pois经纬度')
|
|
|
|
|
// if (pois[0].name === formModel.detailAddress) {
|
|
|
|
|
// isName.value = false
|
|
|
|
|
// getCenterMarker('select', pois[0].location.lng, pois[0].location.lat)
|
|
|
|
|
// formModel.otherAddressesInfo = `${pois[0].location.lng},${pois[0].location.lat}`
|
|
|
|
|
// } else {
|
|
|
|
|
// isName.value = true
|
|
|
|
|
// console.log(selectedTipCurrent.value, 'selectedTipCurrent.value')
|
|
|
|
|
// // getLocation(selectedTipCurrent.value)
|
|
|
|
|
// }
|
|
|
|
|
// } else {
|
|
|
|
|
// // 地点搜索失败的处理逻辑
|
|
|
|
|
// console.log('地点搜索失败')
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// // if (isName.value) {
|
|
|
|
|
// // console.log(isName.value, 'isName.value')
|
|
|
|
|
|
|
|
|
|
// // }
|
|
|
|
|
// // const geocoder = new AMap.Geocoder()
|
|
|
|
|
// // const location = selectedTip.location
|
|
|
|
|
// // if (location) {
|
|
|
|
|
// // // 使用地理编码查询
|
|
|
|
|
// // geocoder.getAddress(location, function (status: any, result: any) {
|
|
|
|
|
// // if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// // // 处理查询结果
|
|
|
|
|
// // const address = result.regeocode.formattedAddress
|
|
|
|
|
// // console.log('查询结果:', address)
|
|
|
|
|
// // console.log(detailAddress, 'detailAddress')
|
|
|
|
|
|
|
|
|
|
// // // 进行其他操作...
|
|
|
|
|
// // match()
|
|
|
|
|
|
|
|
|
|
// // // detailAddress = detailAddress.substring(0, 14)
|
|
|
|
|
// // // if (detailAddress === '浙江省杭州市上城区九和路8号华侨国际·新侨创智中心') {
|
|
|
|
|
// // // detailAddress = detailAddress.substring(0, detailAddress.indexOf('号') + 1)
|
|
|
|
|
// // // console.log(detailAddress, 'detailAddress1111')
|
|
|
|
|
// // // //标记中心点
|
|
|
|
|
// // // getCenterMarker('select', detailAddress)
|
|
|
|
|
// // // formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
// // // } else {
|
|
|
|
|
// // // //标记中心点
|
|
|
|
|
// // // getCenterMarker('select', detailAddress)
|
|
|
|
|
// // // formModel.otherAddressesInfo = detailAddress
|
|
|
|
|
// // // }
|
|
|
|
|
// // }
|
|
|
|
|
// // })
|
|
|
|
|
// // } else {
|
|
|
|
|
// // message.info('地址错误,请重新进行选择')
|
|
|
|
|
// // }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
tipInput.innerHTML = address
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// detailAddressRef.value.stateValue = address
|
|
|
|
|
// })
|
|
|
|
|
console.log(result, 'result')
|
|
|
|
|
console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (formModel.economize && formModel.market) {
|
|
|
|
|
const result = selectedTip.name.replace(formModel.economize + formModel.market, '')
|
|
|
|
|
const address = formModel.economize + formModel.market + result // 将选中的提示项名称赋值给输入框的值(使用 v-model 来绑定)
|
|
|
|
|
formModel.detailAddress = address
|
|
|
|
|
detailAddressRef.value.stateValue = address
|
|
|
|
|
// const detailAddress = ref<string>('')
|
|
|
|
|
// const detailAddressRef = ref()
|
|
|
|
|
// const auto = async (value: string) => {
|
|
|
|
|
// await AMap.plugin('AMap.AutoComplete', function () {
|
|
|
|
|
// //AutoComplete实例已存在,赋值失败;想变成动态的,就得动态赋值;死就没有发生变化,不需要重新赋值
|
|
|
|
|
// // if (autoComplete.value) {
|
|
|
|
|
// // autoComplete.value.setCity(value)
|
|
|
|
|
// // } else {
|
|
|
|
|
// // 实例化Autocomplete
|
|
|
|
|
// const autoOptions = {
|
|
|
|
|
// // city: value, // 限定城市,默认全国
|
|
|
|
|
// // city: '330000', // 限定城市,默认全国
|
|
|
|
|
// input: 'tipinput'
|
|
|
|
|
// // keywords: formModel.address?.toString().split(',').join('') + formModel.detailAddress,
|
|
|
|
|
// // citylimit: true, // 设置要限制的省市区
|
|
|
|
|
// // noLocation: true // 禁用定位功能
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// // 创建新的 AMap.AutoComplete 实例
|
|
|
|
|
// autoComplete.value = new AMap.AutoComplete(autoOptions)
|
|
|
|
|
// // }
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// autoComplete.value?.on('select', (e: any) => {
|
|
|
|
|
// // detailAddressRef.value.stateValue.getValue()
|
|
|
|
|
// // detailAddressRef.value.stateValue = 123
|
|
|
|
|
// console.log(
|
|
|
|
|
// detailAddressRef.value.stateValue,
|
|
|
|
|
// 'detailAddressRef.value.stateValue.getValue()'
|
|
|
|
|
// )
|
|
|
|
|
// console.log(detailAddressRef.value, 'detailAddressRef.value.value')
|
|
|
|
|
// console.log(e.poi, 'e.poi')
|
|
|
|
|
// const selectedTip = e.poi // 获取用户选择的提示结果对象
|
|
|
|
|
// console.log(
|
|
|
|
|
// formModel.economize,
|
|
|
|
|
// formModel.market,
|
|
|
|
|
// formModel.distinguish,
|
|
|
|
|
// 'formModel.economize && formModel.market && formModel.distinguish'
|
|
|
|
|
// )
|
|
|
|
|
// if (formModel.distinguish) {
|
|
|
|
|
// if (formModel.economize && formModel.market) {
|
|
|
|
|
// const result = selectedTip.name.replace(
|
|
|
|
|
// formModel.economize + formModel.market + formModel.distinguish,
|
|
|
|
|
// ''
|
|
|
|
|
// )
|
|
|
|
|
// const address = formModel.economize + formModel.market + formModel.distinguish + result // 将选中的提示项名称赋值给输入框的值(使用 v-model 来绑定)
|
|
|
|
|
// // formModel.detailAddress = address
|
|
|
|
|
// const tipInput = document.querySelector('#tipinput') as HTMLElement
|
|
|
|
|
|
|
|
|
|
// tipInput.innerHTML = address
|
|
|
|
|
// // setTimeout(() => {
|
|
|
|
|
// // detailAddressRef.value.stateValue = address
|
|
|
|
|
// // })
|
|
|
|
|
// console.log(result, 'result')
|
|
|
|
|
// console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
// }
|
|
|
|
|
// } else {
|
|
|
|
|
// if (formModel.economize && formModel.market) {
|
|
|
|
|
// const result = selectedTip.name.replace(formModel.economize + formModel.market, '')
|
|
|
|
|
// const address = formModel.economize + formModel.market + result // 将选中的提示项名称赋值给输入框的值(使用 v-model 来绑定)
|
|
|
|
|
// formModel.detailAddress = address
|
|
|
|
|
// detailAddressRef.value.stateValue = address
|
|
|
|
|
|
|
|
|
|
// console.log(formModel.detailAddress, 'formModel.detailAddress')
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
detailAddress.value = selectedTip.district + selectedTip.address
|
|
|
|
|
performQuery(selectedTip, detailAddress.value) // 执行查询操作
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// detailAddress.value = selectedTip.district + selectedTip.address
|
|
|
|
|
// performQuery(selectedTip, detailAddress.value) // 执行查询操作
|
|
|
|
|
// })
|
|
|
|
|
// }, 300)
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
//创建地图
|
|
|
|
|
const initMap = async () => {
|
|
|
|
@ -1599,7 +1585,7 @@ const initMap = async () => {
|
|
|
|
|
// center: [120.1551, 30.2741], // 地图中心点经纬度
|
|
|
|
|
zoom: 18 // 缩放级别
|
|
|
|
|
})
|
|
|
|
|
await auto('全国')
|
|
|
|
|
// await auto('全国')
|
|
|
|
|
if (title.value === '编辑预约' || title.value === '编辑') {
|
|
|
|
|
//标记中心点
|
|
|
|
|
getCenterMarker(
|
|
|
|
|