From 9c99b0d97def04e35c6de5539d7bcf96d8a3e551 Mon Sep 17 00:00:00 2001
From: wanglihui <1769794040@qq.com>
Date: Sun, 30 Jul 2023 11:45:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=96=B0=E5=A2=9E=E5=A5=BD?=
 =?UTF-8?q?=E5=8F=8B=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/message.ts                   |   9 +
 src/api/user.ts                      |   9 +
 src/pages/message/recordpersonal.vue | 245 +++++++++++++++++++++++++++
 src/pages/user/friends.vue           | 128 ++++----------
 src/pages/user/userlist.vue          |  16 +-
 5 files changed, 313 insertions(+), 94 deletions(-)
 create mode 100644 src/pages/message/recordpersonal.vue

diff --git a/src/api/message.ts b/src/api/message.ts
index faa3c79..8ba5570 100644
--- a/src/api/message.ts
+++ b/src/api/message.ts
@@ -17,3 +17,12 @@ export function messageProhibitWordsGet(params: any) {
     params
   });
 }
+
+// 聊天消息
+export function messageRecordpersonalGet(params: any) {
+  return request({
+    url: '/manager/message/recordpersonal',
+    method: 'get',
+    params
+  });
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index e0e5a05..84b5bec 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -17,3 +17,12 @@ export function userDisablelistGet(params: any) {
     params
   });
 }
+
+// 好友列表
+export function userFriendsGet(params: any) {
+  return request({
+    url: 'manager/user/friends',
+    method: 'get',
+    params
+  });
+}
diff --git a/src/pages/message/recordpersonal.vue b/src/pages/message/recordpersonal.vue
new file mode 100644
index 0000000..76ae149
--- /dev/null
+++ b/src/pages/message/recordpersonal.vue
@@ -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>
diff --git a/src/pages/user/friends.vue b/src/pages/user/friends.vue
index e94c2bc..761343f 100644
--- a/src/pages/user/friends.vue
+++ b/src/pages/user/friends.vue
@@ -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
+    }
+  });
 };
 
 // 初始化
diff --git a/src/pages/user/userlist.vue b/src/pages/user/userlist.vue
index 27a0bb4..17cb605 100644
--- a/src/pages/user/userlist.vue
+++ b/src/pages/user/userlist.vue
@@ -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
+    }
+  });
 };
 
 // 初始化