修正项目
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="gg u-p-20">
|
||||
<!-- 利用.sync修饰符，将searchKeyword传递到子组件 -->
|
||||
<PickUpLocationHeader :searchKeyword.sync="searchKeyword" @getSearchLeader="getSearchLeader"/>
|
||||
|
||||
<u-gap height="20"/>
|
||||
|
||||
<map id="pickUpLocationMap" :latitude="latitude" :longitude="longitude" :markers="covers" :scale="scale"
|
||||
class="gg-location-map" show-location @markertap="mapMarkertap"></map>
|
||||
|
||||
<view class="gg-location">
|
||||
<!-- 利用scroll-into-view进行选中提货点的定位操作 -->
|
||||
<scroll-view :scroll-into-view="`map-${markerId}`" class="gg-location-scroll" scroll-with-animation scroll-y
|
||||
@scrolltolower="loadMore">
|
||||
<block v-if="searchResult.content.length > 0">
|
||||
<view v-for="(item, index) in searchResult.content" :id="`map-${item.id}`" :key="item.id" class="u-m-b-20">
|
||||
<PickUpLocationItem
|
||||
:isCurrent="checkIsCurrent(item.id)"
|
||||
:location="item"
|
||||
:selected="markerId === item.id"
|
||||
@selectPickUpLocation="selectPickUpLocation"
|
||||
></PickUpLocationItem>
|
||||
</view>
|
||||
</block>
|
||||
<u-empty v-else mode="list"></u-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="gg-confirm-pick-up-location">
|
||||
<u-button type="warning">确认提货点</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
filter: {
|
||||
page: 1, // 当前页码
|
||||
limit: 5, // 每页记录数
|
||||
latitude: '', // 经度
|
||||
longitude: '' // 纬度
|
||||
},
|
||||
searchResult: {
|
||||
content: [],
|
||||
last: false
|
||||
},
|
||||
scale: 12, // 缩放尺寸
|
||||
markerId: 0, // 当前选中标记
|
||||
covers: [
|
||||
{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
iconPath: '/static/images/location.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState('pickUpLocationModule', ['leaderAddressVo']),
|
||||
...mapGetters('pickUpLocationModule', ['checkIsCurrent'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('pickUpLocationModule', ['selectLeaderAddressVoAction']),
|
||||
async getSearchLeader(data) {
|
||||
// 查询数据
|
||||
if (data) {
|
||||
Object.assign(this.$data.searchResult, this.$options.data().searchResult); // 这里重置 searchResult 下的所有数据
|
||||
Object.assign(this.$data.filter, this.$options.data().filter); // 这里重置 filter 下的所有数据
|
||||
}
|
||||
this.filter.latitude = data ? data.latitude : this.filter.latitude;
|
||||
this.filter.longitude = data ? data.longitude : this.filter.longitude;
|
||||
|
||||
const o = {
|
||||
limit: this.filter.limit,
|
||||
page: this.filter.page,
|
||||
longitude: this.filter.longitude,
|
||||
latitude: this.filter.latitude
|
||||
};
|
||||
|
||||
let result = await this.$u.api.getSearchLeader(o);
|
||||
this.searchResult = {...result, content: [...this.searchResult.content, ...result.content]};
|
||||
|
||||
// marker标记点的设置
|
||||
if (this.searchResult.content.length > 0) {
|
||||
let covers = [];
|
||||
this.searchResult.content.map(item => {
|
||||
covers.push({
|
||||
id: item.id,
|
||||
latitude: item.location.lat,
|
||||
longitude: item.location.lon,
|
||||
iconPath: '/static/images/location.png',
|
||||
width: 30,
|
||||
height: 30
|
||||
});
|
||||
});
|
||||
|
||||
// 需要将查询结果地图上标识
|
||||
this.covers = covers;
|
||||
// 先将位置移动到第一个位置
|
||||
let latitude = this.searchResult.content[0].location.lat;
|
||||
let longitude = this.searchResult.content[0].location.lon;
|
||||
this.pickUpLocationMapCtx.moveToLocation({latitude, longitude}); // 移动到该位置
|
||||
this.scale = 12;
|
||||
}
|
||||
},
|
||||
// 加载更多数据
|
||||
loadMore() {
|
||||
if (!this.searchResult.last) {
|
||||
this.filter.page = this.filter.page + 1;
|
||||
this.getSearchLeader();
|
||||
}
|
||||
},
|
||||
// 标记点点击操作
|
||||
mapMarkertap({detail: {markerId}}) {
|
||||
this.markerId = markerId
|
||||
},
|
||||
// 选择提货点
|
||||
selectPickUpLocation(leaderId) {
|
||||
this.selectLeaderAddressVoAction({leaderId});
|
||||
},
|
||||
},
|
||||
onReady: function (e) {
|
||||
this.pickUpLocationMapCtx = uni.createMapContext('pickUpLocationMap');
|
||||
},
|
||||
mounted() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: async res => {
|
||||
this.covers[0]['latitude'] = res.latitude;
|
||||
this.covers[0]['longitude'] = res.longitude;
|
||||
|
||||
// 通过网页接口从经纬度获取地址信息
|
||||
// 会报：Unhandled promise rejection的错误，可以利用trycatch在error阶段获取数据
|
||||
try {
|
||||
const result = await this.$u.api.getBaiduMapAddress({latitude: res.latitude, longitude: res.longitude});
|
||||
} catch (error) {
|
||||
this.searchKeyword = error.result.addressComponent.district + error.result.addressComponent.street;
|
||||
}
|
||||
|
||||
this.pickUpLocationMapCtx.moveToLocation();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* 地图设置 */
|
||||
&-location-map {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120rpx - 400rpx - 140rpx);
|
||||
}
|
||||
|
||||
/* 滚动区域 */
|
||||
&-location {
|
||||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
&-scroll {
|
||||
height: 400rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
xlcs-user/pagesLocation/myPickUpLocation/myPickUpLocation.vue
Normal file
110
xlcs-user/pagesLocation/myPickUpLocation/myPickUpLocation.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="gg u-p-20">
|
||||
<PickUpLocationHeader @getSearchLeader="getSearchLeader" />
|
||||
<view v-if="leaderAddressVo" class="gg-current-location-container u-m-t-20">
|
||||
<PickUpLocationItem :isCurrent="checkIsCurrent(leaderAddressVo.leaderId)" :location="leaderAddressVo">
|
||||
</PickUpLocationItem>
|
||||
</view>
|
||||
|
||||
<scroll-view class="gg-location-sv-container" scroll-y @scrolltolower="loadMore">
|
||||
<block v-if="searchResult.content.length > 0">
|
||||
<view v-for="(item, index) in searchResult.content" :key="item.id" class="u-m-b-20">
|
||||
<PickUpLocationItem :isCurrent="checkIsCurrent(item.id)" :location="item"
|
||||
@selectPickUpLocation="selectPickUpLocation"></PickUpLocationItem>
|
||||
</view>
|
||||
</block>
|
||||
<u-empty v-else mode="list"></u-empty>
|
||||
</scroll-view>
|
||||
|
||||
<u-button type="warning" @click="choosePickUpLocation">搜索并选择其它提货点</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
filter: {
|
||||
page: 1, // 当前页码
|
||||
limit: 5, // 每页记录数
|
||||
latitude: '', // 经度
|
||||
longitude: '' // 纬度
|
||||
},
|
||||
searchResult: {
|
||||
content: [], // 搜索的结果
|
||||
last: false // 是否已经最后
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState('pickUpLocationModule', ['leaderAddressVo']),
|
||||
...mapGetters('pickUpLocationModule', ['checkIsCurrent'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('pickUpLocationModule', ['selectLeaderAddressVoAction']),
|
||||
async getSearchLeader(data) {
|
||||
if (data) {
|
||||
Object.assign(this.$data.searchResult, this.$options.data()
|
||||
.searchResult); // 这里重置 searchResult 下的所有数据
|
||||
Object.assign(this.$data.filter, this.$options.data().filter); // 这里重置 filter 下的所有数据
|
||||
}
|
||||
|
||||
this.filter.latitude = data ? data.latitude : this.filter.latitude;
|
||||
this.filter.longitude = data ? data.longitude : this.filter.longitude;
|
||||
|
||||
const o = {
|
||||
limit: this.filter.limit,
|
||||
page: this.filter.page,
|
||||
longitude: this.filter.longitude,
|
||||
latitude: this.filter.latitude
|
||||
};
|
||||
|
||||
let result = await this.$u.api.getSearchLeader(o);
|
||||
this.searchResult = {
|
||||
...result,
|
||||
content: [...this.searchResult.content, ...result.content]
|
||||
};
|
||||
},
|
||||
// 加载更多数据
|
||||
loadMore() {
|
||||
if (!this.searchResult.last) {
|
||||
this.filter.page = this.filter.page + 1;
|
||||
this.getSearchLeader();
|
||||
}
|
||||
},
|
||||
// 选择提货点
|
||||
selectPickUpLocation(leaderId) {
|
||||
if (leaderId) this.selectLeaderAddressVoAction({
|
||||
leaderId
|
||||
});
|
||||
},
|
||||
// 选择其它提货点
|
||||
choosePickUpLocation() {
|
||||
this.$u.route('/pagesLocation/choosePickUpLocation/choosePickUpLocation');
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
&-current-location-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-location-sv-container {
|
||||
height: calc(100vh - 450rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user