feat:处理会员详情

src/api/business/user.js

@@ -63,11 +63,33 @@ export function listHistory(query) {
     params: query
   })
 }
-export function fansList(query) {
+export function fansList(data) {
   return request({
-    url: '/history/list',
-    method: 'get',
-    params: query
+    url: '/user/findDetailList',
+    method: 'post',
+    data
+  })
+}
+export function requestUserDetail(data) {
+  return request({
+    url: '/user/findDetail',
+    method: 'post',
+    data
+  })
+}
+export function updateCollectorPermission(data) {
+  return request({
+    url: '/user/updateCollectorPermission',
+    method: 'post',
+    data
+  })
+}
+
+export function updateAccountState(data) {
+  return request({
+    url: '/user/updateAccountState',
+    method: 'post',
+    data
   })
 }
 

src/views/user/user.vue

@@ -6,6 +6,7 @@
       <el-input v-model="listQuery.username" clearable size="small" class="filter-item" style="width: 200px;" placeholder="请输入用户名"/>
       <el-input v-model="listQuery.mobile" clearable size="small" class="filter-item" style="width: 200px;" placeholder="请输入手机号"/>
       <el-button class="filter-item" type="primary" size="mini" icon="el-icon-search" @click="handleFilter">查找</el-button>
+      <el-button class="filter-item" type="primary" size="mini" @click="handleReset">重置</el-button>
       <el-button :loading="downloadLoading" size="mini" class="filter-item" type="warning" icon="el-icon-download" @click="handleDownload">导出</el-button>
     </div>
 
@@ -17,7 +18,7 @@
 
       <el-table-column align="center" label="手机号码" prop="mobile"/>
 
-      <el-table-column align="center" label="性别" prop="gender">
+      <!--      <el-table-column align="center" label="性别" prop="gender">
         <template slot-scope="scope">
           {{ genderDic[scope.row.gender] }}
         </template>
@@ -29,18 +30,21 @@
         <template slot-scope="scope">
           {{ levelDic[scope.row.userLevel] }}
         </template>
-      </el-table-column>
-      <el-table-column align="center" label="TA的关注" prop="addTime"/>
-      <el-table-column align="center" label="TA的粉丝" prop="addTime"/>
+      </el-table-column>-->
+      <el-table-column align="center" label="角色" prop="userLevelName"/>
+      <el-table-column align="center" label="TA的关注" prop="followerNum"/>
+      <el-table-column align="center" label="TA的粉丝" prop="fansNum"/>
       <el-table-column align="center" label="创建时间" prop="addTime"/>
       <el-table-column align="center" label="状态" prop="status">
         <template slot-scope="scope">
           {{ statusDic[scope.row.status] }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
+      <el-table-column align="center" label="操作" width="350" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button type="primary" size="mini" @click="handleToUserDetail(scope.row)">详情</el-button>
+          <el-button type="primary" size="mini" style="width: 100px" @click="handleSetUserState(scope.row)">{{ scope.row.userLevel >= 2 ? '关闭藏家权限' : '开通藏家权限' }}</el-button>
+          <el-button type="danger" size="mini" style="width: 100px" @click="handleSetAccountState(scope.row)">{{ scope.row.status === 1 ? '解封账号' : '冻结账号' }}</el-button>
           <!--          <el-button v-permission="['GET /admin/user/detailApprove']" v-if="scope.row.status==0 && scope.row.userLevel==2" type="primary" size="mini" @click="handleDetail(scope.row)">推广代理</el-button>-->
           <!--          <el-button v-permission="['POST /admin/user/approveAgency']" v-else-if="scope.row.status==3" type="primary" size="mini" @click="handleApproveAgency(scope.row)">审批</el-button>-->
           <!--          <el-button v-permission="['GET /admin/user/detailApprove']" v-else type="info" size="mini" >非代理</el-button>-->
@@ -52,7 +56,7 @@
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
 
     <!-- 详情对话框 -->
-    <el-dialog :visible.sync="detailDialogVisible" title="代理详情" width="700">
+    <!--    <el-dialog :visible.sync="detailDialogVisible" title="代理详情" width="700">
       <el-form :data="agencyDetail" label-position="left">
         <el-form-item label="佣金比例(%)">
           <span>{{ agencyDetail.settlementRate }}</span>
@@ -62,7 +66,7 @@
         </el-form-item>
       </el-form>
     </el-dialog>
-    <!-- 代理审批 -->
+    &lt;!&ndash; 代理审批 &ndash;&gt;
     <el-dialog :visible.sync="approveDialogVisible" title="代理审批">
       <el-form ref="approveForm" :model="approveForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
         <el-form-item label="佣金比例(%)" prop="settlementRate">
@@ -73,13 +77,13 @@
         <el-button @click="approveDialogVisible = false">取消</el-button>
         <el-button type="primary" @click="confirmApprove">确定</el-button>
       </div>
-    </el-dialog>
+    </el-dialog>-->
 
   </div>
 </template>
 
 <script>
-import { fetchList, approveAgency, detailApprove } from '@/api/business/user'
+import { fetchList, approveAgency, detailApprove, updateCollectorPermission, updateAccountState } from '@/api/business/user'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
@@ -127,6 +131,13 @@ export default {
         this.listLoading = false
       })
     },
+    handleReset() {
+      this.listQuery = {
+        page: 1,
+        limit: 20
+      }
+      this.getList()
+    },
     handleFilter() {
       this.listQuery.page = 1
       this.getList()
@@ -156,6 +167,89 @@ export default {
     handleToUserDetail(row) {
       this.$router.push({ path: '/user/userDetail', query: { id: row.id }})
     },
+
+    handleSetUserState(row) {
+      const tip = row.userLevel >= 2 ? '是否要关闭当前用户的藏家功能权限？' : '是否为当前用户开通藏家功能权限？'
+      const successTip = row.userLevel >= 2 ? '关闭成功' : '开通成功'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: row.id,
+          flag: row.userLevel >= 2 ? 0 : 1
+        }
+        // userLevel： 0 普通用 1： 分销商 2 藏家 3分销商&藏家
+        updateCollectorPermission(params).then(response => {
+          this.list = this.list.filter((item) => {
+            if (item.id === row.id) {
+              if (row.userLevel === 0) {
+                item.userLevel = 2
+                item.userLevelName = '藏家'
+              } else if (row.userLevel === 1) {
+                item.userLevel = 3
+                item.userLevelName = '分销商、藏家'
+              } else if (row.userLevel === 2) {
+                item.userLevel = 0
+                item.userLevelName = '普通用户'
+              } else if (row.userLevel === 3) {
+                item.userLevel = 1
+                item.userLevelName = '分销商'
+              }
+              return item
+            }
+            return item
+          })
+          this.$notify.success({
+            message: successTip
+          })
+        }).catch((e) => {
+          this.$notify({
+            title: '提示',
+            message: e.message || '请求失败， 请重试',
+            type: 'warning'
+          })
+        })
+      })
+    },
+    /**
+     * 修改用户状态
+     * @param row
+     */
+    handleSetAccountState(row) {
+      const tip = row.status === 1 ? '是否要解封当前用户的账号？' : '是否要冻结当前用户的账号？'
+      const successTip = row.status === 1 ? '解封成功' : '冻结成功'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: row.id,
+          status: row.status === 1 ? 0 : 1
+        }
+        updateAccountState(params).then(response => {
+          this.list = this.list.filter((item) => {
+            if (item.id === row.id) {
+              item.status = row.status === 1 ? 0 : 1
+              return item
+            }
+            return item
+          })
+          this.$notify.success({
+            message: successTip
+          })
+        }).catch((e) => {
+          console.log('===报错=', e)
+          this.$notify({
+            title: '提示',
+            message: e.message || '请求失败， 请重试',
+            type: 'warning'
+          })
+        })
+      })
+    },
     confirmApprove() {
       this.$refs['approveForm'].validate((valid) => {
         if (valid) {

src/views/user/userDetail.vue

 <template>
   <div class="page_userDetail">
-    <div class="detail_button">
-      <el-button size="mini" class="filter-item" type="primary" @click="handleOpen">开通藏家权限</el-button>
+    <div v-if="userDetail && userDetail.id" class="detail_button">
+      <!--      <el-button size="mini" class="filter-item" type="primary" @click="handleOpen">开通藏家权限</el-button>-->
+      <el-button type="primary" size="mini" style="width: 100px" @click="handleSetUserState">
+        {{ userDetail.userLevel >= 2 ? '关闭藏家权限' : '开通藏家权限' }}
+      </el-button>
+      <el-button type="danger" size="mini" style="width: 100px" @click="handleSetAccountState">
+        {{ userDetail.status === 1 ? '解封账号' : '冻结账号' }}
+      </el-button>
     </div>
-    <el-card class="box-card" style="margin: 16px">
+    <el-card class="box-card" style="margin: 0 16px">
       <h3>用户信息</h3>
-      <div class="user_info flex" >
+      <div class="user_info flex">
         <el-form ref="addInviteRef" label-width="100px" style="width: 33%">
           <el-form-item label="用户ID：">
-            <div>97989</div>
-          </el-form-item>
-          <el-form-item label="性别：">
-            <div>97989</div>
+            <div>{{ userDetail.id || '-' }}</div>
           </el-form-item>
           <el-form-item label="角色：">
-            <div>97989</div>
+            <div>{{ userDetail.userLevelName || '-' }}</div>
           </el-form-item>
         </el-form>
         <el-form ref="addInviteRef" label-width="100px" style="width: 33%">
           <el-form-item label="用户名：">
-            <div>97989</div>
-          </el-form-item>
-          <el-form-item label="生日：">
-            <div>97989</div>
+            <div>{{ userDetail.nickname || '-' }}</div>
           </el-form-item>
           <el-form-item label="创建时间：">
-            <div>97989</div>
+            <div>{{ userDetail.addTime || '-' }}</div>
           </el-form-item>
         </el-form>
         <el-form ref="addInviteRef" label-width="100px" style="width: 33%">
           <el-form-item label="手机号：">
-            <div>97989</div>
-          </el-form-item>
-          <el-form-item label="用户等级：">
-            <div>97989</div>
+            <div>{{ userDetail.mobile || '-' }}</div>
           </el-form-item>
           <el-form-item label="状态：">
-            <div>97989</div>
+            <div>{{ userDetail.statusName || '-' }}</div>
           </el-form-item>
         </el-form>
       </div>
 
     </el-card>
-    <el-card class="box-card" style="margin: 16px;flex: 1">
-      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+    <el-card :style="{'margin': '16px','height': list.length < 5 ? '500px' : '1000px'}" class="box-card">
+      <el-menu :default-active="defaultActive" class="el-menu-demo" mode="horizontal" @select="handleSelect">
         <el-menu-item index="1">TA的关注</el-menu-item>
         <el-menu-item index="2">TA的粉丝</el-menu-item>
         <el-menu-item index="3">TA的分享</el-menu-item>
       </el-menu>
-      <div class="filter-item__category">
-        <div v-for="item in categoryList" :key="item.name" :class="{active: item.name === listQuery.category}" class="filter-item__category__content" @click="handlerSelectCateGory(item.name)">
+      <div v-if="defaultActive === '3'" class="filter-item__category">
+        <div
+          v-for="item in shareList"
+          :key="item.name"
+          :class="{active: item.shareType === listQuery.shareType}"
+          class="filter-item__category__content"
+          @click="handlerSelectCateGory(item.shareType)">
           {{ item.name }}
         </div>
       </div>
       <el-table
         v-loading="listLoading"
+        v-if="defaultActive !== '3'"
         :data="list"
+        :fit="true"
+        :height="list.length < 5 ? 400 : 900"
         size="small"
-        style="margin-top: 20px"
+        style="margin-top: 20px; padding-bottom: 20px"
         element-loading-text="正在查询中..."
         border
-        fit
         highlight-current-row>
-        <el-table-column align="center" width="100px" label="邀请码ID" prop="id" sortable />
-
-        <el-table-column align="center" label="邀请码" prop="code" />
+        <el-table-column align="center" width="100px" label="用户ID" prop="id" />
+        <el-table-column align="center" label="用户名" prop="nickname" />
+        <el-table-column align="center" label="手机号码" prop="mobile" />
+        <el-table-column align="center" label="创建时间" prop="createTime" />
 
-        <el-table-column align="center" label="可邀请人数" prop="enabledNum" />
-
-        <el-table-column align="center" label="使用人数" prop="usedNum"/>
+      </el-table>
+      <el-table
+        v-loading="listLoading"
+        v-if="defaultActive === '3'"
+        :data="list"
+        :fit="true"
+        :height="list.length < 5 ? 400 : 900"
+        size="small"
+        style="margin-top: 20px; padding-bottom: 20px"
+        element-loading-text="正在查询中..."
+        border
+        highlight-current-row>
 
-        <el-table-column align="center" label="状态" prop="stateName" />
+        <el-table-column align="center" label="分享类型" prop="shareTypeName" />
+        <el-table-column align="center" label="分享内容" prop="shareContent" >
+          <template slot-scope="scope">
+            <Line2Hidden :text="scope.row.shareContent || '-'" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="分享时间" prop="shareTime" />
 
       </el-table>
-
+    </el-card>
+    <div class="pagination_bottom">
       <Pagination
         v-show="total>0"
         :total="total"
         :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
+        layout="total, prev, pager, next, jumper"
         @pagination="getList" />
-    </el-card>
+    </div>
+
   </div>
 
 </template>
 
 <script>
 import Pagination from '@/components/Pagination'
-import { fansList } from '@/api/business/user'
+import { fansList, requestUserDetail, updateCollectorPermission, updateAccountState } from '@/api/business/user'
+import Line2Hidden from '@/components/line2Hidden'
 export default {
   name: 'UserDetail',
   components: {
-    Pagination
+    Pagination,
+    Line2Hidden
   },
   data() {
     return {
-      categoryList: [
+      shareList: [
         {
-          name: '藏家藏品'
+          name: '藏家藏品',
+          shareType: 1
         },
         {
-          name: '藏家藏馆'
+          name: '藏家藏馆',
+          shareType: 2
         },
         {
-          name: '平台藏品'
+          name: '平台藏品',
+          shareType: 3
         }
       ],
-      activeIndex: '1',
       listLoading: true,
       listQuery: {
         page: 1,
-        limit: 20
+        limit: 20,
+        listType: 1,
+        shareType: 1
       },
       list: [],
-      total: 0
+      total: 0,
+      defaultActive: '1',
+      userDetail: {},
+      userId: ''
     }
   },
   created() {
+    const userId = this.$route.query.id
+    if (!userId) {
+      return
+    }
+    this.userId = userId
+    this.getDetail()
     this.getList()
   },
 
@@ -124,31 +161,48 @@ export default {
     /**
      * 分享类型选择
      */
-    handlerSelectCateGory(categoryStr) {
-      if (categoryStr === this.listQuery.category) {
+    handlerSelectCateGory(value) {
+      if (value === this.listQuery.shareType) {
         return
       }
       this.listQuery.page = 1
-      this.listQuery.category = categoryStr
+      this.listQuery.shareType = Number(value)
       this.getList()
     },
     /**
      * Tab选择
      */
-    handleSelect() {
-
+    handleSelect(value) {
+      if (this.defaultActive === value) {
+        return
+      }
+      this.defaultActive = value
+      this.listQuery.page = 1
+      this.listQuery.listType = Number(value)
+      this.getList()
     },
     /**
      * 开通藏家权限
      */
     handleOpen() {
 
+    },
+    /**
+     * 获取详情
+     */
+    getDetail() {
+      requestUserDetail({ id: this.userId || '' }).then(response => {
+        this.userDetail = response.data.data
+      }).catch((e) => {
+
+      })
     },
     /**
      * 获取列表数据
      */
     getList() {
       this.listLoading = true
+      // this.listQuery.id = this.userId
       fansList(this.listQuery).then(response => {
         this.list = response.data.data.dataList
         this.total = response.data.data.total
@@ -158,6 +212,79 @@ export default {
         this.total = 0
         this.listLoading = false
       })
+    },
+    handleSetUserState() {
+      if (!this.userDetail || !this.userDetail.id) {
+        return
+      }
+      const tip = this.userDetail.userLevel >= 2 ? '是否要关闭当前用户的藏家功能权限？' : '是否为当前用户开通藏家功能权限？'
+      const successTip = this.userDetail.userLevel >= 2 ? '关闭成功' : '开通成功'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: this.userDetail.id,
+          flag: this.userDetail.userLevel >= 2 ? 0 : 1
+        }
+        // userLevel： 0 普通用 1： 分销商 2 藏家 3分销商&藏家
+        updateCollectorPermission(params).then(response => {
+          if (this.userDetail.userLevel === 0) {
+            this.userDetail.userLevel = 2
+            this.userDetail.userLevelName = '藏家'
+          } else if (this.userDetail.userLevel === 1) {
+            this.userDetail.userLevel = 3
+            this.userDetail.userLevelName = '分销商、藏家'
+          } else if (this.userDetail.userLevel === 2) {
+            this.userDetail.userLevel = 0
+            this.userDetail.userLevelName = '普通用户'
+          } else if (this.userDetail.userLevel === 3) {
+            this.userDetail.userLevel = 1
+            this.userDetail.userLevelName = '分销商'
+          }
+          this.$notify.success({
+            message: successTip
+          })
+        }).catch((e) => {
+          this.$notify({
+            title: '提示',
+            message: e.message || '请求失败， 请重试',
+            type: 'warning'
+          })
+        })
+      })
+    },
+    /**
+     * 修改用户状态
+     * @param this.userDetail
+     */
+    handleSetAccountState() {
+      const tip = this.userDetail.status === 1 ? '是否要解封当前用户的账号？' : '是否要冻结当前用户的账号？'
+      const successTip = this.userDetail.status === 1 ? '解封成功' : '冻结成功'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: this.userDetail.id,
+          status: this.userDetail.status === 1 ? 0 : 1
+        }
+        updateAccountState(params).then(response => {
+          this.userDetail.status = this.userDetail.status === 1 ? 0 : 1
+          this.$notify.success({
+            message: successTip
+          })
+        }).catch((e) => {
+          console.log('===报错=', e)
+          this.$notify({
+            title: '提示',
+            message: e.message || '请求失败， 请重试',
+            type: 'warning'
+          })
+        })
+      })
     }
   }
 }
@@ -165,21 +292,34 @@ export default {
 
 <style lang="scss" scoped>
 .page_userDetail {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100%;
+  margin-bottom: 100px;
+
+  .pagination_bottom {
+    width: calc(100% - 60px);
+    position: fixed;
+    bottom: 0;
+    padding-bottom: 20px;
+    padding-right: 30px;
+    background: white;
+    margin: 0 24px;
+    z-index: 1000;
+  }
   .detail_button {
     text-align: end;
     margin: 16px;
   }
+
   .user_info {
     padding-bottom: 10px;
   }
+
   .filter-item__category {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 20px;
+
     .filter-item__category__content {
       background-color: white;
       display: inline-block;
@@ -190,20 +330,23 @@ export default {
       color: #606266;
       border-radius: 4px;
       box-sizing: border-box;
-      border: 0px solid rgba(64,158,255,.2);
+      border: 0px solid rgba(64, 158, 255, .2);
       white-space: nowrap;
+
       &.active {
-        border: 1px solid rgba(64,158,255,.2);
+        border: 1px solid rgba(64, 158, 255, .2);
         color: #409eff;
-        background-color: rgba(64,158,255,.1);
+        background-color: rgba(64, 158, 255, .1);
         //background-color: #1890ff;
 
       }
     }
+
     .info {
       display: flex;
       flex-direction: row;
     }
+
     .info_image {
       width: 40px;
       height: 40px;
@@ -215,6 +358,7 @@ export default {
 /deep/ .el-card__body {
   padding: 0 12px;
 }
+
 /deep/ .el-form-item {
   margin-bottom: 0;
 }