wallet_app/src/views/im/detail/addMember/index.vue

<template>
    <div class="container">
        <van-index-bar class="list">
            <template v-for="(group, groupIndex) in memberGroups" :key="group.index">
                <van-index-anchor :index="group.index" />
                <van-checkbox-group v-model="checked">
                    <van-cell-group inset>
                        <van-cell
                            v-for="(item, index) in group.members"
                            :key="item.id"
                            clickable
                            @click="toggle(groupIndex, index)"
                        >
                            <template #icon>
                                <van-checkbox checked-color="#4765DD"
                                    :name="item"
                                    :ref="el => setCheckboxRef(groupIndex, index, el)"
                                    @click.stop
                                />
                            </template>
                            <template #title>
                                <div class="cell-item">
                                    <van-image class="img-icon" round :src="item.avatar" />
                                    <div>{{ item.nickname }}</div>
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </template>
        </van-index-bar>
  
        <div class="footer-box">
            <div class="avatar-list">
                <van-image
                    v-for="item in checked"
                    :key="item.id"
                    class="img-icon"
                    round
                    :src="item.avatar"
                />
            </div>
            <div class="btn" :class="checked.length == 0?'':'active-btn'" @click="submit">完成({{ checked.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 checked = ref([]);
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)
};

const checkboxRefs = ref([]);
onBeforeUpdate(() => {
  checkboxRefs.value = [];
});

const setCheckboxRef = (groupIndex, index, el) => {
  if (!checkboxRefs.value[groupIndex]) {
    checkboxRefs.value[groupIndex] = [];
  }
  checkboxRefs.value[groupIndex][index] = el;
};

// 切换选中
const toggle = (groupIndex, index) => {
  checkboxRefs.value[groupIndex]?.[index]?.toggle();
};

const submit = () => {
    if(checked.value.length == 0) return;
    console.log("已选择成员：", checked.value);
    
    router.push('detail')
};


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

<style lang="less" scoped>
.container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.list{
    flex: 1;
    overflow: auto;
    :deep(.van-cell-group--inset){
        border-radius:12px !important;
    }
    :deep(.van-cell){
        padding: 12px 16px !important;
    }
    :deep(.van-cell:after){
      left: 90px;
    }
    :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;
        margin-left: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #000000;
        .img-icon{
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            margin-right: 12px;
        }
    }
}
.list::-webkit-scrollbar{
    width: 0;
}
.footer-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    height: 54px;
    background: #ffffff;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #8d8d8d;

    .avatar-list {
        display: flex;
        overflow-x: auto;
        flex: 1;
        .img-icon {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            margin-right: 4px;
        }
    }
    .avatar-list::-webkit-scrollbar{
        height: 0;
    }
    // .selected-count {
    //     margin-left: 16px;
    //     white-space: nowrap;
    // }
    .btn{
      margin-left: 16px;
      height: 25px;
      line-height: 25px;
      padding: 0 6px;
      background: #F2F2F2;
      border-radius: 4px;
      box-sizing: border-box;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #8D8D8D;
    }
    .active-btn{
      background: #4765DD;
      color: #FFFFFF;
    }
}
</style>