uniapp选择地址加模糊查询

最近有一个选择地址的功能要写,打算封装成组件,使用的是uniapp,参考美团的选择地址,ui框架是uview

• 效果大概就是这样子,ui简单搞了下
  美团(右)

然后就是数据,在网上找的全国市级城市的json文件,带索引

页面用的是uview的u-index-list组件,因为有些配置不一样我就拷贝了一份改了一点

头部的搜索

输入内容会隐藏内容区域显示搜索结果

整个页面需要的参数和数据处理

搜索功能 输入框在输入的时候发生改变并计算结果

下面是完整的代码

```cpp
```js<template>
	<ui-page fixedBodyHeight titleColor="#000">
		<view slot="header" class="header">
			<u-search
				v-model="addressName"
				placeholder="城市/拼音"
				@change="select"
				@blur="hide"
				:animation="false"
				:showAction="false"
			></u-search>
		</view>
		<view style="background:#f5f5f5" v-if="!show">
			<ui-index-list :indexList="indexList" :customNavHeight="getTabbarHeight">
				<view class="title">定位/最近访问</view>
				<view class="popularcities">
					<view class="city" style="width:400rpx;color:#2979ff" v-if="!locationAddress">
						<view class="cityitem">
							<view class="u-line-1" style="margin-right:5rpx">
								定位失败,点击重试
							</view>
							<u-icon name="reload" color="#2979ff" size="16"></u-icon>
						</view>
					</view>
					<view class="city" v-else>
						<view class="cityitem" @click="selectAddress(locationAddress)">
							<u-icon name="map" color="#2979ff" size="16"></u-icon>
							<view class="u-line-1" style="margin-left:5rpx">
								{{ locationAddress.name }}
							</view>
						</view>
					</view>
					<view
						class="city"
						v-for="(city, index) in locationList"
						:key="index"
						@click="selectAddress(city)"
					>
						<view class="cityitem">
							<view class="u-line-1">{{ city.name }}</view>
						</view>
					</view>
				</view>
				<view class="title">热门城市</view>
				<view class="popularcities">
					<view
						v-for="city in popularCities"
						:key="city"
						class="city u-line-1"
						@click="selectAddress(city)"
					>
						{{ city.name }}
					</view>
				</view>
				<view v-for="(item, index) in itemArr" :key="index">
					<u-index-item>
						<view class="tabindex">{{ indexList[index] }}</view>
						<view
							class="list-cell"
							v-for="cell in item"
							:key="cell.id"
							@click="selectAddress(cell)"
						>
							{{ cell.name }}
						</view>
					</u-index-item>
				</view>
			</ui-index-list>
		</view>
		<view v-else>
			<view
				class="list-cell"
				v-for="cell in selectList"
				:key="cell.id"
				@click="selectAddress(cell)"
			>
				{{ cell.name }}
			</view>
			<u-empty
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"
				text="没有找到相关信息,请重试"
				v-if="selectList.length < 1"
			></u-empty>
		</view>
	</ui-page>
</template>

<script>
import address from './address.json'
import { getNavbarHeight } from '@/libs/utils/sys'
export default {
	data() {
		return {
			indexList: [], //索引
			itemArr: [], //城市合集
			list: [], //把二维数组变一维为数组
			selectList: [], //搜索结果
			popularCities: [
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				},
				{
					id: 3,
					spell: 'shanghai',
					name: '上海'
				}
			], //热门城市
			addressName: '', //显示内容
			show: false //显示搜索区域
		}
	},
	onLoad() {
		this.init()
		this.$store.dispatch('selectAddress/getHistoricalStorage')
	},
	methods: {
		select(e) {
			uni.$u.debounce(() => {
				if (e === '') {
					this.show = false
					this.selectList = [] //清空搜索结果
					return
				}
				this.show = true //判断是否展示搜索结果页面
				let len = e.length
				this.selectList = this.list.filter(v => this.query(e, v, len)) //搜索结果数组
			}, 100)
		},
		query(e, v, len) {
			return (
				v.spell.substring(0, len).indexOf(e) !== -1 ||
				v.name.substring(0, len).indexOf(e) !== -1
			)
		},
		hide() {
			if (this.addressName === '') {
				this.show = false
			}
		},
		init() {
			let list = address.data.cities //json文件
			this.indexList = Object.keys(list)
			for (const key in list) {
				this.itemArr.push(list[key])
				this.list = [...list[key], ...this.list]
			}
		},
		cliceIndexs(e) {
			console.log(e)
		},

		selectAddress(e) {
			uni.showToast({
				title: `选中${e.name},模拟返回`,
				duration: 2000
			})
			if (e.name === this.locationList[0].name) return
			this.$store.dispatch('selectAddress/getHistoricalStorage', e)
		}
	},
	computed: {
		getTabbarHeight() {
			return getNavbarHeight()
		},
		locationList() {
			let data = this.$store.state.selectAddress.historicalAddress
			if (this.locationAddress) {
				return data.splice(0, 2)
			} else {
				return data.splice(0, 1)
			}
		},
		locationAddress() {
			return this.$store.state.selectAddress.locationAddress
		}
	}
}
</script>

<style lang="scss" scoped>
.list-cell {
	display: flex;
	box-sizing: border-box;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
	position: relative;
}
.list-cell::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 24rpx;
	height: 3rpx;
	background: #f1f1f1;
}
.anchor {
	padding: 24rpx;
	color: rgb(112, 112, 112);
	font-size: 24rpx;
}
.header {
	/*  #ifndef H5  */
	margin: 0 30vw 0 9vw !important;
	max-width: 50vw;
	/* #endif */
}
.tabindex {
	padding: 30rpx;
	color: rgb(71, 71, 71);
	font-size: 28rpx;
	background: #f2f2f2;
}
.title {
	font-size: 32rpx;
	color: #ccc;
	padding: 15rpx 30rpx;
}
.popularcities {
	margin: 0 30rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.cityitem {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.city {
		margin: 0 30rpx 30rpx 0;
		padding: 0 5rpx;
		width: 190rpx;
		text-align: center;
		line-height: 70rpx;
		height: 70rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 1rpx solid rgb(236, 236, 236);
		box-shadow: 5rpx 5rpx 5rpx #f9f9f9;
		background: #fff;
	}
}
</style>

vuex代码

const state = {
    historicalAddress: [], //选择城市记录
    locationAddress: { name: '深圳' },  //授权所在城市
    choiceAddress: {},  //选择地址
    authorizationLocation: false //是否已授权使用定位
}

const mutations = {
    // 获取授权定位
    SET_EMPOWER: (state, data) => {
        state.authorizationLocation = data
    },
    // 获取历史记录
    SET_HISTORICAL: (state, data) => {
        state.historicalAddress = data

    },
    // 获取定位信息
    SET_LOCATION: (state, data) => {
        state.locationAddress = data
    },
    // 获取定位信息
    SET_CHOICE: (state, data) => {
        state.choiceAddress = data
    },

}

const actions = {
    setHistorical({ commit }, data) {
        commit('SET_HISTORICAL', data)
        uni.setStorageSync('historicalAddress', JSON.stringify(data))

    },
    getHistoricalStorage({ dispatch }, params) {
        let arr = uni.getStorageSync('historicalAddress')
        if (!params && !arr) return
        let data = []
        if (arr) {
            let obj = JSON.parse(arr)
            data = obj.length > 1 ? obj.splice(0, 2) : obj
        }
        if (params) {
            dispatch('toUpdate', params)
            data.unshift(params)
        }
        dispatch('setHistorical', data)
    },
    // 更新选择的地址
    toUpdate({ commit }, params) {
        console.log('更新地址', params.name);
        commit('SET_CHOICE', params)
    }

}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

因为原型还没出,只写了个大概功能,记录历史什么的,还差获取定位没写等到原型确定在写,小白一个,干不下去就回家喂猪