店铺列表店铺地址,选择经纬度调整
This commit is contained in:
161
src/components/AddressSelect/index.vue
Normal file
161
src/components/AddressSelect/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="center">
|
||||
<el-select placeholder="请选择省" style="width: 100px" v-model="prov" @change="provChange">
|
||||
<el-option
|
||||
v-for="item in provList"
|
||||
:key="item.regionId"
|
||||
:label="item.regionName"
|
||||
:value="item.regionName"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
placeholder="请选择市"
|
||||
style="width: 100px"
|
||||
:disabled="!prov"
|
||||
v-model="city"
|
||||
@change="cityChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cityList"
|
||||
:key="item.regionId"
|
||||
:label="item.regionName"
|
||||
:value="item.regionName"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
placeholder="请选择区"
|
||||
style="width: 100px"
|
||||
:disabled="!city"
|
||||
v-model="area"
|
||||
@change="areaChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in areaList"
|
||||
:key="item.regionId"
|
||||
:label="item.regionName"
|
||||
:value="item.regionName"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { getRegion } from "@/api/common";
|
||||
|
||||
const provList = ref<any[]>([]);
|
||||
const cityList = ref<any[]>([]);
|
||||
const areaList = ref<any[]>([]);
|
||||
|
||||
const provCode = defineModel("provCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 监听省份code变化
|
||||
watch(
|
||||
provCode,
|
||||
async (n, o) => {
|
||||
await getRegionAjax();
|
||||
if (n && n !== undefined) {
|
||||
provChange(n, true);
|
||||
|
||||
// 监听市区code变化
|
||||
watch(
|
||||
cityCode,
|
||||
async (n, o) => {
|
||||
if (n !== undefined && n) {
|
||||
cityChange(n, true);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true, // 可选:初始化立即执行,验证是否监听到初始值
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true, // 可选:初始化立即执行,验证是否监听到初始值
|
||||
}
|
||||
);
|
||||
|
||||
const cityCode = defineModel("cityCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const areaCode = defineModel("areaCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const prov = defineModel("prov", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const city = defineModel("city", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const area = defineModel("area", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const wxProvinceCode = defineModel("wxProvinceCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 省份变化 e code isEcho是否回显
|
||||
function provChange(e: string, isEcho: boolean = false) {
|
||||
console.log("provChange", e);
|
||||
if (!isEcho) {
|
||||
city.value = "";
|
||||
area.value = "";
|
||||
cityList.value = [];
|
||||
areaList.value = [];
|
||||
}
|
||||
const provObj = provList.value.find((item) => item.regionName == e);
|
||||
if (provObj && provObj.children) {
|
||||
cityList.value = provObj.children;
|
||||
}
|
||||
}
|
||||
|
||||
// 市区变化
|
||||
function cityChange(e: string, isEcho: boolean = false) {
|
||||
if (!isEcho) {
|
||||
area.value = "";
|
||||
areaList.value = [];
|
||||
}
|
||||
const cityObj = cityList.value.find((item) => item.regionName == e);
|
||||
|
||||
if (cityObj && cityObj.children) {
|
||||
areaList.value = cityObj.children;
|
||||
wxProvinceCode.value = cityObj.wxProvinceCode;
|
||||
}
|
||||
}
|
||||
|
||||
// 区变化
|
||||
function areaChange(e: string) {}
|
||||
|
||||
// 获取省市区数据
|
||||
async function getRegionAjax() {
|
||||
try {
|
||||
const res = await getRegion();
|
||||
provList.value = res;
|
||||
} catch (error) {
|
||||
console.error("获取省市区数据失败:", error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,40 @@
|
||||
<template>
|
||||
<div class="center">
|
||||
<el-select placeholder="请选择省" style="width: 100px;" v-model="provCode" @change="provChange">
|
||||
<el-option v-for="item in provList" :key="item.regionId" :label="item.regionName" :value="item.regionId" />
|
||||
<el-select placeholder="请选择省" style="width: 100px" v-model="provCode" @change="provChange">
|
||||
<el-option
|
||||
v-for="item in provList"
|
||||
:key="item.regionId"
|
||||
:label="item.regionName"
|
||||
:value="item.regionId"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select placeholder="请选择市" style="width: 100px;" :disabled="!provCode" v-model="cityCode" @change="cityChange">
|
||||
<el-option v-for="item in cityList" :key="item.regionId" :label="item.regionName" :value="item.regionId" />
|
||||
<el-select
|
||||
placeholder="请选择市"
|
||||
style="width: 100px"
|
||||
:disabled="!provCode"
|
||||
v-model="cityCode"
|
||||
@change="cityChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cityList"
|
||||
:key="item.regionId"
|
||||
:label="item.regionName"
|
||||
:value="item.regionId"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select placeholder="请选择区" style="width: 100px;" :disabled="!cityCode" v-model="areaCode" @change="areaChange">
|
||||
<el-option v-for="item in areaList" :key="item.regionId" :label="item.regionName" :value="item.regionId" />
|
||||
<el-select
|
||||
placeholder="请选择区"
|
||||
style="width: 100px"
|
||||
:disabled="!cityCode"
|
||||
v-model="areaCode"
|
||||
@change="areaChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in areaList"
|
||||
:key="item.regionId"
|
||||
:label="item.regionName"
|
||||
:value="item.regionId"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
@@ -26,23 +53,31 @@ const provCode = defineModel("provCode", {
|
||||
});
|
||||
|
||||
// 监听省份code变化
|
||||
watch(provCode, async (n, o) => {
|
||||
await getRegionAjax()
|
||||
if (n && n !== undefined) {
|
||||
provChange(n, true)
|
||||
watch(
|
||||
provCode,
|
||||
async (n, o) => {
|
||||
await getRegionAjax();
|
||||
if (n && n !== undefined) {
|
||||
provChange(n, true);
|
||||
|
||||
// 监听市区code变化
|
||||
watch(cityCode, async (n, o) => {
|
||||
if (n !== undefined && n) {
|
||||
cityChange(n, true)
|
||||
}
|
||||
}, {
|
||||
immediate: true // 可选:初始化立即执行,验证是否监听到初始值
|
||||
})
|
||||
// 监听市区code变化
|
||||
watch(
|
||||
cityCode,
|
||||
async (n, o) => {
|
||||
if (n !== undefined && n) {
|
||||
cityChange(n, true);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true, // 可选:初始化立即执行,验证是否监听到初始值
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true, // 可选:初始化立即执行,验证是否监听到初始值
|
||||
}
|
||||
}, {
|
||||
immediate: true // 可选:初始化立即执行,验证是否监听到初始值
|
||||
})
|
||||
);
|
||||
|
||||
const cityCode = defineModel("cityCode", {
|
||||
type: String,
|
||||
@@ -69,10 +104,10 @@ const area = defineModel("area", {
|
||||
default: "",
|
||||
});
|
||||
|
||||
const wxProvinceCode = defineModel('wxProvinceCode', {
|
||||
const wxProvinceCode = defineModel("wxProvinceCode", {
|
||||
type: String,
|
||||
default: ''
|
||||
})
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 省份变化 e code isEcho是否回显
|
||||
function provChange(e: string, isEcho: boolean = false) {
|
||||
@@ -100,7 +135,7 @@ function cityChange(e: string, isEcho: boolean = false) {
|
||||
city.value = cityObj ? cityObj.regionName : "";
|
||||
if (cityObj && cityObj.children) {
|
||||
areaList.value = cityObj.children;
|
||||
wxProvinceCode.value = cityObj.wxProvinceCode
|
||||
wxProvinceCode.value = cityObj.wxProvinceCode;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,7 +151,7 @@ async function getRegionAjax() {
|
||||
const res = await getRegion();
|
||||
provList.value = res;
|
||||
} catch (error) {
|
||||
console.error('获取省市区数据失败:', error);
|
||||
console.error("获取省市区数据失败:", error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -127,4 +162,4 @@ async function getRegionAjax() {
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,86 +1,181 @@
|
||||
<template>
|
||||
<el-dialog :title="state.form.id ? '编辑店铺' : '添加店铺'" v-model="state.dialogVisible" @close="reset">
|
||||
<div style="height: 50vh; overflow-y: auto">
|
||||
<el-form ref="refForm" :model="state.form" :rules="state.rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="店铺名称" prop="shopName">
|
||||
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺类型">
|
||||
<el-radio-group v-model="state.form.shopType" :disabled="state.isEdit || state.type == 'addBranch'">
|
||||
<el-radio-button value="only">单店</el-radio-button>
|
||||
<el-radio-button value="chain">连锁店</el-radio-button>
|
||||
<el-radio-button value="join">加盟店</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips"><el-alert title="请谨慎修改" type="warning" size="7" effect="dark" show-icon :closable="false"/></div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为主店" prop="isHeadShop" v-if="state.form.shopType != 'only'">
|
||||
<el-radio-group v-model="state.form.isHeadShop" @change=" state.form.mainId = ''" :disabled="state.isEdit || state.type == 'addBranch'">
|
||||
<el-radio :value="1">是</el-radio>
|
||||
<el-radio :value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择主店" prop="mainId" v-if="state.form.isHeadShop == '0'&&state.form.shopType != 'only'">
|
||||
<!-- <el-form-item label="主店账号" prop="mainId" v-if="state.form.shopType != 'only'"> -->
|
||||
<el-select v-model="state.form.mainId" placeholder="请选择主店铺" filterable reserve-keyword
|
||||
:remote-method="getTableData" :loading="state.shopListLoading" :disabled="state.isEdit || state.type == 'addBranch'">
|
||||
<el-option v-for="item in state.shopList" :label="`${item.shopName}`" :value="item.id"
|
||||
:key="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="连锁店扩展店名">
|
||||
<el-input v-model="state.form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="门店logo" prop="logo">
|
||||
<SingleImageUpload v-model="state.form.logo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店照片">
|
||||
<SingleImageUpload v-model="state.form.frontImg" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营模式">
|
||||
<el-radio-group v-model="state.form.registerType">
|
||||
<el-radio-button value="before">先付费</el-radio-button>
|
||||
<el-radio-button value="after">后付费</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips"><el-alert title="请谨慎修改" type="warning" size="7" effect="dark" show-icon :closable="false"/></div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="管理方式" v-if="state.form.shopType != 'only'">
|
||||
<el-radio-group v-model="state.form.tubeType">
|
||||
<el-radio-button :value="0">不可直接管理</el-radio-button>
|
||||
<el-radio-button :value="1">直接管理</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips"><el-alert title="请谨慎修改" type="warning" size="7" effect="dark" show-icon :closable="false"/></div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="试用/正式">
|
||||
<el-radio-group v-model="state.form.profiles">
|
||||
<el-radio-button value="probation">试用</el-radio-button>
|
||||
<el-radio-button value="release">正式</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活码">
|
||||
<el-input v-model="state.form.activateCode" placeholder="请输入激活码"></el-input>
|
||||
<div class="tips">注:输入有效激活码表示添加的同时直接激活该店铺。</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号" prop="accountName">
|
||||
<el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
|
||||
<el-input type="password" show-password v-model="state.form.accountPwd" placeholder="请输入登录密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="state.form.phone" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备数量">
|
||||
<el-input-number v-model="state.form.supportDeviceNumber" controls-position="right" :min="1" :step="1"
|
||||
step-strictly></el-input-number>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="外卖起送金额">
|
||||
<div>
|
||||
<el-dialog
|
||||
:title="state.form.id ? '编辑店铺' : '添加店铺'"
|
||||
v-model="state.dialogVisible"
|
||||
@close="reset"
|
||||
>
|
||||
<div style="height: 50vh; overflow-y: auto">
|
||||
<el-form
|
||||
ref="refForm"
|
||||
:model="state.form"
|
||||
:rules="state.rules"
|
||||
label-width="120px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item label="店铺名称" prop="shopName">
|
||||
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺类型">
|
||||
<el-radio-group
|
||||
v-model="state.form.shopType"
|
||||
:disabled="state.isEdit || state.type == 'addBranch'"
|
||||
>
|
||||
<el-radio-button value="only">单店</el-radio-button>
|
||||
<el-radio-button value="chain">连锁店</el-radio-button>
|
||||
<el-radio-button value="join">加盟店</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips">
|
||||
<el-alert
|
||||
title="请谨慎修改"
|
||||
type="warning"
|
||||
size="7"
|
||||
effect="dark"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为主店" prop="isHeadShop" v-if="state.form.shopType != 'only'">
|
||||
<el-radio-group
|
||||
v-model="state.form.isHeadShop"
|
||||
@change="state.form.mainId = ''"
|
||||
:disabled="state.isEdit || state.type == 'addBranch'"
|
||||
>
|
||||
<el-radio :value="1">是</el-radio>
|
||||
<el-radio :value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="选择主店"
|
||||
prop="mainId"
|
||||
v-if="state.form.isHeadShop == '0' && state.form.shopType != 'only'"
|
||||
>
|
||||
<!-- <el-form-item label="主店账号" prop="mainId" v-if="state.form.shopType != 'only'"> -->
|
||||
<el-select
|
||||
v-model="state.form.mainId"
|
||||
placeholder="请选择主店铺"
|
||||
filterable
|
||||
reserve-keyword
|
||||
:remote-method="getTableData"
|
||||
:loading="state.shopListLoading"
|
||||
:disabled="state.isEdit || state.type == 'addBranch'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.shopList"
|
||||
:label="`${item.shopName}`"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="连锁店扩展店名">
|
||||
<el-input v-model="state.form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="门店logo" prop="logo">
|
||||
<SingleImageUpload v-model="state.form.logo" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店照片">
|
||||
<SingleImageUpload v-model="state.form.frontImg" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经营模式">
|
||||
<el-radio-group v-model="state.form.registerType">
|
||||
<el-radio-button value="before">先付费</el-radio-button>
|
||||
<el-radio-button value="after">后付费</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips">
|
||||
<el-alert
|
||||
title="请谨慎修改"
|
||||
type="warning"
|
||||
size="7"
|
||||
effect="dark"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="管理方式" v-if="state.form.shopType != 'only'">
|
||||
<el-radio-group v-model="state.form.tubeType">
|
||||
<el-radio-button :value="0">不可直接管理</el-radio-button>
|
||||
<el-radio-button :value="1">直接管理</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="tips">
|
||||
<el-alert
|
||||
title="请谨慎修改"
|
||||
type="warning"
|
||||
size="7"
|
||||
effect="dark"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="试用/正式">
|
||||
<el-radio-group v-model="state.form.profiles">
|
||||
<el-radio-button value="probation">试用</el-radio-button>
|
||||
<el-radio-button value="release">正式</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="激活码">
|
||||
<el-input v-model="state.form.activateCode" placeholder="请输入激活码"></el-input>
|
||||
<div class="tips">注:输入有效激活码表示添加的同时直接激活该店铺。</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号" prop="accountName">
|
||||
<el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
|
||||
<el-input
|
||||
type="password"
|
||||
show-password
|
||||
v-model="state.form.accountPwd"
|
||||
placeholder="请输入登录密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="state.form.phone" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备数量">
|
||||
<el-input-number
|
||||
v-model="state.form.supportDeviceNumber"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:step="1"
|
||||
step-strictly
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="外卖起送金额">
|
||||
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
|
||||
:min="0"></el-input-number>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="店铺经度" prop="lat">
|
||||
<el-form-item label="店铺地址" prop="districts">
|
||||
<AddressSelect
|
||||
v-model:prov="state.form.provinces"
|
||||
v-model:city="state.form.cities"
|
||||
v-model:area="state.form.districts"
|
||||
></AddressSelect>
|
||||
</el-form-item>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="经度" prop="lng">
|
||||
<el-input v-model="state.form.lng" placeholder="经度"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="纬度" prop="lat" label-width="auto">
|
||||
<el-input v-model="state.form.lat" placeholder="纬度"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button type="primary" plain icon="place" @click="latShow = true">
|
||||
打开地图复制坐标
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- <el-form-item label="店铺经度" prop="lat">
|
||||
<el-row>
|
||||
<el-col :span="9" v-if="state.form.provinces">
|
||||
<el-input :value="`${state.form.provinces}-${state.form.cities}-${state.form.districts}`" disabled />
|
||||
@@ -97,69 +192,105 @@
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺详细地址">
|
||||
<el-input type="textarea" v-model="state.form.address" placeholder="请输入门店详细地址"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺简介">
|
||||
<el-input type="textarea" v-model="state.form.detail" placeholder="请输入店铺简介"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="state.form.status">
|
||||
<el-radio :value="1">开启</el-radio>
|
||||
<el-radio :value="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-dialog title="选择地址" v-model="state.showLocation" :modal="false" :modal-append-to-body="false">
|
||||
<div class="map_box">
|
||||
<div class="map">
|
||||
<el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
|
||||
<el-amap-marker :position="state.amapOptions.center"></el-amap-marker>
|
||||
</el-amap>
|
||||
</div>
|
||||
<div class="search_box">
|
||||
<el-input v-model="state.searchOption.keyword" placeholder="请输入关键字" @focus="state.searchOption.focus = true"
|
||||
@blur="autoCompleteSearchBlur" @input="autoCompleteSearch(state.searchOption.keyword)">
|
||||
<template #append>
|
||||
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
||||
搜索
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
||||
<div class="item" @click="autoCompleteListClick(item)" v-for="item in state.autoCompleteList"
|
||||
:key="item.id">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search_wrap">
|
||||
<div class="item" v-for="item in state.locationSearchList" :key="item.id">
|
||||
<div class="left">
|
||||
<div class="name">{{ item.name }}-{{ item.address }}</div>
|
||||
<div class="location">经纬度:{{ item.location.lng }},{{ item.location.lat }}</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button type="primary" @click="selectLocationHandle(item)">选择</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="店铺详细地址">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="state.form.address"
|
||||
placeholder="请输入门店详细地址"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺简介">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="state.form.detail"
|
||||
placeholder="请输入店铺简介"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="state.form.status">
|
||||
<el-radio :value="1">开启</el-radio>
|
||||
<el-radio :value="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="选择地址"
|
||||
v-model="state.showLocation"
|
||||
:modal="false"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<div class="map_box">
|
||||
<div class="map">
|
||||
<el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
|
||||
<el-amap-marker :position="state.amapOptions.center"></el-amap-marker>
|
||||
</el-amap>
|
||||
</div>
|
||||
<div class="search_box">
|
||||
<el-input
|
||||
v-model="state.searchOption.keyword"
|
||||
placeholder="请输入关键字"
|
||||
@focus="state.searchOption.focus = true"
|
||||
@blur="autoCompleteSearchBlur"
|
||||
@input="autoCompleteSearch(state.searchOption.keyword)"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
||||
搜索
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
||||
<div
|
||||
class="item"
|
||||
@click="autoCompleteListClick(item)"
|
||||
v-for="item in state.autoCompleteList"
|
||||
:key="item.id"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search_wrap">
|
||||
<div class="item" v-for="item in state.locationSearchList" :key="item.id">
|
||||
<div class="left">
|
||||
<div class="name">{{ item.name }}-{{ item.address }}</div>
|
||||
<div class="location">经纬度:{{ item.location.lng }},{{ item.location.lat }}</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button type="primary" @click="selectLocationHandle(item)">选择</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle" :loading="state.formLoading">
|
||||
<span v-if="!state.formLoading">保存</span>
|
||||
<span v-else>保存中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle" :loading="state.formLoading">
|
||||
<span v-if="!state.formLoading">保存</span>
|
||||
<span v-else>保存中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog title="坐标搜索" v-model="latShow" width="60vw">
|
||||
<iframe
|
||||
style="width: 100%; height: 60vh"
|
||||
src="https://lbs.baidu.com/maptool/getpoint"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="latShow = false">取消</el-button>
|
||||
<el-button type="primary" @click="latConfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -170,6 +301,8 @@ import { initMapLoad } from "@/utils/mapLoadUtil";
|
||||
import { ElNotification } from "element-plus";
|
||||
// { geocode, ShopApi.getList }
|
||||
import ShopApi from "@/api/account/shop";
|
||||
|
||||
const latShow = ref(false);
|
||||
const validateLogo = (rule, value, callback) => {
|
||||
if (!state.form.logo) {
|
||||
callback(new Error("请上传门店logo"));
|
||||
@@ -177,6 +310,28 @@ const validateLogo = (rule, value, callback) => {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
async function latConfirm() {
|
||||
//js获取当前剪贴板内容
|
||||
try {
|
||||
// 核心:异步读取剪贴板文本内容
|
||||
const clipboardText = await navigator.clipboard.readText();
|
||||
|
||||
// 显示获取到的内容
|
||||
console.log("剪贴板内容:", clipboardText);
|
||||
if (clipboardText && clipboardText.indexOf(",") > 0) {
|
||||
const latLng = clipboardText.split(",");
|
||||
state.form.lat = latLng[1];
|
||||
state.form.lng = latLng[0];
|
||||
latShow.value = false;
|
||||
} else [ElMessage.error("请搜索地址后复制经纬度")];
|
||||
} catch (err) {
|
||||
// 捕获异常(用户拒绝权限、浏览器不支持、非交互上下文等)
|
||||
console.error("获取剪贴板失败:", err);
|
||||
}
|
||||
}
|
||||
function openMap() {
|
||||
window.open("https://lbs.baidu.com/maptool/getpoint");
|
||||
}
|
||||
|
||||
const state = reactive({
|
||||
uploadImg: uploadImg,
|
||||
@@ -213,7 +368,7 @@ const state = reactive({
|
||||
chainName: "",
|
||||
isHeadShop: 0,
|
||||
},
|
||||
type: '',
|
||||
type: "",
|
||||
resetForm: "",
|
||||
rules: {
|
||||
activateCode: [
|
||||
@@ -244,6 +399,20 @@ const state = reactive({
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
districts: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择店铺地址",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
lng: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择坐标",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
lat: [
|
||||
{
|
||||
required: true,
|
||||
@@ -311,7 +480,7 @@ onMounted(() => {
|
||||
|
||||
// 获取商家列表
|
||||
async function getTableData(query = "") {
|
||||
console.log(123)
|
||||
console.log(123);
|
||||
state.shopListLoading = true;
|
||||
try {
|
||||
const res = await ShopApi.getList({
|
||||
@@ -360,7 +529,7 @@ function submitHandle() {
|
||||
type: "success",
|
||||
});
|
||||
close();
|
||||
location.reload()
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
state.formLoading = false;
|
||||
console.log(error);
|
||||
@@ -376,7 +545,7 @@ function handleSuccess(response, file, fileList) {
|
||||
state.files = response.data;
|
||||
}
|
||||
|
||||
function show(obj,type) {
|
||||
function show(obj, type) {
|
||||
getTableData();
|
||||
state.dialogVisible = true;
|
||||
if (obj && obj.id) {
|
||||
@@ -386,13 +555,13 @@ function show(obj,type) {
|
||||
if (obj && obj.mainId) {
|
||||
Object.assign(state.form, obj);
|
||||
}
|
||||
if( type ){
|
||||
state.type = type
|
||||
if (type) {
|
||||
state.type = type;
|
||||
}
|
||||
console.log(state.form);
|
||||
console.log(state.type);
|
||||
if( state.form.shopType != 'only'){
|
||||
state.isEdit = true
|
||||
if (state.form.shopType != "only") {
|
||||
state.isEdit = true;
|
||||
}
|
||||
for (let key in state.rules) {
|
||||
if (key === "accountName") {
|
||||
@@ -409,12 +578,12 @@ function close() {
|
||||
state.dialogVisible = false;
|
||||
state.form = { ...state.resetForm };
|
||||
state.type = "";
|
||||
state.isEdit = false
|
||||
state.isEdit = false;
|
||||
}
|
||||
function reset() {
|
||||
state.form = { ...state.resetForm };
|
||||
state.type = "";
|
||||
state.isEdit = false
|
||||
state.isEdit = false;
|
||||
}
|
||||
|
||||
let ElMap = undefined;
|
||||
@@ -551,7 +720,7 @@ defineExpose({
|
||||
.amap-sug-result {
|
||||
z-index: 2000;
|
||||
}
|
||||
.tips{
|
||||
.tips {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user