MALL_MP_WX/ChargingStation/pages/chooseLocation/index.vue

<template>
	<view class="seach_body">
		<view class="seach_input">
			<view @click="isShowFn" class="seach_input_left color-66">
				<uni-icons class="mar" type="search" size="20"></uni-icons>
				<view>{{addressData.city}}</view>
				<uni-icons color="#bbbbbb" class="bottom" type="back" size="15"></uni-icons>
			</view>
			<view class="seach_input_right">
				<input style="flex:1;" v-model="seachValue" placeholder="请输入地址" type="text" @confirm="seachFn" />
				<view @click="seachFn" class="seach_input_butten"> 搜索</view>
				<!-- <uni-combox @input="seachFn" emptyTips="请输入内容" class="seach_input_right_input" :border="false" :candidates="candidates" placeholder="Location..."></uni-combox> -->
			</view>
		</view>
		<view :style="{height:Boolean(Number(List.length))?'calc(100vh - 80rpx - 38rpx)':'0px'}" class="seach_list">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view @click="seleClick(item)" v-for="(item,index) in List" class="list_item">
					<view class="list_item_size">{{item.title}}</view>
					<view class="list_item_samall_size">{{item.address}}</view>
				</view> 
			</scroll-view>
		</view>
		<charge :addressData="addressData" @chargeChange='chargeChange' v-model="isShow.address"></charge>
	</view>
</template>

<script>
	import amapFile from '@/utils/qqmap-wx-jssdk.min.js'
	import charge from '../../components/charge/index.vue'
	export default {
		components:{
			charge
		},
		data() {
			return {
				params: {
					province: true,
					city: true,
					area: true
				},
				isShow: {
					address: false
				},
				type:1,
				seachValue: '',
				List: [],
				TXSDK: null,
				location: '',
				addressData: {
					province: '',
					city: '',
					area: ''
				},
				pageSize: {
					page_size: 15,
					page: 1
				}
			}
		},
		onLoad(e) {
			let that = this
			if (e.type) { 
				this.type = e.type.split('/')[0]
				this.location = e.type.split('/')[1]
				console.log(this.List, Boolean(Number(this.List)))
				this.TXSDK.reverseGeocoder({
					sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
					location:that.location,
					success(e){
						({province:that.addressData.province,city:that.addressData.city,district:that.addressData.area}=e.result.address_component)
						console.log(e,that.addressData,'地址逆解析')
					},
					fail(e) {
						console.log(e, '地址逆解析 错误')
					},
				})
			}
		},
		created() {
			this.TXSDK = new amapFile({
				key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN'
			});
		},
		methods: {
			seleClick(e){
				uni.$emit('UpdateAddress',e,this.type)
				uni.navigateBack()
			},
			chargeChange(e){
				this.addressData = Object.assign(this.addressData,e)
				console.log(e)
			},
			isShowFn() {
				 this.isShow.address = true
			},
			loding(e) {
				if (e) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
				} else {
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				}
			},
			getRegion(){
				let that = this
				this.loding(true)
				this.TXSDK.search({
					sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
					keyword: that.seachValue,
					auto_extend: '0',
					region:that.addressData.province.indexOf('市')!==-1? that.addressData.province : that.addressData.province + that.addressData.city,
					page_size: that.pageSize.page_size,
					location: that.location || '',
					page_index: that.pageSize.page,
					success(e) {
						that.loding(false)
						if (e.message !== 'query ok') return
						if (e.data.length == 0) {
							uni.showToast({
								title: '没有数据了',
								icon: 'none'
							})
						}
						if (that.pageSize.page > 1) {
							that.List = that.List.concat(e.data)
							return
						}
						that.List = e.data
					},
					fail(e) {
						that.loding(false);
						console.log(e, '错误')
					},
				})
			},
			seachFn(e) {
				this.pageSize.page = 1
				this.getRegion()
			},
			lower() {
				this.pageSize.page += 1
				this.getRegion()
			},
		}
	}
</script>

<style scoped>
	.seach_input_butten{
		color: #FF6700;
		height: 100%;
		white-space: nowrap;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
	}
	.list_item_samall_size {
		color: #BBBBBB;
		font-size: 24rpx;
	}

	.list_item_size {
		color: #666666;
		font-size: 28rpx;
	}

	.list_item {
		width: 90%;
		margin: 0 auto;
		border-radius: 10px;
		margin-top: 60rpx;
		padding-left: 60rpx;
	}

	.scroll-Y {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	>>>.uni-combox__no-border {
		padding: 0 !important;
		height: 100%;
	}

	.seach_input_right_input {
		flex: 1;
		height: 100%;
	}

	.color-66 {
		color: #666666;
	}

	.mar {
		margin-right: 20rpx;
	}

	.bottom {
		transform: rotate(270deg);
		transition: all .3s;
		margin: 0 20rpx;
	}

	.seach_input_right {
		flex: 1;
		margin:0 10rpx;
		display: flex;
		align-items: center;
	}

	.seach_input_left {
		display: flex;
		align-items: center;
		border-right: 1rpx #F0F0F0 solid;
	}

	.seach_input {
		background-color: #FFFFFF;
		border-radius: 10px;
		height: 80rpx;
		display: flex;
		padding: 15rpx 32rpx;
		box-sizing: border-box;
	}

	.seach_list {
		/* flex: 1; */
		/* height: calc(100vh - 80rpx - 38rpx); */
		background-color: #FFFFFF;
		margin-top: 38rpx;
		border-radius: 10px;
		overflow: hidden;
		transition: all .3s;
	}

	.seach_body {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 0 42rpx;
		background: #F1F8FD;
		box-sizing: border-box;
		font-size: 24rpx;
	}
</style>