1

 <template>
   <div @click="handleGroupClick" class="scroll-container">
     <div class="group-item">
-      <avatar :src="group.avatar"/>
-      <div class="group-name text-ellipsis">{{ title }}</div>
+      <avatar src=""/>
+      <div class="group-name text-ellipsis">{{ group.title }}</div>
     </div>
   </div>
 </template>
@@ -24,27 +24,22 @@ export default {
       ]
     }
   },
-  computed: {
-    title() {
-      return (this.group.activity_type === 1 ? '推广' : '征集') + ' - ' + this.group.song_name.replace('《', '').replace('》', '')
-    }
-  },
   methods: {
     handleGroupClick() {
-      if (this.group.is_join === 1) {
-        const conversationID = `GROUP${this.group.esm_id}`
-        this.$store.dispatch('checkoutConversation', conversationID)
-      } else {
-        MessageBox.confirm('是否加入讨论组：' + this.title, '提示', {
+      if (this.group.is_join === 0) {
+        MessageBox.confirm('是否加入讨论组：' + this.group.title, '提示', {
           type: 'warning', showClose: false
         }).then(() => {
-          Helper.joinGroup(this.group.id).then(() => {
+          Helper.joinGroup(this.group.group_id).then(() => {
             this.group.is_join = 1
             this.handleGroupClick()
           })
         }).catch(() => {
 
         })
+      } else {
+        const conversationID = `GROUP${this.group.group_id}`
+        this.$store.dispatch('checkoutConversation', conversationID)
       }
     },
     quitGroup() {

 <template>
-  <div class="list-container"
-       v-loading="hideSearchLoading"
-       element-loading-text="拼命搜索中"
-       element-loading-background="rgba(0, 0, 0, 0.8)">
+  <div class="list-container">
     <div class="header-bar">
-      <el-input v-model="search" size="mini" placeholder="筛选群名" prefix-icon="el-icon-search"/>
+      <el-input v-model="search" @keyup.enter.native="handleSearch" @clear="handleSearch" :clearable="true" size="mini"
+                placeholder="筛选群名"
+                prefix-icon="el-icon-search"/>
 
       <!--      <el-autocomplete-->
       <!--          :value-key="'groupID'"-->
@@ -24,9 +23,12 @@
       <!--      </button>-->
     </div>
     <div class="group-container" v-infinite-scroll="fetch" :infinite-scroll-immediate="true"
+         v-loading="hideSearchLoading"
+         element-loading-text="拼命搜索中"
+         element-loading-background="rgba(0, 0, 0, 0.4)"
          :infinite-scroll-delay="100"
          style="height: calc(80vh - 60px)">
-      <group-item v-for="group in groupList" :key="group.esm_id" :group="group"/>
+      <group-item v-for="group in groupList" :key="group.group_id" :group="group"/>
       <!--      <el-dialog title="创建群组" :visible="createGroupModelVisible" @close="closeCreateGroupModel" width="30%">-->
       <!--        <create-group></create-group>-->
       <!--      </el-dialog>-->
@@ -56,9 +58,6 @@ export default {
     // CreateGroup,
     // ElAutocomplete: Autocomplete
   },
-  mounted() {
-
-  },
   computed: {
     groupList: function () {
       return this.$store.state.group.groupList
@@ -75,9 +74,13 @@ export default {
   methods: {
     fetch() {
       Helper.groupList({
-        activityNameLike: this.search, size: this.size, page: this.page
+        title: this.search, size: this.size, page: this.page
       }).then(res => {
+        if (this.page === 1) {
+          this.onGroupUpdated(res.data)
+        } else {
           this.onGroupUpdated(this.groupList.concat(res.data))
+        }
         ++this.page
       }).finally(() => {
         this.hideSearchLoading = false
@@ -112,6 +115,11 @@ export default {
     showCreateGroupModel() {
       this.$store.commit('updateCreateGroupModelVisible', true)
     },
+    handleSearch() {
+      this.page = 1
+      this.hideSearchLoading = true
+      this.fetch()
+    },
     applyJoinGroup(group) {
       this.tim
           .joinGroup({groupID: group.groupID})
@@ -153,7 +161,8 @@ export default {
   },
   watch: {
     'search'() {
-      this.fetch()
+      // this.page = 1
+      // this.fetch()
     }
   }
 }