代客下单页面修改，增加店铺配置页面
This commit is contained in:
217
src/components/ChooseAddress/index.vue
Normal file
217
src/components/ChooseAddress/index.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="选择地址"
|
||||
v-model="state.showLocation"
|
||||
:modal="true"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<div class="map_box">
|
||||
<div class="map">
|
||||
<el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
|
||||
<el-amap-marker :position="state.amapOptions.center"></el-amap-marker>
|
||||
</el-amap>
|
||||
</div>
|
||||
<div class="search_box">
|
||||
<el-input
|
||||
v-model="state.searchOption.keyword"
|
||||
placeholder="请输入关键字"
|
||||
@focus="state.searchOption.focus = true"
|
||||
@blur="autoCompleteSearchBlur"
|
||||
@input="autoCompleteSearch(state.searchOption.keyword)"
|
||||
>
|
||||
<template #append>
|
||||
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
||||
搜索
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
||||
<div
|
||||
class="item"
|
||||
@click="autoCompleteListClick(item)"
|
||||
v-for="item in state.autoCompleteList"
|
||||
:key="item.id"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search_wrap">
|
||||
<div class="item" v-for="item in state.locationSearchList" :key="item.id">
|
||||
<div class="left">
|
||||
<div class="name">{{ item.name }}-{{ item.address }}</div>
|
||||
<div class="location">经纬度：{{ item.location.lng }},{{ item.location.lat }}</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button type="primary" @click="selectLocationHandle(item)">选择</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElAmap } from "@vuemap/vue-amap";
|
||||
import { initMapLoad } from "@/utils/mapLoadUtil";
|
||||
onBeforeMount(async () => {
|
||||
const res = await initMapLoad();
|
||||
});
|
||||
const state = reactive({
|
||||
showLocation: false,
|
||||
amapOptions: {
|
||||
center: [108.946465, 34.347984],
|
||||
position: [],
|
||||
},
|
||||
searchOption: {
|
||||
city: "西安",
|
||||
citylimit: false,
|
||||
keyword: "",
|
||||
show: false,
|
||||
focus: false,
|
||||
},
|
||||
autoCompleteList: [],
|
||||
locationSearchList: [],
|
||||
});
|
||||
let ElMap = undefined;
|
||||
let placeSearch = undefined;
|
||||
let autoComplete = undefined;
|
||||
let PlaceSearchIndex = 1;
|
||||
function open() {
|
||||
state.showLocation = true;
|
||||
}
|
||||
function close() {
|
||||
state.showLocation = false;
|
||||
}
|
||||
|
||||
function autoCompleteSearchBlur() {
|
||||
setTimeout(() => {
|
||||
state.searchOption.show = false;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function autoCompleteSearch(keyword) {
|
||||
if (keyword === "") {
|
||||
state.autoCompleteList = [];
|
||||
return;
|
||||
}
|
||||
autoComplete.search(keyword, function (status, result) {
|
||||
if (status === "complete" && result.info === "OK") {
|
||||
// 搜索成功时，result即是对应的匹配数据
|
||||
console.log(result);
|
||||
state.searchOption.show = true;
|
||||
state.autoCompleteList = result.tips;
|
||||
}
|
||||
});
|
||||
}
|
||||
function autoCompleteListClick(item) {
|
||||
console.log(item);
|
||||
state.searchOption.keyword = item.name;
|
||||
state.autoCompleteList = [];
|
||||
placeSearchSearch(item.name);
|
||||
}
|
||||
function placeSearchSearch(keyword) {
|
||||
PlaceSearchIndex = 1;
|
||||
if (keyword === "") {
|
||||
state.locationSearchList = [];
|
||||
return;
|
||||
}
|
||||
// 关键字查询
|
||||
placeSearch.search(keyword, (status, result) => {
|
||||
console.log(status);
|
||||
console.log(result);
|
||||
state.locationSearchList = result.poiList.pois;
|
||||
});
|
||||
}
|
||||
function mapInit(map) {
|
||||
map.plugin(["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.ToolBar"], () => {
|
||||
const toolBar = new AMap.ToolBar();
|
||||
map.addControl(toolBar);
|
||||
// 注意：输入提示插件2.0版本需引入AMap.AutoComplete，而1.4版本应使用AMap.Autocomplete
|
||||
// 实例化AutoComplete
|
||||
var autoOptions = {
|
||||
city: "西安",
|
||||
};
|
||||
autoComplete = new AMap.AutoComplete(autoOptions);
|
||||
|
||||
//构造地点查询类
|
||||
placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 10, // 单页显示结果条数
|
||||
pageIndex: PlaceSearchIndex, // 页码
|
||||
city: "西安", // 兴趣点城市
|
||||
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||
map: map, // 展现结果的地图实例
|
||||
// panel: "search_wrap", // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
});
|
||||
|
||||
ElMap = map;
|
||||
}
|
||||
|
||||
const emits = defineEmits(["choose"]);
|
||||
function selectLocationHandle(e) {
|
||||
emits("choose", e);
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map_box {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.map {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 3000;
|
||||
.list {
|
||||
background-color: #fff;
|
||||
.item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_wrap {
|
||||
padding: 6px 0;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 12px 0;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 20px;
|
||||
|
||||
.location {
|
||||
color: #999;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amap-sug-result {
|
||||
z-index: 2000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user