chat/_src/components/popup/invite/index.vue

<template>
  <transition name="msgbox-fade">
    <div class="pub-wrapper" v-if="visible">
      <div class="pub-mask"></div>
      <div class="pub-modal invite-modal">
        <div class="modal-hd">
          <!-- <div class="title">
            <i class="el-icon-close" @click="visible = false"></i>
          </div> -->
          <i class="el-icon-close" @click="visible = false"></i>
        </div>
        <div class="modal-bd clearfix">
          <div class="left">
            <div class="search-input">
              <input type="text" placeholder="搜索">
              <i class="el-icon-search"></i>
            </div>
            <div class="user-list select-list">
              <div class="user-item"
                v-for="(item, key) in checkList"
                :key="key"
                :class="{'checked': item.isChecked}"
                @click="changeState(key)">
                <img v-if="item.cover_photo" class="user-avatar" :src="item.cover_photo" alt="">
                <div v-else class="user-avatar"
                  :class="`avatar_bg${item.user_id % 9}`"
                  :data-name="item.nick_name.slice(0,2).toUpperCase()">
                </div>
                <span class="name">{{item.nick_name}}</span>
                <i v-if="item.isChecked" class="el-icon-circle-check"></i>
                <i v-else class="el-icon-circle-uncheck"></i>
              </div>
            </div>
          </div>
          <div class="right">
            <p class="tips">请勾选需要添加的联系人</p>
            <div class="group-name">
              <input v-model="groupName" type="text" placeholder="请输入群名称">
            </div>
            <div class="user-list">
              <template v-for="(item, key) in checkList">
                <div class="user-item" :key="key" v-if="item.isChecked">
                  <img v-if="item.cover_photo" class="user-avatar" :src="item.cover_photo" alt="">
                  <div v-else class="user-avatar"
                    :class="`avatar_bg${item.user_id % 9}`"
                    :data-name="item.nick_name.slice(0,2).toUpperCase()">
                  </div>
                  <span class="name">{{item.nick_name}}</span>
                  <i @click="changeState(key, false)" class="el-icon-circle-close"></i>
                </div>
              </template>
            </div>
            <div class="send-btn">
              <el-button @click="createGroup" type="primary">确认</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { Button, Message } from 'element-ui'
import Vue from 'vue'
import { mapState } from 'vuex'
import API from '@/api'

Vue.component(Button.name, Button)

export default {
  name: 'invitePopup',
  data () {
    return {
      checkList: [],
      groupName: ''
    }
  },
  computed: {
    ...mapState({
      friendList: state => state.chat.friendList
    }),
    inviteList () {
      return this.checkList.filter(v => {
        return v.isChecked
      }).map(v => v.user_id).join(',')
    }
  },
  methods: {
    changeState (ind, flag = null) {
      let item = this.checkList[ind]
      item['isChecked'] = flag || !item['isChecked']
      this.$set(this.checkList, ind, item)
    },
    async initList () {
      await this.$store.dispatch('getFriendList')
      this.checkList = this.friendList
      this.checkList.map(v => {
        v.isChecked = false
      })
    },
    createGroup () {
      if (this.groupName) {
        API.group.createGroup({
          group_title: this.groupName,
          user_id_list: this.inviteList
        }).then(({ data }) => {
          this.$showTips('创建成功')
          this.$store.commit('addSessionItem', data.data)
          this.visible = false
        })
      } else {
        Message({
          message: '请输入群名',
          type: 'warning'
        })
      }
    }
  },
  created () {
    this.initList()
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>