feat: ✨ 买家端使用最新地址选择器，默认在config关闭高德地图功能，开启后可继续使用
Yer
parent
552b4c605d
commit
128ad892d1
|
|
@ -12,12 +12,8 @@
|
|||
<i-input v-model="formData.name" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="收件地区" prop="address">
|
||||
<i-input
|
||||
v-model="formData.address"
|
||||
disabled
|
||||
style="width: 600px"
|
||||
></i-input>
|
||||
<Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
|
||||
{{ formData.address || '暂无地址' }}
|
||||
<Button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
|
||||
</FormItem>
|
||||
<FormItem label="详细地址" prop="detail">
|
||||
<i-input v-model="formData.detail" style="width: 600px"></i-input>
|
||||
|
|
@ -43,12 +39,12 @@
|
|||
<Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<lili-map ref="map" @getAddress="getAddress"></lili-map>
|
||||
<multipleMap ref="map" @callback="getAddress"></multipleMap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import liliMap from '@/components/map';
|
||||
import multipleMap from "@/components/map/multiple-map";
|
||||
import {
|
||||
newMemberAddress,
|
||||
editMemberAddress,
|
||||
|
|
@ -129,14 +125,24 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
getAddress (item) {
|
||||
getAddress (val) {
|
||||
// 获取地图选择信息
|
||||
this.mapMsg = item;
|
||||
this.$set(this.formData, 'address', item.addr);
|
||||
this.$set(this.formData, 'consigneeAddressIdPath', item.addrId);
|
||||
this.$set(this.formData, 'detail', item.detail);
|
||||
this.formData.lat = item.position.lat;
|
||||
this.formData.lon = item.position.lng;
|
||||
if(val.type === 'select'){
|
||||
const paths = val.data.map(item => item.name).join(',')
|
||||
const ids = val.data.map(item => item.id).join(',')
|
||||
this.$set(this.formData,'address',paths)
|
||||
this.$set(this.formData,'consigneeAddressIdPath',ids)
|
||||
const coord = val.data[val.data.length - 1].center.split(',')
|
||||
this.formData.lat = coord[1]
|
||||
this.formData.lon = coord[0]
|
||||
}else{
|
||||
this.$set(this.formData, "address", val.data.addr);
|
||||
this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
|
||||
this.$set(this.formData, "detail", val.data.address);
|
||||
this.formData.lat = val.data.position.lat;
|
||||
this.formData.lon = val.data.position.lng;
|
||||
}
|
||||
|
||||
},
|
||||
show () { // 地址模态框显示
|
||||
this.showAddr = true;
|
||||
|
|
@ -158,7 +164,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
liliMap
|
||||
multipleMap
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,114 +1,94 @@
|
|||
<template>
|
||||
<div class="lili-map">
|
||||
<Modal v-model="showMap" title="选择地址" width="800">
|
||||
<div class="map">
|
||||
|
||||
<div class="address">{{ addrContent.address }}</div>
|
||||
<div id="map-container"></div>
|
||||
|
||||
<div class="search-con">
|
||||
<Input
|
||||
placeholder="输入关键字搜索"
|
||||
id="input-map"
|
||||
v-model="mapSearch"
|
||||
/>
|
||||
<Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
|
||||
<ul>
|
||||
<li
|
||||
v-for="(tip, index) in tips"
|
||||
:key="index"
|
||||
@click="selectAddr(tip.location)"
|
||||
>
|
||||
<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>
|
||||
<div slot="footer" class="footer">
|
||||
|
||||
<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';
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { handleRegion } from "@/api/address.js";
|
||||
|
||||
const config = require('@/config/index')
|
||||
export default {
|
||||
name: 'map',
|
||||
props: {
|
||||
useApi: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
name: "map",
|
||||
data() {
|
||||
return {
|
||||
config:require('@/config'),
|
||||
showMap: false, // 展示地图
|
||||
mapSearch: '', // 地图搜索
|
||||
config,
|
||||
showMap: false, // 地图显隐
|
||||
mapSearch: "", // 地图搜索
|
||||
map: null, // 初始化地图
|
||||
autoComplete: null, // 初始化搜索方法
|
||||
geocoder: null, // 初始化地理、坐标转化
|
||||
positionPicker: null, // 地图拖拽选点
|
||||
tips: [], //搜索关键字列表
|
||||
addrContent: {}, // 回显地址信息
|
||||
loading: false // 加载状态
|
||||
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);
|
||||
|
||||
if (this.addrContent && this.addrContent.regeocode) {
|
||||
const params = {
|
||||
cityCode: this.addrContent.regeocode.addressComponent.citycode,
|
||||
townName: this.addrContent.regeocode.addressComponent.township
|
||||
townName: this.addrContent.regeocode.addressComponent.township,
|
||||
};
|
||||
if (this.useApi) {
|
||||
handleRegion(params).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.showMap = false;
|
||||
this.addrContent.addr = res.result.name.replace(/,/g, ' ');
|
||||
this.addrContent.addr = res.result.name.replace(/,/g, " ");
|
||||
this.addrContent.addrId = res.result.id;
|
||||
this.$emit('getAddress', this.addrContent);
|
||||
this.loading = false;
|
||||
|
||||
this.$emit("getAddress", this.addrContent);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.showMap = false;
|
||||
this.$emit('getAddress', this.addrContent);
|
||||
this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
|
||||
}
|
||||
|
||||
},
|
||||
init () { // 初始化地图
|
||||
init() {
|
||||
AMapLoader.load({
|
||||
key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
'AMap.ToolBar',
|
||||
'AMap.Autocomplete',
|
||||
'AMap.PlaceSearch',
|
||||
'AMap.Geolocation',
|
||||
'AMap.Geocoder'
|
||||
"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插件
|
||||
}
|
||||
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
|
||||
this.map = new AMap.Map("map-container", {
|
||||
zoom: 12,
|
||||
});
|
||||
that.map.addControl(new AMap.ToolBar());
|
||||
that.map.addControl(new AMap.Autocomplete());
|
||||
|
|
@ -117,15 +97,15 @@ export default {
|
|||
|
||||
// 实例化Autocomplete
|
||||
let autoOptions = {
|
||||
city: '全国'
|
||||
city: "全国",
|
||||
};
|
||||
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
|
||||
that.geocoder = new AMap.Geocoder(autoOptions);
|
||||
|
||||
that.positionPicker = new AMapUI.PositionPicker({
|
||||
// 拖拽选点
|
||||
mode: 'dragMap',
|
||||
map: that.map
|
||||
mode: "dragMap",
|
||||
map: that.map,
|
||||
});
|
||||
that.positionPicker.start();
|
||||
/**
|
||||
|
|
@ -134,8 +114,7 @@ export default {
|
|||
* 需要字段可以查找
|
||||
*
|
||||
*/
|
||||
that.positionPicker.on('success', function (positionResult) {
|
||||
// console.log(positionResult);
|
||||
that.positionPicker.on("success", function (positionResult) {
|
||||
that.addrContent = positionResult;
|
||||
});
|
||||
})
|
||||
|
|
@ -146,7 +125,7 @@ export default {
|
|||
let that = this;
|
||||
this.autoComplete.search(val, function (status, result) {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
if (status == "complete" && result.info == "OK") {
|
||||
that.tips = result.tips;
|
||||
} else {
|
||||
that.tips = [];
|
||||
|
|
@ -156,16 +135,16 @@ export default {
|
|||
selectAddr(location) {
|
||||
// 选择坐标
|
||||
if (!location) {
|
||||
this.$Message.warning('请选择正确点位');
|
||||
this.$Message.warning("请选择正确点位");
|
||||
return false;
|
||||
}
|
||||
const lnglat = [location.lng, location.lat];
|
||||
this.positionPicker.start(lnglat);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -179,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;
|
||||
|
|
@ -199,6 +182,12 @@ export default {
|
|||
|
||||
.address {
|
||||
margin-bottom: 10px;
|
||||
// color: $theme_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: right;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
<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>
|
||||
|
|
@ -16,6 +16,7 @@ module.exports = {
|
|||
//FIXME 请检查当前高德key创建的日期，如果2021年12月02日之前申请的 无需填写安全密钥
|
||||
aMapSecurityJsCode:"2bd0fbf621881f4c77be74f0e76495f3", // 高德web端js申请的安全密钥
|
||||
aMapKey: "7f11113750315d8543daaf5c3ba353ca", //高德web端js申请的api key
|
||||
aMapSwitch:false, //是否开启高德定位
|
||||
enableCDN: true, //生产环境 是否启用cdn加载 vue等js
|
||||
port: 10000, //端口
|
||||
inputMaxLength:'140' //全局输入框默认最大输入长度字
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
<i-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="收件地区" prop="address">
|
||||
<i-input v-model="formData.address" disabled placeholder="请选择收货地址" style="width: 600px"></i-input>
|
||||
<Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
|
||||
<span>{{ formData.address || '暂无地址' }}</span>
|
||||
|
||||
<Button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</Button>
|
||||
</FormItem>
|
||||
<FormItem label="详细地址" prop="detail">
|
||||
<i-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></i-input>
|
||||
|
|
@ -29,14 +30,15 @@
|
|||
<Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
|
||||
<Button @click="$router.back()">返回</Button>
|
||||
</div>
|
||||
<lili-map ref="map" @getAddress="getAddress"></lili-map>
|
||||
|
||||
<multipleMap ref="map" @callback="getAddress" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from "@/components/card";
|
||||
import liliMap from "@/components/map";
|
||||
|
||||
import multipleMap from "@/components/map/multiple-map";
|
||||
import * as RegExp from "@/plugins/RegExp.js";
|
||||
import {
|
||||
newMemberAddress,
|
||||
|
|
@ -117,15 +119,25 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
getAddress(item) {
|
||||
getAddress(val) {
|
||||
// 获取地图选择信息
|
||||
console.log(item);
|
||||
this.mapMsg = item;
|
||||
this.$set(this.formData, "address", item.addr);
|
||||
this.$set(this.formData, "consigneeAddressIdPath", item.addrId);
|
||||
this.$set(this.formData, "detail", item.detail);
|
||||
this.formData.lat = item.position.lat;
|
||||
this.formData.lon = item.position.lng;
|
||||
if(val.type === 'select'){
|
||||
const paths = val.data.map(item => item.name).join(',')
|
||||
const ids = val.data.map(item => item.id).join(',')
|
||||
this.$set(this.formData,'address',paths)
|
||||
this.$set(this.formData,'consigneeAddressIdPath',ids)
|
||||
const coord = val.data[val.data.length - 1].center.split(',')
|
||||
this.formData.lat = coord[1]
|
||||
this.formData.lon = coord[0]
|
||||
}else{
|
||||
this.$set(this.formData, "address", val.data.addr);
|
||||
this.$set(this.formData, "consigneeAddressIdPath", val.data.addrId);
|
||||
this.$set(this.formData, "detail", val.data.address);
|
||||
this.formData.lat = val.data.position.lat;
|
||||
this.formData.lon = val.data.position.lng;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -134,7 +146,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
card,
|
||||
liliMap,
|
||||
multipleMap
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,8 @@
|
|||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="companyAddressIdPath" label="公司所在地">
|
||||
<region
|
||||
style="width: 250px"
|
||||
@selected="selectedRegion"
|
||||
:addressId="address"
|
||||
/>
|
||||
<span>{{ form.companyAddressPath || '暂无地址' }}</span>
|
||||
<Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
|
||||
</FormItem>
|
||||
<FormItem prop="companyAddress" label="公司详细地址">
|
||||
<Input
|
||||
|
|
@ -187,16 +184,18 @@
|
|||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewPicture" v-if="visible" style="width: 100%" />
|
||||
</Modal>
|
||||
|
||||
<multipleMap ref="map" @callback="getAddress" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { applyFirst } from '@/api/shopentry';
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import region from '@/components/map/region.vue';
|
||||
import multipleMap from "@/components/map/multiple-map";
|
||||
import storage from '@/plugins/storage';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
export default {
|
||||
components: { region },
|
||||
components: { multipleMap },
|
||||
props: {
|
||||
content: {
|
||||
default: {},
|
||||
|
|
@ -209,7 +208,7 @@ export default {
|
|||
accessToken: {}, // 验证token
|
||||
visible: false, // 预览图片
|
||||
loading: false, // 加载状态
|
||||
address: '', // 地址
|
||||
|
||||
previewPicture: '', // 预览图片url
|
||||
form: { // 表单数据
|
||||
legalPhoto: [],
|
||||
|
|
@ -258,6 +257,19 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取店铺地址
|
||||
getAddress(val){
|
||||
if(val.type === 'select'){
|
||||
const paths = val.data.map(item => item.name).join(',')
|
||||
const ids = val.data.map(item => item.id).join(',')
|
||||
this.$set(this.form, 'companyAddressIdPath', ids)
|
||||
this.$set(this.form, 'companyAddressPath', paths)
|
||||
}else{
|
||||
this.$set(this.form, 'companyAddressIdPath', val.data.addrId)
|
||||
this.$set(this.form, 'companyAddressPath', val.data.addr)
|
||||
}
|
||||
},
|
||||
|
||||
// 下一步
|
||||
next () {
|
||||
this.$refs.firstForm.validate((valid) => {
|
||||
|
|
@ -279,15 +291,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 地址选择回显
|
||||
selectedRegion (item) {
|
||||
this.$set(this.form, 'companyAddressIdPath', item[0].toString());
|
||||
this.$set(
|
||||
this.form,
|
||||
'companyAddressPath',
|
||||
item[1].toString().replace(/\s/g, '')
|
||||
);
|
||||
},
|
||||
|
||||
// 上传之前
|
||||
beforeUpload () {
|
||||
this.uploadLoading = true;
|
||||
|
|
@ -354,7 +358,7 @@ export default {
|
|||
if (this.form.licencePhoto) {
|
||||
this.form.legalPhoto = this.content.legalPhoto.split(',');
|
||||
this.form.licencePhoto = this.content.licencePhoto.split(',');
|
||||
this.address = this.form.companyAddressIdPath;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,24 +60,10 @@
|
|||
>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem prop="storeCenter" label="店铺定位">
|
||||
<Button
|
||||
type="info"
|
||||
v-if="!form.storeCenter"
|
||||
@click="$refs.liliMap.showMap = true"
|
||||
>点击获取店铺定位</Button>
|
||||
<Button
|
||||
type="success"
|
||||
v-else
|
||||
@click="$refs.liliMap.showMap = true"
|
||||
>已定位</Button>
|
||||
</FormItem>
|
||||
|
||||
<FormItem prop="storeAddressIdPath" label="店铺所在地">
|
||||
<region
|
||||
style="width: 250px"
|
||||
@selected="selectedRegion"
|
||||
:addressId="address"
|
||||
/>
|
||||
<span>{{ form.storeAddressPath || '暂无地址' }}</span>
|
||||
<Button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</Button>
|
||||
</FormItem>
|
||||
<FormItem prop="storeAddressDetail" label="店铺详细地址">
|
||||
<Input
|
||||
|
|
@ -107,16 +93,20 @@
|
|||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewPicture" v-if="visible" style="width: 100%" />
|
||||
</Modal>
|
||||
<lili-map ref="liliMap" @getAddress="getAddress" :useApi="false"></lili-map>
|
||||
<multipleMap ref="map" @callback="getAddress" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { applyThird } from '@/api/shopentry';
|
||||
import { getCategory } from '@/api/goods';
|
||||
import Map from '@/components/map/index';
|
||||
|
||||
import storage from '@/plugins/storage';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
import region from '@/components/map/region.vue';
|
||||
|
||||
|
||||
import multipleMap from "@/components/map/multiple-map";
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
|
|
@ -124,7 +114,7 @@ export default {
|
|||
type: Object
|
||||
}
|
||||
},
|
||||
components: { liliMap: Map, region },
|
||||
components: { multipleMap },
|
||||
data () {
|
||||
return {
|
||||
loading: false, // 加载状态
|
||||
|
|
@ -132,7 +122,7 @@ export default {
|
|||
action: commonUrl + '/common/common/upload/file', // 上传地址
|
||||
accessToken: {}, // 验证token
|
||||
previewPicture: '', // 预览图片
|
||||
address: '', // 回显地址
|
||||
|
||||
visible: false, // 图片预览
|
||||
form: { // 表单数据
|
||||
storeLogo: []
|
||||
|
|
@ -217,12 +207,22 @@ export default {
|
|||
this.form[listName].splice(index, 1);
|
||||
},
|
||||
// 选择坐标回调
|
||||
getAddress (item) {
|
||||
getAddress (val) {
|
||||
if(val.type === 'select'){
|
||||
const paths = val.data.map(item => item.name).join(',')
|
||||
const ids = val.data.map(item => item.id).join(',')
|
||||
this.$set(this.form, "storeAddressPath", paths);
|
||||
this.$set(this.form, "storeAddressIdPath", ids);
|
||||
this.form.storeCenter = val.data[val.data.length - 1].center
|
||||
}else{
|
||||
this.$set(this.form, "storeAddressPath", val.data.addr);
|
||||
this.$set(this.form, "storeAddressIdPath", val.data.addrId);
|
||||
this.$set(
|
||||
this.form,
|
||||
'storeCenter',
|
||||
item.position.lng + ',' + item.position.lat
|
||||
val.data.position.lng + ',' + val.data.position.lat
|
||||
);
|
||||
}
|
||||
},
|
||||
// 获取商品分类
|
||||
getCategoryList () {
|
||||
|
|
@ -230,15 +230,8 @@ export default {
|
|||
if (res.success) this.categoryList = res.result;
|
||||
});
|
||||
},
|
||||
// 地址选择回显
|
||||
selectedRegion (item) {
|
||||
this.$set(this.form, 'storeAddressIdPath', item[0].toString());
|
||||
this.$set(
|
||||
this.form,
|
||||
'storeAddressPath',
|
||||
item[1].toString().replace(/\s/g, '')
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
|
|
@ -253,7 +246,6 @@ export default {
|
|||
} else {
|
||||
this.form.storeLogo = [];
|
||||
}
|
||||
this.address = this.form.storeAddressIdPath;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
this.$refs.thirdForm.resetFields()
|
||||
|
|
|
|||
Loading…
Reference in New Issue