直接上代码
-
首先,调用
getMyFriendsApi()
函数获取好友列表数据。这个函数返回一个 Promise 对象,当 Promise 被 resolved 时,将好友列表数据传递给.then()
方法中的回调函数。 -
在
.then()
方法中,首先将获取到的好友列表数据赋值给totalmition.value
,然后使用.map()
方法将每个好友对象中的用户信息提取出来,并存储到extractedData.value
中。这样就得到了一个只包含用户信息对象的数组。 -
接着,使用
.sort()
方法对extractedData.value
中的用户信息对象数组进行排序,排序规则是根据用户昵称的首字母进行比较,使用localeCompare()
方法。 -
然后,通过
console.log()
打印排序后的好友列表数据,以便进行验证。 -
使用
computed()
函数创建了名为sortedFriends
的计算属性,其值为extractedData.value
,这样可以在模板中直接引用sortedFriends
来获取已排序的好友列表数据。 -
最后,使用
computed()
函数创建了名为groupedFriends
的计算属性,其值为将已排序的好友列表数据按照首字母进行分组后的结果。具体来说,遍历已排序的好友列表数据,将每个好友根据昵称首字母放入对应的分组中,并将分组结果保存在groupedFriends
中。
<script setup lang="ts">
import { getMyFriendsApi } from '../../api/friend'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const isHaoyouActive = ref(true);
const isQunActive = ref(false);
const totalmition = ref(null)
const extractedData = ref([])
//获取用户列表并进行处理
getMyFriendsApi().then(data => {
totalmition.value = data.data.data.user
extractedData.value = totalmition.value.map(item => item.UserInfo);
extractedData.value.sort((a, b) => a.nickname.localeCompare(b.nickname))
console.log(extractedData.value, "排序后的好友列表数据");
})
const sortedFriends = computed(() => extractedData.value)
const groupedFriends = computed(() => {
const groups = {};
sortedFriends.value.forEach(user => {
const letter = user.nickname.charAt(0).toUpperCase();
if (!groups[letter]) {
groups[letter] = [];
}
groups[letter].push(user);
});
return Object.keys(groups).map(letter => ({
letter,
users: groups[letter]
}));
})
const tong=()=>{
router.push('/friendnomition')
}
const hao=()=>{
router.push('/friendmition')
}
const bian1 = () => {
isHaoyouActive.value = true;
isQunActive.value = false;
}
const bian2 = () => {
isHaoyouActive.value = false;
isQunActive.value = true;
}
</script>