uniapp使用uview组件的indexList写选择城市
<template>
<view class="">
<view class="top">
<view class="search-box mt10 flex alcenter">
<view class="search-input"><u-search :showAction="false" placeholder="请输入想要搜索的城市" v-model="search"></u-search></view>
<view class="filter ft16 " @click="onSearch">搜索</view>
</view>
</view>
<view class="ft14 pd12_10 ">当前：{{ locationInfo.city }}</view>
<view v-if="status" style="width: 90%; height: 2rpx; background-color: #bcbcbc; margin-left: 20rpx;"></view>
<view class="pd12_10" v-if="status">
<view class="ft14">热门城市</view>
<view class="flex wrap ">
<view class="ft14 hot_city border" v-for="(item, index) in hot" :key="index" @click="hotItem(item)">{{ item.name }}</view>
</view>
</view>
<u-index-list :index-list="indexList">
<template v-for="(item, index) in itemArr">
<!-- #ifdef APP-NVUE -->
<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
<!-- #endif -->
<u-index-item :key="index">
<!-- #ifndef APP-NVUE -->
<u-index-anchor :text="indexList[index]"></u-index-anchor>
<!-- #endif -->
<view class="list-cell" v-for="(it, index1) in item" :key="index1" @click="cityItem(it)">{{ it.name }}</view>
</u-index-item>
</template>
</u-index-list>
<com-empty v-if="datanull" title="暂无可选城市"></com-empty>
</view>
</template>
<script>
export default {
data() {
return {
search: '',
status: true, //搜索内容为空是false
allList: [],
hot: [],
indexList: [],
itemArr: [],
datanull: false
};
},
onLoad() {
this.getCity();
},
methods: {
onSearch() {
this.itemArr = [];
if (this.search.trim() != '') {
this.status = false;
this.getCity();
return;
}
this.status = true;
this.getCity();
},
// 获取定位城市
getCity() {
this.$http
.api('stores/miniapp/getCity', {
search: this.search
})
.then(res => {
(this.datanull = false), (this.hot = res.hot);
this.allList = res.list;
this.setIndex();
this.allcity();
if (this.allList == '') {
this.datanull = true;
}
});
},
hotItem(item) {
console.log(item);
this.$store.commit('setLocation', {
city: item.name,
lng: item.lng,
lat: item.lat
});
uni.switchTab({
url: '/pages/home/index/index'
});
},
cityItem(item) {
this.$store.commit('setLocation', {
city: item.name,
lng: item.lng,
lat: item.lat
});
uni.switchTab({
url: '/pages/home/index/index'
});
},
// // 右侧索引去重
setIndex() {
let iniIndex = []; //定义数组
this.allList.map(item => {
//遍历当前的数组对象
iniIndex.push(item.initials); //将当前某个值productPushCode取出来放入数组中
});
iniIndex = Array.from(new Set(iniIndex));
this.indexList = iniIndex.sort();
},
// 城市列表重组
allcity() {
let tmp = [];
for (let i = 0; i < this.indexList.length; i++) {
let item = this.indexList[i];
for (let j = 0; j < this.allList.length; j++) {
let py = this.allList[j].initials;
if (py == item) {
if (tmp.indexOf(item) == -1) {
this.itemArr[i] = [this.allList[j]];
tmp.push(item);
} else {
this.itemArr[i].push(this.allList[j]);
}
}
}
}
}
}
};
</script>
<style lang="scss" scoped>
.top {
// background: #fff;
padding: 10rpx 30rpx 20rpx;
position: relative;
z-index: 10;
margin-bottom: 20rpx;
.search-input {
flex: 1;
}
.filter {
margin-left: 8rpx;
background-color: red;
color: #fff;
padding: 10rpx 30rpx;
border-radius: 40rpx;
}
}
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 24px;
}
.hot_city {
padding: 10rpx 15rpx;
margin: 10rpx;
}
</style>
<script>export default {data() {return {search: '',status: true, //搜索内容为空是falseallList: [],hot: [],indexList: [],itemArr: [],datanull: false};},onLoad() {this.getCity();},methods: {onSearch() {this.itemArr = [];if (this.search.trim() != '') {this.status = false;this.getCity();return;}this.status = true;this.getCity();},// 获取定位城市getCity() {this.$http.api('stores/miniapp/getCity', {search: this.search}).then(res => {(this.datanull = false), (this.hot = res.hot);this.allList = res.list;this.setIndex();this.allcity();if (this.allList == '') {this.datanull = true;}});},hotItem(item) {console.log(item);this.$store.commit('setLocation', {city: item.name,lng: item.lng,lat: item.lat});uni.switchTab({url: '/pages/home/index/index'});},cityItem(item) {this.$store.commit('setLocation', {city: item.name,lng: item.lng,lat: item.lat});uni.switchTab({url: '/pages/home/index/index'});},// // 右侧索引去重setIndex() {let iniIndex = []; //定义数组this.allList.map(item => {//遍历当前的数组对象iniIndex.push(item.initials); //将当前某个值productPushCode取出来放入数组中});iniIndex = Array.from(new Set(iniIndex));this.indexList = iniIndex.sort();},// 城市列表重组allcity() {let tmp = [];for (let i = 0; i < this.indexList.length; i++) {let item = this.indexList[i];for (let j = 0; j < this.allList.length; j++) {let py = this.allList[j].initials;if (py == item) {if (tmp.indexOf(item) == -1) {this.itemArr[i] = [this.allList[j]];tmp.push(item);} else {this.itemArr[i].push(this.allList[j]);}}}}}}};</script>
<style lang="scss" scoped>.top {// background: #fff;padding: 10rpx 30rpx 20rpx;position: relative;z-index: 10;margin-bottom: 20rpx;
.search-input {flex: 1;}
.filter {margin-left: 8rpx;background-color: red;color: #fff;padding: 10rpx 30rpx;border-radius: 40rpx;}}
.list-cell {display: flex;box-sizing: border-box;width: 100%;padding: 10px 24rpx;overflow: hidden;color: #323233;font-size: 14px;line-height: 24px;}.hot_city {padding: 10rpx 15rpx;margin: 10rpx;}</style>
