wallet_app/src/views/im/contactList/index.vue

<template>
    <div class="container">
        <div class="content">
            <div class="list-ul">
                <div class="list-li" @click="router.push('invitation')">
                    <svg-icon class="li-img" name="yq" />
                    <div class="li-cont">新邀请</div>
                </div>
                <div class="list-li" @click="router.push('group')">
                    <svg-icon class="li-img" name="ql" />
                    <div class="li-cont no-border">群聊</div>
                </div>
                <!-- <div class="list-li">
                    <svg-icon class="li-img" name="tz" />
                    <div class="li-cont no-border">系统通知</div>
                </div> -->
            </div>
            <van-index-bar>
                <template v-for="(group, groupIndex) in memberGroups" :key="group.index">
                    <van-index-anchor :index="group.index" />
                    <van-cell-group inset>
                        <van-cell v-for="(item, index) in group.members">
                            <template #title>
                                <div class="cell-item">
                                    <van-image
                                        class="cell-img"
                                        round
                                        :src="item.avatar"
                                    />
                                    <div>{{ item.nickname }}</div>
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </template>
            </van-index-bar>
            <div class="total">{{memberGroups.length}}个朋友</div>
        </div>
    </div>
</template>

<script setup>
import { userList } from "@/api/path/im.api";
import {getFirstLetter} from "@/utils/utils";
import { useWalletStore } from "@/stores/modules/walletStore";
const router = useRouter();
const walletStore = useWalletStore();

const memberGroups = ref([]);

const getuserList = async () => {
  const res = await userList({ uuid: walletStore.account });
  const groupedMap = {};

  res.data.forEach(user => {
    const name = user.nickname || '';
    const firstLetter = getFirstLetter(name); // 获取首字母

    if (!groupedMap[firstLetter]) {
      groupedMap[firstLetter] = [];
    }

    groupedMap[firstLetter].push({...user});
  });

  // 转为数组并按 index 排序
  const groupedList = Object.keys(groupedMap)
    .sort()
    .map(letter => ({
      index: letter,
      members: groupedMap[letter]
    }));

  memberGroups.value = groupedList;
  console.log(memberGroups.value)
};

onMounted(() => {
  getuserList();
});
</script>

<style lang="less" scoped>
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .content{
        padding: 16px;
        overflow: auto;
        .list-ul{
            background: #fff;
            border-radius: 12px;
            padding: 12px 16px;
            .list-li{
                display: flex;
                align-items: center;
                .li-img{
                    width: 32px;
                    height: 32px;
                    flex-shrink: 0;
                    margin-right: 12px;
                }
                .li-cont{
                    flex: 1;
                    border-bottom: 1px solid #F2F2F2;
                    padding-top:10px;
                    padding-bottom: 10px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: #000000;
                }
                .no-border {
                    border-bottom: none;
                }
            }
        }
        :deep(.van-cell-group--inset){
            border-radius:12px !important;
            margin: 0 !important;
        }
        :deep(.van-cell){
            padding: 12px 16px !important;
        }
        :deep(.van-cell:after){
        left: 60px;
        }
        :deep(.van-index-anchor--sticky){
            background: #F7F8FA !important;
            color: #4765DD !important;
        }
        :deep(.van-index-bar__index){
            font-weight: 400 !important;
            font-size: 10px !important;
            color: #1D2129 !important;
            margin-bottom: 8px !important;
        }
        :deep(.van-index-bar__index--active){
            color: #4765DD !important;
        }
        .cell-item{
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #000000;
            .cell-img{
                width: 32px;
                height: 32px;
                flex-shrink: 0;
                margin-right: 12px;
            }
        }
        .total{
            text-align: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8D8D8D;
            margin-top: 22px;
        }
    }
    .content::-webkit-scrollbar{
        width: 0;
    }
}

</style>