-
+
@@ -22,7 +22,44 @@
管理员
-
UID. {{ user.id }}
+
+ UID. {{ user.id }}
+ {{ formatDate(user.created_on) }} 加入
+
+
+
+
+ 关注 {{ user.follows}}
+
+
+
+
+ 粉丝 {{ user.followings }}
+
+
+
-
@@ -89,16 +125,18 @@ import { NIcon } from 'naive-ui'
import type { Component } from 'vue'
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
-import { getUserProfile, getUserPosts, changeUserStatus, deleteFriend } from '@/api/user';
+import { getUserProfile, getUserPosts, changeUserStatus, deleteFriend, followUser, unfollowUser } from '@/api/user';
import { useDialog, DropdownOption } from 'naive-ui';
import WhisperAddFriend from '../components/whisper-add-friend.vue';
import { MoreHorizFilled } from '@vicons/material';
+import { formatDate } from '@/utils/formatTime';
import {
PaperPlaneOutline,
PersonAddOutline,
PersonRemoveOutline,
CubeOutline,
- TrashOutline,
+ BodyOutline,
+ WalkOutline
} from '@vicons/ionicons5';
const dialog = useDialog();
@@ -113,6 +151,10 @@ const user = reactive({
nickname: '',
is_admin: false,
is_friend: true,
+ is_following: false,
+ created_on: 0,
+ follows: 0,
+ followings: 0,
status: 1,
});
const userLoading = ref(false);
@@ -282,6 +324,10 @@ const loadUser = () => {
user.nickname = res.nickname;
user.is_admin = res.is_admin;
user.is_friend = res.is_friend;
+ user.created_on = res.created_on;
+ user.is_following = res.is_following;
+ user.follows = res.follows;
+ user.followings = res.followings;
user.status = res.status;
loadPage();
})
@@ -355,6 +401,19 @@ const userOptions = computed(() => {
});
}
}
+ if (user.is_following) {
+ options.push({
+ label: '取消关注',
+ key: 'unfollow',
+ icon: renderIcon(WalkOutline)
+ })
+ } else {
+ options.push({
+ label: '关注',
+ key: 'follow',
+ icon: renderIcon(BodyOutline)
+ })
+ }
if (user.is_friend) {
options.push({
label: '删除好友',
@@ -371,7 +430,7 @@ const userOptions = computed(() => {
return options;
});
const handleUserAction = (
- item: 'whisper' | 'delete' | 'requesting' | 'banned' | 'deblocking'
+ item: 'whisper' | 'follow' | 'unfollow' | 'delete' | 'requesting' | 'banned' | 'deblocking'
) => {
switch (item) {
case 'whisper':
@@ -383,6 +442,10 @@ const handleUserAction = (
case 'requesting':
openAddFriendWhisper();
break;
+ case 'follow':
+ case 'unfollow':
+ handleFollowUser();
+ break;
case 'banned':
case 'deblocking':
banUser();
@@ -414,6 +477,43 @@ const openDeleteFriend = () => {
},
});
};
+const handleFollowUser = () => {
+ dialog.success({
+ title: '提示',
+ content:
+ '确定' + (user.is_following ? '取消关注' : '关注') + '该用户吗?',
+ positiveText: '确定',
+ negativeText: '取消',
+ onPositiveClick: () => {
+ userLoading.value = true;
+ if (user.is_following) {
+ unfollowUser({
+ user_id: user.id,
+ }).then((_res) => {
+ userLoading.value = false;
+ window.$message.success('取消关注成功');
+ loadUser();
+ })
+ .catch((err) => {
+ userLoading.value = false;
+ console.log(err);
+ });
+ } else {
+ followUser({
+ user_id: user.id,
+ }).then((_res) => {
+ userLoading.value = false;
+ window.$message.success('关注成功');
+ loadUser();
+ })
+ .catch((err) => {
+ userLoading.value = false;
+ console.log(err);
+ });
+ }
+ },
+ });
+};
const banUser = () => {
dialog.warning({
title: '警告',
@@ -429,8 +529,13 @@ const banUser = () => {
id: user.id,
status: user.status === 1 ? 2 : 1,
})
- .then((res) => {
+ .then((_res) => {
userLoading.value = false;
+ if (user.status === 1) {
+ window.$message.success('禁言成功');
+ } else {
+ window.$message.success('解封成功');
+ }
loadUser();
})
.catch((err) => {
@@ -467,23 +572,27 @@ onMounted(() => {
padding: 16px;
.avatar {
- width: 55px;
+ width: 72px;
}
.base-info {
position: relative;
- width: calc(100% - 55px);
+ margin-left: 12px;
+ width: calc(100% - 84px);
.username {
line-height: 16px;
font-size: 16px;
}
- .uid {
+ .userinfo {
font-size: 14px;
line-height: 14px;
margin-top: 10px;
opacity: 0.75;
+ .info-item {
+ margin-right: 12px;
+ }
}
.top-tag {