mirror of
https://github.com/TangSengDaoDao/TangSengDaoDaoManager
synced 2025-06-05 00:28:11 +00:00
feat: ✨新增好友列表
This commit is contained in:
wanglihui
parent
45e4a037e7
commit
9c99b0d97d
@ -17,3 +17,12 @@ export function messageProhibitWordsGet(params: any) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 聊天消息
|
||||
export function messageRecordpersonalGet(params: any) {
|
||||
return request({
|
||||
url: '/manager/message/recordpersonal',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
@ -17,3 +17,12 @@ export function userDisablelistGet(params: any) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 好友列表
|
||||
export function userFriendsGet(params: any) {
|
||||
return request({
|
||||
url: 'manager/user/friends',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
245
src/pages/message/recordpersonal.vue
Normal file
245
src/pages/message/recordpersonal.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="wh-full flex-col">
|
||||
<!-- 布局 -->
|
||||
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">
|
||||
<el-text type="primary">{{ $route.query.name }}</el-text>
|
||||
和
|
||||
<el-text type="primary">{{ $route.query.toname }}</el-text>
|
||||
聊天记录
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
<el-form-item class="mb-0 !mr-16px">
|
||||
<el-input v-model="queryFrom.keyword" placeholder="发送者名字/消息内容" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="mb-0 !mr-0">
|
||||
<el-button type="primary" @click="getUserList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden p-12px">
|
||||
<el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
|
||||
<el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
|
||||
<template #header>
|
||||
<i-bd-setting class="cursor-pointer" size="16" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in column" v-bind="item" :key="item.prop">
|
||||
<template #default="scope">
|
||||
<template v-if="item.render">
|
||||
<component :is="item.render" :row="scope.row"> </component>
|
||||
</template>
|
||||
<template v-else-if="item.formatter">
|
||||
<slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
|
||||
<div></div>
|
||||
<el-pagination
|
||||
v-model:current-page="queryFrom.page_index"
|
||||
v-model:page-size="queryFrom.page_size"
|
||||
:page-sizes="[15, 20, 30, 50, 100]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
title: 聊天记录
|
||||
isAffix: false
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { messageRecordpersonalGet } from '@/api/message';
|
||||
|
||||
const route = useRoute();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'message_id',
|
||||
label: '消息编号',
|
||||
fixed: 'left',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'sender_name',
|
||||
label: '发送者名字',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
prop: 'sender',
|
||||
label: '发送者ID',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'avatar',
|
||||
label: '发送者头像',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
let img_url = '';
|
||||
if (scope.row['sender']) {
|
||||
img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['sender']}/avatar`;
|
||||
}
|
||||
return (
|
||||
<ElAvatar src={img_url} size={54}>
|
||||
{scope.row['sender_name']}
|
||||
</ElAvatar>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'payload',
|
||||
label: '消息内容',
|
||||
minWidth: 300,
|
||||
render: (scope: any) => {
|
||||
const showContent = scope.row['payload'];
|
||||
// 是否加密
|
||||
if (scope.row['is_encrypt'] == 1) {
|
||||
return '加密消息，无法查看';
|
||||
} else {
|
||||
return showContent?.content;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'is_encrypt',
|
||||
label: '是否加密',
|
||||
width: 86,
|
||||
formatter(row: any) {
|
||||
return row.is_encrypt === 1 ? '是' : '否';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'revoke',
|
||||
label: '是否撤回',
|
||||
width: 120,
|
||||
formatter(row: any) {
|
||||
return row.revoke === 1 ? '是' : '否';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'is_deleted',
|
||||
label: '是否删除',
|
||||
width: 120,
|
||||
formatter(row: any) {
|
||||
return row.is_deleted === 1 ? '是' : '否';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'created_at',
|
||||
label: '发送时间',
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: (scope: any) => {
|
||||
return (
|
||||
<ElSpace>
|
||||
<ElButton type="danger" onClick={() => onDel(scope.row)}>
|
||||
删除
|
||||
</ElButton>
|
||||
</ElSpace>
|
||||
);
|
||||
}
|
||||
}
|
||||
]);
|
||||
const tableData = ref<any[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
// 分页
|
||||
const total = ref(0);
|
||||
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
uid: route.query.uid,
|
||||
touid: route.query.touid,
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
const getUserList = () => {
|
||||
loadTable.value = true;
|
||||
messageRecordpersonalGet(queryFrom).then((res: any) => {
|
||||
loadTable.value = false;
|
||||
tableData.value = res.list;
|
||||
total.value = res.count;
|
||||
});
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onSizeChange = (size: number) => {
|
||||
queryFrom.page_size = size;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
// 分页page-size
|
||||
const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
// 删除
|
||||
const onDel = (item: any) => {
|
||||
console.log(item);
|
||||
ElMessageBox.confirm('确定，是否删除此消息?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false,
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '开发中..'
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消成功！'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 样式
|
||||
.bd-title {
|
||||
border-bottom: 1px solid var(--el-card-border-color);
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,10 @@
|
||||
<div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
|
||||
<div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
|
||||
<div class="bd-title-left">
|
||||
<p class="m-0 font-600">用户列表</p>
|
||||
<p class="m-0 font-600">
|
||||
<el-text type="primary">{{ $route.query.name }}</el-text>
|
||||
的好友
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center h-50px">
|
||||
<el-form inline>
|
||||
@ -64,31 +67,28 @@ meta:
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElAvatar } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { userListGet } from '@/api/user';
|
||||
import { userFriendsGet } from '@/api/user';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
const column = reactive([
|
||||
const column = reactive<Column.ColumnOptions[]>([
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户名',
|
||||
fixed: 'left',
|
||||
label: '好友昵称',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
label: '手机号',
|
||||
fixed: 'left',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
prop: 'avatar',
|
||||
label: '头像',
|
||||
label: '好友头像',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
width: 90,
|
||||
render: (scope: any) => {
|
||||
let img_url = '';
|
||||
if (scope.row['uid']) {
|
||||
@ -103,87 +103,28 @@ const column = reactive([
|
||||
},
|
||||
{
|
||||
prop: 'uid',
|
||||
label: '用户ID',
|
||||
minWidth: 300
|
||||
label: '好友ID'
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '用户状态',
|
||||
width: 86,
|
||||
formatter(row: any) {
|
||||
return row.status === 1 ? '正常' : '封禁';
|
||||
}
|
||||
prop: 'relationship_time',
|
||||
label: '成为好友时间'
|
||||
},
|
||||
{
|
||||
prop: 'short_no',
|
||||
label: '悟空号',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
prop: 'sex',
|
||||
label: '性别',
|
||||
width: 60,
|
||||
formatter(row: any) {
|
||||
return row.sex === 1 ? '男' : '女';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'register_time',
|
||||
label: '注册时间',
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
prop: 'device_name',
|
||||
label: '登录设备',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'device_model',
|
||||
label: '登录设备型号',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'online',
|
||||
label: '在线状态',
|
||||
width: 90,
|
||||
formatter(row: any) {
|
||||
return row.online === 1 ? '在线' : '离线';
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'last_online_time',
|
||||
label: '最后离线时间',
|
||||
width: 150
|
||||
prop: 'remark',
|
||||
label: '备注'
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
width: 124,
|
||||
render: (scope: any) => {
|
||||
return (
|
||||
<ElSpace>
|
||||
<ElButton type="primary" onClick={() => aa(scope.row)}>
|
||||
发消息
|
||||
<ElButton type="primary" onClick={() => onRecordpersonal(scope.row)}>
|
||||
聊天记录
|
||||
</ElButton>
|
||||
<ElDropdown
|
||||
v-slots={{
|
||||
default: () => <ElButton>更多</ElButton>,
|
||||
dropdown: () => {
|
||||
return (
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem onClick={() => bb(scope.row)}>
|
||||
<i-bd-every-user />
|
||||
好友列表
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem>黑名单列表</ElDropdownItem>
|
||||
<ElDropdownItem>禁封</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ElSpace>
|
||||
);
|
||||
}
|
||||
@ -197,16 +138,17 @@ const total = ref(0);
|
||||
// 查询
|
||||
const queryFrom = reactive({
|
||||
keyword: '',
|
||||
uid: route.query.uid,
|
||||
page_size: 15,
|
||||
page_index: 1
|
||||
});
|
||||
|
||||
const getUserList = () => {
|
||||
loadTable.value = true;
|
||||
userListGet(queryFrom).then((res: any) => {
|
||||
userFriendsGet(queryFrom).then((res: any) => {
|
||||
loadTable.value = false;
|
||||
tableData.value = res.list;
|
||||
total.value = res.count;
|
||||
tableData.value = res;
|
||||
total.value = res.length;
|
||||
});
|
||||
};
|
||||
|
||||
@ -221,13 +163,17 @@ const onCurrentChange = (current: number) => {
|
||||
queryFrom.page_index = current;
|
||||
getUserList();
|
||||
};
|
||||
|
||||
const aa = (a: any) => {
|
||||
console.log(a);
|
||||
};
|
||||
|
||||
const bb = (a: any) => {
|
||||
console.log(a);
|
||||
// 聊天记录
|
||||
const onRecordpersonal = (item: any) => {
|
||||
router.push({
|
||||
path: '/message/recordpersonal',
|
||||
query: {
|
||||
name: route.query.name,
|
||||
uid: route.query.uid,
|
||||
touid: item.uid,
|
||||
toname: item.name
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
|
||||
@ -64,10 +64,13 @@ meta:
|
||||
</route>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
|
||||
import { BU_DOU_CONFIG } from '@/config';
|
||||
// API 接口
|
||||
import { userListGet } from '@/api/user';
|
||||
|
||||
const router = useRouter();
|
||||
/**
|
||||
* 表格
|
||||
*/
|
||||
@ -173,7 +176,7 @@ const column = reactive([
|
||||
dropdown: () => {
|
||||
return (
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem onClick={() => bb(scope.row)}>
|
||||
<ElDropdownItem onClick={() => onFriends(scope.row)}>
|
||||
<i-bd-every-user class={'mr-4px'} />
|
||||
好友列表
|
||||
</ElDropdownItem>
|
||||
@ -232,8 +235,15 @@ const aa = (a: any) => {
|
||||
console.log(a);
|
||||
};
|
||||
|
||||
const bb = (a: any) => {
|
||||
console.log(a);
|
||||
// 好友列表
|
||||
const onFriends = (item: any) => {
|
||||
router.push({
|
||||
path: '/user/friends',
|
||||
query: {
|
||||
uid: item.uid,
|
||||
name: item.name
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user