demo

@@ -22,6 +22,7 @@
     "tweblive": "^1.1.1",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
+    "vue-infinite-scroll": "^2.0.2",
     "vuex": "^3.1.2"
   },
   "devDependencies": {

 <template>
   <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''">
-    <img :src="avatarSrc">
+    <img alt="头像" :src="avatarSrc">
   </div>
 </template>
 
 <script>
 import systemAvatar from '@/assets/image/system.png'
+
 export default {
   props: {
     src: String,
@@ -28,7 +29,7 @@ export default {
       }
     },
     defaultSrc: function () {
-      switch(this.type) {
+      switch (this.type) {
         case 'C2C':
           // 个人头像
           return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'
@@ -47,15 +48,17 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.avatar 
+.avatar
   background-color $first
   text-align center
   width 100%
   height 100%
   overflow hidden
-  img 
+
+  img
     width 100%
     height 100%
+
 .shape-circle
   border-radius 50%
 </style>

 <template>
-    <div
-        class="conversation-item-container"
-        :class="{ 'choose': conversation.conversationID === currentConversation.conversationID }"
-        @click="selectConversation"
-    >
-      <div class="close-btn">
-        <span class="tim-icon-close" title="删除会话" @click="deleteConversation"></span>
-      </div>
-      <div class="warp">
-        <avatar :src="avatar" :type="conversation.type" />
-        <div class="content">
-          <div class="row-1">
-            <div class="name">
-              <div class="text-ellipsis">
+  <div
+      class="conversation-item-container"
+      :class="{ 'choose': conversation.conversationID === currentConversation.conversationID }"
+      @click="selectConversation"
+  >
+    <div class="close-btn">
+      <span class="tim-icon-close" title="删除会话" @click="deleteConversation"></span>
+    </div>
+    <div class="warp">
+      <avatar :src="avatar" :type="conversation.type"/>
+      <div class="content">
+        <div class="row-1">
+          <div class="name">
+            <div class="text-ellipsis">
                 <span :title="conversation.userProfile.nick || conversation.userProfile.userID"
-                  v-if="conversation.type ===  TIM.TYPES.CONV_C2C"
-                  >{{conversation.userProfile.nick || conversation.userProfile.userID}}
+                      v-if="conversation.type ===  TIM.TYPES.CONV_C2C"
+                >{{ conversation.userProfile.nick || conversation.userProfile.userID }}
                 </span>
-                <span :title="conversation.groupProfile.name || conversation.groupProfile.groupID"
-                  v-else-if="conversation.type ===  TIM.TYPES.CONV_GROUP"
-                  >{{conversation.groupProfile.name || conversation.groupProfile.groupID}}
+              <span :title="conversation.groupProfile.name || conversation.groupProfile.groupID"
+                    v-else-if="conversation.type ===  TIM.TYPES.CONV_GROUP"
+              >{{ conversation.groupProfile.name || conversation.groupProfile.groupID }}
                 </span>
-                <span
+              <span
                   v-else-if="conversation.type === TIM.TYPES.CONV_SYSTEM"
-                  >系统通知
+              >系统通知
                 </span>
-              </div>
             </div>
-            <div class="unread-count">
+          </div>
+          <div class="unread-count">
               <span class="badge" v-if="showUnreadCount">
-                {{conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}}
+                {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
               </span>
-            </div>
           </div>
-          <div class="row-2">
-            <div class="summary">
-              <div v-if="conversation.lastMessage" class="text-ellipsis">
-                <span class="remind" style="color:red;" v-if="hasMessageAtMe">[有人提到我]</span>
-                <span class="text" :title="conversation.lastMessage.messageForShow">
-                  {{messageForShow}}
+        </div>
+        <div class="row-2">
+          <div class="summary">
+            <div v-if="conversation.lastMessage" class="text-ellipsis">
+              <span class="remind" style="color:red;" v-if="hasMessageAtMe">[有人提到我]</span>
+              <span class="text" title="图片"
+                    v-if="conversation.lastMessage.type === 'TIMCustomElem' && conversation.lastMessage.payload.data === 'image'">
+                 [图片]
+              </span>
+              <span v-else class="text" :title="conversation.lastMessage.messageForShow">
+                  {{ messageForShow }}
                 </span>
-              </div>
-            </div>
-            <div class="date">
-              {{date}}
             </div>
           </div>
+          <div class="date">
+            {{ date }}
+          </div>
         </div>
       </div>
     </div>
+  </div>
 
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
-import { isToday, getDate, getTime } from '../../utils/date'
+import {mapGetters, mapState} from 'vuex'
+import {getDate, getTime, isToday} from '../../utils/date'
+
 export default {
   name: 'conversation-item',
   props: ['conversation'],
+  filters: {},
   data() {
     return {
       popoverVisible: false,
@@ -71,14 +77,14 @@ export default {
       }
       // 是否显示未读计数。当前会话和未读计数为0的会话，不显示。
       return (
-        this.currentConversation.conversationID !==
+          this.currentConversation.conversationID !==
           this.conversation.conversationID && this.conversation.unreadCount > 0
       )
     },
     date() {
       if (
-        !this.conversation.lastMessage ||
-        !this.conversation.lastMessage.lastTime
+          !this.conversation.lastMessage ||
+          !this.conversation.lastMessage.lastTime
       ) {
         return ''
       }
@@ -88,7 +94,7 @@ export default {
       }
       return getDate(date)
     },
-    avatar: function() {
+    avatar: function () {
       switch (this.conversation.type) {
         case 'GROUP':
           return this.conversation.groupProfile.avatar
@@ -98,7 +104,7 @@ export default {
           return ''
       }
     },
-    conversationName: function() {
+    conversationName: function () {
       if (this.conversation.type === this.TIM.TYPES.CONV_C2C) {
         return this.conversation.userProfile.nick || this.conversation.userProfile.userID
       }
@@ -115,8 +121,8 @@ export default {
         return false
       }
       return (
-        this.conversation.groupProfile.selfInfo.messageRemindType ===
-        'AcceptNotNotify'
+          this.conversation.groupProfile.selfInfo.messageRemindType ===
+          'AcceptNotNotify'
       )
     },
     messageForShow() {
@@ -140,8 +146,8 @@ export default {
   mounted() {
     this.$bus.$on('new-messsage-at-me', event => {
       if (
-        event.data.conversationID === this.conversation.conversationID &&
-        this.conversation.conversationID !==
+          event.data.conversationID === this.conversation.conversationID &&
+          this.conversation.conversationID !==
           this.currentConversation.conversationID
       ) {
         this.hasMessageAtMe = true
@@ -152,8 +158,8 @@ export default {
     selectConversation() {
       if (this.conversation.conversationID !== this.currentConversation.conversationID) {
         this.$store.dispatch(
-          'checkoutConversation',
-          this.conversation.conversationID
+            'checkoutConversation',
+            this.conversation.conversationID
         )
       }
     },
@@ -161,22 +167,22 @@ export default {
       // 停止冒泡，避免和点击会话的事件冲突
       event.stopPropagation()
       this.tim
-        .deleteConversation(this.conversation.conversationID)
-        .then(() => {
-          this.$store.commit('showMessage', {
-            message: `会话【${this.conversationName}】删除成功!`,
-            type: 'success'
+          .deleteConversation(this.conversation.conversationID)
+          .then(() => {
+            this.$store.commit('showMessage', {
+              message: `会话【${this.conversationName}】删除成功!`,
+              type: 'success'
+            })
+            this.popoverVisible = false
+            this.$store.commit('resetCurrentConversation')
           })
-          this.popoverVisible = false
-          this.$store.commit('resetCurrentConversation')
-        })
-        .catch(error => {
-          this.$store.commit('showMessage', {
-            message: `会话【${this.conversationName}】删除失败!, error=${error.message}`,
-            type: 'error'
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              message: `会话【${this.conversationName}】删除失败!, error=${error.message}`,
+              type: 'error'
+            })
+            this.popoverVisible = false
           })
-          this.popoverVisible = false
-        })
     },
     showContextMenu() {
       this.popoverVisible = true
@@ -203,42 +209,53 @@ export default {
   transition .2s
   // &:first-child
   //   padding-top 30px
+
   &:hover
     background-color $background
+
     .close-btn
       right 3px
+
   .close-btn
     position absolute
     right -20px
     top 3px
     color $font-dark
     transition: all .2s ease;
+
     &:hover
       color $danger
+
   .warp
     display flex
+
   .avatar
     width 40px
     height 40px
     margin-right 10px
     border-radius 50%
     flex-shrink 0
+
   .content
     flex 1
     height 40px
     overflow hidden
+
     .row-1
       display flex
       line-height 21px
+
       .name
         color $font-light
         flex 1
         min-width 0px
+
       .unread-count
         padding-left 10px
         flex-shrink 0
         color $font-dark
         font-size 12px
+
         .badge
           vertical-align bottom
           background-color $danger
@@ -252,25 +269,31 @@ export default {
           padding 0 6px
           text-align center
           white-space nowrap
+
     .row-2
       display flex
       font-size 12px
       padding-top 3px
+
       .summary
         flex 1
         overflow hidden
         min-width 0px
         color: $secondary
+
         .remind
           color $danger
+
       .date
         padding-left 10px
         flex-shrink 0
         text-align right
         color $font-dark
+
 .choose {
   background-color: $background;
 }
+
 .context-menu-button {
   padding: 10px
   border: 2px solid $primary;

@@ -4,15 +4,15 @@
       <button title="刷新列表" @click="handleRefresh">
         <i class="tim-icon-refresh"></i>
       </button>
-      <button title="创建会话" @click="handleAddButtonClick">
-        <i class="tim-icon-add"></i>
-      </button>
+<!--      <button title="创建会话" @click="handleAddButtonClick">-->
+<!--        <i class="tim-icon-add"></i>-->
+<!--      </button>-->
     </div>
     <div class="scroll-container">
       <conversation-item
-        :conversation="item"
-        v-for="item in conversationList"
-        :key="item.conversationID"
+          :conversation="item"
+          v-for="item in conversationList"
+          :key="item.conversationID"
       />
     </div>
     <el-dialog title="快速发起会话" :visible.sync="showDialog" width="30%">
@@ -31,7 +31,7 @@ import {mapState} from 'vuex'
 
 export default {
   name: 'ConversationList',
-  components: { ConversationItem },
+  components: {ConversationItem},
   data() {
     return {
       showDialog: false,
@@ -60,7 +60,7 @@ export default {
       let that = this
       return function () {
         if (!that.timeout) {
-          that.timeout = setTimeout(() =>{
+          that.timeout = setTimeout(() => {
             that.timeout = null
             that.tim.getConversationList().then(() => {
               that.$store.commit('showMessage', {
@@ -78,10 +78,10 @@ export default {
     handleConfirm() {
       if (this.userID !== '@TIM#SYSTEM') {
         this.$store
-          .dispatch('checkoutConversation', `C2C${this.userID}`)
-          .then(() => {
-            this.showDialog = false
-          }).catch(() => {
+            .dispatch('checkoutConversation', `C2C${this.userID}`)
+            .then(() => {
+              this.showDialog = false
+            }).catch(() => {
           this.$store.commit('showMessage', {
             message: '没有找到该用户',
             type: 'warning'
@@ -100,14 +100,14 @@ export default {
         return
       }
       const currentIndex = this.conversationList.findIndex(
-        item => item.conversationID === this.currentConversation.conversationID
+          item => item.conversationID === this.currentConversation.conversationID
       )
       if (event.keyCode === 38 && currentIndex - 1 >= 0) {
         this.checkoutPrev(currentIndex)
       }
       if (
-        event.keyCode === 40 &&
-        currentIndex + 1 < this.conversationList.length
+          event.keyCode === 40 &&
+          currentIndex + 1 < this.conversationList.length
       ) {
         this.checkoutNext(currentIndex)
       }
@@ -115,30 +115,30 @@ export default {
     checkoutPrev(currentIndex) {
       this.isCheckouting = true
       this.$store
-        .dispatch(
-          'checkoutConversation',
-          this.conversationList[currentIndex - 1].conversationID
-        )
-        .then(() => {
-          this.isCheckouting = false
-        })
-        .catch(() => {
-          this.isCheckouting = false
-        })
+          .dispatch(
+              'checkoutConversation',
+              this.conversationList[currentIndex - 1].conversationID
+          )
+          .then(() => {
+            this.isCheckouting = false
+          })
+          .catch(() => {
+            this.isCheckouting = false
+          })
     },
     checkoutNext(currentIndex) {
       this.isCheckouting = true
       this.$store
-        .dispatch(
-          'checkoutConversation',
-          this.conversationList[currentIndex + 1].conversationID
-        )
-        .then(() => {
-          this.isCheckouting = false
-        })
-        .catch(() => {
-          this.isCheckouting = false
-        })
+          .dispatch(
+              'checkoutConversation',
+              this.conversationList[currentIndex + 1].conversationID
+          )
+          .then(() => {
+            this.isCheckouting = false
+          })
+          .catch(() => {
+            this.isCheckouting = false
+          })
     }
   }
 }
@@ -150,11 +150,13 @@ export default {
   width 100%
   display flex
   flex-direction column // -reverse
+
   .header-bar
     flex-shrink 0
     height 50px
     border-bottom 1px solid $background-deep-dark
     padding 10px 10px 10px 20px
+
     button
       float right
       display: inline-block;
@@ -177,14 +179,17 @@ export default {
       white-space: nowrap;
       border-radius: 50%
       outline 0
+
       &:hover
         // background $light-primary
         // color $white
         transform: rotate(360deg);
         color $light-primary
+
   .scroll-container
     overflow-y scroll
     flex 1
+
 .bottom-circle-btn {
   position: absolute;
   bottom: 20px;

 <template>
   <div class="profile-user">
-    <avatar :title=userProfile.userID :src="userProfile.avatar" />
+    <avatar :title=userProfile.userID :src="userProfile.avatar"/>
     <div class="nick-name text-ellipsis">
       <span v-if="userProfile.nick" :title=userProfile.nick>
         {{ userProfile.nick }}
@@ -12,21 +12,25 @@
     <div class="gender" v-if="genderClass">
       <span :title="gender" class="iconfont" :class="genderClass"></span>
     </div>
-    <el-button
-      title="将该用户加入黑名单"
-      type="text"
-      @click="addToBlackList"
-      v-if="!isInBlacklist && userProfile.userID !== myUserID"
-      class="btn-add-blacklist"
-      >加入黑名单</el-button
-    >
-    <el-button title="将该用户移出黑名单" type="text" @click="removeFromBlacklist" v-else-if="isInBlacklist">移出黑名单</el-button>
+    <div>
+      <span>{{ userProfile.selfSignature }}</span>
+    </div>
+    <!--    <el-button-->
+    <!--      title="将该用户加入黑名单"-->
+    <!--      type="text"-->
+    <!--      @click="addToBlackList"-->
+    <!--      v-if="!isInBlacklist && userProfile.userID !== myUserID"-->
+    <!--      class="btn-add-blacklist"-->
+    <!--      >加入黑名单</el-button-->
+    <!--    >-->
+    <!--    <el-button title="将该用户移出黑名单" type="text" @click="removeFromBlacklist" v-else-if="isInBlacklist">移出黑名单</el-button>-->
     <!-- 拉黑 和 反拉黑 -->
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+
 export default {
   props: {
     userProfile: {
@@ -66,27 +70,27 @@ export default {
   methods: {
     addToBlackList() {
       this.tim
-        .addToBlacklist({ userIDList: [this.userProfile.userID] })
-        .then(() => {
-          this.$store.dispatch('getBlacklist')
-        })
-        .catch(imError => {
-          this.$store.commit('showMessage', {
-            message: imError.message,
-            type: 'error'
+          .addToBlacklist({userIDList: [this.userProfile.userID]})
+          .then(() => {
+            this.$store.dispatch('getBlacklist')
+          })
+          .catch(imError => {
+            this.$store.commit('showMessage', {
+              message: imError.message,
+              type: 'error'
+            })
           })
-        })
     },
     removeFromBlacklist() {
-      this.tim.removeFromBlacklist({ userIDList: [this.userProfile.userID] }).then(() => {
+      this.tim.removeFromBlacklist({userIDList: [this.userProfile.userID]}).then(() => {
         this.$store.commit('removeFromBlacklist', this.userProfile.userID)
       })
-      .catch(error => {
-          this.$store.commit('showMessage', {
-            type: 'error',
-            message: error.message
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
           })
-        })
     }
   }
 }
@@ -97,23 +101,28 @@ export default {
   width 100%
   text-align center
   padding 0 20px
+
   .avatar
     width 160px
     height 160px
     border-radius 50%
     margin 30px auto
+
   .nick-name
     width 100%
     color $base
     font-size 20px
     font-weight bold
     text-shadow $font-dark 0 0 0.1em
+
     .anonymous
       color $first
       text-shadow none
+
   .gender
     padding 5px 0 10px 0
     border-bottom 1px solid $border-base
+
   .btn-add-blacklist
     color $danger
 </style>

 <template>
-  <div>
-    <el-row class="friend-item-container">
+  <div class="friend-item-container" @click="handleFriendClick">
+    <el-row class="friend-list" type="flex" align="middle" justify="center" :gutter="16">
       <el-col :span="6">
-        <avatar :src="friend.profile.avatar"/>
+        <avatar class="friend-avatar" :src="friend.avatar"/>
       </el-col>
       <el-col :span="18">
-        <div class="friend-name">{{ friend.profile.nick || friend.userID }}</div>
+        <div class="friend-name">{{ friend.name }}</div>
       </el-col>
     </el-row>
   </div>
@@ -21,18 +21,32 @@ export default {
   },
   methods: {
     handleFriendClick() {
-      this.tim.getConversationProfile(`C2C${this.friend.userID}`)
-          .then(({data}) => this.$store.commit('updateCurrentConversation', data))
-          .catch(error => {
-            this.$store.commit('showMessage', {
-              type: 'error',
-              message: error.message
-            })
+      this.tim.getConversationProfile(`C2C${this.friend.esm_id}`)
+          .then(({data}) => {
+            console.log(data)
+            this.$store.commit('updateCurrentConversation', data)
+            this.$store.commit('setActiveMenu', 'conversation-list')
+            this.$store.dispatch('checkoutConversation', data.conversation.conversationID)
           })
+          .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
     }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
+.friend-item-container
+  color #f7f7f8
+
+  :hover
+    background-color #404953
+    cursor pointer
+
+  .friend-list
+    padding 10px 15px
+
+    .friend-avatar
+      height 48px
+      width 48px
+
 </style>

 <template>
-  <!--  <div class="friend-list-container" :class="{'default': !hasFriend}">-->
   <div class="list-container">
-
+    <div class="header-bar">
+      <el-input v-model="select" size="mini" placeholder="筛选昵称" prefix-icon="el-icon-search"/>
+    </div>
     <el-collapse v-model="activeNames" class="friend-list-container">
       <el-collapse-item title="用户组" name="user">
-        <friend-item v-for="friend in friendList" :key="friend.userID" :friend="friend"/>
+        <friend-item v-for="friend in userList" :key="friend.ems_id" :friend="friend"/>
       </el-collapse-item>
       <el-collapse-item title="策划组" name="scheme">
-
+        <friend-item v-for="friend in schemeList" :key="friend.ems_id" :friend="friend"/>
       </el-collapse-item>
       <el-collapse-item title="管理组" name="admin">
-
+        <friend-item v-for="friend in adminList" :key="friend.ems_id" :friend="friend"/>
       </el-collapse-item>
     </el-collapse>
   </div>
-  <!--    <div v-if="hasFriend">-->
-  <!--      <friend-item v-for="friend in friendList" :key="friend.userID" :friend="friend"/>-->
-  <!--    </div>-->
-  <!--    <div style="color:gray;" v-else>暂无数据</div>-->
-  <!--  </div>-->
 </template>
 
 <script>
@@ -32,21 +28,32 @@ export default {
   },
   computed: {
     ...mapState({
-      friendList: state => state.friend.friendList
+      friendList: state => state.friend.friendList,
+      adminList(state) {
+        const list = state.friend.adminList || []
+        return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
+      },
+      userList(state) {
+        const list = state.friend.userList || []
+        return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
+      },
+      schemeList(state) {
+        const list = state.friend.schemeList || []
+        return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
+      }
     }),
-    hasFriend() {
-      return this.friendList.length > 0
-    }
   },
   data() {
     return {
       activeNames: [],
+      select: ''
     }
-  }
+  },
+  methods: {}
 }
 </script>
 
-<style lang="stylus" scpoed>
+<style lang="stylus" scoped>
 .list-container
   height 100%
   width 100%
@@ -54,16 +61,53 @@ export default {
   flex-direction column
 
   .friend-list-container
-    margin 1px
-    border-top:unset
+    border-top: unset
     border-bottom unset
+    padding 0 15px
+    overflow-y: scroll
+    height: 100%
 
+  >>> .el-collapse-item
+    justify-content: center
+    align-items: center
+
+    .el-collapse-item__header
+      background-color transparent !important
+      border-bottom: unset
+      color #f7f7f8
+
+    .el-collapse-item__wrap
+      background-color transparent !important
+      border-bottom: unset
+
+      .el-collapse-item__content
+        padding-bottom 0
+
+  .header-bar
+    display: flex;
+    flex-shrink 0
+    height 50px
+    border-bottom 1px solid $background-deep-dark
+    padding 10px 10px 10px 20px
+
+  >>> .el-input
+    width 100%
+    margin-right 10px
+
+    input
+      color $first
+      border none
+      border-radius 30px
+      background-color $deep-background !important
+
+      &::placeholder
+        color $font-dark
+
+    .el-icon-search
+      color $font-dark
+
+      &:hover
+        transform: rotate(360deg);
+        color $light-primary
 
-.default {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  overflow-y: scroll;
-}
 </style>

 <template>
   <div @click="handleGroupClick" class="scroll-container">
     <div class="group-item">
-      <avatar :src="group.avatar" />
-      <div class="group-name text-ellipsis">{{ group.name }}</div>
+      <avatar :src="group.avatar"/>
+      <div class="group-name text-ellipsis">{{ title }}</div>
     </div>
   </div>
 </template>
 
 <script>
+import {MessageBox} from 'element-ui'
+import Helper from '../../utils/helper'
+
 export default {
   props: ['group'],
   data() {
@@ -21,19 +24,37 @@ export default {
       ]
     }
   },
+  computed: {
+    title() {
+      return (this.group.activity_type === 1 ? '推广' : '征集') + ' - ' + this.group.song_name.replace('《', '').replace('》', '')
+    }
+  },
   methods: {
     handleGroupClick() {
-      const conversationID = `GROUP${this.group.groupID}`
-      this.$store.dispatch('checkoutConversation', conversationID)
+      if (this.group.is_join === 1) {
+        const conversationID = `GROUP${this.group.esm_id}`
+        this.$store.dispatch('checkoutConversation', conversationID)
+      } else {
+        MessageBox.confirm('是否加入讨论组：' + this.title, '提示', {
+          type: 'warning', showClose: false
+        }).then(() => {
+          Helper.joinGroup(this.group.id).then(() => {
+            this.group.is_join = 1
+            this.handleGroupClick()
+          })
+        }).catch(() => {
+
+        })
+      }
     },
     quitGroup() {
       this.tim.quitGroup(this.group.groupID)
-      .catch(error => {
-          this.$store.commit('showMessage', {
-            type: 'error',
-            message: error.message
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
           })
-        })
     }
   }
 }
@@ -43,6 +64,7 @@ export default {
 .scroll-container
   overflow-y scroll
   flex 1
+
   .group-item
     display flex
     padding 10px 20px
@@ -50,14 +72,17 @@ export default {
     position relative
     overflow hidden
     transition .2s
+
     &:hover
       background-color $background
+
     .avatar
       width 30px
       height 30px
       border-radius 50%
       margin-right 10px
       flex-shrink 0
+
     .group-name
       flex 1
       color $font-light

 <template>
-  <div class="list-container">
+  <div class="list-container"
+       v-loading="hideSearchLoading"
+       element-loading-text="拼命搜索中"
+       element-loading-background="rgba(0, 0, 0, 0.8)">
     <div class="header-bar">
-      <el-autocomplete
-        :value-key="'groupID'"
-        :debounce="500"
-        size="mini"
-        v-model="groupID"
-        placeholder="输入群ID搜索"
-        :fetch-suggestions="searchGroupByID"
-        class="group-seach-bar"
-        prefix-icon="el-icon-search"
-        :hide-loading="hideSearchLoading"
-        @input="hideSearchLoading = false"
-        @select="applyJoinGroup"
-      ></el-autocomplete>
-<!--      <button title="创建群组" @click="showCreateGroupModel">-->
-<!--        <i class="tim-icon-add"></i>-->
-<!--      </button>-->
+      <el-input v-model="search" size="mini" placeholder="筛选群名" prefix-icon="el-icon-search"/>
+
+      <!--      <el-autocomplete-->
+      <!--          :value-key="'groupID'"-->
+      <!--          :debounce="500"-->
+      <!--          size="mini"-->
+      <!--          v-model="groupID"-->
+      <!--          placeholder="输入群ID搜索"-->
+      <!--          :fetch-suggestions="searchGroupByID"-->
+      <!--          class="group-seach-bar"-->
+      <!--          prefix-icon="el-icon-search"-->
+      <!--          :hide-loading="hideSearchLoading"-->
+      <!--          @input="hideSearchLoading = false"-->
+      <!--          @select="applyJoinGroup"-->
+      <!--      ></el-autocomplete>-->
+      <!--      <button title="创建群组" @click="showCreateGroupModel">-->
+      <!--        <i class="tim-icon-add"></i>-->
+      <!--      </button>-->
     </div>
-    <div class="group-container">
-      <group-item v-for="group in groupList" :key="group.groupID" :group="group" />
-      <el-dialog title="创建群组" :visible="createGroupModelVisible" @close="closeCreateGroupModel" width="30%">
-        <create-group></create-group>
-      </el-dialog>
+    <div class="group-container" v-infinite-scroll="fetch" :infinite-scroll-immediate="true"
+         :infinite-scroll-delay="100"
+         style="height: calc(80vh - 60px)">
+      <group-item v-for="group in groupList" :key="group.esm_id" :group="group"/>
+      <!--      <el-dialog title="创建群组" :visible="createGroupModelVisible" @close="closeCreateGroupModel" width="30%">-->
+      <!--        <create-group></create-group>-->
+      <!--      </el-dialog>-->
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { Dialog, Autocomplete } from 'element-ui'
-import CreateGroup from './create-group.vue'
+import {mapState} from 'vuex'
+// import CreateGroup from './create-group.vue'
 import GroupItem from './group-item.vue'
+import Helper from '../../utils/helper'
+
 export default {
   data() {
     return {
       groupID: '',
-      hideSearchLoading: true
+      hideSearchLoading: false,
+      search: '',
+      page: 1,
+      size: 15,
     }
   },
   components: {
-    GroupItem,
-    ElDialog: Dialog,
-    CreateGroup,
-    ElAutocomplete: Autocomplete
+    GroupItem
+    // ElDialog: Dialog,
+    // CreateGroup,
+    // ElAutocomplete: Autocomplete
+  },
+  mounted() {
+
   },
   computed: {
-    groupList: function() {
+    groupList: function () {
       return this.$store.state.group.groupList
     },
     ...mapState({
@@ -55,11 +69,25 @@ export default {
       }
     })
   },
+  created() {
+    this.fetch()
+  },
   methods: {
+    fetch() {
+      Helper.groupList({
+        activityNameLike: this.search, size: this.size, page: this.page
+      }).then(res => {
+        this.onGroupUpdated(this.groupList.concat(res.data))
+        ++this.page
+      }).finally(() => {
+        this.hideSearchLoading = false
+      })
+    },
     onGroupUpdated(groupList) {
       this.$store.dispatch('updateGroupList', groupList)
     },
-    createGroup() {},
+    createGroup() {
+    },
     closeCreateGroupModel() {
       this.$store.commit('updateCreateGroupModelVisible', false)
     },
@@ -67,16 +95,16 @@ export default {
       if (queryString.trim().length > 0) {
         this.hideSearchLoading = false
         this.tim
-          .searchGroupByID(queryString)
-          .then(({ data: { group } }) => {
-            showInSearchResult([group])
-          })
-          .catch(() => {
-            this.$store.commit('showMessage', {
-              message: '没有找到该群',
-              type: 'error'
+            .searchGroupByID(queryString)
+            .then(({data: {group}}) => {
+              showInSearchResult([group])
+            })
+            .catch(() => {
+              this.$store.commit('showMessage', {
+                message: '没有找到该群',
+                type: 'error'
+              })
             })
-          })
       } else {
         this.hideSearchLoading = true
       }
@@ -86,40 +114,46 @@ export default {
     },
     applyJoinGroup(group) {
       this.tim
-        .joinGroup({ groupID: group.groupID })
-        .then(async res => {
-          switch(res.data.status) {
-            case this.TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
-              this.$store.commit('showMessage', {
-                message: '申请成功，等待群管理员确认。',
-                type: 'info'
-              })
-              break
-            case this.TIM.TYPES.JOIN_STATUS_SUCCESS:
-              await this.$store.dispatch(
-                'checkoutConversation',
-                `GROUP${res.data.group.groupID}`
-              )
-              this.$store.commit('showMessage', {
-                message: '加群成功',
-                type: 'success'
-              })
-              break
-            case this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
-              this.$store.commit('showMessage', {
-                message: '您已经是群成员了，请勿重复加群哦！',
-                type: 'info'
-              })
-              break
-            default: break
-          }
-        })
-        .catch(error => {
-          this.$store.commit('showMessage', {
-            message: error.message,
-            type: 'error'
+          .joinGroup({groupID: group.groupID})
+          .then(async res => {
+            switch (res.data.status) {
+              case this.TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
+                this.$store.commit('showMessage', {
+                  message: '申请成功，等待群管理员确认。',
+                  type: 'info'
+                })
+                break
+              case this.TIM.TYPES.JOIN_STATUS_SUCCESS:
+                await this.$store.dispatch(
+                    'checkoutConversation',
+                    `GROUP${res.data.group.groupID}`
+                )
+                this.$store.commit('showMessage', {
+                  message: '加群成功',
+                  type: 'success'
+                })
+                break
+              case this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
+                this.$store.commit('showMessage', {
+                  message: '您已经是群成员了，请勿重复加群哦！',
+                  type: 'info'
+                })
+                break
+              default:
+                break
+            }
           })
-        })
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              message: error.message,
+              type: 'error'
+            })
+          })
+    }
+  },
+  watch: {
+    'search'() {
+      this.fetch()
     }
   }
 }
@@ -131,27 +165,30 @@ export default {
   width 100%
   display flex
   flex-direction column
+
   .group-container
     overflow-y scroll
+
   .header-bar
     display: flex;
     flex-shrink 0
     height 50px
     border-bottom 1px solid $background-deep-dark
     padding 10px 10px 10px 20px
-    .group-seach-bar
-      width 100%
-      margin-right 10px
-      >>> .el-input
-        input
-          color $first
-          border none
-          border-radius 30px
-          background-color $deep-background !important
-          &::placeholder
-            color $font-dark
-        .el-icon-search
+
+    >>> .el-input
+      input
+        color $first
+        border none
+        border-radius 30px
+        background-color $deep-background !important
+
+        &::placeholder
           color $font-dark
+
+      .el-icon-search
+        color $font-dark
+
     button
       float right
       display: inline-block;
@@ -175,9 +212,11 @@ export default {
       border-radius: 50%
       outline 0
       flex-shrink 0
+
       &:hover
         transform: rotate(360deg);
         color $light-primary
+
   .scroll-container
     overflow-y scroll
     flex 1

@@ -56,6 +56,7 @@ import ConversationList from '../conversation/conversation-list'
 import GroupList from '../group/group-list'
 import FriendList from '../friend/friend-list'
 import BlackList from '../blacklist/blacklist'
+import Helper from '../../utils/helper'
 
 const activeName = {
   CONVERSATION_LIST: 'conversation-list',
@@ -75,15 +76,12 @@ export default {
   },
   data() {
     return {
-      active: activeName.CONVERSATION_LIST,
       activeName: activeName
     }
   },
   computed: {
     ...mapGetters(['totalUnreadCount']),
-    ...mapState({
-      userID: state => state.user.userID,
-    }),
+    ...mapState({userID: state => state.user.userID, active: state => state.activeMenu}),
     showConversationList() {
       return this.active === activeName.CONVERSATION_LIST
     },
@@ -104,7 +102,7 @@ export default {
   },
   methods: {
     checkoutActive(name) {
-      this.active = name
+      this.$store.commit('setActiveMenu', name)
     },
     handleClick(event) {
       switch (event.target.id) {
@@ -129,10 +127,7 @@ export default {
       switch (this.active) {
         case activeName.CONVERSATION_LIST:
           this.tim.getConversationList().catch(error => {
-            this.$store.commit('showMessage', {
-              type: 'error',
-              message: error.message
-            })
+            this.$store.commit('showMessage', {type: 'error', message: error.message})
           })
           break
         case activeName.GROUP_LIST:
@@ -147,36 +142,30 @@ export default {
       }
     },
     getGroupList() {
-      this.tim
-          .getGroupList()
-          .then(({data: groupList}) => {
-            this.$store.dispatch('updateGroupList', groupList)
-          })
-          .catch(error => {
-            this.$store.commit('showMessage', {
-              type: 'error',
-              message: error.message
-            })
-          })
+      Helper.groupList().then(res => this.$store.dispatch('updateGroupList', res.data))
+      this.tim.getGroupList()
+          .then(({data: groupList}) => this.$store.dispatch('updateGroupList', groupList))
+          .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
     },
     getFriendList() {
-      this.tim
-          .getFriendList()
-          .then(({data: friendList}) => {
-            this.$store.commit('upadteFriendList', friendList)
-          })
-          .catch(error => {
-            this.$store.commit('showMessage', {
-              type: 'error',
-              message: error.message
-            })
-          })
-          .catch(error => {
-            this.$store.commit('showMessage', {
-              type: 'error',
-              message: error.message
-            })
-          })
+      Helper.contactList().then(res => this.$store.commit('updateFriendList', res.data))
+      // this.tim
+      //     .getFriendList()
+      //     .then(({data: friendList}) => {
+      //       this.$store.commit('updateFriendList', friendList)
+      //     })
+      //     .catch(error => {
+      //       this.$store.commit('showMessage', {
+      //         type: 'error',
+      //         message: error.message
+      //       })
+      //     })
+      //     .catch(error => {
+      //       this.$store.commit('showMessage', {
+      //         type: 'error',
+      //         message: error.message
+      //       })
+      //     })
     },
     groupLive() {
       this.$store.commit('updateGroupLiveInfo', {
@@ -185,7 +174,10 @@ export default {
       })
       this.$bus.$emit('open-group-live', {channel: 2})
     },
-  }
+  },
+  created() {
+    this.checkoutActive(activeName.CONVERSATION_LIST)
+  },
 }
 </script>
 

 <template>
-<message-bubble :isMine=isMine :message=message>
-  <div class="custom-element-wrapper">
-    <div class="survey"  v-if="this.payload.data === 'survey'">
-      <div class="title">对IM DEMO的评分和建议</div>
-      <el-rate
-          v-model="rate"
-          disabled
-          show-score
-          text-color="#ff9900"
-          score-template="{value}">
-      </el-rate>
-      <div class="suggestion">{{this.payload.extension}}</div>
-    </div>
-    <span class="text" title="您可以自行解析自定义消息" v-else>
+  <message-bubble :isMine=isMine :message=message>
+    <div class="custom-element-wrapper">
+      <div class="survey" v-if="this.payload.data === 'survey'">
+        <div class="title">对IM DEMO的评分和建议</div>
+        <el-rate
+            v-model="rate"
+            disabled
+            show-score
+            text-color="#ff9900"
+            score-template="{value}">
+        </el-rate>
+        <div class="suggestion">{{ this.payload.extension }}</div>
+      </div>
+      <span class="text" title="您可以自行解析自定义消息" v-else>
       <template v-if="text.isFromGroupLive && text.isFromGroupLive === 1">
-        <message-group-live-status :liveInfo='text' />
+        <message-group-live-status :liveInfo='text'/>
+      </template>
+      <template v-else-if="this.payload.data === 'image'">
+        <el-image :src="this.payload.description" :preview-src-list="[this.payload.description]"/>
+        <!--            <img alt="image" class="image-element" :src="this.payload.description" @load="onImageLoaded"-->
+        <!--                 @click="handlePreview"/>-->
       </template>
-      <template v-else>{{text}}</template>
+      <template v-else>{{ text }}</template>
     </span>
-  </div>
-</message-bubble>
+    </div>
+  </message-bubble>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 import MessageBubble from '../message-bubble'
-import { Rate } from 'element-ui'
+import {Rate} from 'element-ui'
 import MessageGroupLiveStatus from '../message-group-live-status'
+import ImageElement from '../message-elements/image-element.vue'
 
 export default {
   name: 'CustomElement',
@@ -46,7 +52,8 @@ export default {
   components: {
     MessageBubble,
     ElRate: Rate,
-    MessageGroupLiveStatus
+    MessageGroupLiveStatus,
+    ImageElement,
   },
   computed: {
     ...mapState({
@@ -60,11 +67,17 @@ export default {
     }
   },
   methods: {
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
+        return v.toString(16)
+      })
+    },
     translateCustomMessage(payload) {
       let videoPayload = {}
-      try{
+      try {
         videoPayload = JSON.parse(payload.data)
-      } catch(e) {
+      } catch (e) {
         videoPayload = {}
       }
       if (payload.data === 'group_create') {
@@ -75,29 +88,53 @@ export default {
         videoPayload.isFromGroupLive = 1
         return videoPayload
       }
-      if(payload.text) {
+      if (payload.text) {
         return payload.text
-      }else{
+      } else {
         return '[自定义消息]'
       }
+    },
+    formatImageMessage() {
+      console.log(this.message)
+      return {
+        // ID:
+      }
+    },
+    onImageLoaded(event) {
+      console.log(event)
+      this.$bus.$emit('image-loaded', event)
+    },
+    handlePreview() {
+      console.log(this.payload.description)
+      this.$bus.$emit('image-preview', {
+        url: this.payload.description
+      })
     }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
+.image-element
+  max-width 250px
+  cursor zoom-in
+  width: 100%
+
 .text
   font-weight bold
+
 .title
   font-size 16px
   font-weight 600
   padding-bottom 10px
+
 .survey
   background-color white
   color black
   padding 20px
   display flex
   flex-direction column
+
 .suggestion
   padding-top 10px
   font-size 14px

 <template>
   <message-bubble :isMine=isMine :message=message>
-     <!-- el-image在IE下会自动加上用于兼容object-fit的类，该类的样式在没设置图片宽高是会 GG -->
-    <img class="image-element" :src="imageUrl" @load="onImageLoaded" @click="handlePreview" />
+    <!-- el-image在IE下会自动加上用于兼容object-fit的类，该类的样式在没设置图片宽高是会 GG -->
+    <img class="image-element" :src="imageUrl" @load="onImageLoaded" @click="handlePreview"/>
     <el-progress
-      v-if="showProgressBar"
-      :percentage="percentage"
-      :color="percentage => (percentage === 100 ? '#67c23a' : '#409eff')"
+        v-if="showProgressBar"
+        :percentage="percentage"
+        :color="percentage => (percentage === 100 ? '#67c23a' : '#409eff')"
     />
-  </message-bubble>  
+  </message-bubble>
 </template>
 
 <script>
 import MessageBubble from '../message-bubble'
-import { Progress } from 'element-ui'
-import { mapGetters } from 'vuex'
+import {Progress} from 'element-ui'
+import {mapGetters} from 'vuex'
+
 export default {
   name: 'ImageElemnt',
   props: {
@@ -63,7 +64,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.image-element 
+.image-element
   max-width 250px
   cursor zoom-in
 

@@ -12,22 +12,22 @@
       <i class="iconfont icon-tupian" title="发图片" @click="handleSendImageClick"></i>
       <i class="el-icon-camera" title="发视频" @click="handleSendVideoClick"></i>
       <i class="iconfont icon-wenjian" title="发文件" @click="handleSendFileClick"></i>
-      <i class="iconfont icon-zidingyi" title="发自定义消息" @click="sendCustomDialogVisible = true"></i>
-      <el-dropdown>
-      <span class="el-dropdown-link">
-      <i class="el-icon-phone-outline" v-if="toAccount !== userID" title="语音通话"></i>
-      </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item @click.native="trtcCalling('video')">视频通话</el-dropdown-item>
-          <el-dropdown-item @click.native="trtcCalling('audio')">语音通话</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <div class="group-live-icon-box"
-           v-if="currentConversationType === TIM.TYPES.CONV_GROUP && groupProfile.type !== 'AVChatRoom'" title="群直播"
-           @click="groupLive">
-        <i class="group-live-icon"></i>
-        <i class="group-live-icon-hover"></i>
-      </div>
+      <!--      <i class="iconfont icon-zidingyi" title="发自定义消息" @click="sendCustomDialogVisible = true"></i>-->
+      <!--      <el-dropdown>-->
+      <!--      <span class="el-dropdown-link">-->
+      <!--      <i class="el-icon-phone-outline" v-if="toAccount !== userID" title="语音通话"></i>-->
+      <!--      </span>-->
+      <!--        <el-dropdown-menu slot="dropdown">-->
+      <!--          <el-dropdown-item @click.native="trtcCalling('video')">视频通话</el-dropdown-item>-->
+      <!--          <el-dropdown-item @click.native="trtcCalling('audio')">语音通话</el-dropdown-item>-->
+      <!--        </el-dropdown-menu>-->
+      <!--      </el-dropdown>-->
+      <!--      <div class="group-live-icon-box"-->
+      <!--           v-if="currentConversationType === TIM.TYPES.CONV_GROUP && groupProfile.type !== 'AVChatRoom'" title="群直播"-->
+      <!--           @click="groupLive">-->
+      <!--        <i class="group-live-icon"></i>-->
+      <!--        <i class="group-live-icon-hover"></i>-->
+      <!--      </div>-->
     </div>
     <el-dialog title="发自定义消息" :visible.sync="sendCustomDialogVisible" width="30%">
       <el-form label-width="100px">

 <template>
   <div class="container">
-    <div
-        class="loading"
-        v-loading="showLoading"
-        element-loading-text="正在拼命初始化..."
-        element-loading-background="rgba(0, 0, 0, 0.8)"
-    >
+    <div class="loading" v-loading="showLoading" element-loading-text="正在拼命初始化..."
+         element-loading-background="rgba(0, 0, 0, 0.8)">
       <div class="chat-wrapper">
         <el-row>
           <el-col :xs="10" :sm="10" :md="8" :lg="8" :xl="7">
@@ -76,10 +72,13 @@ export default {
           this.$store.commit('toggleIsLogin', true)
           this.$store.commit('startComputeCurrent')
           this.$store.commit({
-            type: 'GET_USER_INFO', userID: user.id,
+            type: 'GET_USER_INFO',
+            userID: user.id,
             userSig: user.sign,
             sdkAppID: window.genTestUserSig('').SDKAppID
           })
+          Helper.contactList().then(res => this.$store.commit('updateFriendList', res.data))
+          // Helper.groupList({size: 20}).then(res => this.$store.commit('updateGroupList', res.data))
           // this.$store.commit('showMessage', {type: 'success', message: '登录成功'})
         })
         .catch(error => {
@@ -110,7 +109,7 @@ export default {
       // 会话列表更新
       this.tim.on(this.TIM.EVENT.CONVERSATION_LIST_UPDATED, this.onUpdateConversationList)
       // 群组列表更新
-      this.tim.on(this.TIM.EVENT.GROUP_LIST_UPDATED, this.onUpdateGroupList)
+      // this.tim.on(this.TIM.EVENT.GROUP_LIST_UPDATED, this.onUpdateGroupList)
       // 网络监测
       this.tim.on(this.TIM.EVENT.NET_STATE_CHANGE, this.onNetStateChange)
       // 已读回执
@@ -188,9 +187,9 @@ export default {
     onUpdateConversationList(event) {
       this.$store.commit('updateConversationList', event.data)
     },
-    onUpdateGroupList(event) {
-      this.$store.commit('updateGroupList', event.data)
-    },
+    // onUpdateGroupList(event) {
+    // this.$store.commit('updateGroupList', event.data)
+    // },
     onReceiveGroupSystemNotice(event) {
       const isKickedout = event.data.type === 4
       const isCurrentConversation =

 import Vue from 'vue'
-import {Button, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, Dialog, Dropdown, DropdownItem, DropdownMenu, Input, Loading, MessageBox, Row} from 'element-ui'
+import {Button, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, Dialog, Dropdown, DropdownItem, DropdownMenu, Image, InfiniteScroll, Input, Loading, MessageBox, Row} from 'element-ui'
 import Avatar from './components/avatar.vue'
 import Index from './index.vue'
 import store from './store/index'
@@ -39,6 +39,8 @@ Vue.use(Checkbox)
 Vue.use(CheckboxGroup)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
+Vue.use(InfiniteScroll)
+Vue.use(Image)
 Vue.component('avatar', Avatar)
 new Vue({
     render: h => h(Index)

@@ -12,50 +12,52 @@ import {Message} from 'element-ui'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    current: Date.now(), // 当前时间
-    intervalID: 0,
-    message: undefined
-  },
-  getters: {
-    hidden(state) {
-      // eslint-disable-next-line no-unused-vars
-      const temp = state.current 
-      if (typeof document.hasFocus !== 'function') {
-        return document.hidden
-      }
-      return !document.hasFocus()
-    }
-  },
-  mutations: {
-    startComputeCurrent(state) {
-      state.intervalID = setInterval(() => {
-        state.current = Date.now()
-      }, 500)
+    state: {
+        current: Date.now(), // 当前时间
+        intervalID: 0,
+        message: undefined,
+        activeMenu: '',
+    },
+    getters: {
+        hidden(state) {
+            // eslint-disable-next-line no-unused-vars
+            const temp = state.current
+            if (typeof document.hasFocus !== 'function') {
+                return document.hidden
+            }
+            return !document.hasFocus()
+        }
     },
-    stopComputeCurrent(state) {
-      clearInterval(state.intervalID)
-      state.intervalID = 0
+    mutations: {
+        setActiveMenu: (state, active) => state.activeMenu = active,
+        startComputeCurrent(state) {
+            state.intervalID = setInterval(() => {
+                state.current = Date.now()
+            }, 500)
+        },
+        stopComputeCurrent(state) {
+            clearInterval(state.intervalID)
+            state.intervalID = 0
+        },
+        showMessage(state, options) {
+            if (state.message) {
+                state.message.close()
+            }
+            state.message = Message({
+                message: options.message,
+                type: options.type || 'success',
+                duration: options.duration || 2000,
+                offset: 40
+            })
+        }
     },
-    showMessage(state, options) {
-      if (state.message) {
-        state.message.close()
-      }
-      state.message = Message({
-        message: options.message,
-        type: options.type || 'success',
-        duration: options.duration || 2000,
-        offset: 40
-      })
+    modules: {
+        conversation,
+        group,
+        friend,
+        blacklist,
+        user,
+        video,
+        groupLive,
     }
-  },
-  modules: {
-    conversation,
-    group,
-    friend,
-    blacklist,
-    user,
-    video,
-    groupLive,
-  }
 })

 const friendModules = {
     state: {
         friendList: [],
-        createGroupModelVisible: false
+        adminList: [],
+        schemeList: [],
+        userList: [],
+        createGroupModelVisible: false,
     },
+    getters: {},
     mutations: {
-        upadteFriendList(state, friendList) {
-            state.friendList = friendList
+        updateFriendList(state, friendList) {
+            // state.friendList = friendList
+            state.userList = friendList.user
+            state.adminList = friendList.admin
+            state.schemeList = friendList.scheme
         },
         reset(state) {
-            Object.assign(state, {
-                friendList: [],
-                createGroupModelVisible: false
-            })
+            Object.assign(state, {friendList: [], createGroupModelVisible: false})
         }
     }
 }

@@ -24,4 +24,16 @@ export default class Helper {
             return Promise.resolve({id: esm_id, sign: window.genTestUserSig(esm_id).userSig})
         })
     }
+
+    static contactList() {
+        return request.get('im/contacts')
+    }
+
+    static groupList(params = {}) {
+        return request.get('im/groups', {params})
+    }
+
+    static joinGroup(id) {
+        return request.put(`im/groups/${id}`)
+    }
 }

-@charset "utf-8";
-html {
-    font-family: PingFangSC-Light, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
-    font-size: 14px
-}
-
-body, dd, dl, h1, h2, h3, ol, p, ul {
-    margin: 0
-}
-
-ol, ul {
-    padding: 0
-}
-
-body {
-    -webkit-user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    outline: 0
-}
-
-h1, h2, h3 {
-    font-size: 100%;
-    font-weight: 400
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0
-}
-
-img {
-    border: 0
-}
-
-li {
-    list-style-type: none
-}
-
-button, input, option, select, textarea {
-    font: inherit;
-    outline: 0;
-    -webkit-appearance: none;
-    border: 0
-}
-
-button {
-    padding: 0;
-    margin: 0;
-    border: 0
-}
-
-a {
-    -webkit-touch-callout: none;
-    text-decoration: none
-}
-
-em, i {
-    font-style: normal
-}
-
-.video-page {
-    position: fixed;
-    top: 0;
-    width: 100%
-}
-
-.video-play video {
-    width: 100%;
-    height: 100%;
-    background-color: #fff
-}
-
-.video-pane {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 1000
-}
-
-.video-pane .video-pane-head {
-    height: 20%;
-    position: relative;
-    width: 100%
-}
-
-.video-pane .video-pane-body {
-    height: 80%;
-    position: fixed;
-    z-index: 1000;
-    width: 100%;
-    bottom: 0
-}
-
-.video-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: url(../img/drop_out.png) no-repeat;
-    background-size: 14px 14px;
-    width: 14px;
-    height: 14px;
-    margin: 15px
-}
-
-.video-close:focus, .video-close:hover {
-    background-image: url(../img/drop_out_hover.png)
-}
-
-.user-info-num {
-    font-size: 13px;
-    color: #fff
-}
-
-.video-pane-info {
-    display: inline-block;
-    background: url(../img/back.png);
-    border-radius: 51px;
-    height: 51px;
-    margin: 15px
-}
-
-.video-info {
-    z-index: 2;
-    position: relative;
-    padding: 3px
-}
-
-.user-img {
-    display: inline-block
-}
-
-.user-info-text {
-    display: inline-block;
-    padding-left: 10px;
-    padding-right: 20px;
-    vertical-align: top;
-    padding-top: 5px;
-    color: #fff;
-    max-width: 200px
-}
-
-.user-info-name {
-    line-height: 16px
-}
-
-.user-icon-fans {
-    background: url(../img/visitor_white.png) no-repeat
-}
-
-.user-icon-like {
-    background: url(../img/like_white.png) no-repeat;
-    margin-left: 10px
-}
-
-.user-icon-fans, .user-icon-like {
-    background-size: 11px 10px;
-    width: 11px;
-    height: 10px;
-    display: inline-block;
-    margin-right: 2px
-}
-
-.video-discuss {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0
-}
-
-.video-sms-list {
-    color: #fff;
-    margin: 0 15px
-}
-
-.video-sms-list li {
-    margin-bottom: 5px
-}
-
-.video-sms-list li:nth-child(1) {
-    opacity: .4
-}
-
-.video-sms-list li:nth-child(2) {
-    opacity: .6
-}
-
-.video-sms-list li:nth-child(3) {
-    opacity: .8
-}
-
-.video-sms-pane {
-    display: inline-block
-}
-
-.video-sms-text {
-    padding: 2px 10px;
-    font-size: 14px;
-    background-color: #fff;
-    border-radius: 10px;
-    text-align: left;
-    max-width: 250px;
-    line-height: 18px;
-    color: #000;
-    word-wrap: break-word
-}
-
-.video-sms-text span {
-    padding-right: 10px;
-    vertical-align: top;
-    color: #000
-}
-
-.video-sms-text span.user-name-green {
-    color: #1fbcb6
-}
-
-.video-sms-text span.user-name-red {
-    color: #f12b5b
-}
-
-.video-sms-text span.user-name-blue {
-    color: #2b84f1
-}
-
-.video-sms-text span.user-name-org {
-    color: #ff7906
-}
-
-.video-discuss-tool {
-    margin: 25px 15px 15px
-}
-
-.video-discuss-sms {
-    background: url(../img/comment.png) no-repeat;
-    background-size: 35px 35px;
-    display: inline-block;
-    width: 35px;
-    height: 35px
-}
-
-.video-discuss-sms:focus, .video-discuss-sms:hover {
-    background-image: url(../img/comment_hover.png)
-}
-
-.video-discuss-like {
-    background: url(../img/like.png) no-repeat;
-    background-size: 35px 35px;
-    display: inline-block;
-    width: 35px;
-    height: 35px;
-    position: absolute;
-    right: 15px
-}
-
-.video-discuss-like:focus, .video-discuss-like:hover {
-    background-image: url(../img/like_hover.png)
-}
-
-.video-discuss-form {
-    height: 30px;
-    background: url(../img/form-back.png);
-    padding: 8px 60px 10px 8px;
-    position: relative
-}
-
-.video-discuss-input {
-    width: 85%;
-    height: 30px;
-    vertical-align: top;
-    padding: 0 13% 0 2%;
-    border-radius: 2px
-}
-
-.video-discuss-button {
-    background-color: #dc4b53;
-    height: 30px;
-    color: #fff;
-    width: 45px;
-    position: absolute;
-    right: 10px;
-    font-size: 14px;
-    top: 8px;
-    border-radius: 2px
-}
-
-.video-discuss-face {
-    background: url(../img/face.png) no-repeat;
-    background-size: 20px 20px;
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    right: 65px;
-    top: 12px;
-    position: absolute
-}
-
-.video-discuss-face:focus, .video-discuss-face:hover {
-    background-image: url(../img/face_hover.png)
-}
-
-.like-icon {
-    background: url(../img/like_icon_1.png) no-repeat;
-    background-size: 19px 17px;
-    width: 19px;
-    height: 17px;
-    position: absolute;
-    right: 24px;
-    margin-top: -15px;
-    opacity: 0;
-    -webkit-animation-duration: 1.5s;
-    animation-duration: 1.5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both
-}
-
-.like-icon.green {
-    background-image: url(../img/like_icon_2.png)
-}
-
-.like-icon.blue {
-    background-image: url(../img/like_icon_3.png)
-}
-
-.like-icon.red {
-    background-image: url(../img/like_icon_4.png)
-}
-
-@-webkit-keyframes zoomIn {
-    from {
-        opacity: 0;
-        -webkit-transform: scale3d(.3, .3, .3);
-        transform: scale3d(.3, .3, .3);
-        margin-top: 0
-    }
-    50% {
-        opacity: 1
-    }
-    100% {
-        opacity: 0;
-        margin-top: -60px;
-        -webkit-transform: scale3d(1, 1, 1);
-        transform: scale3d(1, 1, 1)
-    }
-}
-
-@keyframes zoomIn {
-    from {
-        opacity: 0;
-        -webkit-transform: scale3d(.3, .3, .3);
-        transform: scale3d(.3, .3, .3);
-        margin-top: 0
-    }
-    50% {
-        opacity: 1
-    }
-    100% {
-        opacity: 0;
-        margin-top: -60px;
-        -webkit-transform: scale3d(1, 1, 1);
-        transform: scale3d(1, 1, 1)
-    }
-}
-
-.zoomIn {
-    -webkit-animation-name: zoomIn;
-    animation-name: zoomIn
-}
-
-.video-discuss-emotion {
-    height: 140px;
-    background-color: #fff;
-    padding: 8px;
-    position: relative
-}
-
-.video-emotion-pane {
-    width: 100%;
-    height: 100%
-}
-
-.video-emotion-pane ul {
-    margin: 12px;
-    padding: 0;
-    overflow: hidden;
-    border-top: 1px #CCC solid;
-    border-left: 1px #CCC solid;
-    list-style: none;
-    width: 333px
-}
-
-.video-emotion-pane ul li {
-    float: left;
-    border-right: 1px #CCC solid;
-    border-bottom: 1px #CCC solid;
-    height: 30px;
-    line-height: 30px;
-    width: 32px;
-    margin: 0;
-    padding: 4px 2px;
-    text-align: center
-}
-
-.video-emotion-pane ul li img {
-    width: 24px;
-    height: 24px;
-    vertical-align: middle
-}
-
-#MAXIM {
-    content: "tig201605241501026"
-}
-
-#login_dialog{
-    display: none;
-    height: 100%;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    position: absolute;
-}
-
-.login_dialog_p{display: inline-block;color: #fff;text-align: right;width: 54px;}
-
-#login_dialog_all{margin-top: 200px;margin-left: 50px;}
-
-.install_div{margin:10px;}
-.install_div input{padding: 5px;width: 60%;}
-.install_button_div{width:100%;text-align: center;}
-.install_button_div button{color: #fff;border-radius: 4px;background: red;padding: 4px 20px;}
\ No newline at end of file

-/*eslint-disable*/
-/*
- * Module:   GenerateTestUserSig
- *
- * Function: 用于生成测试用的 UserSig，UserSig 是腾讯云为其云服务设计的一种安全保护签名。
- *           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密，加密算法为 HMAC-SHA256。
- *
- * Attention: 请不要将如下代码发布到您的线上正式版本的 App 中，原因如下：
- *
- *            本文件中的代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，
- *            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零。
- *            一旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。
- *
- *            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig。
- *            由于破解服务器的成本要高于破解客户端 App，所以服务器计算的方案能够更好地保护您的加密密钥。
- *
- * Reference：https://cloud.tencent.com/document/product/647/17275#Server
- */
-function genTestUserSig(userID) {
-  /**
-   * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
-   *
-   * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
-   * 它是腾讯云用于区分客户的唯一标识。
-   */
-  var SDKAPPID = 0;
-
-  /**
-   * 签名过期时间，建议不要设置的过短
-   * <p>
-   * 时间单位：秒
-   * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
-   */
-  var EXPIRETIME = 604800;
-
-  /**
-   * 计算签名用的加密密钥，获取步骤如下：
-   *
-   * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
-   * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
-   * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
-   *
-   * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
-   * 文档：https://cloud.tencent.com/document/product/647/17275#Server
-   */
-  var SECRETKEY = '';
-
-  var generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
-  var userSig = generator.genTestUserSig(userID);
-  return {
-    sdkAppID: SDKAPPID,
-    userSig: userSig
-  };
-}

-//监听 申请加群 系统消息
-
-function onApplyJoinGroupRequestNotify(notify) {
-    webim.Log.warn("执行 加群申请 回调：" + JSON.stringify(notify));
-    var timestamp = notify.MsgTime;
-    var reportTypeCh = "[申请加群]";
-    var content = notify.Operator_Account + "申请加入你的群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, timestamp);
-}
-
-//监听 申请加群被同意 系统消息
-
-function onApplyJoinGroupAcceptNotify(notify) {
-    webim.Log.warn("执行 申请加群被同意 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[申请加群被同意]";
-    var content = notify.Operator_Account + "同意你的加群申请，附言：" + notify.RemarkInfo;
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 申请加群被拒绝 系统消息
-
-function onApplyJoinGroupRefuseNotify(notify) {
-    webim.Log.warn("执行 申请加群被拒绝 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[申请加群被拒绝]";
-    var content = notify.Operator_Account + "拒绝了你的加群申请，附言：" + notify.RemarkInfo;
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 被踢出群 系统消息
-
-function onKickedGroupNotify(notify) {
-    webim.Log.warn("执行 被踢出群  回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[被踢出群]";
-    var content = "你被管理员" + notify.Operator_Account + "踢出该群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 解散群 系统消息
-
-function onDestoryGroupNotify(notify) {
-    webim.Log.warn("执行 解散群 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[群被解散]";
-    var content = "群主" + notify.Operator_Account + "已解散该群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 创建群 系统消息
-
-function onCreateGroupNotify(notify) {
-    webim.Log.warn("执行 创建群 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[创建群]";
-    var content = "你创建了该群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 被邀请加群 系统消息
-
-function onInvitedJoinGroupNotify(notify) {
-    webim.Log.warn("执行 被邀请加群  回调: " + JSON.stringify(notify));
-    var reportTypeCh = "[被邀请加群]";
-    var content = "你被管理员" + notify.Operator_Account + "邀请加入该群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 主动退群 系统消息
-
-function onQuitGroupNotify(notify) {
-    webim.Log.warn("执行 主动退群  回调： " + JSON.stringify(notify));
-    var reportTypeCh = "[主动退群]";
-    var content = "你退出了该群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 被设置为管理员 系统消息
-
-function onSetedGroupAdminNotify(notify) {
-    webim.Log.warn("执行 被设置为管理员  回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[被设置为管理员]";
-    var content = "你被群主" + notify.Operator_Account + "设置为管理员";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 被取消管理员 系统消息
-
-function onCanceledGroupAdminNotify(notify) {
-    webim.Log.warn("执行 被取消管理员 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[被取消管理员]";
-    var content = "你被群主" + notify.Operator_Account + "取消了管理员资格";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 群被回收 系统消息
-
-function onRevokeGroupNotify(notify) {
-    webim.Log.warn("执行 群被回收 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[群被回收]";
-    var content = "该群已被回收";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-//监听 用户自定义 群系统消息
-
-function onCustomGroupNotify(notify) {
-    webim.Log.warn("执行 用户自定义系统消息 回调：" + JSON.stringify(notify));
-    var reportTypeCh = "[用户自定义系统消息]";
-    var content = notify.UserDefinedField; //群自定义消息数据
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-
-//监听 群资料变化 群提示消息
-
-function onGroupInfoChangeNotify(groupInfo) {
-    webim.Log.warn("执行 群资料变化 回调： " + JSON.stringify(groupInfo));
-    var groupId = groupInfo.GroupId;
-    var newFaceUrl = groupInfo.GroupFaceUrl; //新群组图标, 为空，则表示没有变化
-    var newName = groupInfo.GroupName; //新群名称, 为空，则表示没有变化
-    var newOwner = groupInfo.OwnerAccount; //新的群主id, 为空，则表示没有变化
-    var newNotification = groupInfo.GroupNotification; //新的群公告, 为空，则表示没有变化
-    var newIntroduction = groupInfo.GroupIntroduction; //新的群简介, 为空，则表示没有变化
-
-    if (newName) {
-        //更新群组列表的群名称
-        //To do
-        webim.Log.warn("群id=" + groupId + "的新名称为：" + newName);
-    }
-}
-
-//显示一条群组系统消息
-
-function showGroupSystemMsg(type, typeCh, group_id, group_name, msg_content, msg_time) {
-    var sysMsgStr = "收到一条群系统消息: type=" + type + ", typeCh=" + typeCh + ",群ID=" + group_id + ", 群名称=" + group_name + ", 内容=" + msg_content + ", 时间=" + webim.Tool.formatTimeStamp(msg_time);
-    webim.Log.warn(sysMsgStr);
-    alert(sysMsgStr);
-}
\ No newline at end of file

-本文主要介绍如何快速地运行云通信 WebIM Demo 工程，您只需参考如下步骤依次执行即可。
-
-## 1. 创建新的应用
-进入登录云通信 IM [控制台](https://console.cloud.tencent.com/avc) 创建一个新的应用，获得 SDKAppID，SDKAppID 是腾讯云后台用来区分不同云通信应用的唯一标识，在第4步中会用到。
-![](https://main.qcloudimg.com/raw/b9d211494b6ec8fcea765d1518b228a1.png)
-
-接下来，点击应用进入**快速上手**页面，参考页面上指引的“第一步”、“第二步”和“第三步”操作，即可快速跑通 Demo。
-
-## 2. 下载 SDK+Demo 源码
-“快速上手”页面中第一步里的几个链接地址分别为各个平台的 SDK 和 Demo 源码，点击会跳转到 Github 上，如果您当前网络访问 Github 太慢，可以在项目首页中找到镜像下载地址。
-![](https://main.qcloudimg.com/raw/d56b4e4434da42d1a3b8e3540cf6718e.png)
-
-## 3. 查看并拷贝加密密钥
-点击**查看密钥**按钮，即可看到用于计算 UserSig 的加密密钥，点击“复制密钥”按钮，可以将密钥拷贝到剪贴板中。
-![](https://main.qcloudimg.com/raw/5843542ec2e0446d326d7d44f96a5ec0.png)
-
-<h2 id="CopyKey"> 4. 粘贴密钥到Demo工程的指定文件中 </h2>
-我们在各个平台的 Demo 的源码工程中都提供了一个叫做 “GenerateTestUserSig” 的文件，它可以通过 HMAC-SHA256 算法本地计算出 UserSig，用于快速跑通 Demo。您只需要将第1步中获得的 SDKAppID 和第3步中获得的加密密钥拷贝到文件中的指定位置即可，如下所示：
-
-![](https://main.qcloudimg.com/raw/9275a5f99bf00467eac6c34f6ddd3ca5.jpg)
-
-## 5. 编译运行
-使用 Chrome 浏览器打开 Demo 根目录下的 **index.html** 即可运行 Demo。
-- 登录成功后，可以进行查找好友，建群，聊天等操作：
-![](https://main.qcloudimg.com/raw/87e6f5eae834907cab89f50d5ce49b49.png)
-
-- 搜索并添加好友。
-![](https://main.qcloudimg.com/raw/ef4c39f1ec649ad4f10cd8764ca51d1c.png)
-
-- 选择好友发消息。
-![](https://main.qcloudimg.com/raw/ff8c787aa814edefd96468de2da59f26.png)
-
-- 给好友发消息。
-![](https://main.qcloudimg.com/raw/d55732975bb5d3e8e44a283e1a26ba4b.png)
\ No newline at end of file

-.bootstrap-table .table {
-    margin-bottom: 0 !important;
-    border-bottom: 1px solid #dddddd;
-    border-collapse: collapse !important;
-    border-radius: 1px;
-}
-
-.fixed-table-container {
-    position: relative;
-    clear: both;
-    border: 1px solid #dddddd;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-}
-
-.fixed-table-header {
-    overflow: hidden;
-    border-radius: 4px 4px 0 0;
-    -webkit-border-radius: 4px 4px 0 0;
-    -moz-border-radius: 4px 4px 0 0;
-}
-
-.fixed-table-body {
-    overflow-x: auto;
-    overflow-y: auto;
-    height: 100%;
-}
-
-.fixed-table-container table {
-    width: 100%;
-}
-
-.fixed-table-container thead th {
-    height: 0;
-    padding: 0;
-    margin: 0;
-    border-left: 1px solid #dddddd;
-}
-
-.fixed-table-container thead th:first-child {
-    border-left: none;
-    border-top-left-radius: 4px;
-    -webkit-border-top-left-radius: 4px;
-    -moz-border-radius-topleft: 4px;
-}
-
-.fixed-table-container thead th .th-inner {
-    padding: 8px;
-    line-height: 24px;
-    vertical-align: top;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.fixed-table-container thead th .sortable {
-    cursor: pointer;
-}
-
-.fixed-table-container tbody td {
-    border-left: 1px solid #dddddd;
-}
-
-.fixed-table-container tbody tr:first-child td {
-    border-top: none;
-}
-
-.fixed-table-container tbody td:first-child {
-    border-left: none;
-}
-
-/* the same color with .active */
-.fixed-table-container tbody .selected td {
-    background-color: #f5f5f5;
-}
-
-.fixed-table-container .bs-checkbox {
-    text-align: center;
-}
-
-.fixed-table-container .bs-checkbox .th-inner {
-    padding: 8px 0;
-}
-
-.fixed-table-container input[type="radio"],
-.fixed-table-container input[type="checkbox"] {
-    margin: 0 auto !important;
-}
-
-.fixed-table-container .no-records-found {
-    text-align: center;
-}
-
-
-.fixed-table-pagination .pagination,
-.fixed-table-pagination .pagination-detail {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.fixed-table-pagination .pagination a {
-    padding: 6px 12px;
-    line-height: 1.428571429;
-}
-
-.fixed-table-pagination .pagination-info {
-    line-height: 34px;
-    margin-right: 5px;
-}
-
-.fixed-table-pagination .btn-group {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.fixed-table-pagination .dropup  .dropdown-menu {
-    margin-bottom: 0;
-}
-
-.fixed-table-pagination .page-list {
-    display: inline-block;
-}
-
-.fixed-table-toolbar .columns-left {
-    margin-right: 5px;
-}
-
-.fixed-table-toolbar .columns-right {
-    margin-left: 5px;
-}
-
-.fixed-table-toolbar .columns label {
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    font-weight: normal;
-    line-height: 1.428571429;
-}
-
-.fixed-table-toolbar .bars,
-.fixed-table-toolbar .search,
-.fixed-table-toolbar .columns {
-    position: relative;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    line-height: 34px;
-}
-
-.fixed-table-pagination li.disabled a {
-    pointer-events: none;
-    cursor: default;
-}
-
-.fixed-table-loading {
-    display: none;
-    position: absolute;
-    top: 42px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 99;
-    background-color: #fff;
-    text-align: center;
-}
-
-.fixed-table-body .card-view .title {
-    font-weight: bold;
-    display: inline-block;
-    min-width: 30%;
-    text-align: left !important;
-}
-
-/* support bootstrap 2 */
-.fixed-table-body thead th .th-inner {
-    box-sizing: border-box;
-}
-
-.table th, .table td {
-    vertical-align: middle;
-    box-sizing: border-box;
-}
-
-.fixed-table-toolbar .dropdown-menu {
-    text-align: left;
-    max-height: 300px;
-    overflow: auto;
-}
-
-.fixed-table-toolbar .btn-group>.btn-group {
-    display: inline-block;
-    margin-left: -1px !important;
-}
-
-.fixed-table-toolbar .btn-group>.btn-group>.btn {
-    border-radius: 0;
-}
-
-.fixed-table-toolbar .btn-group>.btn-group:first-child>.btn {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-
-.fixed-table-toolbar .btn-group>.btn-group:last-child>.btn {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-
-.bootstrap-table .table>thead>tr>th {
-    vertical-align: bottom;
-    border-bottom: 2px solid #ddd;
-}
-
-/* support bootstrap 3 */
-.bootstrap-table .table thead>tr>th {
-    padding: 0;
-    margin: 0;
-}
-
-.pull-right .dropdown-menu {
-    right: 0;
-    left: auto;
-}
-
-/* calculate scrollbar width */
-p.fixed-table-scroll-inner {
-    width: 100%;
-    height: 200px;
-}
-
-div.fixed-table-scroll-outer {
-    top: 0;
-    left: 0;
-    visibility: hidden;
-    width: 200px;
-    height: 150px;
-    overflow: hidden;
-}
\ No newline at end of file

-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/*
-    Created on : 2015-7-6, 15:55:30
-    Author     : peakerdong
-*/
-body {
-    background: #2f2f2f;
-}
-
-#login {
-    display: block;
-    margin: 150px auto;
-    text-align: center;
-}
-
-.aio {
-    display: none;
-    width: 734px;
-    border: 1px black solid;
-    padding: 0px;
-    background: white;
-    margin: 20px auto;
-    font: 10px/1.5 "微软雅黑";
-}
-
-.titlebar {
-    height: 82px;
-    background: #5c95b3;
-}
-
-.titlebar #p_my_face {
-    position: relative;
-    width: 60px;
-    height: 60px;
-    border: 1px white solid;
-    margin: 10px;
-    float: left;
-}
-
-.titlebar #t_my_name {
-    position: relative;
-    top: 10px;
-    left: 10px;
-    float: left;
-    font-size: 20px;
-    color: white;
-}
-
-.titlebar #t_my_menu {
-    width: 150px;
-    position: relative;
-    top: 5px;
-    right: 5px;
-    float: right;
-
-}
-
-.sesspart {
-    clear: both;
-    float: left;
-    width: 208px;
-    height: 535px;
-    background: #d7eaf3;
-}
-
-.accordion {
-    margin-bottom: 18px;
-}
-
-.accordion-group {
-    margin-bottom: 2px;
-    border: 1px solid #e5e5e5;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-}
-
-.accordion-heading {
-    border-bottom: 0;
-    background-color: bisque;
-}
-
-.accordion-heading .accordion-toggle {
-    display: block;
-    padding: 8px 15px;
-    font-size: medium;
-}
-
-.accordion-inner {
-    padding: 9px 15px;
-    border-top: 1px solid #e5e5e5;
-}
-.sesslist-recent {
-    height: 450px;
-    background: #f5f5f5;
-    border-width: 0px 1px 0px 0px;
-    border-color: #d5d6d7;
-    border-style: solid;
-    //overflow: auto;
-}
-
-
-.sesslist {
-    /* height: 400px; */
-    height: 450px;
-    background: #f5f5f5;
-    border-width: 0px 1px 0px 0px;
-    border-color: #d5d6d7;
-    border-style: solid;
-    overflow: auto;
-}
-
-.sesslist-group {
-    /* height: 400px; */
-    height: 450px;
-    background: #f5f5f5;
-    border-width: 0px 1px 0px 0px;
-    border-color: #d5d6d7;
-    border-style: solid;
-    overflow: auto;
-}
-
-.sessinfo {
-    clear: both;
-    height: 50px;
-    border-width: 0px 0px 1px 0px;
-    border-color: #d5d6d7;
-    border-style: solid;
-}
-
-.sessinfo-sel {
-    clear: both;
-    height: 50px;
-    border-width: 0px 0px 1px 0px;
-    border-color: #d5d6d7;
-    border-style: solid;
-    background: #d7eaf3;
-}
-
-.face {
-    float: left;
-    width: 40px;
-    height: 40px;
-    margin: 5px 5px 5px 10px;
-}
-
-.name {
-    float: left;
-    height: 20px;
-    text-indent: 2px;
-    font-size: 12px;
-    color: #1f1f1f;
-    margin: 15px 0 0 0;
-}
-
-.badge {
-    display: none;
-    float: right;
-    margin: 18px 0 0 0;
-    width: 32px;
-    height: 20px;
-    background: #f00000;
-    color: white;
-    text-align: center;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-}
-
-.badge span {
-    position: relative;
-    top: 1px;
-    font-size: 10px;
-}
-
-.chatpart {
-    float: right;
-    width: 526px;
-    border: 0px red solid;
-    background: #d7eaf3;
-    margin-top: -535px;
-}
-
-.msgflow {
-    width: 525px;
-    height: 380px;
-    border: 1px rgb(181, 178, 178) solid;
-    padding: 20px 6px 0 6px;
-    background: #f5f5f5;
-    overflow: auto;
-}
-.msgflow .onemsg{position:relative;}
-.msgflow .onemsg .msghead {
-    color: green;
-    line-height: 12px;
-    font-size: 12px;
-}
-
-.msgflow .onemsg .msgbody {
-    margin: 0 0 0 18px;
-    line-height: 13px;
-    font-size: 14px;
-}
-
-.msgflow .msgbody img {
-    max-width: 500px;
-}
-
-.editbar {
-    width: 526px;
-    height: 25px;
-}
-
-.chat02_title_btn {
-    background: url('../img/icon.png') no-repeat 0 0;
-    cursor: pointer;
-    float: left;
-    display: block;
-    width: 15px;
-    height: 15px;
-    margin: 5px 6px;
-}
-
-.ctb01 {
-    background-position: 0 -90px;
-    margin-left: 18px;
-    _margin-left: 8px;
-}
-
-.ctb03 {
-    background-position: 0 -152px;
-}
-
-.ctb02 {
-    background-position: 0 -457px;
-}
-
-.ctb05 {
-    background-position: 0 -217px;
-}
-
-.ctb04 {
-    background-position: 0 -543px;
-}
-
-.wl_faces_box {
-    background: url('../img/wlf_bg.png') repeat 0 0;
-    position: relative;
-    /*position: absolute;*/
-    width: 428px;
-    height: 225px;
-    bottom: 220px;
-    left: -50px;
-    display: none;
-}
-
-.wl_faces_content {
-    background: #fff;
-    border: 1px #ccc solid;
-    width: 417px;
-    height: 216px;
-    margin: 3px 4px;
-}
-
-.wl_faces_content .title {
-    background: url('../img/wlf_title_bg.jpg') repeat-x 0 0;
-    height: 40px;
-    position: relative;
-}
-
-.wl_faces_content .title ul {
-
-}
-
-.wl_faces_content .title ul li {
-    position: absolute;
-    display: block;
-}
-
-.wl_faces_content .title ul li.title_name {
-    background: url('../img/wlf_title_btn.jpg') no-repeat 0 0;
-    width: 82px;
-    height: 30px;
-    bottom: 0;
-    _bottom: -2px;
-    left: 15px;
-    text-align: center;
-    line-height: 32px;
-    font-weight: bold;
-    color: #333;
-}
-
-.wl_faces_content .title ul li.wl_faces_close {
-    right: 8px;
-    top: 15px;
-}
-
-.wl_faces_content .title ul li.wl_faces_close span {
-    background: url('../img/icon.png') repeat-x 0 0;
-    cursor: pointer;
-    display: block;
-    width: 15px;
-    height: 15px;
-}
-
-.wl_faces_main {
-
-}
-
-.wl_faces_main ul {
-    margin: 12px 12px;
-    padding: 0px;
-    overflow: hidden;
-    border-top: 1px #CCC solid;
-    border-left: 1px #CCC solid;
-    list-style: none;
-    width: 393px;
-}
-
-.wl_faces_main ul li {
-    float: left;
-    border-right: 1px #CCC solid;
-    border-bottom: 1px #CCC solid;
-    height: 28px;
-    width: 28px;
-    margin: 0px 0px 0px 0px;
-    padding: 4px 2px;
-    text-align: center;
-}
-
-.wl_faces_main ul li img {
-    width: 24px;
-    height: 24px;
-}
-
-.wlf_icon {
-    background: url('../img/layer_arrow.png') no-repeat 0 0;
-    position: absolute;
-    width: 22px;
-    height: 9px;
-    bottom: -4px;
-    _bottom: -11px;
-    left: 61px;
-}
-
-.msgedit {
-    width: 525px;
-    height: 100px;
-    border: 1px rgb(181, 178, 178) solid;
-    background: #f5f5f5;
-    padding: 6px 6px;
-    line-height: 1.5;
-}
-
-.sendbar {
-    width: 526px;
-    height: 30px;
-}
-
-.sendbtn {
-    float: right;
-    width: 80px;
-    margin-right: 10px;
-    font: 10px/1.5 "微软雅黑";
-}
-
-.closebtn {
-    float: right;
-    width: 80px;
-    margin-right: 10px;
-    font: 10px/1.5 "微软雅黑";
-}
-
-.bottom {
-    clear: both;
-    height: 3px;
-    background: #d7eaf3;
-}
-
-#demo_type_desc {
-    display : none;
-    color: red;
-}
-
-#myself_type_desc {
-    /* display: none; */
-    color: red;
-}
-
-#qcloudLink {
-    color: blue;
-}
-
-#sdkAppIdDiv {
-    /* display: none; */
-}
-
-#accountTypeDiv {
-    /* display: none; */
-}
-
-.pic_thumb {
-    width: 200px;
-    height: 200px;
-}
-
-
-
-.spinner {
-    width: 60px;
-    text-align: center;
-    position: absolute;
-    right: 10px;
-    top: 32px;
-    text-align: right;
-}
-
-.spinner > div {
-  width: 6px;
-  height: 6px;
-  background-color: #333;
-
-  border-radius: 100%;
-  display: inline-block;
-  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-}
-
-.spinner .bounce1 {
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-
-.spinner .bounce2 {
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
-}
-
-@-webkit-keyframes sk-bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0) }
-  40% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes sk-bouncedelay {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  } 40% {
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
-  }
-}
-
-.headurlClass{
-    height: 30px;
-    width: 30px;
-    border-radius: 50%;
-}
-
-.delChat{
-    color: red;
-    width: 50px;
-    padding: 16px 0;
-    float: right;
-    margin-right: 5px;
-}
\ No newline at end of file

-
-本文主要介绍如何快速地将腾讯云 IM SDK 集成到您的 Web 项目中，只要按照如下步骤进行配置，就可以完成 SDK 的集成工作。
-
-
-## 准备工作
-在集成 Web SDK 前，请确保您已完成以下步骤，请参见 [一分钟跑通 Demo](https://cloud.tencent.com/document/product/269/36838)。
-- 创建了腾讯云即时通信 IM 应用，并获取到 SDKAppID。
-- 获取密钥信息。
-
-## 下载组件源码
-您可以直接从 [Github](https://github.com/tencentyun/TIMSDK) 上下载 IM SDK H5 开发包。
-SDK 存放路径为 TIMSDK/TIMSDK/H5/sdk/，相关文件清单如下：
-
-| 目录| 说明 |
-|:-------:|---------|
-| json2.js | 提供了 JSON 的序列化和反序列化方法，可以将一个 JSON 对象转换成 JSON 字符串，也可以将一个 JSON 字符串转换成一个 JSON 对象，如果要需要在原生不支持 JSON 数据格式处理的浏览器使用 WEBIM SDK，则需要引入该文件 |
-| spark-md5 | 用于获取文件 MD5，在上传图片时需要先获取文件的 MD5 |
-| webim.js | WEBIM SDK 库，提供了聊天，群组管理，资料管理，关系链（好友，黑名单）管理功能 |
-
-## 集成 SDK
-在需要实现 WEB IM 的页面引入 SDK 相关文件：
-```html
-<script type="text/javascript" src="./sdk/json2.js"></script>
-<!--用于获取文件MD5，上传图片需要先获取文件的 MD5-->
-<script type="text/javascript" src="./sdk/spark-md5.js"></script>
-<script type="text/javascript" src="./sdk/webim.js"></script>
-```
-
-## SDK 函数调用顺序
-
-| 步骤 | 对应函数 | 说明 |
-|---------|---------|---------|
-| SDK 登录 | webim.login(loginInfo, listeners,opts,cbOk,cbErr);| 登录 SDK，需要传入当前用户信息，新消息通知回调函数等，注意，为了版本向下兼容，仍保留了老版本的初始化 init 接口，它和 login 是一样的，开发者调用其中一个即可。|
-| 监听新消息|Demo 中使用的监听函数是 onMsgNotify（监听新消息）、groupSystemNotifys（监听群系统消息））|业务自定义监听函数，包括好友消息，群普通消息，群提示消息和群系统消息，登录时传给 SDK。 |
-| 上报已读消息|webim.setAutoRead(selSess, isOn, isResetAll);|设置聊天会话自动已读标识。|
-| 发消息 |webim.sendMsg(options,cbOk, cbErr); |发送消息（私聊和群聊）。 |
-| 获取消息 |webim.getC2CHistoryMsgs (options,cbOk, cbErr);|获取好友历史消息。 |
-| 获取消息 |webim.syncGroupMsgs(options,cbOk, cbErr);|获取群历史消息。 |
-| 资料管理 |webim.getProfilePortrait(options,cbOk, cbErr);|查询个人资料。 |
-| 资料管理 |webim.setProfilePortrait(options,cbOk, cbErr);|设置个人资料。 |
-| 好友管理|webim.applyAddFriend(options,cbOk, cbErr);|申请添加好友。|
-| 好友管理|webim.getAllFriend(options,cbOk, cbErr);等|获取我的好友等。|
-| 群组管理|webim.createGroup(options,cbOk, cbErr);|创建群。|
-| 群组管理|webim.applyJoinGroup(options,cbOk,cbErr);等|申请加群等。|
-| SDK 登出|webim.logout(options,cbOk, cbErr); |退出，用于切换帐号登录。 |
-
-## 支持的平台
-- IM SDK 支持 IE 7+ ( Windows XP / Vista 除外)，Chrome 7+，FireFox 3.6+，Opera 12+ 和 Safari 6+。
-- Demo 支持 IE 8+ ( Windows XP / Vista 除外)，Chrome 7+，FireFox 3.6+，Opera 12+ 和 Safari 6+。

-本文主要介绍如何快速地将腾讯云 IM SDK 集成到您的小程序项目中，只要按照如下步骤进行配置，就可以完成 SDK 的集成工作。
->! 当前小程序版本 Demo 仅提供直播聊天室场景。
-
-## 准备工作
-在集成小程序 SDK 前，请确保您已完成以下步骤，请参见 [一分钟跑通 Demo](https://cloud.tencent.com/document/product/269/36838)。
-- 创建了腾讯云即时通信 IM 应用，并获取到 SDKAppID。
-- 获取私钥文件。
-- 小程序服务器域名配置。
-
-## 开发环境要求
-- 最新版微信 Web 开发者工具。
-- 小程序基础库最低版本要求：1.7.0。
-- 微信 App iOS 最低版本要求：6.5.21。
-- 微信 App Android 最低版本要求：6.5.19。
-
-## 下载组件源码
-您可以直接从 [Github](https://github.com/tencentyun/TIMSDK) 上下载 IM SDK WXMini 开发包。
-SDK 路径为 TIMSDK/WXMini/utils/webim_wx.js
-![](https://main.qcloudimg.com/raw/418f52960facd081c932cd34e77ce0a6.png)
-
-## 集成组件
-将 webim_wx.js 拷贝到您的小程序项目里合适的目录下（例如 components 文件夹）。
-详细的调用过程可参考小程序 Demo 源码。
-
-## 常见问题
-
-### 如果需要上线或者部署正式环境怎么办？
-请将以下域名在 【微信公众平台】>【开发】>【开发设置】>【服务器域名】中进行配置，添加到 **request 合法域名**中：
-
-| 域名 | 说明 |  是否必须 |
-|:-------:|---------|----|
-|`https://webim.tim.qq.com` | Web IM 业务域名 | 必须|
-|`https://sxb.qcloud.com` | 测试 Demo 域名 | 非必须，使用测试 Demo 时配置|

-## 获取当前会话未读消息数
-
-会话的未读记数存储在 `sessMap` 对象中，其结构描述 如下：
-```javascript
-{
-  // 私聊会话，会话 ID skey 为'C2C[toAccount]'，其中'[toAccount]'表示对方的帐号
-  // 例如您正在和 identifier 为 'zhangsan' 的帐号聊天，而 [toAccout]取值为'zhangsan'。
-  // 而'C2C[toAccount]'取值为'C2Czhangsan'
-  'C2C[toAccount]': {
-     	// ...省略
-      id: '[toAccount]',
-      name: '[toAccount]',
-      unread: Function,
-      //... 省略
-  },
-  
-  // 群聊会话，会话 ID skey 为'GROUP[groupId]'，其中'[groupId]'表示群组 ID
-  // 例如您在群组 ID 为 'developergroup' 的群中聊天，此时[groupId]取值为'developergroup'。
-  // 而'GROUP[groupId]'取值为'GROPdevelopergroup'
-  'GROUP[groupId]': {
-    	// ...省略
-      id: '[groupId]',
-      name: '[groupId]',
-      unread: Function,
-      //... 省略
-  }
-}
-```
-
-因此，获取某个会话的未读消息记数需要以下步骤：
-1. 取得会话 ID : skey，skey 的组装规则：私聊 "C2C[toAccount]" ； 群组 "GROUP[groupId]"。
-2. 取得`sessMap`对象，可以通过`webim.MsgStore.sessMap()`方法来取得`sessMap`对象。
-3. 用调用`sessMap[skey].unread()`便可取得这个会话的未数消息计数。
-
-### 私聊场景示例
-
-以与 identifier 为'zhangsan'的帐号私聊为例，示例如下:
-
-```javascript
-var skey= 'C2Czhangsan';	// 拼装 skey
-var sessMap = webim.MsgStore.sessMap();	// 获取 sessMap
-sessMap[skey].unread();	// 获取未读消息记数
-```
-
-### 群聊场景示例
-
-以群组 ID 为"developergroup"为例，示例如下：
-
-```javascript
-var skey= 'GROUPdevelopergroup';	// 拼装 skey
-var sessMap= webim.MsgStore.sessMap();	// 获取 sessMap
-sessMap[skey].unread();	// 获取未读消息记数
-```
-
-## 设置会话自动已读标记 
-
-当用户阅读某个会话的数据后，需要进行会话消息的已读上报，IM SDK 根据会话中最后一条阅读的消息，设置会话中之前所有消息为已读。 函数原型如下：
-
-```javascript
-/**
- * 设置会设置会话自动已读标记话自动已读上报标志
- * @param {Object} selSess - 会话对象，必须为 webim.Session 的实例。
- * @param {boolean} isOn - 是否上报当前会话已读消息，同时将 selSess 的自动已读消息标志改为 isOn
- * @param {boolean} isResetAll - 是否重置所有会话的自动已读标志
- */
-setAutoRead: function(selSess, isOn, isResetAll) {}
-```
-
-`setAutoRead()`方法需要会话（Webim.Session）的实例为参数，所以应先获取会话实例，再把会话传递给`setAutoRead()`，步骤如下：
-1. 获取会话实例。
-2. 调用`setAutoRead()`。
-
-### 私聊场景示例：
-
-以与 identifier为'zhangsan'的帐号私聊为例，示例如下: 
-
-```javascript
-var skey= 'C2Czhangsan';	// 拼装 skey
-var sessMap = webim.MsgStore.sessMap();	// 获取 sessMap
-var selSess= sessMap[skey];	// 获取 Session 的实例
-webim.setAutoRead(selSess, true, true);
-```
-
-
-
-### 群组场景示例:
-
-以群组 ID 为"developergroup"为例，示例如下：
-
-```javascript
-var skey= 'GRPUPdevelopergroup';	// 拼装 skey
-var sessMap = webim.MsgStore.sessMap();	// 获取 sessMap
-var selSess= sessMap[skey];	// 获取 Session 的实例
-webim.setAutoRead(selSess, true, true);
-```

-目前是通过定义好友系统消息监听事件来处理好友系统消息的。**示例：**
-
-```javascript
-//监听好友系统通知函数对象，方法都定义在 receive_friend_system_msg.js 文件中
-var onFriendSystemNotifys = {
-    "1": onFriendAddNotify, //好友表增加
-    "2": onFriendDeleteNotify, //好友表删除
-    "3": onPendencyAddNotify, //未决增加
-    "4": onPendencyDeleteNotify, //未决删除
-    "5": onBlackListAddNotify, //黑名单增加
-    "6": onBlackListDeleteNotify//黑名单删除
-};
-```
-
-## 好友表添加
-
-**触发时机：**当用户添加了新的好友时，会收到好友表添加通知。 
-
-**示例：** 
-
-```javascript
-//监听 好友表添加 系统通知
-/*notify对数示例：
- {
-    'Type':1,//通知类型
-    'Accounts':['jim','bob']//用户 ID 列表
- }
-*/
-function onFriendAddNotify(notify) {
-    webim.Log.info("执行 好友表添加 回调："+JSON.stringify(notify));
-    //好友表发生变化，需要重新加载好友列表或者单独添加 notify.Accounts 好友帐号
-    getAllFriend(getAllFriendsCallbackOK);
-    var typeCh = "[好友表添加]";
-    var content = "新增以下好友："+notify.Accounts;
-    addFriendSystemMsg(notify.Type, typeCh, content);
-}
-```
-
-## 好友表删除
-
-**触发时机：**当用户的好友发生减少时，会收到好友表删除通知。 
-
-**示例：** 
-
-```javascript
-//监听 好友表删除 系统通知
-/*notify对数示例：
- {
-    'Type':2,//通知类型
-    'Accounts':['jim','bob']//用户 ID 列表
- }
-*/
-function onFriendDeleteNotify(notify) {
-    webim.Log.info("执行 好友表删除 回调："+JSON.stringify(notify));
-    //好友表发生变化，需要重新加载好友列表或者单独删除notify.Accounts好友帐号
-    getAllFriend(getAllFriendsCallbackOK);
-    var typeCh = "[好友表删除]";
-    var content = "减少以下好友："+notify.Accounts;
-    addFriendSystemMsg(notify.Type, typeCh, content);
-}
-```
-
-## 加好友未决添加
-
-**触发时机：**当有人向您发出好友申请时，会收到加好友通知。 
-
-**示例： **
-
-```javascript
-//监听 未决添加 系统通知
-/*notify对象示例：
-{
-    "Type":3,//通知类型
-    "PendencyList":[
-        {
-            "PendencyAdd_Account": "peaker1",//对方帐号
-            "ProfileImNic": "匹克1",//对方昵称
-            "AddSource": "AddSource_Type_Unknow",//来源
-            "AddWording": "您好"//申请附言
-        },
-        {
-            "PendencyAdd_Account": "peaker2",//对方帐号
-            "ProfileImNic": "匹克2",//对方昵称
-            "AddSource": "AddSource_Type_Unknow",//来源
-            "AddWording": "您好"//申请附言
-        }
-    ]
-}
-*/
-function onPendencyAddNotify(notify) {
-    webim.Log.info("执行 未决添加 回调："+JSON.stringify(notify));
-    //收到加好友申请，弹出拉取好友申请列表
-    getPendency(true);
-    var typeCh = "[未决添加]";
-    var pendencyList=notify.PendencyList;
-    var content = "收到以下加好友申请："+JSON.stringify(pendencyList);
-    addFriendSystemMsg(notify.Type, typeCh, content);
-}
-```
-
-## 加好友未决删除
-
-**触发时机：**当用户被管理员踢出群组时，用户会收到被踢出群的消息。
-
-**示例：** 
-
-```javascript
-//监听 未决删除 系统通知
-/*notify对数示例：
- {
-    'Type':4,//通知类型
-    'Accounts':['jim','bob']//用户 ID 列表
- }
-*/
-function onPendencyDeleteNotify(notify) {
-    webim.Log.info("执行 未决删除 回调："+JSON.stringify(notify));
-    var typeCh = "[未决删除]";
-    var content = "以下好友未决已被删除："+notify.Accounts;
-    addFriendSystemMsg(notify.Type, typeCh, content);
-}
-```
-
-## 好友黑名单添加
-
-**触发时机：**当新增好友黑名单时，会收到此类通知。 
-
-**示例： **
-
-```javascript
-//监听 好友黑名单添加 系统通知
-/*notify对数示例：
- {
-    'Type':5,//通知类型
-    'Accounts':['jim','bob']//用户 ID 列表
- }
-*/
-function onBlackListAddNotify(notify) {
-    webim.Log.info("执行 黑名单添加 回调："+JSON.stringify(notify));
-    var typeCh = "[黑名单添加]";
-    var content = "新增以下黑名单："+notify.Accounts;
-    addFriendSystemMsg(notify.Type, typeCh, content);
-}
-```
-
-## 好友黑名单删除
-
-**触发时机：**当删除好友黑名单时，会收到此类通知。 
-
-**示例： **
-
-```javascript
-//监听 好友黑名单删除 系统通知
-/*notify对数示例：
- {
-    'Type':6,//通知类型
-    'Accounts':['jim','bob']//用户 ID 列表
- }
-*/
-function onBlackListDeleteNotify(notify) {
-    webim.Log.info("执行 黑名单删除 回调："+JSON.stringify(notify));
-    var typeCh = "[黑名单删除]";
-    var content = "减少以下黑名单："+notify.Accounts;
-    addFriendSystemMsg(notify.Type, typeCh, content);
-}
-```

-目前是通过定义资料系统消息监听事件来处理通知。**示例：**
-
-```javascript
-//监听资料系统通知函数对象，方法都定义在 receive_profile_system_msg.js 文件中
-var onProfileSystemNotifys = {
-    "1": onProfileModifyNotify//资料修改  
-};
-```
-
-## 资料变化
-
-**触发时机：**当自己或好友的资料发生变化时，会收到此类通知。
-
-**示例：** 
-
-```javascript
-//监听 资料变化（自己或好友） 系统通知
-/*notify对数示例：
-{
-    "Type":1,//子通知类型
-    "Profile_Account": "Jim",//用户帐号
-    "ProfileList": [
-        {
-            "Tag": "Tag_Profile_IM_Nick",//昵称
-            "ValueBytes": "吉姆"
-        },
-        {
-            "Tag": "Tag_Profile_IM_Gender",//性别
-            "ValueBytes": "Gender_Type_Male"
-        },
-        {
-            "Tag": "Tag_Profile_IM_AllowType",//加好友认证方式
-            "ValueBytes": "AllowType_Type_NeedConfirm"
-        }
-    ]
-}
-*/
-function onProfileModifyNotify(notify) {
-    webim.Log.info("执行 资料修改 回调："+JSON.stringify(notify));
-    var typeCh = "[资料修改]";
-    var profile,account,nick,sex,allowType,content;
-    account=notify.Profile_Account;
-    content = "帐号："+account+", ";
-    for(var i in notify.ProfileList){
-        profile=notify.ProfileList[i];
-        switch(profile.Tag){
-            case 'Tag_Profile_IM_Nick':
-                nick=profile.ValueBytes;
-                break;
-            case 'Tag_Profile_IM_Gender':
-                sex=profile.ValueBytes;
-                break;
-            case 'Tag_Profile_IM_AllowType':
-                allowType=profile.ValueBytes;
-                break;
-            default:
-                webim.log.error('未知资料字段：'+JSON.stringify(profile));
-                break;
-        }
-    }
-    content+="最新资料：【昵称】："+nick+",【性别】："+sex+",【加好友方式】："+allowType;
-    addProfileSystemMsg(notify.Type, typeCh, content);
-    if(account!=loginInfo.identifier){//如果是好友资料更新
-        //好友资料发生变化，需要重新加载好友列表或者单独更新 account 的资料信息
-        getAllFriend(getAllFriendsCallbackOK);
-    }
-}
-```
\ No newline at end of file

-
-**登出 `logout` 函数名：**
-
-```
-webim.logout
-```
-
-**定义：**
-
-```
-webim.logout(cbOk, cbErr)
-```
-
-**参数列表：**
-
-| 名称 | 说明 | 类型 |
-|---------|---------|---------|
-|cbOk	|调用接口成功回调函数	|Function|
-|cbErr	|调用接口失败回调函数	|Function|
-
-**示例：**
-
-```javascript
-//登出
-function quitClick() {
-    if (loginInfo.identifier) {
-        //SDK 登出
-        webim.logout(
-                function (resp) {
-                    loginInfo.identifier = null;
-                    loginInfo.userSig = null;
-                    document.getElementById("webim_demo").style.display = "none";
-                    var indexUrl = window.location.href;
-                    var pos = indexUrl.indexOf('?');
-                    if (pos >= 0) {
-                        indexUrl = indexUrl.substring(0, pos);
-                    }
-                    window.location.href = indexUrl;
-                }
-        );
-    } else {
-        alert('未登录');
-    }
-}
-```

-
-**`logout` 函数名：**
-
-```
-webim.logout
-```
-
-**定义：**
-
-```
-webim.logout(cbOk, cbErr)
-```
-
-**参数列表：**
-
-| 名称 | 说明 | 类型 |
-|---------|---------|---------|
-|cbOk	|调用接口成功回调函数	|Function|
-|cbErr	|调用接口失败回调函数	|Function|
-
-**示例：**
-
-```
-//登出
-function logout() {
-    //登出
-    webim.logout(
-            function (resp) {
-                webim.Log.info('登出成功');
-                loginInfo.identifier = null;
-                loginInfo.userSig = null;
-                $("#video_sms_list").find("li").remove();
-                var indexUrl = window.location.href;
-                var pos = indexUrl.indexOf('?');
-                if (pos >= 0) {
-                    indexUrl = indexUrl.substring(0, pos);
-                }
-                window.location.href = indexUrl;
-            }
-    );
-}
-```

-## 获取群成员列表 
-
-```javascript
-/* function getGroupMemberInfo  
- *   获取群组成员列表
- * params:
- *   options	- 请求参数
- *   cbOk	- function()类型, 成功时回调函数
- *   cbErr	- function(err)类型, 失败时回调函数, err 为错误对象
- * return:
- *   (无)
- */
-getGroupMemberInfo: function(options, cbOk, cbErr) {},
-```
-
->?详细参数说明请参考 [获取群组成员详细资料 API](https://cloud.tencent.com/document/product/269/1617)。
-
-**示例： **
-
-```javascript
-//读取群组成员
-var getGroupMemberInfo = function (group_id) {
-    initGetGroupMemberTable([]);
-    var options = {
-        'GroupId': group_id,
-        'Offset': 0, //必须从 0 开始
-        'Limit': totalCount,
-        'MemberInfoFilter': [
-            'Account',
-            'Role',
-            'JoinTime',
-            'LastSendMsgTime',
-            'ShutUpUntil'
-        ]
-    };
-    webim.getGroupMemberInfo(
-            options,
-            function (resp) {
-                if (resp.MemberNum <= 0) {
-                    alert('该群组目前没有成员');
-                    return;
-                }
-                var data = [];
-                for (var i in resp.MemberList) {
-                    var account = resp.MemberList[i].Member_Account;
-                    var role = webim.Tool.groupRoleEn2Ch(resp.MemberList[i].Role);
-                    var join_time = webim.Tool.formatTimeStamp(
-                    resp.MemberList[i].JoinTime);
-                    var shut_up_until = webim.Tool.formatTimeStamp(
-                    resp.MemberList[i].ShutUpUntil);
-                    if (shut_up_until == 0) {
-                        shut_up_until = '-';
-                    }
-                    data.push({
-                        GroupId: group_id,
-                        Member_Account: account,
-                        Role: role,
-                        JoinTime: join_time,
-                        ShutUpUntil: shut_up_until
-                    });
-                }
-                $('#get_group_member_table').bootstrapTable('load', data);
-                $('#get_group_member_dialog').modal('show');
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-};
-```
-
-## 邀请好友加群 
-
-```javascript
-/* function addGroupMember  
- *   邀请好友加群
- * params:
- *   options	- 请求参数
- *   cbOk	- function()类型, 成功时回调函数
- *   cbErr	- function(err)类型, 失败时回调函数, err 为错误对象
- * return:
- *   (无)
- */
-addGroupMember: function(options, cbOk, cbErr) {},
-```
-
->?详细参数说明请参考 [增加群组成员 API](https://cloud.tencent.com/document/product/269/1621)。
-
-**示例： **
-
-```javascript
-//邀请好友加群
-var addGroupMember = function () {
-    var options = {
-        'GroupId': $('#agm_group_id').val(),
-        'MemberList': [
-            {
-                'Member_Account': $('#agm_account').val()
-            }
-
-        ]
-    };
-    webim.addGroupMember(
-            options,
-            function (resp) {
-                //在表格中删除对应的行
-                $('#get_my_friend_group_table').bootstrapTable('remove', {
-                    field: 'Info_Account',
-                    values: [$('#agm_account').val()]
-                });
-                $('#add_group_member_dialog').modal('hide');
-                alert('邀请好友加群成功');
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-};
-```
-
-## 修改群消息提示 
-
-```javascript
-/* function modifyGroupMember  
- *   修改群成员资料（角色或者群消息提类型示）
- * params:
- *   options	- 请求参数
- *   cbOk	- function()类型, 成功时回调函数
- *   cbErr	- function(err)类型, 失败时回调函数, err 为错误对象
- * return:
- *   (无)
- */
-modifyGroupMember: function(options, cbOk, cbErr) {},
-```
-
->?详细参数说明请参考 [修改群成员资料 API](https://cloud.tencent.com/document/product/269/1623)。
-
-**示例： **
-
-```javascript
-//修改群消息提示类型
-var modifyGroupMsgFlag = function () {
-    var msg_flag_en = $('input[name="mgmf_msg_flag_radio"]:checked').val();
-    var msg_flag_zh = webim.Tool.groupMsgFlagEn2Ch(msg_flag_en);
-    var options = {
-        'GroupId': $('#mgmf_group_id').val(),
-        'Member_Account': loginInfo.identifier,
-        'MsgFlag': msg_flag_en
-    };
-    webim.modifyGroupMember(
-            options,
-            function (resp) {
-                //在表格中修改对应的行              
-                $('#get_my_group_table').bootstrapTable('updateRow', {
-                    index: $('#mgmf_sel_row_index').val(),
-                    row: {
-                        MsgFlag: msg_flag_zh,
-                        MsgFlagEn: msg_flag_en
-                    }
-                });
-                $('#modify_group_msg_flag_dialog').modal('hide');
-                alert('设置群消息提示类型成功');
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-};
-```
-
-## 修改群成员角色 
-
-```javascript
-/* function modifyGroupMember  
- *   修改群成员资料（角色或者群消息提类型示）
- * params:
- *   options	- 请求参数
- *   cbOk	- function()类型, 成功时回调函数
- *   cbErr	- function(err)类型, 失败时回调函数, err 为错误对象
- * return:
- *   (无)
- */
-modifyGroupMember: function(options, cbOk, cbErr) {},
-```
-
->?详细参数说明请参考 [修改群成员资料 API](https://cloud.tencent.com/document/product/269/1623)。
-
-**示例： **
-
-```javascript
-//修改群组成员角色
-var modifyGroupMemberRole = function () {
-    var role_en = $('input[name="mgm_role_radio"]:checked').val();
-    var role_zh = webim.Tool.groupRoleEn2Ch(role_en);
-    var options = {
-        'GroupId': $('#mgm_group_id').val(),
-        'Member_Account': $('#mgm_account').val(),
-        'Role': role_en
-    };
-    webim.modifyGroupMember(
-            options,
-            function (resp) {
-                //在表格中修改对应的行              
-                $('#get_group_member_table').bootstrapTable('updateRow', {
-                    index: $('#mgm_sel_row_index').val(),
-                    row: {
-                        Role: role_zh
-                    }
-                });
-                $('#modify_group_member_dialog').modal('hide');
-                alert('修改群成员角色成功');
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-};
-```
-
-## 设置群成员禁言时间 
-
-```javascript
-/* function forbidSendMsg  
- *   设置群成员禁言时间
- * params:
- *   options	- 请求参数
- *   cbOk	- function()类型, 成功时回调函数
- *   cbErr	- function(err)类型, 失败时回调函数, err 为错误对象
- * return:
- *   (无)
- */
-forbidSendMsg: function(options, cbOk, cbErr) {},
-```
-
->?详细参数说明请参考 [批量禁言和取消禁言 API](https://cloud.tencent.com/document/product/269/1627)。
-
-**示例：**
-
-```javascript
-//设置成员禁言时间
-var forbidSendMsg = function () {
-    if (!webim.Tool.validNumber($('#fsm_shut_up_time').val())) {
-        alert('您输入的禁言时间非法,只能是数字(0-31536000)');
-        return;
-    }
-    var shut_up_time = parseInt($('#fsm_shut_up_time').val());
-    if (shut_up_time > 31536000) {
-        alert('您输入的禁言时间非法,只能是数字(0-31536000)');
-        return;
-    }
-    var shut_up_until = '-';
-    if (shut_up_time != 0) {
-        //当前时间+禁言时间=禁言截至时间
-        shut_up_until = webim.Tool.formatTimeStamp(
-        Math.round(new Date().getTime() / 1000) + shut_up_time);
-    }
-    var options = {
-        'GroupId': $('#fsm_group_id').val(),//群组id
-        'Members_Account': [$('#fsm_account').val()],//被禁言的成员帐号列表
-        'ShutUpTime': shut_up_time//禁言时间，单位：秒
-    };
-    webim.forbidSendMsg(
-            options,
-            function (resp) {
-                //在表格中修改对应的行              
-                $('#get_group_member_table').bootstrapTable('updateRow', {
-                    index: $('#fsm_sel_row_index').val(),
-                    row: {
-                        ShutUpUntil: shut_up_until
-                    }
-                });
-                $('#forbid_send_msg_dialog').modal('hide');
-                alert('设置成员禁言时间成功');
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-};
-```
-
-## 删除群成员 
-
-```javascript
-/* function deleteGroupMember  
- *   删除群成员
- * params:
- *   options	- 请求参数
- *   cbOk	- function()类型, 成功时回调函数
- *   cbErr	- function(err)类型, 失败时回调函数, err 为错误对象
- * return:
- *   (无)
- */
-deleteGroupMember: function(options, cbOk, cbErr) {},
-```
-
->?详细参数说明请参考 [删除群组成员 API](https://cloud.tencent.com/document/product/269/1622)。
-
-**示例：**
-
-```javascript
-//删除群组成员
-var deleteGroupMember = function () {
-    if (!confirm("确定移除该成员吗？")) {
-        return;
-    }
-    var options = {
-        'GroupId': $('#dgm_group_id').val(),
-        //'Silence': $('input[name="dgm_silence_radio"]:checked').val(),
-        //只有 ROOT 用户采用权限设置该字段（是否静默移除）
-        'MemberToDel_Account': [$('#dgm_account').val()]
-    };
-    webim.deleteGroupMember(
-            options,
-            function (resp) {
-                //在表格中删除对应的行
-                $('#get_group_member_table').bootstrapTable('remove', {
-                    field: 'Member_Account',
-                    values: [$('#dgm_account').val()]
-                });
-                $('#delete_group_member_dialog').modal('hide');
-                alert('移除群成员成功');
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-};
-```

-
-
-当有用户申请加群等事件发生时，管理员会收到邀请加群系统消息，相应的消息会通过群系统消息展示给用户。目前支持自动拉取群系统消息。
-
-## 监听群系统消息
-
-**定义监听群系统消息示例：**
-
-```
-//监听（多终端同步）群系统消息事件
-var groupSystemNotifys = {
-    "1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到，不支持）
-    "2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到，不支持）
-    "3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到，不支持）
-    "4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到，不支持)
-    "5": onDestoryGroupNotify, //群被解散(全员接收，支持)
-    "6": onCreateGroupNotify, //创建群(创建者接收，不支持)
-    "7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收，不支持)
-    "8": onQuitGroupNotify, //主动退群(主动退出者接收，不支持)
-    "9": onSetedGroupAdminNotify, //设置管理员(被设置者接收，不支持)
-    "10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收，不支持)
-    "11": onRevokeGroupNotify, //群已被回收(全员接收，支持)
-    "255": onCustomGroupNotify//用户自定义通知(默认全员接收，支持)
-};
-```
-
-**显示群系统消息示例：**
-
-```
-//显示一条群组系统消息
-function showGroupSystemMsg(type, typeCh, group_id, group_name, msg_content, msg_time) {
-    var sysMsgStr="收到一条群系统消息: type="+type+", typeCh="+typeCh+",群ID="+group_id+", 群名称="+group_name+", 内容="+msg_content+", 时间="+webim.Tool.formatTimeStamp(msg_time);
-    webim.Log.warn(sysMsgStr);
-    alert(sysMsgStr);
-}
-```
-
-## 监听群被解散消息
-
-**触发时机：**当群被解散时，全员会收到解散群消息。支持全员接收消息。
-
-**示例：**
-
-```
-//监听 解散群 系统消息
-function onDestoryGroupNotify(notify) {
-    webim.Log.warn("执行 解散群 回调："+JSON.stringify(notify));
-    var reportTypeCh = "[群被解散]";
-    var content = "群主" + notify.Operator_Account + "已解散该群";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-```
-
-
-## 监听群被回收消息
-
-**触发时机：**当有用户申请加群时，群管理员会收到申请加群消息，管理员决定是否同意对方加群。支持全员接收消息。
-
-**示例：**
-
-```
-//监听 群被回收 系统消息
-function onRevokeGroupNotify(notify) {
-    webim.Log.warn("执行 群被回收 回调："+JSON.stringify(notify));
-    var reportTypeCh = "[群被回收]";
-    var content = "该群已被回收";
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-```
-
-## 监听自定义群通知消息
-
-**触发时机：**当 App 管理员通过控制台发出自定义的系统消息时，全员可收到该消息。支持全员接收消息。
-
-**示例：**
-
-```
-//监听用户自定义群系统消息
-function onCustomGroupNotify(notify) {
-    webim.Log.warn("执行 用户自定义系统消息 回调："+JSON.stringify(notify));
-    var reportTypeCh = "[用户自定义系统消息]";
-    var content = notify.UserDefinedField;//群自定义消息数据
-    showGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId, notify.GroupName, content, notify.MsgTime);
-}
-```

-
-## 进群
-
-**`applyJoinBigGroup` 函数名：**
-
-```
-webim.applyJoinBigGroup
-```
-
-**定义：**
-
-```
-webim.applyJoinBigGroup(options,cbOk, cbErr)
-```
-
-**参数列表：**
-
-| 名称 | 说明 | 类型 |
-|---------|---------|---------|
-|options|	进群信息对象|	Object|
-|cbOk	|调用接口成功回调函数	|Function|
-|cbErr	|调用接口失败回调函数	|Function|
-
-**其中 `options` 对象属性定义如下：**
-
-| 名称 | 说明 | 类型 |
-|---------|---------|---------|
-|GroupId	|要加入的群 ID	|String|
-
-**示例：**
-
-```
-//加入直播大群
-function applyJoinBigGroup(groupId) {
-    var options = {
-        'GroupId': groupId//群 ID
-    };
-    webim.applyJoinBigGroup(
-            options,
-            function (resp) {
-                //JoinedSuccess:加入成功; WaitAdminApproval:等待管理员审批
-                if (resp.JoinedStatus && resp.JoinedStatus == 'JoinedSuccess') {
-                    webim.Log.info('加入房间成功');
-                } else {
-                    alert('加入房间失败');
-                }
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-}
-```
-
-## 退群
-
-**`quitBigGroup` 函数名：**
-
-```
-webim.quitBigGroup
-```
-
-**定义：**
-
-```
-webim.quitBigGroup(options,cbOk, cbErr)
-```
-
-**参数列表：**
-
-| 名称 | 说明 | 类型 |
-|---------|---------|---------|
-|options	|退群信息对象	|Object|
-|cbOk	|调用接口成功回调函数	|Function|
-|cbErr	|调用接口失败回调函数	|Function|
-
-**其中 `options` 对象属性定义如下：**
-
-| 名称 | 说明 | 类型 |
-|---------|---------|---------|
-|GroupId|要退出的群 ID	|String|
-
-**示例：**
-
-```
-//退出大群
-function quitBigGroup() {
-    var options = {
-        'GroupId': avChatRoomId//群 ID
-    };
-    webim.quitBigGroup(
-            options,
-            function (resp) {
-                webim.Log.info('退群成功');
-                $("#video_sms_list").find("li").remove(); 
-            },
-            function (err) {
-                alert(err.ErrorInfo);
-            }
-    );
-}
-```