mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-19 17:35:53 +08:00
feat: ✨ 管理端使用最新地址选择器,默认在config关闭高德地图功能,开启后可继续使用
This commit is contained in:
@@ -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>
|
||||
@@ -1 +0,0 @@
|
||||
export const language = [{ title: "中文",value:1 }, { title: "英文" ,value:2}];
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user