junzitang/pages/index/SearchAddress.vue

<template>
	<view class="container" :class="['qn-page-' + theme]">
		<view class="header">
			<text class="ibonfont ibonsousuo1 sear-icon"></text>
			<input type="text" @input="bindInput" @confirm="bindConfirm" v-model="address_key" placeholder="请输入地址" class="ars_input" />
		</view>
		<view class="bg-ff">
			<view class="list-title">从下面列表中选择</view>
			<view class="list-li" v-for="(item, index) in list" :key="index" @click="address(item)">
				<view class="adrs-label">{{ item.name }}</view>
				<view class="adrs-val">{{ item.address.length ? item.address : item.name }}</view>
			</view>
		</view>

	</view>
</template>

<script>
import amap from '@/access/amap-wx.js';
import webUrl from '../../config.js';

export default {
	data() {
		return {
			list: [],
			address_key: ''
		};
	},
	onLoad() {
		//在 onLoad 中初始化一个高德小程序 SDK 的实例对象。
		this.amapPlugin = new amap.AMapWX({
			key: webUrl.GDMap_key
		});
	},
	methods: {
		bindConfirm() {},
		bindInput() {
			// #ifdef MP-TOUTIAO
			if(['xijinping','xi jin ping','jinping','jin ping','习近平','近平','彭丽媛','丽媛'].includes(this.address_key)){
				return
			}
			// #endif
			this.amapPlugin.getInputtips({
				keywords: this.address_key,
				location: '',
				success: data => {
					if (data && data.tips) {
						this.list = data.tips;
						console.log(this.list);
					}
				}
			});
		},
		address(item) {
			console.log(item);
			const location = item.location.split(',');
			const locationD = this.$_utils.getArea(item.district);
			// {"provinceName":"陕西省","cityName":"西安市","districtName":"莲湖区","address":"北院门街道","latitude":34.267011,"longitude":108.940245}
			const longitude = location[0];
			const latitude = location[1];
			this.$store.commit('commit_locationObj', {
				...locationD,
				address: item.address.length ? item.address : item.name,
				latitude: latitude,
				longitude: longitude
			});
			this.isLoding=true
			setTimeout(() => {
				this.isLoding=false
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 100);
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding-top: 20rpx;
}
.header {
	// position: fixed;
	// z-index: 999;
	// top: 0;
	// left: 0;
	line-height: 70upx;
	border-bottom: 1px solid #eee;
	background-color: #fff;
	padding: 0 20upx;
	.sear-icon {
		font-size: 32upx;
		color: #999;
		vertical-align: middle;
	}
	.ars_input {
		margin-left: 20upx;
		width: 600upx;
		display: inline-block;
		height: 70upx;
		line-height: 70upx;
		vertical-align: middle;
		font-size: 28upx;
	}
}
.bg-ff {
	margin-top: 20upx;
	background-color: #fff;
	padding: 0 20upx;
	.list-title {
		font-size: 26upx;
		color: #999;
		padding: 16upx 0;
	}
	.list-li {
		font-size: 28upx;
		border-top: 1px solid #eee;
		padding: 20upx 0;
		.adrs-val {
			font-size: 26upx;
			color: #666;
			padding-top: 10upx;
		}
	}
}
</style>