<template>
|
<GlobalWindow
|
:title="title"
|
width="70%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<div>
|
<el-form-item label="所属区域" prop="provinceCode" label-width="100px">
|
<div class="address-plus">
|
<el-select v-model="form.provinceCode" placeholder="请选择省份" @change="selectProvince" style="width:150px; margin-right: 25px" >
|
<el-option
|
v-for="item in provinces"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
<el-select v-model="form.cityCode" placeholder="请选择城市" @change="selectCity" style="width:150px; margin-right: 25px">
|
<el-option
|
v-for="item in cities"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
<el-select v-model="form.areaCode" placeholder="请选择县区" @change="selectArea" style="width:150px; margin-right: 22px">
|
<el-option
|
v-for="item in areas"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</div>
|
</el-form-item>
|
</div>
|
<el-form-item label="联系人" prop="linkerName" label-width="100px">
|
<el-input v-model="form.linkerName" placeholder="请输入联系人" v-trim style="width:500px; "/>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="linkPhone" label-width="100px">
|
<el-input v-model="form.linkPhone" placeholder="请输入联系电话" v-trim style="width:500px; "/>
|
</el-form-item>
|
<el-form-item label="详细地址" prop="address" label-width="100px">
|
<el-input v-model="form.address" placeholder="请输入详细地址" v-trim style="width:500px; " @blur="changeMapCenter"/>
|
</el-form-item>
|
<el-form-item label="经纬度" prop="posInfo" label-width="100px">
|
<el-input v-model="form.longitude" clearable placeholder="点击地图获取经度" v-trim style="width:245px; "/>-
|
<el-input v-model="form.latitude" clearable placeholder="点击地图获取维度" v-trim style="width:245px; "/>
|
</el-form-item>
|
</el-form>
|
<div class="map-box">
|
<div id="mapContainer" ref="mapContainer" style="width:80%;margin-left:10%;height:400px;overflow: hidden;" ></div>
|
<div class="map-search">
|
<el-input v-model="searchValue" placeholder="请输入要检索的位置信息" />
|
<el-button @click="searchAddress(searchValue)" type="primary">搜索</el-button>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { jsonp } from 'vue-jsonp'
|
|
export default {
|
name: 'OperaShopWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
geocoder: null,
|
map: [],
|
searchValue: '',
|
marker: null,
|
// 表单数据
|
provinces: [],
|
cities: [],
|
areas: [],
|
form: {
|
id: null,
|
provinceId: '',
|
provinceCode: '',
|
provinceName: '',
|
cityCode: '',
|
cityId: '',
|
cityName: '',
|
areaId: '',
|
areaCode: '',
|
areaName: '',
|
longitude: '',
|
latitude: '',
|
address: '',
|
linkPhone: '',
|
posInfo: '',
|
linkerName: ''
|
},
|
geolocation: null,
|
// 验证规则
|
rules: {
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/shop',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
searchAddress () {
|
if ( this.searchValue) {
|
var that = this
|
jsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
|
address: this.searchValue,
|
key: 'HIDBZ-2QXL4-TAWUD-XET6Q-EKTJE-CCBSQ',
|
output: 'jsonp'
|
}).then(result => {
|
console.log(result)
|
if(result.result.location){
|
that.changePostion(result.result.location.lng, result.result.location.lat)
|
}
|
}).catch(error => {
|
// 请求失败处理
|
console.log(error)
|
})
|
}
|
},
|
initMap (lat, long) {
|
const that = this
|
var center = new qq.maps.LatLng(lat || 39.916527, long || 116.397128)// 默认北京天安门
|
this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
|
center: center,
|
zoom: 17
|
})
|
this.changePostion(long, lat)
|
qq.maps.event.addListener(this.map, 'click',
|
function (event) {
|
that.changePostion(event.latLng.lng, event.latLng.lat)
|
}
|
)
|
/* this.geocoder = new qq.maps.Geocoder()
|
this.geocoder.setComplete(function (result) {
|
that.changePostion(result.detail.location.lng, result.detail.location.lat)
|
})
|
// 若服务请求失败，则运行以下函数
|
this.geocoder.setError(function (e) {
|
console.log(that.searchValue + '=====逆解析失败')
|
})*/
|
},
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.form.provinceId = ''
|
this.form.cityId = ''
|
this.searchValue = ''
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
this.loadProvince(this.form.provinceId, true)
|
})
|
return
|
}
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.loadProvince(this.form.provinceId, true)
|
const mapContainer = this.$refs.mapContainer // 获取地图容器
|
if (mapContainer) {
|
// 初始化地图之前检查容器是否存在
|
this.initMap(this.form.latitude, this.form.longitude)
|
// 初始化腾讯地图
|
}
|
})
|
},
|
loadProvince () {
|
this.api.areaList({ pid: '1' })
|
.then(res => {
|
this.provinces = res
|
})
|
if (this.form.provinceCode) {
|
this.selectProvince(this.form.provinceCode, true)
|
}
|
},
|
// 选择省份
|
selectProvince (val, isInit) {
|
this.provinces.forEach(item => {
|
if (item.id == val) {
|
this.form.provinceName = item.name
|
}
|
})
|
this.cities = []
|
this.areas = []
|
if (!isInit) {
|
this.form.cityName = ''
|
this.form.areaCode = ''
|
this.form.cityCode = ''
|
this.form.areaName = ''
|
}
|
if (!val || val == '') {
|
return
|
}
|
this.api.areaList({ pid: val })
|
.then(res => {
|
this.cities = res
|
if (isInit) {
|
this.selectCity(this.form.cityCode, isInit)
|
}
|
})
|
},
|
// 选择城市
|
selectCity (val, isInit) {
|
this.cities.forEach(item => {
|
if (item.id == val) {
|
this.form.cityName = item.name
|
}
|
})
|
this.areas = []
|
if (!isInit) {
|
this.form.areaCode = ''
|
this.form.areaName = ''
|
}
|
if (!val || val == '') {
|
return
|
}
|
this.api.areaList({ pid: val })
|
.then(res => {
|
this.areas = res
|
})
|
},
|
selectArea (val) {
|
this.areas.forEach(item => {
|
if (item.id == val) {
|
this.form.areaName = item.name
|
}
|
})
|
},
|
changeMapCenter () {
|
this.searchValue = (this.form.provinceName || '') + (this.form.cityName || '') + (this.form.areaName || '') + (this.form.address || '')
|
this.searchAddress()
|
},
|
changePostion (lng, lat) {
|
if (lng || lat) {
|
this.form.longitude = lng
|
this.form.latitude = lat
|
if (this.map) {
|
if (this.marker) {
|
this.marker.setMap(null)
|
}
|
var pos = new qq.maps.LatLng(lat, lng)
|
this.map.setCenter(pos)
|
this.marker = new qq.maps.Marker({
|
position: pos,
|
animation: qq.maps.MarkerAnimation.DROP,
|
map: this.map
|
})
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.map-box {
|
position: relative;
|
}
|
.map-search {
|
z-index: 1000;
|
display: flex;
|
position: absolute;
|
top: 20px;
|
left: 120px;
|
width: 350px;
|
}
|
button {
|
border-radius: 0;
|
}
|
</style>
|
