chat/_src/components/chatSet/index.vue

<template>
  <div ref="chatSet" class="r-view pub-scroll-box" @click.stop>
    <div class="setting-top">
      <div class="search-input">
        <input type="text" v-model="searchTxt" :placeholder="$t('group.searchMember')" @input="searchUser($event, membersArray)">
        <i class="el-icon-search"></i>
      </div>
      <ul class="user-list pub-scroll-box" ref="scrollWrap" :class="{'height-limit': limitHeight}">
        <li class="list-item" @click="$showInvite(2)" v-if="isAdmin || isCreator">
          <div class="avatar btn"><i class="el-icon-plus"></i></div>
          <span class="name">{{$t('group.add')}}</span>
        </li>
        <li class="list-item" @click="$showInvite(3)" v-if="isAdmin || isCreator">
          <div class="avatar btn"><i class="el-icon-minus"></i></div>
          <span class="name">{{$t('group.delete')}}</span>
        </li>
        <template v-if="!isSearchGroup">
          <li class="list-item" v-for="(item, index) in membersArray" :key="index" @click="$showOtherInfo(item.user_id)" v-show="item.isShow==undefined || item.isShow">
            <div class="avatar-box">
              <img class="avatar" v-if="members[item.user_id] && members[item.user_id].cover_photo" :src="members[item.user_id] && members[item.user_id].cover_photo" alt="">
              <div v-else class="user-avatar avatar"
              :class="'avatar_bg' + item.user_id % 9"
              :title="members[item.user_id] && members[item.user_id].nick_name && members[item.user_id].nick_name.slice(0,2).toUpperCase()"
              :data-name="members[item.user_id] && members[item.user_id].nick_name && members[item.user_id].nick_name.slice(0,2).toUpperCase()">
              </div>
              <i v-if="group.creator == item.user_id" class="creator-icon"></i>
              <i v-else-if="adminList.includes(Number(item.user_id))" class="admin-icon el-icon-star-on"></i>
            </div>
            <span class="name">{{item.nick_name}}</span>
          </li>
        </template>
        <template v-else>
          <li class="list-item" v-for="(item, index) in searchGroupList" :key="index" @click="$showOtherInfo(item.user_id)" v-show="item.isShow==undefined || item.isShow">
            <div class="avatar-box">
              <img class="avatar" v-if="members[item.user_id] && members[item.user_id].cover_photo" :src="members[item.user_id] && members[item.user_id].cover_photo" alt="">
              <div v-else class="user-avatar avatar"
              :class="'avatar_bg' + item.user_id % 9"
              :title="item.nick_name && item.nick_name.slice(0,2).toUpperCase()"
              :data-name="item.nick_name && item.nick_name.slice(0,2).toUpperCase()">
              </div>
              <i v-if="group.creator == item.user_id" class="creator-icon"></i>
              <i v-else-if="adminList.includes(Number(item.user_id))" class="admin-icon el-icon-star-on"></i>
            </div>
            <span class="name">{{item.nick_name}}</span>
          </li>
        </template>
      </ul>
      <div class="no-data" v-show="isSearchGroup&&showNum<=0">{{$t('invite.noContact')}}</div>
      <div class="show-all-btn" v-if="group.userCounts > 6" @click="handleShowAll">
        {{limitHeight ? $t('group.showAll') : $t('group.hideAll')}} <i :class="`el-icon-arrow-${limitHeight ? 'down' : 'up'}`"></i>
      </div>
    </div>
    <div class="setting-item cursor" v-if="isCreator" @click="handleGroudMgr">
      <div class="title">{{$t('group.admin')}}<i class="el-icon-arrow-right team-arrow-icon"></i></div>
    </div>
    <div class="setting-item" v-if="isAdmin || isCreator">
      <div class="title">{{$t('group.groupName')}}</div>
      <input class="edit-full-input" type="text" v-model="newGroupName" v-focus v-if="isEdit" @blur="handleTitleBlur">
      <p class="text" v-else @click="handleTitleFocus">{{group.groupName}}<i class="el-icon-edit"></i></p>
    </div>
    <!-- <div class="setting-item cursor" v-if="isCreator" @click="$setGroupType">
      <div class="title">{{$t('group.groupTypeSetting')}}<i class="el-icon-arrow-right team-arrow-icon"></i></div>
    </div> -->
    <div class="setting-item ext-avatar" v-if="isAdmin || isCreator">
      <div class="title">{{$t('group.setGroupAvatar')}}</div>
      <p class="text cursor" @click="$editGroupAvatar(group.coverPhoto)">
        <img v-if="group.coverPhoto" class="team-avatar" :src="group.coverPhoto" alt="">
        <span class="no-avatar" v-else>
          <i class="el-icon-plus"></i>
        </span>
        <i class="el-icon-arrow-right team-arrow-icon"></i>
      </p>
    </div>
    <div class="setting-item">
      <div class="title">{{$t('group.groupPin')}}</div>
      <p class="text cursor" @click="handleOpenNotice" v-if="isAdmin || isCreator">{{group.groupNotice}}<i class="el-icon-edit"></i></p>
      <template v-else>
        <p class="text notice" v-if="group.groupNotice">{{group.groupNotice}}</p>
        <p class="text notice" v-else>{{$t('group.noPin')}}</p>
      </template>
    </div>
    <div class="setting-item">
      <div class="title">{{$t('group.groupInviteLink')}}</div>
      <p class="text">
        <template v-if="!isEditLink">
          <a class="invite-link" href="javascript:" @click="copyLink(group.inviteUrl)">{{sharePath + shareName}}</a>
          <span class="invite-editBtn" v-if="isAdmin || isCreator" @click="handleLinkFocus">
            <i class="el-icon-edit"></i>
          </span>
          <!-- <span class="link-change" v-if="isAdmin || isCreator" @click="handleLinkFocus" >更改</span> -->
        </template>
        <template v-else>
          <em class="edit-name-path">{{sharePath}}</em>
          <input class="edit-name-input" v-model="editShareName" v-focus type="text" autofocus @blur="handleLinkBlur">
        </template>
      </p>
    </div>
    <div class="setting-item" v-if="isAdmin || isCreator">
      <div class="title">{{$t('group.groupId')}}</div>
      <p class="text">group_id: {{group.groupId}}</p>
    </div>
    <div class="setting-item">
      <div class="title">{{$t('group.doNotDisturb')}}</div>
      <p class="text">
        <el-switch
        v-model="sessionInfo.is_mute"
        @change="changeMute"
        :active-value="1"
        :inactive-value="0"
        active-color="#2298f0"
        inactive-color="#cbcbcb">
      </el-switch>
      </p>
    </div>
    <div class="setting-item">
      <div class="title">{{$t('group.topChat')}}</div>
      <p class="text">
        <el-switch
        v-model="sessionInfo.is_pin"
        @change="changePin"
        :active-value="1"
        :inactive-value="0"
        active-color="#2298f0"
        inactive-color="#cbcbcb">
      </el-switch>
      </p>
    </div>
    <div class="setting-bottom" v-show="group.isJoin">
      <button class="delete-btn" @click="leaveGroup">{{$t('group.quitGroup')}}</button>
    </div>
    <!-- 群公告 -->
    <transition name="msgbox-fade">
      <div class="pub-wrapper" v-if="editNotice">
        <div class="pub-mask"></div>
        <div class="pub-modal notice-modal">
          <div class="modal-hd">
            <div class="title">{{$t('group.groupPin')}}</div>
            <i class="el-icon-close" @click="editNotice = false"></i>
          </div>
          <div class="modal-bd">
            <textarea v-focus :placeholder="$t('group.groupPinInput')" v-model="newNotice"></textarea>
          </div>
          <div class="modal-fd">
            <el-button type="primary" @click="handleNotice">{{$t('public.confirm')}}</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

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

Vue.component(Button.name, Button)
Vue.component(Switch.name, Switch)

export default {
  name: 'chatSet',
  mixins: [groupSetMixins],
  watch: {
    searchTxt (newVal, val) {
      if (newVal == '') {
        this.isSearch = false
      } else {
        this.isSearch = true
        this.searchUser()
      }
    }
  }
}
</script>

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