|
@@ -21,7 +21,7 @@
|
|
|
<template #title>
|
|
|
<div class="cell-item">
|
|
|
<van-image class="img-icon" round :src="item.avatar" />
|
|
|
- <div>{{ item.name }}</div>
|
|
|
+ <div>{{ item.nickname }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-cell>
|
|
@@ -47,61 +47,42 @@
|
|
|
|
|
|
|
|
|
<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] = [];
|
|
|
+ }
|
|
|
|
|
|
-const memberGroups = ref([
|
|
|
- {
|
|
|
- index: 'A',
|
|
|
- members: [
|
|
|
- { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'B',
|
|
|
- members: [
|
|
|
- { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'C',
|
|
|
- members: [
|
|
|
- { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'D',
|
|
|
- members: [
|
|
|
- { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'E',
|
|
|
- members: [
|
|
|
- { id: '1', name: '安琪拉', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '2', name: '艾琳', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'F',
|
|
|
- members: [
|
|
|
- { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'G',
|
|
|
- members: [
|
|
|
- { id: '3', name: '白起', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- { id: '4', name: '百里守约', avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' },
|
|
|
- ],
|
|
|
- },
|
|
|
-]);
|
|
|
+ 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(() => {
|
|
@@ -123,9 +104,14 @@ const toggle = (groupIndex, index) => {
|
|
|
const submit = () => {
|
|
|
if(checked.value.length == 0) return;
|
|
|
console.log("已选择成员:", checked.value);
|
|
|
+
|
|
|
router.push('detail')
|
|
|
};
|
|
|
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getuserList();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|