discounts-minapp/trip/chooseAddress/index.vue

<template>
	<view class="chooseAddress">
		<view class="search-box">
			<view class="input-box">
				<view class="city">
					{{city}}
				</view>
				<input class="address-input" focus :placeholder="type == 'start'?'您从哪里上车':'您想去哪里'" type="text" v-model="address" />
			</view>
		</view>
		
		<view class="search-content">
			<view class="item" v-for="(item,index) in list" :key="index" @click="chooseAddress(item)">
				<view class="info">
					<view class="address">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.address}}
					</view>
				</view>
				<view class="distance">
					{{item._distance | filterDistance}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {debounce} from '@/utils/tool.js'
	// 腾讯地图
	var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
	var qqmapsdk = new QQMapWX({
		key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'})
	export default {
		data() {
			return {
				longitude: 0,
				latitude: 0,
				city: '定位中',
				address:'',
				type:'',
				list:[]
			}
		},
		watch: {
			address:debounce(function(keyword) {
				let that = this
				qqmapsdk.getSuggestion({
					keyword,
					region_fix:1,
					policy:1,
					location: `${that.latitude},${that.longitude}`,
					success(res){
						console.log(res);
						that.list = res.data
					}
				})
			})
		},
		methods: {
			chooseAddress(item) {
				uni.navigateTo({
					url:`../index/index?type=${this.type}`,
					  success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('address', { 
							latitude:item.location.lat,
							longitude:item.location.lng,
							address:item.title
						})
					  }
				})
			}
		},
		filters: {
			filterDistance: function(val) {
				return (val/1000).toFixed(1)+'km'
			}
		},
		onLoad(val) {
			this.type = val.type
		},
		created() {
			this.city = uni.getStorageSync('city')
			let that = this
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					that.longitude = res.longitude
					that.latitude = res.latitude
					
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.chooseAddress{
	.search-box{
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 72rpx;
		padding: 20rpx 32rpx;
		background: #fff;
		.input-box{
			height: 72rpx;
			padding: 16rpx 0;
			box-sizing: border-box;
			border-radius: 36rpx;
			background: #F9F9F9;
			display: flex;
			font-size: 28rpx;
			.city{
				flex: 0 0 154rpx;
				text-align: center;
				color: #222222;
				border-right: 2rpx solid #F0F0F0;;
			}
			.address-input{
				flex: 1;
				color: #AAAAAA;
				padding-left: 20rpx;
			}
		}
	}
	.search-content{
		padding-top: 112rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36rpx 32rpx;
			border-bottom: 1rpx solid #F0F0F0;
			.info{
				.address{
					font-weight: bold;
					color: #222222;
					font-size: 28rpx;
				}
				.desc{
					font-size: 24rpx;	
					color: #AAAAAA;
					margin-top: 14rpx;
				}
			}
			.distance{
				font-size: 28rpx;
				color: #AAAAAA;
			}
		}
	}
}
</style>