mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 02:15:54 +08:00
commit message
This commit is contained in:
Chopper
201
buyer/src/components/map/index.vue
Normal file
201
buyer/src/components/map/index.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="lili-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>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import { handleRegion } from '@/api/address.js';
|
||||
export default {
|
||||
name: 'map',
|
||||
props: {
|
||||
useApi: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showMap: false, // 展示地图
|
||||
mapSearch: '', // 地图搜索
|
||||
map: null, // 初始化地图
|
||||
autoComplete: null, // 初始化搜索方法
|
||||
geocoder: null, // 初始化地理、坐标转化
|
||||
positionPicker: null, // 地图拖拽选点
|
||||
tips: [], // 搜索关键字列表
|
||||
addrContent: {}, // 回显地址信息
|
||||
loading: false // 加载状态
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mapSearch: function (val) {
|
||||
this.searchOfMap(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
// 确定选择
|
||||
this.loading = true;
|
||||
const address = this.addrContent.address;
|
||||
const township = this.addrContent.regeocode.addressComponent.township;
|
||||
const index = address.indexOf(township) + township.length;
|
||||
this.addrContent.detail = address.substring(index);
|
||||
const params = {
|
||||
cityCode: this.addrContent.regeocode.addressComponent.citycode,
|
||||
townName: this.addrContent.regeocode.addressComponent.township
|
||||
};
|
||||
if (this.useApi) {
|
||||
handleRegion(params).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
this.showMap = false;
|
||||
this.addrContent.addr = res.result.name.replace(/,/g, ' ');
|
||||
this.addrContent.addrId = res.result.id;
|
||||
this.$emit('getAddress', this.addrContent);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.showMap = false;
|
||||
this.$emit('getAddress', this.addrContent);
|
||||
}
|
||||
},
|
||||
init () {
|
||||
AMapLoader.load({
|
||||
key: 'b440952723253aa9fe483e698057bf7d', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
'AMap.ToolBar',
|
||||
'AMap.Autocomplete',
|
||||
'AMap.PlaceSearch',
|
||||
'AMap.Geolocation',
|
||||
'AMap.Geocoder'
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: '1.1', // AMapUI 缺省 1.1
|
||||
plugins: ['misc/PositionPicker'] // 需要加载的 AMapUI ui插件
|
||||
}
|
||||
})
|
||||
.then((AMap) => {
|
||||
let that = this;
|
||||
this.map = new AMap.Map('map-container', {
|
||||
zoom: 12
|
||||
});
|
||||
that.map.addControl(new AMap.ToolBar());
|
||||
that.map.addControl(new AMap.Autocomplete());
|
||||
that.map.addControl(new AMap.PlaceSearch());
|
||||
that.map.addControl(new AMap.Geocoder());
|
||||
|
||||
// 实例化Autocomplete
|
||||
let autoOptions = {
|
||||
city: '全国'
|
||||
};
|
||||
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
|
||||
that.geocoder = new AMap.Geocoder(autoOptions);
|
||||
|
||||
that.positionPicker = new AMapUI.PositionPicker({
|
||||
// 拖拽选点
|
||||
mode: 'dragMap',
|
||||
map: that.map
|
||||
});
|
||||
that.positionPicker.start();
|
||||
/**
|
||||
*
|
||||
* 所有回显数据，都在positionResult里面
|
||||
* 需要字段可以查找
|
||||
*
|
||||
*/
|
||||
that.positionPicker.on('success', function (positionResult) {
|
||||
// console.log(positionResult);
|
||||
that.addrContent = positionResult;
|
||||
});
|
||||
})
|
||||
.catch((e) => {});
|
||||
},
|
||||
searchOfMap (val) {
|
||||
// 地图搜索
|
||||
let that = this;
|
||||
this.autoComplete.search(val, function (status, result) {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
that.tips = result.tips;
|
||||
} else {
|
||||
that.tips = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
selectAddr (location) {
|
||||
// 选择坐标
|
||||
if (!location) {
|
||||
this.$Message.warning('请选择正确点位');
|
||||
return false;
|
||||
}
|
||||
const lnglat = [location.lng, location.lat];
|
||||
this.positionPicker.start(lnglat);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#map-container {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.search-con {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 64px;
|
||||
width: 260px;
|
||||
ul {
|
||||
width: 260px;
|
||||
height: 400px;
|
||||
overflow: scroll;
|
||||
li {
|
||||
padding: 5px;
|
||||
p:nth-child(2) {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
186
buyer/src/components/map/region.vue
Normal file
186
buyer/src/components/map/region.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<Cascader
|
||||
:data="data"
|
||||
:load-data="loadData"
|
||||
v-model="addr"
|
||||
@on-change="change"
|
||||
style="width: 300px"
|
||||
></Cascader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getRegion} from '@/api/common.js';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: [], // 地区数据
|
||||
addr: [] // 已选数据
|
||||
};
|
||||
},
|
||||
props: ['addressId'],
|
||||
mounted () {},
|
||||
methods: {
|
||||
change (val, selectedData) {
|
||||
/**
|
||||
* @returns [regionId,region]
|
||||
*/
|
||||
this.$emit('selected', [
|
||||
val,
|
||||
selectedData[selectedData.length - 1].__label.split('/')
|
||||
]);
|
||||
},
|
||||
loadData (item, callback) {
|
||||
item.loading = true;
|
||||
getRegion(item.value).then((res) => {
|
||||
if (res.result.length <= 0) {
|
||||
item.loading = false;
|
||||
} else {
|
||||
res.result.forEach((child) => {
|
||||
item.loading = false;
|
||||
|
||||
let data = {
|
||||
value: child.id,
|
||||
label: child.name,
|
||||
loading: false,
|
||||
children: []
|
||||
};
|
||||
|
||||
if (child.level === 'street' || item.label === '香港特别行政区') {
|
||||
item.children.push({
|
||||
value: child.id,
|
||||
label: child.name
|
||||
});
|
||||
} else {
|
||||
item.children.push(data);
|
||||
}
|
||||
});
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
async init () {
|
||||
let data = await getRegion(0);
|
||||
let arr = [];
|
||||
data.result.forEach((item) => {
|
||||
let obj;
|
||||
// 台湾省做处理
|
||||
if (item.name === '台湾省') {
|
||||
obj = {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
};
|
||||
} else {
|
||||
obj = {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
loading: false,
|
||||
children: []
|
||||
};
|
||||
}
|
||||
arr.push(obj);
|
||||
});
|
||||
this.data = arr;
|
||||
console.warn('init');
|
||||
},
|
||||
async reviewData () {
|
||||
// 数据回显
|
||||
let addr = JSON.parse(JSON.stringify(this.addressId.split(',')));
|
||||
let length = addr.length;
|
||||
let data = await getRegion(0);
|
||||
let arr0 = [];
|
||||
let arr1 = [];
|
||||
let arr2 = [];
|
||||
// 第一级数据
|
||||
data.result.forEach((item) => {
|
||||
let obj;
|
||||
// 台湾省做处理
|
||||
if (item.name === '台湾省') {
|
||||
obj = {
|
||||
value: item.id,
|
||||
label: item.name
|
||||
};
|
||||
} else {
|
||||
obj = {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
loading: false,
|
||||
children: []
|
||||
};
|
||||
}
|
||||
arr0.push(obj);
|
||||
});
|
||||
// 根据选择的数据来加载数据列表
|
||||
if (length > 0) {
|
||||
let children = await getRegion(addr[0]);
|
||||
children = this.handleData(children.result);
|
||||
arr0.forEach((e) => {
|
||||
if (e.value === addr[0]) {
|
||||
e.children = arr1 = children;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (length > 1) {
|
||||
let children = await getRegion(addr[1]);
|
||||
children = this.handleData(children.result);
|
||||
arr1.forEach((e) => {
|
||||
if (e.value === addr[1]) {
|
||||
e.children = arr2 = children;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (length > 2) {
|
||||
let children = await getRegion(addr[2]);
|
||||
children = this.handleData(children.result);
|
||||
arr2.forEach((e) => {
|
||||
if (e.value === addr[2]) {
|
||||
e.children = children;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.data = arr0;
|
||||
this.addr = addr;
|
||||
},
|
||||
handleData (data) {
|
||||
// 处理接口数据
|
||||
let item = [];
|
||||
data.forEach((child) => {
|
||||
let obj = {
|
||||
value: child.id,
|
||||
label: child.name,
|
||||
loading: false,
|
||||
children: []
|
||||
};
|
||||
|
||||
if (child.level === 'street' || item.label === '香港特别行政区') {
|
||||
item.push({
|
||||
value: child.id,
|
||||
label: child.name
|
||||
});
|
||||
} else {
|
||||
item.push(obj);
|
||||
}
|
||||
});
|
||||
return item;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
addressId: {
|
||||
handler: function (v) {
|
||||
console.log(v);
|
||||
if (v) {
|
||||
this.reviewData();
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
addr (v) {
|
||||
console.log(v);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Reference in New Issue
Block a user