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">搜索</text></view>
            </view>
        </view>
        <view class="ft14 pd12_10 ">
            当前：{{locationInfo.city}}
        </view>
        <view  style="width: 90%; height: 2rpx; background-color: #bcbcbc; margin-left: 20rpx;">
        </view>
        <view  class="pd12_10">
            <view class="ft14">
                热门城市
            </view>
            <view class="flex wrap ">
                <view class="ft14 hot_city border" v-for="(item,index) in hot" @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]"></u-index-anchor>
                <!-- #endif -->
                <u-index-item>
                    <!-- #ifndef APP-NVUE -->
                    <u-index-anchor :text="indexList[index]"></u-index-anchor>
                    <!-- #endif -->
                    <view class="list-cell" v-for="(it, index) in item" @click="cityItem(it)">
                        {{it.name}}
                    </view>
                </u-index-item>
            </template>
        </u-index-list>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                search: '',
                allList: [],
                hot: [],
                indexList: [],
                itemArr: [],
            }
        },
        onLoad() {
            this.getCity()
        },
        methods: {
            onSearch(){
                this.getCity()
            },
            // 获取定位城市
            getCity() {
                this.$http.api('stores/miniapp/getCity', {
                    search: this.search
                }).then(res => {
                    this.hot = res.hot
                    this.allList = res.list
                    this.setIndex()
                    this.allcity()
                    
                })
            },
            hotItem(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() {
                var tmp = [];
                for (var i = 0; i < this.indexList.length; i++) {
                    var item = this.indexList[i];
                    for (var j = 0; j < this.allList.length; j++) {
                        var 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>