feat: 管理端使用最新地址选择器,默认在config关闭高德地图功能,开启后可继续使用

This commit is contained in:
Yer
2023-08-03 10:37:53 +08:00
parent 8a43335b75
commit 8b33dbe8d7
18 changed files with 246 additions and 239 deletions

View File

@@ -1,55 +0,0 @@
<template>
<div>
<Button @click="enable = true">语言设定</Button>
<Modal v-model="enable" draggable sticky scrollable :mask="false" :title="title">
<Tabs closable type="card" @on-tab-remove="handleTabRemove" :value="language[0].title">
<TabPane v-for="(item,index) in language" :key="index" :label="item.title" :name="item.title">
<Input v-model="item.___i18n" />
</TabPane>
</Tabs>
</Modal>
</div>
</template>
<script>
import {language} from "./languages";
export default {
/**
* tabs 循环的语言内容格式 [{'title':'test','value':'val'}]
*/
props: {
value: {
type: null,
default: "",
},
},
watch: {
language: {
handler(val) {
this.$emit("language", { language: [...val], val: this.value });
},
deep: true,
},
},
data() {
return {
language,
tabVal: "",
enable: false, //是否开启modal
title: "转换语言",
};
},
methods: {
// 删除tab标签将没有用的语音进行删除
handleTabRemove(tab) {
this.language = this.language.filter((item) => {
return item.value != tab;
});
},
},
};
</script>
<style lang="scss" scoped>
</style>

View File

@@ -1 +0,0 @@
export const language = [{ title: "中文",value:1 }, { title: "英文" ,value:2}];

View File

@@ -1,31 +1,23 @@
<template>
<div class="map">
<Modal v-model="showMap" title="选择地址" width="800">
<div class="address">{{ addrContent.address }}</div>
<div id="map-container"></div>
<div class="search-con">
<Input
placeholder="输入关键字搜索"
id="input-map"
v-model="mapSearch"
/>
<ul>
<li
v-for="(tip, index) in tips"
:key="index"
@click="selectAddr(tip.location)"
>
<p>{{ tip.name }}</p>
<p>{{ tip.district + tip.address }}</p>
</li>
</ul>
</div>
<div slot="footer">
<Button type="default" @click="showMap = false">取消</Button>
<Button type="primary" :loading="loading" @click="ok">确定</Button>
</div>
</Modal>
<div class="address">{{ addrContent.address }}</div>
<div id="map-container"></div>
<div class="search-con">
<Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
<ul>
<li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
<p>{{ tip.name }}</p>
<p>{{ tip.district + tip.address }}</p>
</li>
</ul>
</div>
<div slot="footer" class="footer">
<Button type="primary" :loading="loading" @click="ok">确定</Button>
</div>
</div>
</template>
<script>
@@ -34,10 +26,11 @@ import { getRegion } from "@/api/common.js";
const config = require('@/config/index')
export default {
name: "map",
data() {
return {
config,
showMap: false, // modal显隐
showMap: false, // 地图显隐
mapSearch: "", // 地图搜索
map: null, // 初始化地图
autoComplete: null, // 初始化搜索方法
@@ -55,23 +48,26 @@ export default {
},
methods: {
ok() {
// 确定选择
this.loading = true;
const params = {
cityCode: this.addrContent.regeocode.addressComponent.citycode,
townName: this.addrContent.regeocode.addressComponent.township,
};
getRegion(params).then((res) => {
if (res.success) {
this.addrContent.addr = res.result.name.replace(/,/g, " ");
this.addrContent.addrId = res.result.id;
this.loading = false;
this.showMap = false;
this.$emit("getAddress", this.addrContent);
}
});
if (this.addrContent && this.addrContent.regeocode) {
const params = {
cityCode: this.addrContent.regeocode.addressComponent.citycode,
townName: this.addrContent.regeocode.addressComponent.township,
};
getRegion(params).then((res) => {
if (res.success) {
this.addrContent.addr = res.result.name.replace(/,/g, " ");
this.addrContent.addrId = res.result.id;
this.loading = false;
this.$emit("getAddress", this.addrContent);
}
});
} else {
this.$Message.error('未获取到坐标信息请查看高德API配置是否正确')
}
},
// 初始化地图组件
init() {
AMapLoader.load({
key: this.config.aMapKey, // 申请好的Web端开发者Key首次调用 load 时必填
@@ -88,7 +84,8 @@ export default {
version: "1.1", // AMapUI 缺省 1.1
plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
},
}).then((AMap) => {
})
.then((AMap) => {
let that = this;
this.map = new AMap.Map("map-container", {
zoom: 12,
@@ -120,7 +117,8 @@ export default {
that.positionPicker.on("success", function (positionResult) {
that.addrContent = positionResult;
});
}).catch((e) => {});
})
.catch((e) => { });
},
searchOfMap(val) {
// 地图搜索
@@ -160,16 +158,20 @@ export default {
right: 20px;
top: 64px;
width: 260px;
ul {
width: 260px;
height: 400px;
height: 360px;
overflow: scroll;
li {
padding: 5px;
p:nth-child(2) {
color: #999;
font-size: 12px;
}
&:hover {
background-color: #eee;
cursor: pointer;
@@ -183,4 +185,9 @@ export default {
// color: $theme_color;
font-weight: bold;
}
.footer {
text-align: right;
margin: 10px 0;
}
</style>