148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<template>
|
||
<Modal width="800" footer-hide v-model="enableMap">
|
||
<RadioGroup @on-change="changeMap" v-model="mapDefault" type="button">
|
||
<Radio label="select">级联选择</Radio>
|
||
<Radio label="map" v-if="aMapSwitch">高德地图</Radio>
|
||
</RadioGroup>
|
||
<div>
|
||
<div v-if="mapDefault === 'select'">
|
||
<div class="selector">
|
||
<div class="selector-item" v-for="(plant, plantIndex) in Object.keys(data)" :key="plantIndex">
|
||
<div :class="{ 'active': chiosend[plantIndex].id == item.id }" v-for="(item, index) in data[plant]"
|
||
:key="index"
|
||
@click="init(item, plantIndex != Object.keys(data).length - 1 ? Object.keys(data)[plantIndex + 1] : 0, plantIndex)"
|
||
class="map-item">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="footer">
|
||
<Button type="primary" @click="finished">确定</Button>
|
||
</div>
|
||
</div>
|
||
<mapping v-if="mapDefault === 'map'" ref="map" @getAddress="getAddress" />
|
||
|
||
</div>
|
||
|
||
|
||
</Modal>
|
||
</template>
|
||
|
||
<script>
|
||
import { aMapSwitch } from '@/config/index'
|
||
import mapping from "@/components/map/index.vue";
|
||
import * as API_Setup from "@/api/common.js";
|
||
export default {
|
||
components: { mapping },
|
||
data() {
|
||
return {
|
||
aMapSwitch,
|
||
enableMap: false,
|
||
mapDefault: "select",
|
||
data: {
|
||
province: [], //省
|
||
city: [], //市
|
||
area: [], //区
|
||
street: [], //街道
|
||
},
|
||
chiosend: [],
|
||
|
||
};
|
||
},
|
||
mounted() {
|
||
|
||
this.chiosend = new Array(4).fill("");
|
||
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.enableMap = true
|
||
this.init({ id: 0 }, 'province');
|
||
},
|
||
changeMap(val) {
|
||
this.mapDefault = val
|
||
|
||
|
||
},
|
||
init(val, level = 'province', index) {
|
||
if (level == 0) {
|
||
// 说明选择到了街道，将街道id存入数组
|
||
this.chiosend.splice(3, 1, val);
|
||
}
|
||
else {
|
||
API_Setup.getRegion(val.id).then((res) => {
|
||
if (res.result.length && val.id !== 0) {
|
||
this.chiosend[index] = val
|
||
}
|
||
this.data[level] = res.result;
|
||
if (level == 'city') {
|
||
this.data.area = []
|
||
this.data.street = []
|
||
}
|
||
if (level == 'area') {
|
||
this.data.street = []
|
||
}
|
||
});
|
||
}
|
||
},
|
||
getAddress(center) {
|
||
this.$emit('callback', {
|
||
type: this.mapDefault,
|
||
data: center
|
||
})
|
||
this.enableMap = false;
|
||
},
|
||
// 选择完成
|
||
finished() {
|
||
if(!this.chiosend[0]){
|
||
this.$Message.error("请选择地址")
|
||
return
|
||
}
|
||
const params = this.chiosend.filter((item) => item!=="" && item.value !== "");
|
||
this.enableMap = false;
|
||
this.$emit('callback', {
|
||
type: this.mapDefault,
|
||
data: params
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.selector {
|
||
|
||
|
||
height: 400px;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
}
|
||
|
||
.selector-item {
|
||
width: 100%;
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
|
||
.map-item {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background: #eee;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background: #eee;
|
||
}
|
||
|
||
.footer {
|
||
text-align: right;
|
||
margin: 10px 0;
|
||
}
|
||
</style>
|