feat:添加用户详情页面

src/api/business/user.js

@@ -63,4 +63,11 @@ export function listHistory(query) {
     params: query
   })
 }
+export function fansList(query) {
+  return request({
+    url: '/history/list',
+    method: 'get',
+    params: query
+  })
+}
 

src/router/index.js

@@ -133,6 +133,16 @@ export const asyncRouterMap = [
           noCache: true
         }
       },
+      {
+        path: 'userDetail',
+        component: () => import('@/views/user/userDetail'),
+        name: 'userDetail',
+        meta: {
+          title: '会员详情',
+          icon: 'message',
+          noCache: true
+        }
+      },
       {
         path: 'feedback',
         component: () => import('@/views/user/feedback'),

src/views/sale/saleList.vue

 <template>
   <div class="page_consignList">
     <div class="filter-container">
+      <div class="filter-container">
+        <el-input v-model="listQuery.isOnSale" clearable size="mini" class="filter-item" style="width: 200px;" placeholder="请输入标题"/>
+        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
+      </div>
       <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
     </div>
     <el-table
@@ -125,6 +129,9 @@ export default {
     this.clearAll()
   },
   methods: {
+    handleFilter() {
+
+    },
     handleSaleSwitch(e, item) {
       const params = { id: item.id, isOnSale: e }
       updateOnSale(params)

src/views/user/user.vue

@@ -30,6 +30,8 @@
           {{ 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 align="center" label="创建时间" prop="addTime"/>
       <el-table-column align="center" label="状态" prop="status">
         <template slot-scope="scope">
@@ -38,9 +40,10 @@
       </el-table-column>
       <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <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>
+          <el-button type="primary" size="mini" @click="handleToUserDetail(scope.row)">详情</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>-->
         </template>
       </el-table-column>
 
@@ -146,6 +149,13 @@ export default {
         this.$refs['approveForm'].clearValidate()
       })
     },
+
+    /**
+     * 跳转到用户详情
+     */
+    handleToUserDetail(row) {
+      this.$router.push({ path: '/user/userDetail', query: { id: row.id }})
+    },
     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>
+    <el-card class="box-card" style="margin: 16px">
+      <h3>用户信息</h3>
+      <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>
+          </el-form-item>
+          <el-form-item label="角色：">
+            <div>97989</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>
+          </el-form-item>
+          <el-form-item label="创建时间：">
+            <div>97989</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>
+          </el-form-item>
+          <el-form-item label="状态：">
+            <div>97989</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-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)">
+          {{ item.name }}
+        </div>
+      </div>
+      <el-table
+        v-loading="listLoading"
+        :data="list"
+        size="small"
+        style="margin-top: 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" label="可邀请人数" prop="enabledNum" />
+
+        <el-table-column align="center" label="使用人数" prop="usedNum"/>
+
+        <el-table-column align="center" label="状态" prop="stateName" />
+
+      </el-table>
+
+      <Pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+        @pagination="getList" />
+    </el-card>
+  </div>
+
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import { fansList } from '@/api/business/user'
+export default {
+  name: 'UserDetail',
+  components: {
+    Pagination
+  },
+  data() {
+    return {
+      categoryList: [
+        {
+          name: '藏家藏品'
+        },
+        {
+          name: '藏家藏馆'
+        },
+        {
+          name: '平台藏品'
+        }
+      ],
+      activeIndex: '1',
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      list: [],
+      total: 0
+    }
+  },
+  created() {
+    this.getList()
+  },
+
+  methods: {
+    /**
+     * 分享类型选择
+     */
+    handlerSelectCateGory(categoryStr) {
+      if (categoryStr === this.listQuery.category) {
+        return
+      }
+      this.listQuery.page = 1
+      this.listQuery.category = categoryStr
+      this.getList()
+    },
+    /**
+     * Tab选择
+     */
+    handleSelect() {
+
+    },
+    /**
+     * 开通藏家权限
+     */
+    handleOpen() {
+
+    },
+    /**
+     * 获取列表数据
+     */
+    getList() {
+      this.listLoading = true
+      fansList(this.listQuery).then(response => {
+        this.list = response.data.data.dataList
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch((e) => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page_userDetail {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  .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;
+      padding: 0 10px;
+      height: 32px;
+      line-height: 30px;
+      font-size: 12px;
+      color: #606266;
+      border-radius: 4px;
+      box-sizing: border-box;
+      border: 0px solid rgba(64,158,255,.2);
+      white-space: nowrap;
+      &.active {
+        border: 1px solid rgba(64,158,255,.2);
+        color: #409eff;
+        background-color: rgba(64,158,255,.1);
+        //background-color: #1890ff;
+
+      }
+    }
+    .info {
+      display: flex;
+      flex-direction: row;
+    }
+    .info_image {
+      width: 40px;
+      height: 40px;
+      display: block;
+    }
+  }
+}
+
+/deep/ .el-card__body {
+  padding: 0 12px;
+}
+/deep/ .el-form-item {
+  margin-bottom: 0;
+}
+</style>