|
|
@@ -0,0 +1,237 @@
|
|
|
+<template>
|
|
|
+ <div class="app-area-sel">
|
|
|
+ <bottom-popup class="popup-wrap" :show="show" @close="hidePopup">
|
|
|
+ <div class="map-wrap">
|
|
|
+ <div class="map-top-tit-wrap">
|
|
|
+ <div class="map-top-tit">选择收货地址</div>
|
|
|
+ <app-close icon="iconguanbi" @close="hidePopup" />
|
|
|
+ </div>
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <div class="map-search">
|
|
|
+ <app-search-module placeholder="请输入你的收货地址" />
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <div class="map-box">
|
|
|
+ <map id="myMap" style="width: 100%; height: 140px;" :latitude="latitude" :longitude="longitude" @regionchange="mapChange">
|
|
|
+ <cover-image class="current-site-icon" src="../../static/images/common/localposition.png"></cover-image>
|
|
|
+ <cover-view class="reload" @click="reload">
|
|
|
+ <cover-view class="center1">
|
|
|
+ <cover-view class="center2"></cover-view>
|
|
|
+ </cover-view>
|
|
|
+ </cover-view>
|
|
|
+ </map>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <scroll-view class="near-list" scroll-y>
|
|
|
+ <view v-for="(item,index) in nearListData" :key="index" @click="switchAddress(item,index)" class="near-item">
|
|
|
+ <div class="current-site" :class="{'active' : currentSelectAddress === index}"></div>
|
|
|
+ <view>
|
|
|
+ <view :class="['title',currentSelectAddress === index? 'title1':'']">{{item.title}}</view>
|
|
|
+ <view class="add">{{item.address}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
+ </bottom-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BottomPopup from '@/components/plugin/bottom-popup'
|
|
|
+import AppClose from '@/components/module/app-close'
|
|
|
+import AppSearchModule from '@/components/module/app-search'
|
|
|
+export default {
|
|
|
+ name: 'app-area-sel',
|
|
|
+ components: {
|
|
|
+ BottomPopup,
|
|
|
+ AppClose,
|
|
|
+ AppSearchModule
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 地图
|
|
|
+ latitude: 24.44579,
|
|
|
+ longitude: 118.08243,
|
|
|
+ // 列表
|
|
|
+ currentSelectAddress: 0,
|
|
|
+ nearListData: [
|
|
|
+ {
|
|
|
+ title: '中国共产党厦门市思明区纪律检查委员会',
|
|
|
+ address: '福建省厦门市思明区民族路33号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '厦门市思明区人民政府',
|
|
|
+ address: '福建省厦门市思明区民族路33号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '海滨商厦',
|
|
|
+ address: '福建省厦门市思明区民族路42～44'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '卢卡国际青年旅舍',
|
|
|
+ address: '福建省厦门市思明区民族路35号(思明区政府对面)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '中国共产党厦门市思明区纪律检查委员会',
|
|
|
+ address: '福建省厦门市思明区民族路33号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '厦门市思明区人民政府',
|
|
|
+ address: '福建省厦门市思明区民族路33号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '海滨商厦',
|
|
|
+ address: '福建省厦门市思明区民族路42～44'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(val) {
|
|
|
+ this.mapCtx = uni.createMapContext('myMap')
|
|
|
+ this.query = val
|
|
|
+ this.reload()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hidePopup() {
|
|
|
+ this.$emit('hide')
|
|
|
+ },
|
|
|
+ // 地图操作
|
|
|
+ reload() {
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: res => {
|
|
|
+ this.latitude = res.latitude
|
|
|
+ this.longitude = res.longitude
|
|
|
+ // this.nearList()
|
|
|
+ },
|
|
|
+ // eslint-disable-next-line handle-callback-err
|
|
|
+ fail: err => {
|
|
|
+ this.$msg('定位失败')
|
|
|
+ // setTimeout(function() {
|
|
|
+ // uni.navigateBack({
|
|
|
+ // delta: 1
|
|
|
+ // })
|
|
|
+ // }, 1500)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mapChange(e) {
|
|
|
+ if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
|
|
|
+ this.mapCtx.getCenterLocation({
|
|
|
+ success: res => {
|
|
|
+ this.longitude = res.longitude
|
|
|
+ this.latitude = res.latitude
|
|
|
+ // this.nearList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取列表
|
|
|
+ nearList() {
|
|
|
+ geocoder({
|
|
|
+ latitude: this.latitude,
|
|
|
+ longitude: this.longitude
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ let data = res.result
|
|
|
+ this.currentSelectAddress = 0
|
|
|
+ this.nearListData = data.pois
|
|
|
+ // this.currentRegion = [data.address_component.province, data.address_component.city, data.address_component.district]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ switchAddress(item, index) {
|
|
|
+ // this.currentSelectAddress = index
|
|
|
+ // this.latitude = item.location.lat
|
|
|
+ // this.longitude = item.location.lng
|
|
|
+ // if (!this.$util.isEmpty(item.province) && !this.$util.isEmpty(item.city)) {
|
|
|
+ // this.currentRegion = [item.province, item.city, item.district]
|
|
|
+ // }
|
|
|
+ this.$emit('change', item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ // 弹窗
|
|
|
+ /deep/.popup-wrap {
|
|
|
+ .tui-popup-class {
|
|
|
+ border-top-left-radius: 20px;
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .map-wrap {
|
|
|
+ .map-top-tit-wrap {
|
|
|
+ padding: 30px 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ .map-search {
|
|
|
+ padding: 0 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .map-box {
|
|
|
+ .current-site-icon {
|
|
|
+ width: 63px;
|
|
|
+ height: 90px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ .near-list {
|
|
|
+ height: 620rpx;
|
|
|
+ // padding-bottom: 110rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .near-item {
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 18rpx 50rpx 18rpx 0;
|
|
|
+ margin-left: 90px;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .current-site {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-color: #dedede;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ top: 60rpx;
|
|
|
+ left: -60rpx;
|
|
|
+ &.active {
|
|
|
+ background-color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .near-item .title {
|
|
|
+ color: #282828;
|
|
|
+ font-size: 28rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .near-item .add {
|
|
|
+ color: $fontColor3;
|
|
|
+ font-size: 22rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .near-item .title1 {
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ .near-item .add1 {
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
liujd