用户好友、关注、粉丝弹窗数据

src/api/ums/member.js

@@ -135,3 +135,12 @@ export function editUserData(data) {
     data: data
   });
 }
+
+// 用户的关注、粉丝、好友列表
+export function getUserFansFriendsFocusList(data) {
+  return request({
+    url: `/ums/fans/list`,
+    method: 'post',
+    data: data
+  });
+}

src/views/ums/member/index.vue

@@ -70,9 +70,21 @@
             {{ scope.row.userId ? '内部账号' : '外部账号' }}
           </template>
         </el-table-column>
-        <el-table-column label="关注数量" prop="followCount" width="100" />
-        <el-table-column label="粉丝数量" prop="fansCount" width="100" />
-        <el-table-column label="好友数量" prop="friendsCount" width="100" />
+        <el-table-column label="关注数量" prop="followCount" width="100">
+          <template v-slot="scope">
+            <el-button text type="primary" icon="user" @click="showUserFansListModal(1, scope.row, true)">{{ scope.row.followCount }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="粉丝数量" prop="fansCount" width="100">
+          <template v-slot="scope">
+            <el-button text type="primary" icon="user" @click="showUserFansListModal(2, scope.row, true)">{{ scope.row.fansCount }}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="好友数量" prop="friendsCount" width="100">
+          <template v-slot="scope">
+            <el-button text type="primary" icon="user" @click="showUserFansListModal(3, scope.row, true)">{{ scope.row.friendsCount }}</el-button>
+          </template>
+        </el-table-column>
         <el-table-column label="推广码" prop="spreadUid" width="150" />
         <el-table-column label="推广人" prop="spreadUid" width="150" />
         <el-table-column label="openId" prop="openId" width="150" />
@@ -139,6 +151,35 @@
         @pagination="showUserLoginInfoModal"
       />
     </el-dialog>
+
+    <!--用户粉丝、关注、好友列表-->
+    <el-dialog
+      :title="userFansFriendFocusInfo.clickType == 1 ? '关注列表' : userFansFriendFocusInfo.clickType == 2 ? '粉丝列表' : '好友列表'"
+      v-model="userFansFriendFocusModalVisible"
+      width="800px"
+      append-to-body
+    >
+      <el-table v-loading="userFansFriendFocusLoading" :data="userFansFriendFocusInfo.data" border empty-text="暂无数据">
+        <el-table-column label="手机号" prop="phone" width="150" />
+        <el-table-column label="IP" prop="ipaddr" width="150"></el-table-column>
+        <el-table-column label="登陆地点" prop="loginLocation" width="180" />
+        <el-table-column label="浏览器类型" prop="browser" />
+        <el-table-column label="操作系统" prop="os" width="100" />
+        <el-table-column label="登录时间" prop="loginTime" width="100" />
+      </el-table>
+      <pagination
+        v-if="userFansFriendFocusInfo.total"
+        :total="userFansFriendFocusInfo.total"
+        v-model:page="fansPageParams.current"
+        v-model:limit="fansPageParams.size"
+        @pagination="
+          () => {
+            showUserFansListModal(userFansFriendFocusInfo.clickType, {}, false);
+          }
+        "
+      />
+    </el-dialog>
+
     <!--编辑会员基础信息-->
     <el-dialog title="编辑会员信息" v-model="userAccountEditModal.open" width="500px" append-to-body>
       <el-form label-width="auto" :rules="userEditRules" :model="userAccountEditModal.data" ref="editForm" size="default">
@@ -227,12 +268,12 @@ import {
   getUserAccountInfo,
   upDateMemberStatus,
   getUserLoginInfoData,
-  editUserData
+  editUserData,
+  getUserFansFriendsFocusList
 } from '@/api/ums/member';
 import dateUtil from '@/utils/DateUtil';
 import { useUserStore } from '@/store/modules/user';
 import AddressSelector from '@/views/components/AddressSelector/index.vue';
-import { addOmsOrder, updateOmsOrder } from '@/api/oms/order.js';
 
 export default {
   name: 'UmsMember',
@@ -336,7 +377,20 @@ export default {
         phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
       },
       userLoginInfoModalVisible: false,
-      userLoginInfoTableLoading: false
+      userLoginInfoTableLoading: false,
+      // 会员粉丝、关注、好友数据
+      userFansFriendFocusInfo: {
+        total: 0,
+        data: [],
+        clickType: ''
+      },
+      // // 会员粉丝、关注、好友分页数据
+      fansPageParams: {
+        current: 1,
+        size: 10
+      },
+      userFansFriendFocusModalVisible: false,
+      userFansFriendFocusLoading: false
     };
   },
   created() {
@@ -597,6 +651,32 @@ export default {
         });
     },
 
+    // 展示用户的粉丝列表 clickType 1、关注 2、粉丝 3、好友
+    showUserFansListModal(clickType, record, isFirst) {
+      const { id } = this.userFansFriendFocusInfo.record || {};
+      const reqParams = {
+        ...this.loginDataParams,
+        id: record.id ? record.id : id
+      };
+      this.userFansFriendFocusLoading = true;
+      getUserFansFriendsFocusList(reqParams)
+        .then((response) => {
+          const { records = [], total = 0 } = response.data || {};
+          if (isFirst) {
+            this.userFansFriendFocusModalVisible = true;
+          }
+          this.userFansFriendFocusInfo = {
+            total: total,
+            data: records || [],
+            clickType: clickType
+          };
+          this.userFansFriendFocusLoading = false;
+        })
+        .catch(() => {
+          this.userFansFriendFocusLoading = false;
+        });
+    },
+
     showUpdateMark(record) {
       this.remarkModal = {
         visible: true,