chat/_src/components/chatSet/index.vue

<template>
  <div class="r-view pub-scroll-box">
    <div class="setting-top">
      <div class="search-input">
        <input type="text" @input="searchUser($event, membersArray)" placeholder="搜索群成员">
        <i class="el-icon-search"></i>
      </div>
      <!-- 没搜索 -->
      <ul v-if="!isSearch" class="user-list" :class="{'height-limit': limitHeight}">
        <li class="list-item" @click="$showInvite" v-if="isAdmin">
          <div class="avatar btn"><i class="el-icon-plus"></i></div>
          <span class="name">添加</span>
        </li>
        <li class="list-item" v-if="isAdmin">
          <div class="avatar btn"><i class="el-icon-minus"></i></div>
          <span class="name">删除</span>
        </li>
        <template v-for="(item, index) in membersArray">
          <li class="list-item" :key="index" @click="$showOtherInfo(item.user_id)">
            <img class="avatar" v-if="item.cover_photo" :src="item.cover_photo" alt="">
            <div v-else class="user-avatar avatar"
            :class="'avatar_bg' + item.user_id % 9"
            :title="item.nick_name"
            :data-name="item.nick_name.slice(0,2).toUpperCase()"></div>
            <span class="name">{{item.nick_name}}</span>
          </li>
        </template>
      </ul>
      <ul v-else class="user-list">
        <template v-for="(item, index) in searchList">
          <li class="list-item" :key="index" @click="$showOtherInfo(item.user_id)">
            <img class="avatar" v-if="item.cover_photo" :src="item.cover_photo" alt="">
            <div v-else class="user-avatar avatar"
            :class="'avatar_bg' + item.user_id % 9"
            :title="item.nick_name"
            :data-name="item.nick_name.slice(0,2).toUpperCase()"></div>
            <span class="name">{{item.nick_name}}</span>
          </li>
        </template>
      </ul>
      <div class="show-all-btn" v-if="group.userCounts > 6" @click="limitHeight = !limitHeight">
        {{limitHeight ? '展开全部' : '收起'}} <i :class="`el-icon-arrow-${limitHeight ? 'down' : 'up'}`"></i>
      </div>
    </div>
    <div class="setting-item" v-if="isAdmin">
      <div class="title">群名</div>
      <input class="edit-name-input" type="text" v-model="newGroupName" v-focus v-if="isEdit" @blur="handleTitleBlur">
      <p class="text" v-else @click="handleTitleFocus">点击编辑群名<i class="el-icon-edit"></i></p>
    </div>
    <div class="setting-item" v-if="isAdmin">
      <div class="title">设置群头像</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">群公告</div>
      <p class="text cursor" @click="handleOpenNotice" v-if="isAdmin">
        点击编辑群公告
        <i class="el-icon-arrow-right"></i>
      </p>
      <template v-else>
        <p class="text notice" v-if="group.groupNotice">
          {{group.groupNotice}}
        </p>
        <p class="text notice" v-else>
          暂无公告
        </p>
      </template>
    </div>
    <div class="setting-item">
      <div class="title">群邀请链接</div>
      <p class="text">
        <template v-if="!isEditLink">
          <a class="invite-link" href="javascript:" @click="copyLink(group.inviteUrl)">{{group.inviteUrl}}</a>
          <span class="link-change" v-if="isAdmin" @click="handleLinkFocus" >更改</span>
        </template>
        <input v-else class="edit-name-input" v-model="newLink" v-focus type="text" autofocus @blur="handleLinkBlur">
      </p>
    </div>
    <div class="setting-item">
      <div class="title">消息免打扰</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">置顶聊天</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">
      <button class="delete-btn" @click="leaveGroup">退出群组</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">群公告</div>
            <i class="el-icon-close" @click="editNotice = false"></i>
          </div>
          <div class="modal-bd">
            <textarea v-focus placeholder="请输入你的群公告" v-model="newNotice"></textarea>
          </div>
          <div class="modal-fd">
            <el-button type="primary" @click="handleNotice">确认</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue'
import { Switch, Button } from 'element-ui'
import API from '@/api'
import { mapState } from 'vuex'
import { confirmPopup } from '@/util/util'
import { searchUserMixin } from '@/mixins'

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

export default {
  name: 'chatSet',
  mixins: [searchUserMixin],
  computed: {
    ...mapState({
      myId: state => state.userId,
      group: state => state.group,
      curGroupId: state => state.curSession,
      members: state => state.group.members,
      sessionInfo: state => state.group.sessionInfo
    }),
    isAdmin () {
      return this.adminList && this.adminList.some(id => id == this.myId)
    },
    membersArray () {
      // members obj => array
      var arr = []
      var i = 0
      for (let k in this.members) {
        arr[i] = this.members[k]
        i++
      }
      return arr
    }
  },
  components: {
  },
  data () {
    return {
      msgPush: false, // 消失免打扰
      msgTop: false, // 置顶聊天
      limitHeight: true, // 展开全部
      isEdit: false, // 编辑群名
      newGroupName: '', // 群名
      newLink: '', // 新连接
      newNotice: '', // 新群名
      isEditLink: false, // 编辑链接
      editNotice: false
    }
  },
  methods: {
    // 群标题
    handleTitleBlur () {
      this.isEdit = false
      if (this.newGroupName.length) {
        API.group.changeTitle({
          group_id: this.curGroupId,
          title: this.newGroupName
        }).then(({ data }) => {
          this.$store.commit('updateGroup', {
            key: 'groupName',
            data: this.newGroupName
          })
        })
      }
    },
    handleTitleFocus () {
      this.isEdit = true
      this.newGroupName = this.group.groupName
    },
    // 群链接
    handleLinkBlur () {
      this.isEditLink = false
      API.group.changeName({
        group_id: this.curGroupId,
        name: this.newLink
      }).then(() => {
        this.$store.commit('updateGroup', {
          key: 'inviteUrl',
          data: this.newLink
        })
      })
    },
    handleLinkFocus () {
      this.isEditLink = true
      this.newLink = this.group.inviteUrl
    },
    // 群公告
    handleNotice () {
      API.group.changeNotice({
        group_id: this.curGroupId,
        notice: this.newNotice
      }).then(() => {
        this.$showTips('修改成功')
        this.$store.commit('updateGroup', {
          key: 'groupNotice',
          data: this.newNotice
        })
      })
    },
    handleOpenNotice () {
      this.editNotice = true
      this.newNotice = this.group.groupNotice
    },
    copyLink (link) {
      this.$copyText(link).then((e) => {
        this.$showTips('复制成功')
      })
    },
    changePin (val) {
      if (val === '1') {
        API.session.setPin({
          session_id: this.curGroupId
        }).then(() => {
          this.$store.commit('updatePin', val)
        })
      } else {
        API.session.cancelPin({
          session_id: this.curGroupId
        }).then(() => {
          this.$store.commit('updatePin', val)
        })
      }
    },
    changeMute (val) {
      if (val === '1') {
        API.session.setMute({
          session_id: this.curGroupId
        }).then(() => {
          this.$store.commit('updateMute', val)
        })
      } else {
        API.session.cancelMute({
          session_id: this.curGroupId
        }).then(() => {
          this.$store.commit('updateMute', val)
        })
      }
    },
    // 退出群组
    leaveGroup () {
      confirmPopup('确认退出该群聊？').then(() => {
        API.group.leaveGroup({
          group_id: this.curGroupId
        }).then(() => {
          this.$showTips('已退出该群聊')
        })
      })
    }
  }
}
</script>

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