feat: ( #324 ) 新增圈子成员管理

slimkit · Jan 4, 2018 · 8fed1ec · 8fed1ec
1 parent 058d1f4
commit 8fed1ec
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 2 deletions.
diff --git a/src/page/group/children/groupDetail.vue b/src/page/group/children/groupDetail.vue
@@ -83,7 +83,7 @@
           <div class="menu-item">
             更多操作
           </div>
-          <div class="menu-item">
+          <div class="menu-item" @click='to({ name: "groupMember", params: { groupID: group.id } })'>
             <v-icon class='menu-item-prepend' type='group-member'></v-icon>
             <div class="menu-item-title">成员</div>
             <div class="menu-item-tips">{{ group.users_count }}</div>
@@ -183,7 +183,8 @@ export default {
   methods: {
     to(path) {
       if (path) {
-        this.$router.push({ path })
+        path = typeof path === 'string' ? { path } : path
+        this.$router.push(path)
       }
     },
     goBack() {

diff --git a/src/page/group/children/groupMember.vue b/src/page/group/children/groupMember.vue
@@ -0,0 +1,177 @@
+<template>
+  <transition name='router-fadeInRight' mode="out-in">
+    <div class="group-member">
+      <head-top :title='`成员管理`' :append='true'>
+        <div slot='append' class="head-top-cancel" @click='cancel'>取消</div>
+        <div slot='title' class="head-top-search">
+          <v-icon type='base-search' class='head-top-search-icon'></v-icon>
+          <input class="head-top-search-input" type="text" v-model='keyword' placeholder="搜索" @input="search">
+        </div>
+      </head-top>
+      <div class="group-member-search" v-if='(keyword.length+searchList.length) > 0'></div>
+      <div class="group-member-lists" v-else>
+        <div class="group-member-list  admin">
+          <p class="group-member-label">圈管理{{ manager.length }}</p>
+          <div class="group-member-item" v-for='({ user }) in manager' v-if='user.id'>
+            <div class="group-member-item-info">
+              <v-avatar :src='user.avatar' :sex='user.sex'></v-avatar>
+              <span class="group-member-name">{{user.name}}</span>
+            </div>
+            <v-icon type='feed-more' color='#b3b3b3'></v-icon>
+          </div>
+        </div>
+        <div class="group-member-list member">
+          <p class="group-member-label">成员{{ members.length }}</p>
+          <div class="group-member-item" v-for='({ user }) in members' v-if='user.id'>
+            <div class="group-member-item-info">
+              <v-avatar :src='user.avatar' :sex='user.sex'></v-avatar>
+              <span class="group-member-name">{{user.name}}</span>
+            </div>
+            <v-icon type='feed-more' color='#b3b3b3'></v-icon>
+          </div>
+        </div>
+        <div class="group-member-list blacklist">
+          <p class="group-member-label">黑名单{{ blacklist.length }}</p>
+          <div class="group-member-item" v-for='({ user }) in blacklist' v-if='user.id'>
+            <div class="group-member-item-info">
+              <v-avatar :src='user.avatar' :sex='user.sex'></v-avatar>
+              <span class="group-member-name">{{user.name}}</span>
+            </div>
+            <v-icon type='feed-more' color='#b3b3b3'></v-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import _ from 'lodash'
+import HeadTop from '@/components/HeadTop'
+const sources = []
+export default {
+  name: 'groupMember',
+  components: {
+    HeadTop
+  },
+  data() {
+    return {
+      groupID: this.$route.params.groupID,
+      members: [],
+      manager: [],
+      blacklist: [],
+      keyword: '',
+      searchList: []
+    }
+  },
+  methods: {
+    cancel() {
+      this.$router.go(-1)
+    },
+    // 使用_.debounce控制搜索的触发频率
+    // 准备搜索
+    search: _.debounce(function () {
+      let that = this
+        // 删除已经结束的请求
+      _.remove(sources, (n) => n.source === null)
+
+        // 取消还未结束的请求
+      sources.forEach(function (item) {
+        if (item !== null && item.source !== null && item.status === 1) {
+          item.status = 0
+          item.source.cancel('取消上一个')
+        }
+      })
+
+        // 创建新的请求cancelToken,并设置状态请求中
+      let sc = {
+        source: that.$http.CancelToken.source(),
+        status: 1 // 状态1：请求中，0:取消中
+      }
+      sources.push(sc)
+
+        // 开始搜索数据
+      if (that.keyword) {
+        that.$http.get(`/plus-group/groups/${that.groupID}/members?keyword=${that.keyword}`, {
+          cancelToken: sc.source.token
+        }).then(({ data = [] }) => {
+            // 置空请求canceltoken
+          sc.source = null
+        }).catch(({ response: { data = { message: '搜索失败' } } = {} } = {}) => {
+            // 置空请求canceltoken
+          sc.source = null
+          that.$Message.error(data)
+        })
+      }
+    },
+      500 // 空闲时间间隔设置500ms
+    ),
+    async getMember() {
+      // GET /groups/:group/members
+      if (!this.groupID) {
+        return false
+      }
+      const {
+        data: members
+      } = await this.$http.get(`/plus-group/groups/${this.groupID}/members?type=member`)
+      this.members = members ? [...members] : []
+      const {
+        data: manager
+      } = await this.$http.get(`/plus-group/groups/${this.groupID}/members?type=manager`)
+      this.manager = manager ? [...manager] : []
+      const {
+        data: blacklist
+      } = await this.$http.get(`/plus-group/groups/${this.groupID}/members?type=blacklist`)
+      this.blacklist = blacklist ? [...blacklist] : []
+    }
+  },
+  mounted() {
+    if (!this.groupID) {
+      this.$router.go(-1)
+      this.$Message.error('发生了一些错误')
+    }
+    this.getMember()
+  }
+}
+
+</script>
+<style lang='less'>
+.group-member {
+  .head-top-title {
+    left: 33% !important;
+  }
+
+  &-label {
+    padding: 0 20px;
+    height: 70px;
+    line-height: 70px;
+    background-color: #f4f5f5;
+    font-size: 26px;
+    color: #999;
+  }
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 135px;
+    background-color: #fff;
+    &-info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &+& {
+      border-top: 1px solid #ededed;
+      /*no*/
+    }
+  }
+
+  &-name {
+    flex: 1 1 auto;
+    margin: 0 30px;
+    font-size: 34px;
+    color: #333;
+  }
+}
+
+</style>
diff --git a/src/page/group/components/groupMemberItem.vue b/src/page/group/components/groupMemberItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="group-member-item" v-if='user.id'>
+    <div class="group-member-item-info">
+      <v-avatar :src='user.avatar' :sex='user.sex'></v-avatar>
+      <span class="group-member-name">{{user.name}}</span>
+    </div>
+    <v-icon type='feed-more' color='#b3b3b3'>
+
+    </v-icon>
+  </div>
+</template>
+<script>
+export default {
+  name: 'groupMemberItem',
+  props: {
+    user: Object,
+    rule: {
+      type: Number,
+      required: true
+    }
+  },
+
+  computed: {
+    actions() {
+      return []
+    }
+  }
+}
+
+</script>
+<style lang='less'></style>
diff --git a/src/plugins/modal/index.js b/src/plugins/modal/index.js
@@ -87,6 +87,7 @@ export default {
   install(vue) {
     if (this.installed) return
     vue.prototype.$Modal = Modal
+    vue.prototype.$pay = Modal.pay
     vue.prototype.$ShowCommentInput = Modal.commentInpt
   }
 }
diff --git a/src/routers/routes.js b/src/routers/routes.js
@@ -44,6 +44,8 @@ const
   import(/* webpackChunkName: 'group' */ '../page/group/children/groupAll'),
   groupDetail = () =>
   import(/* webpackChunkName: 'group' */ '../page/group/children/groupDetail'),
+  groupMember = () =>
+  import(/* webpackChunkName: 'group' */ '../page/group/children/groupMember'),
 
 
   question = () =>
@@ -146,6 +148,13 @@ const router = [{
       path: '/group/detail/:groupID',
       component: groupDetail,
       meta: { title: '圈子详情', keepAlive: true, requiresAuth: true }
+    }, {
+      name: 'groupMember',
+      path: '/group/member',
+      component: groupMember,
+      meta: {
+        title: '成员管理'
+      }
     }, {
       path: '/group/all',
       component: groupAll,