486 lines
16 KiB
Vue
486 lines
16 KiB
Vue
<template>
|
|
<div class="space-y-4">
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<div class="text-sm text-gray-500">{{ t('store.deliveryZone.tip') }}</div>
|
|
<div class="flex items-center gap-2">
|
|
<ElButton @click="loadZones">{{ t('store.action.refresh') }}</ElButton>
|
|
<ElButton type="primary" @click="handleCreate">
|
|
{{ t('store.deliveryZone.action.add') }}
|
|
</ElButton>
|
|
</div>
|
|
</div>
|
|
|
|
<ElTable :data="zones" border stripe v-loading="loading">
|
|
<ElTableColumn
|
|
:label="t('store.deliveryZone.table.zoneName')"
|
|
min-width="160"
|
|
prop="zoneName"
|
|
/>
|
|
<ElTableColumn :label="t('store.deliveryZone.table.minimumOrderAmount')" width="140">
|
|
<template #default="{ row }">
|
|
{{ row.minimumOrderAmount ?? '-' }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn :label="t('store.deliveryZone.table.deliveryFee')" width="120">
|
|
<template #default="{ row }">
|
|
{{ row.deliveryFee ?? '-' }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn :label="t('store.deliveryZone.table.estimatedMinutes')" width="140">
|
|
<template #default="{ row }">
|
|
{{ row.estimatedMinutes ?? '-' }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn :label="t('common.action')" width="160">
|
|
<template #default="{ row }">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<ElButton link type="primary" @click="handleEdit(row)">
|
|
{{ t('store.action.edit') }}
|
|
</ElButton>
|
|
<ElButton link type="danger" @click="handleDelete(row)">
|
|
{{ t('store.action.delete') }}
|
|
</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
</ElTable>
|
|
|
|
<ElCard shadow="never">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<span>{{ t('store.deliveryZone.check.title') }}</span>
|
|
<ElButton type="primary" :loading="checking" @click="handleCheck">
|
|
{{ t('store.deliveryZone.check.action') }}
|
|
</ElButton>
|
|
</div>
|
|
</template>
|
|
<ElForm :model="checkForm" inline>
|
|
<ElFormItem :label="t('store.deliveryZone.check.longitude')">
|
|
<ElInputNumber v-model="checkForm.longitude" :step="0.000001" />
|
|
</ElFormItem>
|
|
<ElFormItem :label="t('store.deliveryZone.check.latitude')">
|
|
<ElInputNumber v-model="checkForm.latitude" :step="0.000001" />
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<ElAlert
|
|
v-if="checkResult"
|
|
:type="checkResult.inRange ? 'success' : 'warning'"
|
|
:title="
|
|
checkResult.inRange
|
|
? t('store.deliveryZone.check.inRange')
|
|
: t('store.deliveryZone.check.outOfRange')
|
|
"
|
|
show-icon
|
|
class="mt-4"
|
|
>
|
|
<template #default>
|
|
<div class="text-sm text-gray-600">
|
|
<span
|
|
>{{ t('store.deliveryZone.check.distance') }}: {{ checkResult.distance ?? '-' }}</span
|
|
>
|
|
<span class="ml-4">
|
|
{{ t('store.deliveryZone.check.zoneName') }}:
|
|
{{ checkResult.deliveryZoneName || '-' }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</ElAlert>
|
|
</ElCard>
|
|
|
|
<ElDialog
|
|
v-model="dialogVisible"
|
|
:title="
|
|
editingZone ? t('store.deliveryZone.action.edit') : t('store.deliveryZone.action.add')
|
|
"
|
|
width="640px"
|
|
destroy-on-close
|
|
class="delivery-zone-dialog"
|
|
>
|
|
<ElForm
|
|
ref="formRef"
|
|
:model="formModel"
|
|
:rules="formRules"
|
|
label-position="top"
|
|
class="space-y-4"
|
|
>
|
|
<!-- Section: Basic Info -->
|
|
<div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
|
|
<div class="text-sm font-medium text-gray-900 mb-3 flex items-center gap-2">
|
|
<el-icon><InfoFilled /></el-icon>
|
|
{{ t('store.deliveryZone.form.basicInfo') }}
|
|
</div>
|
|
<ElFormItem :label="t('store.deliveryZone.form.zoneName')" prop="zoneName" class="mb-0">
|
|
<ElInput
|
|
v-model="formModel.zoneName"
|
|
:placeholder="t('store.deliveryZone.form.zoneNamePlaceholder')"
|
|
size="large"
|
|
>
|
|
<template #prefix>
|
|
<el-icon class="text-gray-400"><Location /></el-icon>
|
|
</template>
|
|
</ElInput>
|
|
</ElFormItem>
|
|
</div>
|
|
|
|
<!-- Section: Delivery Settings (Grid) -->
|
|
<div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
|
|
<div class="text-sm font-medium text-gray-900 mb-3 flex items-center gap-2">
|
|
<el-icon><Money /></el-icon>
|
|
{{ t('store.deliveryZone.form.costSettings') }}
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-2">
|
|
<ElFormItem
|
|
:label="t('store.deliveryZone.form.minimumOrderAmount')"
|
|
prop="minimumOrderAmount"
|
|
>
|
|
<ElInputNumber
|
|
v-model="formModel.minimumOrderAmount"
|
|
class="!w-full"
|
|
:min="0"
|
|
:precision="2"
|
|
controls-position="right"
|
|
size="large"
|
|
>
|
|
<template #prefix>¥</template>
|
|
</ElInputNumber>
|
|
</ElFormItem>
|
|
|
|
<ElFormItem :label="t('store.deliveryZone.form.deliveryFee')" prop="deliveryFee">
|
|
<ElInputNumber
|
|
v-model="formModel.deliveryFee"
|
|
class="!w-full"
|
|
:min="0"
|
|
:precision="2"
|
|
controls-position="right"
|
|
size="large"
|
|
/>
|
|
</ElFormItem>
|
|
|
|
<ElFormItem
|
|
:label="t('store.deliveryZone.form.estimatedMinutes')"
|
|
prop="estimatedMinutes"
|
|
>
|
|
<ElInputNumber
|
|
v-model="formModel.estimatedMinutes"
|
|
class="!w-full"
|
|
:min="0"
|
|
controls-position="right"
|
|
size="large"
|
|
/>
|
|
</ElFormItem>
|
|
|
|
<ElFormItem :label="t('store.deliveryZone.form.sortOrder')" prop="sortOrder">
|
|
<ElInputNumber
|
|
v-model="formModel.sortOrder"
|
|
class="!w-full"
|
|
:min="0"
|
|
controls-position="right"
|
|
size="large"
|
|
/>
|
|
</ElFormItem>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Map Area -->
|
|
<div class="bg-blue-50/50 p-4 rounded-lg border border-blue-100">
|
|
<ElFormItem
|
|
:label="t('store.deliveryZone.form.polygonGeoJson')"
|
|
prop="polygonGeoJson"
|
|
class="mb-0 !border-0"
|
|
>
|
|
<!-- Hidden Input for Validation -->
|
|
<ElInput v-model="formModel.polygonGeoJson" class="hidden" />
|
|
|
|
<!-- Visual Map Card -->
|
|
<div
|
|
class="w-full flex items-center justify-between bg-white px-4 py-3 rounded border border-blue-200 shadow-sm cursor-pointer hover:border-blue-300 hover:shadow transition-all group"
|
|
@click="polygonDialogVisible = true"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 rounded-full flex items-center justify-center"
|
|
:class="
|
|
formModel.polygonGeoJson
|
|
? 'bg-green-100 text-green-600'
|
|
: 'bg-gray-100 text-gray-400'
|
|
"
|
|
>
|
|
<el-icon :size="20"><MapLocation /></el-icon>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-medium text-gray-900">
|
|
{{
|
|
formModel.polygonGeoJson
|
|
? t('store.deliveryZone.status.configured')
|
|
: t('store.deliveryZone.status.notConfigured')
|
|
}}
|
|
</div>
|
|
<div class="text-xs text-gray-500 mt-0.5">
|
|
{{
|
|
formModel.polygonGeoJson
|
|
? t('store.deliveryZone.form.clickToEdit')
|
|
: t('store.deliveryZone.form.clickToDraw')
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ElButton type="primary" link class="group-hover:translate-x-1 transition-transform">
|
|
{{
|
|
formModel.polygonGeoJson
|
|
? t('store.action.edit')
|
|
: t('store.deliveryZone.action.setup')
|
|
}}
|
|
<el-icon class="el-icon--right"><ArrowRight /></el-icon>
|
|
</ElButton>
|
|
</div>
|
|
<div class="text-xs text-gray-400 mt-2 px-1">
|
|
{{ t('store.deliveryZone.form.drawHint') }}
|
|
</div>
|
|
</ElFormItem>
|
|
</div>
|
|
</ElForm>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-xs text-gray-400">
|
|
<!-- Optional left-side footer content -->
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<ElButton size="large" @click="dialogVisible = false">{{
|
|
t('common.cancel')
|
|
}}</ElButton>
|
|
<ElButton type="primary" :loading="saving" size="large" @click="handleSubmit">
|
|
{{ t('common.confirm') }}
|
|
</ElButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
|
|
<DeliveryZonePolygonDialog
|
|
v-model="polygonDialogVisible"
|
|
:geo-json="formModel.polygonGeoJson"
|
|
:store-location="storeLocation"
|
|
@apply="handlePolygonApply"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import {
|
|
ElAlert,
|
|
ElButton,
|
|
ElCard,
|
|
ElDialog,
|
|
ElForm,
|
|
ElFormItem,
|
|
ElInput,
|
|
ElInputNumber,
|
|
ElMessage,
|
|
ElMessageBox,
|
|
ElTable,
|
|
ElTableColumn
|
|
} from 'element-plus'
|
|
import DeliveryZonePolygonDialog from './DeliveryZonePolygonDialog.vue'
|
|
import {
|
|
fetchCreateStoreDeliveryZone,
|
|
fetchDeleteStoreDeliveryZone,
|
|
fetchDeliveryZoneCheck,
|
|
fetchStoreDeliveryZones,
|
|
fetchUpdateStoreDeliveryZone
|
|
} from '@/api/store'
|
|
import { InfoFilled, Location, Money, MapLocation, ArrowRight } from '@element-plus/icons-vue'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
|
|
defineOptions({ name: 'DeliveryZoneMapEditor' })
|
|
|
|
interface DeliveryZoneFormState {
|
|
zoneName: string
|
|
polygonGeoJson: string
|
|
minimumOrderAmount?: number
|
|
deliveryFee?: number
|
|
estimatedMinutes?: number
|
|
sortOrder: number
|
|
}
|
|
|
|
// 1. 基础输入
|
|
const props = defineProps<{
|
|
storeId: string
|
|
store?: Api.Store.StoreDto | null
|
|
}>()
|
|
const { t } = useI18n()
|
|
|
|
const createDefaultForm = (): DeliveryZoneFormState => ({
|
|
zoneName: '',
|
|
polygonGeoJson: '',
|
|
minimumOrderAmount: undefined,
|
|
deliveryFee: undefined,
|
|
estimatedMinutes: undefined,
|
|
sortOrder: 100
|
|
})
|
|
|
|
// 2. 区域数据
|
|
const loading = ref(false)
|
|
const zones = ref<Api.Store.StoreDeliveryZoneDto[]>([])
|
|
|
|
// 3. 检测数据
|
|
const checking = ref(false)
|
|
const checkForm = ref<{ longitude?: number; latitude?: number }>({
|
|
longitude: undefined,
|
|
latitude: undefined
|
|
})
|
|
const checkResult = ref<Api.Store.StoreDeliveryCheckResultDto | null>(null)
|
|
|
|
// 4. 表单状态
|
|
const dialogVisible = ref(false)
|
|
const saving = ref(false)
|
|
const polygonDialogVisible = ref(false)
|
|
const editingZone = ref<Api.Store.StoreDeliveryZoneDto | null>(null)
|
|
const formRef = ref<FormInstance>()
|
|
const formModel = ref<DeliveryZoneFormState>(createDefaultForm())
|
|
const storeLocation = computed(() => ({
|
|
longitude: props.store?.longitude ?? undefined,
|
|
latitude: props.store?.latitude ?? undefined
|
|
}))
|
|
|
|
// 5. 校验规则
|
|
const formRules: FormRules<DeliveryZoneFormState> = {
|
|
zoneName: [
|
|
{ required: true, message: t('store.deliveryZone.rules.zoneName'), trigger: 'blur' }
|
|
],
|
|
polygonGeoJson: [
|
|
{ required: true, message: t('store.deliveryZone.rules.polygonGeoJson'), trigger: 'blur' }
|
|
]
|
|
}
|
|
|
|
// 6. 数据加载
|
|
const loadZones = async () => {
|
|
if (!props.storeId) {
|
|
zones.value = []
|
|
return
|
|
}
|
|
loading.value = true
|
|
try {
|
|
zones.value = await fetchStoreDeliveryZones(props.storeId)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.storeId,
|
|
() => {
|
|
loadZones()
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(dialogVisible, (visible) => {
|
|
if (!visible) {
|
|
polygonDialogVisible.value = false
|
|
}
|
|
})
|
|
|
|
// 7. 交互处理
|
|
const handleCreate = () => {
|
|
editingZone.value = null
|
|
formModel.value = createDefaultForm()
|
|
dialogVisible.value = true
|
|
}
|
|
const handleEdit = (row: Api.Store.StoreDeliveryZoneDto) => {
|
|
editingZone.value = row
|
|
formModel.value = {
|
|
zoneName: row.zoneName,
|
|
polygonGeoJson: row.polygonGeoJson,
|
|
minimumOrderAmount: row.minimumOrderAmount ?? undefined,
|
|
deliveryFee: row.deliveryFee ?? undefined,
|
|
estimatedMinutes: row.estimatedMinutes ?? undefined,
|
|
sortOrder: row.sortOrder
|
|
}
|
|
dialogVisible.value = true
|
|
}
|
|
const handleDelete = async (row: Api.Store.StoreDeliveryZoneDto) => {
|
|
// 1. 二次确认
|
|
await ElMessageBox.confirm(
|
|
t('store.deliveryZone.deleteConfirm'),
|
|
t('store.deliveryZone.deleteTitle'),
|
|
{
|
|
type: 'warning'
|
|
}
|
|
)
|
|
|
|
// 2. 执行删除
|
|
await fetchDeleteStoreDeliveryZone(props.storeId, row.id)
|
|
ElMessage.success(t('store.message.deleteSuccess'))
|
|
loadZones()
|
|
}
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) {
|
|
return
|
|
}
|
|
|
|
// 1. 校验表单
|
|
await formRef.value.validate(async (valid) => {
|
|
if (!valid) {
|
|
return
|
|
}
|
|
|
|
// 2. 保存区域
|
|
saving.value = true
|
|
try {
|
|
if (editingZone.value) {
|
|
await fetchUpdateStoreDeliveryZone(props.storeId, editingZone.value.id, {
|
|
zoneName: formModel.value.zoneName.trim(),
|
|
polygonGeoJson: formModel.value.polygonGeoJson.trim(),
|
|
minimumOrderAmount: formModel.value.minimumOrderAmount,
|
|
deliveryFee: formModel.value.deliveryFee,
|
|
estimatedMinutes: formModel.value.estimatedMinutes,
|
|
sortOrder: formModel.value.sortOrder
|
|
})
|
|
ElMessage.success(t('store.message.updateSuccess'))
|
|
} else {
|
|
await fetchCreateStoreDeliveryZone(props.storeId, {
|
|
zoneName: formModel.value.zoneName.trim(),
|
|
polygonGeoJson: formModel.value.polygonGeoJson.trim(),
|
|
minimumOrderAmount: formModel.value.minimumOrderAmount,
|
|
deliveryFee: formModel.value.deliveryFee,
|
|
estimatedMinutes: formModel.value.estimatedMinutes,
|
|
sortOrder: formModel.value.sortOrder
|
|
})
|
|
ElMessage.success(t('store.message.createSuccess'))
|
|
}
|
|
dialogVisible.value = false
|
|
loadZones()
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
const handlePolygonApply = (geoJson: string) => {
|
|
formModel.value.polygonGeoJson = geoJson
|
|
}
|
|
const handleCheck = async () => {
|
|
if (
|
|
!props.storeId ||
|
|
checkForm.value.longitude === undefined ||
|
|
checkForm.value.latitude === undefined
|
|
) {
|
|
return
|
|
}
|
|
|
|
// 1. 执行检测
|
|
checking.value = true
|
|
try {
|
|
checkResult.value = await fetchDeliveryZoneCheck(props.storeId, {
|
|
longitude: checkForm.value.longitude,
|
|
latitude: checkForm.value.latitude
|
|
})
|
|
} finally {
|
|
checking.value = false
|
|
}
|
|
}
|
|
</script>
|