|
|
@@ -1,237 +0,0 @@
|
|
|
-<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: 140upx;" :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>
|
|
|
- // 弹窗
|
|
|
- ::v-deep.popup-wrap {
|
|
|
- .tui-popup-class {
|
|
|
- border-top-left-radius: 20upx;
|
|
|
- border-top-right-radius: 20upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .map-wrap {
|
|
|
- .map-top-tit-wrap {
|
|
|
- padding: 30upx 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 34upx;
|
|
|
- }
|
|
|
- .map-search {
|
|
|
- padding: 0 30upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- }
|
|
|
- .map-box {
|
|
|
- .current-site-icon {
|
|
|
- width: 63upx;
|
|
|
- height: 90upx;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 列表
|
|
|
- .near-list {
|
|
|
- height: 620upx;
|
|
|
- // padding-bottom: 110upx;
|
|
|
- box-sizing: border-box;
|
|
|
- .near-item {
|
|
|
- line-height: 40upx;
|
|
|
- padding: 18upx 50upx 18upx 0;
|
|
|
- margin-left: 90upx;
|
|
|
- text-align: left;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .current-site {
|
|
|
- width: 16upx;
|
|
|
- height: 16upx;
|
|
|
- background-color: #dedede;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- top: 60upx;
|
|
|
- left: -60upx;
|
|
|
- &.active {
|
|
|
- background-color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
- .near-item .title {
|
|
|
- color: #282828;
|
|
|
- font-size: 28upx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .near-item .add {
|
|
|
- color: $fontColor3;
|
|
|
- font-size: 22upx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .near-item .title1 {
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- .near-item .add1 {
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
