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

<template>
  <transition name="msgbox-fade">
    <div class="pub-wrapper" v-if="visible" @click.stop>
      <div class="pub-mask" @click="visible = false"></div>
      <div class="pub-modal invite-modal"
    v-loading="isLoading"
    :element-loading-text="$t('public.loading')"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
    <div class="modal-hd">
        <i class="el-icon-close" @click="hidePopup"></i>
    </div>
    <div class="modal-bd clearfix">
        <div class="left">
        <div class="search-input">
            <input type="text" @input="searchUser($event, checkList)" :placeholder="$t('invite.searchContact')">
            <i class="el-icon-search"></i>
        </div>
        <div class="user-list select-list pub-scroll-box">
            <template v-if="!isSearchGroup">
                <div
                v-for="(item, key) in checkList"
                :key="key"
                >
                <div class="user-item" :class="{'checked': item.isChecked}" @click="changeState(item.user_id)" v-show="item.isShow">
                    <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.isChoosed" class="el-icon-circle-check is-choosed"></i>
                    <div v-else-if="item.is_admin!=2">
                    <i v-if="item.isChecked" class="el-icon-circle-check"></i>
                    <i v-else class="el-icon-circle-uncheck"></i>
                    </div>
                </div>
                </div>
            </template>
            <template v-else>
                <div
                v-for="(item, key) in searchGroupList"
                :key="key"
                >
                <div class="user-item" :class="{'checked': item.isChecked}" @click="changeState(item.user_id)" v-show="item.isShow">
                    <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.isChoosed" class="el-icon-circle-check is-choosed"></i>
                    <div v-else-if="item.is_admin!=2">
                    <i v-if="item.isChecked" class="el-icon-circle-check"></i>
                    <i v-else class="el-icon-circle-uncheck"></i>
                    </div>
                </div>
                </div>
            </template>
            <div class="no-data" v-show="showNum<=0">{{$t('invite.noContact')}}</div>
        </div>
        </div>
        <div class="right">
        <p class="tips" v-if="this.inviteType==5">{{$t('invite.transferGroupOwner')}}</p>
        <p class="tips" v-else-if="this.checkedNum">{{$t('invite.seleted')}}{{checkedNum}}{{$t('invite.numberMember')}}</p>
        <p class="tips" v-else-if="this.inviteType==3">{{$t('invite.checkDeleteMemberTips')}}</p>
        <p class="tips" v-else>{{$t('invite.checkAddMemberTips')}}{{this.inviteType==4?$t('public.admin'):$t('public.contact')}}</p>

        <div class="group-name" v-if="this.inviteType==1">
            <input v-focus v-model="groupName" type="text" :placeholder="$t('invite.writeGroupName')">
        </div>
        <div class="user-list pub-scroll-box">
            <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(item.user_id, false)" class="el-icon-circle-close"></i>
            </div>
            </template>
        </div>
        <div class="send-btn">
            <el-button @click="optSubmit" type="primary" :disabled="this.inviteType!=1 && checkedNum<=0">{{$t('public.confirm')}}</el-button>
            <el-button @click="hidePopup">{{$t('public.cancel')}}</el-button>
        </div>
        </div>
    </div>
    </div>
    </div>
  </transition>
</template>

<script>
import { Button } from 'element-ui'
import Vue from 'vue'
import { groupInviteMixins } from '@/mixins/group'

Vue.component(Button.name, Button)

export default {
  name: 'invitePopup',
  mixins: [groupInviteMixins],
  methods: {
    hidePopup () {
      this.visible = false
    }
  }
}
</script>

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