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

---
 src/config/index.ts         |   2 +-
 src/pages/user/friends.vue  | 244 ++++++++++++++++++++++++++++++++++++
 src/pages/user/userlist.vue |  16 ++-
 src/styles/element.scss     |   4 +
 4 files changed, 262 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/user/friends.vue

diff --git a/src/config/index.ts b/src/config/index.ts
index 7eaf52e..c5a5e54 100755
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -14,5 +14,5 @@ export const ROUTER_WHITE_LIST: string[] = ['/login'];
 export const BU_DOU_CONFIG = {
   APP_TITLE: '唐僧叨叨后台管理',
   APP_TITLE_SHORT: '唐僧',
-  APP_URL: 'https://chatapi.githubim.com/v1/'
+  APP_URL: 'https://api.botgate.cn/v1/'
 };
diff --git a/src/pages/user/friends.vue b/src/pages/user/friends.vue
new file mode 100644
index 0000000..e94c2bc
--- /dev/null
+++ b/src/pages/user/friends.vue
@@ -0,0 +1,244 @@
+<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">用户列表</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="uid/手机号/用户名" 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 { ElButton, ElSpace, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import { BU_DOU_CONFIG } from '@/config';
+// API 接口
+import { userListGet } from '@/api/user';
+/**
+ * 表格
+ */
+const column = reactive([
+  {
+    prop: 'name',
+    label: '用户名',
+    fixed: 'left',
+    width: 140
+  },
+  {
+    prop: 'phone',
+    label: '手机号',
+    fixed: 'left',
+    width: 120
+  },
+  {
+    prop: 'avatar',
+    label: '头像',
+    align: 'center',
+    width: 80,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['uid']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
+      }
+      return (
+        <ElAvatar src={img_url} size={54}>
+          {scope.row['name']}
+        </ElAvatar>
+      );
+    }
+  },
+  {
+    prop: 'uid',
+    label: '用户ID',
+    minWidth: 300
+  },
+  {
+    prop: 'status',
+    label: '用户状态',
+    width: 86,
+    formatter(row: any) {
+      return row.status === 1 ? '正常' : '封禁';
+    }
+  },
+  {
+    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: 'operation',
+    label: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 180,
+    render: (scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="primary" onClick={() => aa(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>
+      );
+    }
+  }
+]);
+const tableData = ref<any[]>([]);
+const loadTable = ref<boolean>(false);
+// 分页
+const total = ref(0);
+
+// 查询
+const queryFrom = reactive({
+  keyword: '',
+  page_size: 15,
+  page_index: 1
+});
+
+const getUserList = () => {
+  loadTable.value = true;
+  userListGet(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 aa = (a: any) => {
+  console.log(a);
+};
+
+const bb = (a: any) => {
+  console.log(a);
+};
+
+// 初始化
+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/userlist.vue b/src/pages/user/userlist.vue
index 4600905..27a0bb4 100644
--- a/src/pages/user/userlist.vue
+++ b/src/pages/user/userlist.vue
@@ -169,12 +169,22 @@ const column = reactive([
           </ElButton>
           <ElDropdown
             v-slots={{
-              default: () => <ElButton>更多</ElButton>,
+              default: () => <ElButton class={'bu-button'}>更多</ElButton>,
               dropdown: () => {
                 return (
                   <ElDropdownMenu>
-                    <ElDropdownItem onClick={() => bb(scope.row)}>好友列表</ElDropdownItem>
-                    <ElDropdownItem>好友列表</ElDropdownItem>
+                    <ElDropdownItem onClick={() => bb(scope.row)}>
+                      <i-bd-every-user class={'mr-4px'} />
+                      好友列表
+                    </ElDropdownItem>
+                    <ElDropdownItem>
+                      <i-bd-personal-privacy class={'mr-4px'} />
+                      黑名单列表
+                    </ElDropdownItem>
+                    <ElDropdownItem>
+                      <i-bd-info class={'mr-4px'} />
+                      禁封
+                    </ElDropdownItem>
                   </ElDropdownMenu>
                 );
               }
diff --git a/src/styles/element.scss b/src/styles/element.scss
index 176d229..f9173e0 100755
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -263,3 +263,7 @@
   height: 48px !important;
   line-height: 48px !important;
 }
+/* bu-button*/
+.bu-button:focus-visible {
+  outline: 0;
+}