chat/_src/pages/h5/view/chatSet.vue

<template>
  <div class="chat-set">
    <back-bar :title="$t('h5.chatInfo')"></back-bar>
    <div class="setting-top">
      <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-for="(item, index) in membersArray">
          <li class="list-item" :key="index" @click="toAboutOther(item.user_id)">
            <div class="avatar-box">
              <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 && 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="show-all-btn" v-if="showMore" @click="handleShowAll">
        {{limitHeight ? $t('group.showAll') : $t('group.hideAll')}} <i :class="`el-icon-arrow-${limitHeight ? 'down' : 'up'}`"></i>
      </div>
    </div>
    <div class="pub-setting" v-if="isAdmin || isCreator">
      <div class="setting-item">
        <div class="title">{{$t('h5.groupAvatar')}}</div>
        <p class="text">
          <input v-if="isCreator" type="file" accept="image/jpeg,image/png,image/jpg" @change="uploadImg($event)"/>
          <img v-if="group.coverPhoto" class="team-avatar" :src="group.coverPhoto" @click.stop="$showImgPreview(group.coverPhoto)">
          <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" v-if="isAdmin || isCreator" @click="editGroupName">
        <div class="title">{{$t('h5.groupName')}}</div>
        <p class="text">
          {{group.groupName}}
          <i class="el-icon-arrow-right team-arrow-icon"></i>
        </p>
      </div>
    </div>
    <div class="pub-setting">
      <div class="setting-item">
        <div class="title">{{$t('group.groupInviteLink')}}</div>
        <p class="text">
          <template v-if="!isEditLink">
            <span
              class="invite-link"
              href="javascript:"
              @click="copyLink(group.inviteUrl)"
            >{{sharePath + shareName}}</span>
            <span class="invite-editBtn" v-if="isAdmin || isCreator" @click="handleLinkFocus">
              <i class="el-icon-arrow-right team-arrow-icon"></i>
            </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">
        <div class="title">{{$t('group.groupPin')}}</div>
        <p class="text cursor" v-if="isAdmin || isCreator" @click="editGroupNotice">
          {{group.groupNotice}}
          <i class="el-icon-arrow-right team-arrow-icon"></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>
    <div class="pub-setting">
      <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="#4dd865"
            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="#4dd865"
            inactive-color="#cbcbcb"
          ></el-switch>
        </p>
      </div>
    </div>

    <div class="pub-bottom-btn" @click="leaveGroup">{{$t('group.quitGroup')}}</div>

    <cropper v-bind="cropperOption" @close="cropperClose" @cropper="cropperSubmit"></cropper>
  </div>
</template>

<script>
import backBar from '@/components/backBar'
import { groupSetMixins } from '@/mixins/group'
import cropper from '../components/cropper'
import { avatarMixin } from '../mixins/index'

export default {
  name: 'h5ChatSet',
  mixins: [groupSetMixins, avatarMixin],
  computed: {
    showMore () {
      if (this.isAdmin || this.isCreator) {
        return this.group.userCounts > 3
      } else {
        return this.group.userCounts > 6
      }
    }
  },
  components: {
    backBar,
    cropper
  },
  methods: {
    showInvite (type) {
      this.$router.push(`/invite/${type}/${this.curGroupId}`)
    },
    toAboutOther (userId) {
      this.$router.push(`/other/${userId}`)
    },
    editGroupName () {
      this.$router.push(`/editInfo/groupName/${this.curGroupId}`)
    },
    editGroupNotice () {
      this.$router.push(`/editInfo/groupNotice/${this.curGroupId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-top{
  background: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8;
}
.user-list{
  display: flex;
  flex-wrap: wrap;
  max-height: 362px;
  overflow: auto;
  margin: px2rem(21) px2rem(-39) 0 px2rem(45);
  &.height-limit{
    height: px2rem(150);
    overflow: hidden;
  }
  .list-item{
    width: px2rem(100);
    margin: 0 px2rem(39) px2rem(24) 0;
  }
  img.avatar{
    background: #ccc;
  }
  .avatar-box{
    position: relative;
  }
  .avatar{
    display: block;
    width: px2rem(100);
    height: px2rem(100);
    margin-bottom: 6px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    &:hover{
      opacity: .8;
    }
  }
  .btn{
    box-sizing: border-box;
    border: 1px solid #c0c0c0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    i{
      font-size: 22px;
      color: #5e5e5e;
    }
  }
  .name{
    @include ellipsis();
    font-size: px2rem(24);
    color: #333333;
    display: block;
    text-align: center;
  }
}
.no-avatar{
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #c0c0c0;
  text-align: center;
  line-height: 40px;
  i{
    vertical-align: middle;
    font-size: 20px;
    margin-left: 0 !important;
  }
}
.admin-icon{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-color: rgba($color: #000000, $alpha: .4);
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  color: #f5ab5c;
}
.creator-icon{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url('../../../assets/icon-creater.png') center center no-repeat;
  background-size: 12px 11px;
  background-color: rgba($color: #000000, $alpha: .6);
  width: 18px;
  height: 18px;
}

.show-all-btn{
  color: #999999;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  i{
    display: inline-block;
    margin-left: 6px;
  }
}

.pub-bottom-btn{
  margin-top: px2rem(21);
}
</style>