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: {
		setStorage(item){
			const history = this.getStorage()
			const index = history.findIndex(v => v.title === item.title)
			if(index !== -1){
				history.splice(index, 1)
			}
			history.unshift({
				_distance: item._distance,
				title: item.title,
				address: item.address,
				location: item.location
			})
			uni.setStorageSync('addrHistory', JSON.stringify(history))
		},
		getStorage(){
			return JSON.parse(uni.getStorageSync('addrHistory') || '[]')
		},
		chooseAddress(item) {
			try {
				console.log(item)
				this.setStorage(item)
			} catch (error) {
				console.log(error)
			}
			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

			}
		})
		this.list = this.getStorage()
	}
}
</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>