chat/_src/components/panel/panel.vue

<template>
  <div class="c-panel">
    <div class="c-panel-header">
      <div class="avatar-wrap" @click="$showUserInfo" v-if="userInfo">
        <img v-if="userInfo.cover_photo" :src="avatarUrl" alt="">
        <div v-else class="user-avatar"
          :class="'avatar_bg' + userInfo.user_id % 9"
          :data-name="userInfo.nick_name && userInfo.nick_name.slice(0,2).toUpperCase()"></div>
      </div>
      <ul class="panel-ctrls">
        <li class="current">
          <i class="mee-icon-chat"></i>
        </li>
        <!-- <li>
          <i class="friend-icon-chat"></i>
        </li> -->
      </ul>
      <div class="panel-setting">
        <div :class="['panel-nav-icon',{'active':isShowSetting}]" @click.stop="toggleLoginOut()"></div>
        <ul :class="['menu',{'active':isShowSetting}]">
          <li class="item"  @click.stop="handleGlobalMute">
            <i :class="['icon-msg','icon-msg'+openGlobalNotice]"></i>{{openGlobalNotice==0?$t('public.closeMsg'):$t('public.openMsg')}}
          </li>
          <li class="item"  @click.stop="handleFeedback">
            <i class="icon-feedback"></i>{{$t('public.feedback')}}
          </li>
          <li class="item"  @click.stop="changeLang">
            <i class="icon-lang"></i>{{curLang=="en"?$t('public.chinese'):$t('public.english')}}
          </li>
          <!-- <li class="item"  @click.stop="$pswSetting">
            <i class="icon-psw"></i>{{$t('public.pswSetting')}}
          </li> -->
          <li class="item"  @click.stop="handleLoginOut">
            <i class="icon-logout"></i>{{$t('public.quit')}}
          </li>
        </ul>
      </div>
    </div>

    <div class="c-panel-nav">
      <div class="panel-searbar">
        <div class="input-con">
          <i class="el-icon-search"></i>
          <input type="text" v-model="searchTxt" @input="searchUser($event, sessionList)" :placeholder="$t('public.searchHotGroup')">
        </div>
        <i class="el-icon-plus" @click="$showInvite(1)"></i>
      </div>
      <div class="panel-pwa" id="btnPwa" style="display:none">
        <span>{{$t('public.installPwa')}}</span>
        <i class="el-icon-close" @click.stop="closePwaGuide()"></i>
      </div>
      <div v-show="!isSearch" :class="['group-recommand',{'current':curSession=='0'}]" @click="$router.push('/hotGroup')">
        <i class="group-icon"></i>
        <p class="title">{{ $t('chat.hotGroupRecommend') }}<i class="el-icon-arrow-right"></i></p>
      </div>
      <div class="chat-list pub-scroll-box">
        <template v-if="!isSearch">
          <session-item
            v-for="item in sessionList"
            :key="item.group_id"
            :item="item">
          </session-item>
        </template>
        <template v-else>
          <session-item
            v-for="item in searchList"
            :key="item.group_id"
            :item="item">
          </session-item>
          <hot-group :searchTxt="searchTxt"></hot-group>
        </template>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import sessionItem from './sessionItem'
import hotGroup from '@/components/hotGroup/hotGroup'
import { searchUserMixin, addPanelSessionMixin, changeLangMixin } from '@/mixins'
import { noticeManager } from '@/util/util'
import API from '@/api'

export default {
  name: 'panel',
  mixins: [searchUserMixin, addPanelSessionMixin, changeLangMixin],
  data () {
    return {
      searchTxt: '', // 搜索关键字
      isShowSetting: false,
      openGlobalNotice: noticeManager.getGlobalNotice()
    }
  },
  computed: {
    avatarUrl () {
      if (/^http/.test(this.userInfo.cover_photo)) return `${this.userInfo.cover_photo}?imageview/0/w/180`
      else return this.userInfo.cover_photo
    },
    ...mapState({
      curSession: state => state.curSession,
      userId: state => state.userId,
      sessionList: state => state.chat.sessionList,
      userInfo: state => state.userInfo
    })
  },
  components: {
    hotGroup,
    sessionItem
  },
  methods: {
    closePwaGuide () {
      let btnPwa = document.getElementById('btnPwa')
      btnPwa.style.display = 'none'
    },
    toggleLoginOut (flag = true) {
      if (flag) this.isShowSetting = !this.isShowSetting
      else this.isShowSetting = false
    },
    async handleLoginOut () {
      this.isShowSetting = false
      // 初始vuex数据
      this.$store.commit('setUserInfo', null)
      this.$store.commit('initChatData')
      this.$store.commit('initGroupData')

      // this.$store.commit('chatAppLogin', false)
      this.$store.commit('toApp', false)
      await this.$store.dispatch('doScatterLogout')
      location.reload()
    },
    handleFeedback () {
      API.base.feedback().then(({ data }) => {
        let serverId = data.data.serverId
        let sessionId = this.userId > serverId
          ? `${serverId}-${this.userId}`
          : `${this.userId}-${serverId}`

        this.addPanelSession(serverId, sessionId)
        this.$store.commit('changeSessionId', sessionId)
        this.$router.push({ path: `/pm/${sessionId}` })
        this.isShowSetting = false
      })
    },
    handleGlobalMute () {
      let flag = this.openGlobalNotice == 0 ? 1 : 0

      noticeManager.setGlobalNotice(flag, this)
    }
  },
  async created () {
    this.$store.dispatch('getSessionList')
    await this.$store.dispatch('getUserInfo')
    if (location.hash.match('user')) {
      this.$showUserInfo()
    }
  },
  mounted () {
    document.addEventListener('click', () => {
      this.toggleLoginOut(false)
    })
  }
}
</script>

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