front-end/jdApp/src/components/app-area-sel-bak.vue

<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>