ks-app-employment-service/pages/city-select/index.vue

<template>
    <view class="city-select-container">
        <!-- 顶部导航栏 -->
        <!-- <view class="nav-bar">
            <view class="nav-left" @click="navBack">
                <uni-icons type="left" size="24" color="#333"></uni-icons>
            </view>
            <view class="nav-title">选择城市</view>
            <view class="nav-right"></view>
        </view> -->
        
        <!-- 搜索框 -->
        <view class="search-box">
            <uni-icons class="search-icon" type="search" size="20" color="#999"></uni-icons>
            <input 
                class="search-input" 
                placeholder="搜索城市名/拼音" 
                placeholder-style="color: #999" 
                v-model="searchText"
                @input="handleSearch"
            >
        </view>
        
        <!-- 定位城市 -->
        <!-- <view class="location-section">
            <view class="section-title">定位城市</view>
            <view class="location-city" :class="{ active: selectedCity.code === locationCity.code }" @click="selectCity(locationCity)">
                {{ locationCity.name }}
            </view>
        </view> -->
        
        <!-- 热门城市 -->
    <!-- <view class="hot-section">
        <view class="section-title">热门城市</view>
        <view class="hot-cities">
            <view 
                class="city-item" 
                :class="{ active: selectedCity.code === item.code }" 
                v-for="item in hotCities" 
                :key="item.code"
                @click="selectCity(item)"
            >
                {{ item.name }}
            </view>
        </view>
    </view> -->
    
    <!-- 城市数量统计 -->
    <!-- <view class="city-count" v-if="allCities.length > 0">
        共找到 {{ allCities.length }} 个城市
    </view> -->
        
        <!-- 城市列表 -->
        <view class="city-list-section">
            <scroll-view 
                class="city-list-content" 
                scroll-y
                :scroll-into-view="currentScrollId"
                :scroll-with-animation="true"
            >
                <view 
                    class="city-group" 
                    v-for="group in cityGroups" 
                    :key="group.letter"
                    :id="`city-group-${group.letter}`"
                >
                    <view class="group-title">{{ group.letter }}</view>
                    <view 
                        class="city-item" 
                        :class="{ active: selectedCity.code === item.code }" 
                        v-for="item in group.cities" 
                        :key="item.code"
                        @click="selectCity(item)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view>
            
            <!-- 右侧字母索引 -->
            <view class="letter-index">
                <view 
                    class="letter-item" 
                    v-for="letter in letters" 
                    :key="letter"
                    @click="scrollToLetter(letter)"
                    :class="{ active: currentLetter === letter }"
                >
                    {{ letter }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, inject } from 'vue';
const { $api, navTo } = inject('globalFunction');

// 搜索文本
const searchText = ref('');
// 定位城市
const locationCity = ref({ code: '110100', name: '北京' });
// 选中的城市
const selectedCity = ref({ code: '', name: '' });
// 当前显示的字母
const currentLetter = ref('');
// 当前滚动到的城市组ID
const currentScrollId = ref('');
// 城市数据
const allCities = ref([]);
// 字母列表
const letters = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']);


// 按字母分组的城市
const cityGroups = computed(() => {
    const groups = {};
    const filteredCities = allCities.value.filter(city => {
        if (!searchText.value) return true;
        return city.name.includes(searchText.value) || city.pinyin?.includes(searchText.value.toUpperCase());
    });
    
    console.log('过滤后用于分组的城市:', filteredCities);
    
    // 初始化字母分组
    letters.value.forEach(letter => {
        groups[letter] = { letter, cities: [] };
    });
    
    // 将城市分配到对应字母组
    filteredCities.forEach(city => {
        const firstLetter = city.pinyin || '#';
        // 如果字母不在预定义列表中，将其添加到分组中
        if (!groups[firstLetter]) {
            groups[firstLetter] = { letter: firstLetter, cities: [] };
        }
        groups[firstLetter].cities.push(city);
    });
    
    const result = Object.values(groups).filter(group => group.cities.length > 0);
    
    // 对城市组进行排序
    result.sort((a, b) => {
        // '#' 符号应该排在最前面
        if (a.letter === '#') return -1;
        if (b.letter === '#') return 1;
        // 其他字母按字母顺序排序
        return a.letter.localeCompare(b.letter);
    });
    
    console.log('最终分组结果:', result);
    
    return result;
});

// 获取城市数据
const getCityData = async () => {
    try {
        // 直接获取所有城市数据，新接口已经返回了所有层级的数据
        const res = await $api.createRequest('/cms/dict/sysarea/listCity', {});
        console.log('城市数据接口返回:', res);
        if (res.code === 200 && res.data) {
            console.log('原始城市数据:', res.data);
            // 显示接口返回的所有城市数据
            const filteredCities = res.data;
            console.log('过滤后城市数据:', filteredCities);
            
            // 直接使用后端返回的zm字段作为拼音首字母，并转换为大写
            allCities.value = filteredCities.map(city => ({
                ...city,
                pinyin: (city.zm || '#').toUpperCase()
            }));
            
            console.log('使用后端zm字段的城市数据:', allCities.value);
            
            // 按拼音首字母排序
            allCities.value.sort((a, b) => {
                // 首先按拼音首字母排序
                if (a.pinyin !== b.pinyin) {
                    // '#' 符号应该排在最前面
                    if (a.pinyin === '#') return -1;
                    if (b.pinyin === '#') return 1;
                    return a.pinyin.localeCompare(b.pinyin);
                }
                // 首字母相同时，按城市名称排序
                return a.name.localeCompare(b.name);
            });
        }
    } catch (error) {
        console.error('获取城市数据失败:', error);
    }
};

// 获取拼音首字母（使用更准确的映射表）
const getPinyinFirstLetter = (name) => {
    const firstChar = name.charAt(0);
    
    // 查找对应的拼音首字母
    for (const [letter, chars] of Object.entries(pinyinMap)) {
        if (chars.includes(firstChar)) {
            return letter;
        }
    }
    
    // 如果没有找到，返回#
    return '#';
};

// 处理搜索
const handleSearch = () => {
    // 搜索逻辑已在cityGroups计算属性中处理
};

// 选择城市
const selectCity = (city) => {
    selectedCity.value = city;
    // 返回上一页并传递选择的城市
    uni.navigateBack({
        delta: 1,
        success: () => {
            // 发送事件通知首页选择了城市
            uni.$emit('citySelected', city);
        }
    });
};

// 滚动到指定字母
const scrollToLetter = (letter) => {
    currentLetter.value = letter;
    // 更新滚动ID，触发scroll-view滚动
    currentScrollId.value = `city-group-${letter}`;
};

// 返回上一页
const navBack = () => {
    uni.navigateBack({ delta: 1 });
};

// 组件挂载时获取城市数据
onMounted(() => {
    getCityData();
});
</script>

<style scoped>
.city-select-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-top: 16px;
}

/* 导航栏 */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.nav-left,
.nav-right {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

/* 搜索框 */
.search-box {
    display: flex;
    align-items: center;
    margin: 12px 16px;
    padding:8px 16px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-icon {
    margin-right: 8px;
}

.search-input {
    flex: 1;
    font-size: 14px;
    color: #333;
    border: none;
    outline: none;
}

/* 定位城市 */
.location-section {
    padding: 16px;
    background-color: #fff;
    margin-bottom: 8px;
}

.section-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.location-city {
    display: inline-block;
    padding: 8px 20px;
    background-color: #f0f9ff;
    color: #007aff;
    border-radius: 20px;
    font-size: 14px;
}

.location-city.active {
    background-color: #007aff;
    color: #fff;
}

/* 热门城市 */
.hot-section {
    padding: 16px;
    background-color: #fff;
    margin-bottom: 8px;
}

.city-count {
    padding: 0 16px 12px;
    background-color: #fff;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.hot-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.city-item {
    padding: 8px 20px;
    background-color: #f5f5f5;
    color: #333;
    border-radius: 20px;
    font-size: 14px;
}

.city-item.active {
    background-color: #007aff;
    color: #fff;
}

/* 城市列表 */
.city-list-section {
    display: flex;
    background-color: #fff;
    height: calc(100vh - 180px);
}

.city-list-content {
    flex: 1;
    overflow-y: auto;
}

.city-group {
    padding: 0 16px;
}

.group-title {
    font-size: 14px;
    color: #666;
    margin: 12px 0 8px 0;
    padding-left: 4px;
}

.city-list-content .city-item {
    display: block;
    padding: 12px 4px;
    margin-bottom: 0;
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid #f0f0f0;
}

.city-list-content .city-item.active {
    background-color: transparent;
    color: #007aff;
}

/* 右侧字母索引 */
.letter-index {
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.letter-item {
    width: 24px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    margin: 2px 0;
}

.letter-item.active {
    color: #007aff;
    font-weight: bold;
}
</style>