fix: #288,增加退出组织功能

src/views/activity/Member.vue

 <template>
   <div class="main">
-    <card title="成员列表"> </card>
+    <card title="成员列表">
+      <div class="member-card" v-if="memberManagementList.length">
+        <div class="member-card-hd">活动创建者、管理员</div>
+        <div class="member-card-bd">
+          <member-item
+            v-for="item in memberManagementList"
+            :data="item"
+            :key="item.id"
+          >
+          </member-item>
+        </div>
+      </div>
+      <div class="member-card">
+        <div class="member-card-hd">成员</div>
+        <div class="member-card-bd">
+          <member-list
+            :params="{ act_id: pid }"
+            :request-callback="requestCallback"
+            @request-success="requestSuccess"
+            ref="list"
+          ></member-list>
+        </div>
+      </div>
+    </card>
   </div>
 </template>
 
 <script>
 import Card from '@/components/Card'
-import * as api from '@/api'
+import MemberList from '@/components/MemberList'
+import MemberItem from '@/components/MemberItem'
 export default {
   name: 'ActivityMember',
-  components: { Card },
+  components: { Card, MemberList, MemberItem },
   data() {
     return {
-      detail: null
+      list: []
     }
   },
   computed: {
     pid() {
       return this.$route.params.id
+    },
+    isMine() {
+      return this.$route.query.is_mine === '1'
+    },
+    // 管理员列表
+    memberManagementList() {
+      // role: 1参与者、 2发起人
+      return this.list.filter(item => item.role === '2')
     }
   },
   methods: {
-    getDetail() {
-      api.getMemberList({ offset: 0, limit: 100 }).then(response => {
-        this.detail = response
-      })
+    // 请求数据处理
+    requestCallback(data) {
+      // role: 1参与者、 2发起人
+      return data.filter(item => item.role === '1' && item.status === '1')
+    },
+    // 请求成功
+    requestSuccess(list) {
+      this.list = list
     }
   },
-  beforeMount() {
-    this.getDetail()
-  }
+  beforeMount() {}
 }
 </script>
 
 <style lang="scss" scoped>
-.info-item {
-  margin-bottom: 20px;
-  display: flex;
+.member-card {
+  margin-left: -20px;
+  margin-right: -20px;
 }
-.info-item__label {
-  width: 70px;
+.member-card-hd {
+  height: 36px;
+  padding: 0 20px;
+  font-size: 14px;
+  line-height: 36px;
   color: #999;
-  text-align: center;
+  background-color: #f1f1f1;
 }
-.info-item__content {
-  flex: 1;
-  color: #222;
-  overflow: hidden;
-  margin-left: 20px;
+.member-card-bd {
+  margin: 0 20px;
 }
-.button {
-  width: 128px;
-  height: 30px;
-  margin: 0 auto;
-  line-height: 30px;
-  color: #fff;
-  text-align: center;
-  background: linear-gradient(
-    180deg,
-    rgba(2, 236, 228, 1) 0%,
-    rgba(18, 186, 244, 1) 100%
-  );
-  border-radius: 20px;
-}
-::v-deep .group-avatar {
-  width: 100px;
-  height: 100px;
-  border-radius: 6px;
-  object-fit: cover;
+::v-deep .member-item {
+  margin: 20px 0;
 }
 </style>

src/views/group/Item.vue

 <template>
   <div class="main">
     <card title="组织详情" v-if="detail">
-      <!-- <template #aside>
-        <h6 class="leave-group" v-if="detail.button_show === 3">退出组织</h6>
-      </template> -->
+      <template #aside>
+        <h6
+          class="leave-group"
+          v-if="detail.button_show === 3 && !detail.is_mine"
+          @click="onLeave"
+        >
+          退出组织
+        </h6>
+      </template>
       <div class="info">
         <template v-for="item in fields">
           <div class="info-item" :key="item.name" v-if="detail[item.name]">
@@ -51,7 +57,7 @@
           class="button button-default"
           value="已申请，等待审核"
           v-if="detail.button_show === 2"
-          @click="onLeave"
+          @click="onCancelJoin"
         />
       </div>
     </card>
@@ -112,12 +118,31 @@ export default {
         this.getDetail()
       })
     },
-    onLeave() {
+    // 取消申请
+    onCancelJoin() {
       this.$dialog
         .confirm({
           title: '提示',
           message: '你已申请加入该组织，是否取消申请？'
         })
+        .then(() => {
+          api.getGroup(this.pid).then(response => {
+            if (response.button_show === 3) {
+              this.$toast('你已加入该组织')
+            } else {
+              this.leaveGroup()
+            }
+          })
+        })
+        .catch(() => {})
+    },
+    // 退出组织
+    onLeave() {
+      this.$dialog
+        .confirm({
+          title: '提示',
+          message: '确定要退出该组织吗？'
+        })
         .then(() => {
           this.leaveGroup()
         })

src/views/group/Member.vue

@@ -26,9 +26,6 @@
             :data="item"
             :key="item.id"
           >
-            <!-- <template #member-before>
-              <span class="member-creater"></span>
-            </template> -->
           </member-item>
         </div>
       </div>
@@ -57,7 +54,6 @@ export default {
   components: { Card, MemberList, MemberItem },
   data() {
     return {
-      detail: null,
       list: []
     }
   },