front-end/ghsApp/src/components/app-area-sel.vue

<template>
	<div class="app-area-sel">
		<bottom-popup class="popup-wrap" :show="showPopup" @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 ref="aaaaa" placeholder="请输入你的地址" :focus="false" @input="searchFn" />
				</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'
	// api
	import { suggestion } from '@/api/common'
	export default {
		name: 'app-area-sel',
		components: {
			BottomPopup,
			AppClose,
			AppSearchModule
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			city: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showPopup: false,
				keyword: '',
				// 地图
				// latitude: 24.44579,
				// longitude: 118.08243,
				// 列表
				currentSelectAddress: null,
				nearListData: []
			}
		},
		// onLoad(val) {
		// 	this.mapCtx = uni.createMapContext('myMap')
		// 	this.query = val
		// 	this.reload()
		// },

		watch: {
			show(val) {
				this.showPopup = val
				// #ifdef H5
				this.$nextTick(function() {
					setTimeout(() => {
						this.$refs.aaaaa.$refs.searchInput._focusInput()
					}, 1000)
				})
				// #endif
			},
       city() {
        this.nearListData = []
        this.$refs.aaaaa.search = ''
      }
		},
		methods: {
			getAreaList() {
				if (!this.keyword) {
					return false
				}
				suggestion({ region: this.city, keyword: this.keyword }).then(res => {
					this.nearListData = res.data.data
				})
			},
			// 搜索
			searchFn(e) {
				this.keyword = e
				this.getAreaList()
				// this.$emit('search', e)
				// uni.reverseGeocode({
				// 	latitude: 25.661333498914413,
				// 	longitude: 117.5537109375
				// }, (e) => {
				// 	console.log(e)
				// })
			},
			hidePopup() {
				this.$emit('update:show', false)
				this.$emit('hide')
			},
			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)
				this.hidePopup()
			}
			// 地图操作
			// 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]
			// 	})
			// },
		}
	}
</script>

<style lang="scss" scoped>
	// 弹窗
	/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: 820upx;
			// 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: 1upx 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>