xlcs/xlcs-user/components/PickUpLocationHeader/PickUpLocationHeader.vue

131 lines
3.6 KiB
Vue
Raw Permalink Normal View History

2023-09-22 15:41:37 +08:00
<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>