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>

<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, //搜索内容为空是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>