131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="gg-header">
|
|||
|
|
<view class="gg-header-location u-p-r-50" @click="show = true">
|
|||
|
|
<text class="u-p-r-10">{{ currentPickUpArea }}</text>
|
|||
|
|
<u-icon color="gray" name="arrow-down-fill" size="20"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<!-- 如果利用v-model操作，会造成searchKeyword对于父组件的二次重渲染问题，所以将value与blur拆分，
|
|||
|
|
并且利用update:searchKeyword的方式将数据传递到父组件，并进行本组件的数据搜索操作 -->
|
|||
|
|
<u-search
|
|||
|
|
:clearabled="false"
|
|||
|
|
:show-action="true"
|
|||
|
|
:value="searchKeyword"
|
|||
|
|
class="gg-header-search"
|
|||
|
|
height="70"
|
|||
|
|
input-align="left"
|
|||
|
|
@blur="onBlurSearch"
|
|||
|
|
@custom="searchLocation"
|
|||
|
|
@search="searchLocation"
|
|||
|
|
></u-search>
|
|||
|
|
<u-picker v-model="show" :default-selector="[0]" :range="findAllList" mode="selector" range-key="regionName"
|
|||
|
|
@confirm="findAllListConfirm"></u-picker>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {mapState, mapMutations, mapActions} from 'vuex';
|
|||
|
|
import {BAIDU_MAP_AK} from '../../common/const.js';
|
|||
|
|
// 百度地址资料：https://lbsyun.baidu.com/index.php?title=wxjsapi/guide/geocoding
|
|||
|
|
const bmap = require('../../common/bmap-wx.min.js');
|
|||
|
|
const BMap = new bmap.BMapWX({
|
|||
|
|
ak: BAIDU_MAP_AK
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'PickUpLocationHeader',
|
|||
|
|
props: ['searchKeyword'],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false,
|
|||
|
|
latitude: '',
|
|||
|
|
longitude: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState('pickUpLocationModule', ['findAllList', 'currentPickUpArea'])
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations('pickUpLocationModule', ['setCurrentPickUpAreaMutation']),
|
|||
|
|
...mapActions('pickUpLocationModule', ['getSysRegionFindAllListAction']),
|
|||
|
|
findAllListConfirm(index) {
|
|||
|
|
// 通过百度地图进行地址解析，返回经纬度，并通知父组件进行列表显示处理
|
|||
|
|
// 发起geocoding检索请求
|
|||
|
|
BMap.geocoding({
|
|||
|
|
address: this.findAllList[index],
|
|||
|
|
fail: e => {
|
|||
|
|
console.log(e);
|
|||
|
|
},
|
|||
|
|
success: data => {
|
|||
|
|
let wxMarkerData = data.wxMarkerData;
|
|||
|
|
this.latitude = wxMarkerData[0].latitude;
|
|||
|
|
this.longitude = wxMarkerData[0].longitude;
|
|||
|
|
// 通过父组件查询数据
|
|||
|
|
this.$emit('getSearchLeader', {
|
|||
|
|
latitude: this.latitude,
|
|||
|
|
longitude: this.longitude
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.setCurrentPickUpAreaMutation(this.findAllList[index])
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
searchLocation(value) {
|
|||
|
|
if (value && value.trim().length > 0) {
|
|||
|
|
BMap.geocoding({
|
|||
|
|
address: value,
|
|||
|
|
fail: e => {
|
|||
|
|
console.log(e);
|
|||
|
|
},
|
|||
|
|
success: data => {
|
|||
|
|
let wxMarkerData = data.wxMarkerData;
|
|||
|
|
this.latitude = wxMarkerData[0].latitude;
|
|||
|
|
this.longitude = wxMarkerData[0].longitude;
|
|||
|
|
|
|||
|
|
// 通过父组件查询数据
|
|||
|
|
this.$emit('getSearchLeader', {
|
|||
|
|
latitude: this.latitude,
|
|||
|
|
longitude: this.longitude
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onBlurSearch(value) {
|
|||
|
|
this.$emit('update:searchKeyword', value);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
searchKeyword: {
|
|||
|
|
handler(newVal, oldVal) {
|
|||
|
|
console.log(newVal, oldVal)
|
|||
|
|
this.searchLocation(newVal);
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getSysRegionFindAllListAction();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.gg {
|
|||
|
|
&-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
&-location {
|
|||
|
|
text {
|
|||
|
|
color: gray;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-search {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|