crm-app-vue3/components/brand-list/index.vue

<template>
    <u-popup :show="show" @close="hideBrandList" mode="right" class="brand_list_popup">
        <view class="brand_list_page">
            <view class="brand_list">
                <u-navbar class="nav-bar" title="品牌" :autoBack="false" :placeholder="true" v-hideNav @leftClick="hideBrandList">
                    <!-- <view class="u-nav-slot" slot="right" @click="handleAddBrand">
                        <u-icon name="plus-circle" color="#2979ff" size="20"></u-icon>
                        <text>新增</text>
                    </view> -->
                </u-navbar>
                <u-search placeholder="搜索" v-model="keyword" @custom="handleSearch" @change="handleSearch"></u-search>
                <view class="suggest_list">
                    <view class="brand_item" v-for="item in adviceList" :key="item.id" @click="handleBrandClick(item)">
                        <image class="brand_img" :src="item.imgUrl ? item.imgUrl : '/static/no-img.png'" alt=""></image>
                        <view class="brand_name">{{ item.dictLabel }}</view>
                    </view>
                </view>
            </view>
            <u-index-list :index-list="indexList" class="index_list">
                <template v-for="(item, index) in brandList">
                    <!-- #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="cell in item" :key="cell.dictValue" @click="handleBrandClick(cell)">
                            <image class="brand_img" :src="cell.imgUrl ? cell.imgUrl : '/static/no-img.png'" alt=""></image>
                            {{ cell.dictLabel }}
                        </view>
                    </u-index-item>
                </template>
            </u-index-list>
            <!-- <view class="no_brand">
                <u-button type="primary" :plain="true" text="找不到品牌" color="#108cff"></u-button>
            </view> -->
        </view>
    </u-popup>

</template>
<script>
import { chineseToPinYin } from '@/utils/pinyin.js'
export default {
    components: {
    },
    props: {
    },
    emits: ['selectedBrand'],
    data() {
        return {
            show: false,
            keyword: '',
            adviceList: [],
            indexList: [],
            brandList: [],
            list: [],
        }
    },
    methods: {
        handleSearch(val) {
            if(val){
                this.filterData(this.list.filter(item => item.dictLabel.includes(this.keyword)))
            }else{
                this.filterData(this.list)
            }
        },
        handleBrandClick(brand) {
            this.$emit('selectedBrand', brand)
            this.hideBrandList()
        },
        // 显示品牌列表
        showBrandList() {
            this.getList()
            this.show = true;
        },
        // 隐藏品牌列表
        hideBrandList() {
            this.show = false;
        },
        getList() {
            this.$getDicts('crm_form_brand').then(res => {
                this.filterData(res)
                this.list = res
                this.adviceList = res.filter(item => item.recommend)
            })
        },
        filterData(res){
            const processedData = this.processBrandData(res)
            this.brandList = processedData.groupedList
            this.indexList = processedData.indexList
        },
        processBrandData(data) {
            // 1. 首先按 isDefault 排序（true 的排在前面），然后按 dictLabel 字母排序
            const sortedData = data.sort((a, b) => {
                // isDefault 为 true 的排在前面
                if (a.isDefault !== b.isDefault) {
                    return b.isDefault - a.isDefault
                }
                // 如果 isDefault 相同，则按 dictLabel 字母顺序排序
                return a.dictLabel.localeCompare(b.dictLabel, 'zh-CN')
            })

            // 2. 按首字母分组
            const groupedData = {}
            const indexList = []

            for (const item of sortedData) {
                let firstLetter
                const label = item.dictLabel || ''
                
                if (/[a-zA-Z]/.test(label.charAt(0))) {
                    // 英文字母开头，使用大写首字母
                    firstLetter = label.charAt(0).toUpperCase()
                } else {
                    // 中文字符，使用拼音首字母
                    try {
                        const pinyin = chineseToPinYin(label)
                        if (pinyin && pinyin.length > 0 && /[a-zA-Z]/.test(pinyin.charAt(0).toUpperCase())) {
                            firstLetter = pinyin.charAt(0).toUpperCase()
                        } else {
                            firstLetter = '#'
                        }
                    } catch (error) {
                        firstLetter = '#'
                    }
                }

                // 创建字母分组
                if (!groupedData[firstLetter]) {
                    groupedData[firstLetter] = []
                    indexList.push(firstLetter)
                }
                groupedData[firstLetter].push(item)
            }

            // 3. 按字母顺序排序索引列表
            indexList.sort((a, b) => {
                if (a === '#') return 1
                if (b === '#') return -1
                return a.localeCompare(b)
            })

            // 4. 将分组数据转换为数组格式
            const groupedList = indexList.map(letter => groupedData[letter])
            return {
                groupedList,
                indexList
            }
        },
    }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>