zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 买家端使用最新地址选择器，默认在config关闭高德地图功能，开启后可继续使用

master
Yer 2023-08-03 16:36:41 +08:00
parent 552b4c605d
commit 128ad892d1
7 changed files with 325 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
buyer/src/components/addressManage/index.vue
View File

@ -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) {
// 获取地图选择信息
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;
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.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>

165
buyer/src/components/map/index.vue
View File

@ -1,114 +1,94 @@
<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="map">
<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 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';
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
}
},
data () {
name: "map",
data() {
return {
config:require('@/config'),
showMap: false, // 展示地图
mapSearch: '', // 地图搜索
config,
showMap: false, // 地图显隐
mapSearch: "", // 地图搜索
map: null, // 初始化地图
autoComplete: null, // 初始化搜索方法
geocoder: null, // 初始化地理、坐标转化
positionPicker: null, // 地图拖拽选点
tips: [], // 搜索关键字列表
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);
const params = {
cityCode: this.addrContent.regeocode.addressComponent.citycode,
townName: this.addrContent.regeocode.addressComponent.township
};
if (this.useApi) {
ok() {
if (this.addrContent && this.addrContent.regeocode) {
const params = {
cityCode: this.addrContent.regeocode.addressComponent.citycode,
townName: this.addrContent.regeocode.addressComponent.township,
};
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,38 +114,37 @@ export default {
* 需要字段可以查找
*
*/
that.positionPicker.on('success', function (positionResult) {
// console.log(positionResult);
that.positionPicker.on("success", function (positionResult) {
that.addrContent = positionResult;
});
})
.catch((e) => {});
.catch((e) => { });
},
searchOfMap (val) {
searchOfMap(val) {
// 地图搜索
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 = [];
}
});
},
selectAddr (location) {
selectAddr(location) {
// 选择坐标
if (!location) {
this.$Message.warning('请选择正确点位');
this.$Message.warning("请选择正确点位");
return false;
}
const lnglat = [location.lng, location.lat];
this.positionPicker.start(lnglat);
}
},
},
mounted () {
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>

147
buyer/src/components/map/multiple-map.vue Normal file
View File

@ -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>

1
buyer/src/config/index.js
View File

@ -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' //全局输入框默认最大输入长度字

38
buyer/src/pages/home/orderCenter/AddAddress.vue
View File

@ -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>

40
buyer/src/pages/shopEntry/FirstApply.vue
View File

@ -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;
}
}
}

68
buyer/src/pages/shopEntry/ThirdApply.vue
View File

@ -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) {
this.$set(
this.form,
'storeCenter',
item.position.lng + ',' + item.position.lat
);
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',
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()