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="userInfo.cover_photo" 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>
      </ul>
      <div class="panel-nav-icon" @click.stop="toggleLoginOut()">
        <ul :class="['menu',{'active':isShowLoginOut}]">
          <li class="item"  @click.stop="handleLoginOut">
            <i class="exit-icon"></i>退出
          </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" @input="searchUser($event, sessionList)" placeholder="搜索">
        </div>
        <i class="el-icon-plus" @click="$showInvite(1)"></i>
      </div>
      <!-- <div class="group-recommand">
        <i class="group-icon"></i>
        <p class="title">熱門群組推薦<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, index) in sessionList"
            :key="index"
            :item="item">
          </session-item>
        </template>
        <template v-else>
          <session-item
            v-for="(item, index) in searchList"
            :key="index"
            :item="item">
          </session-item>
        </template>
      </div>

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

<script>
import { mapState } from 'vuex'
import sessionItem from './sessionItem'
import { searchUserMixin } from '@/mixins'

export default {
  name: 'panel',
  mixins: [searchUserMixin],
  data () {
    return {
      isShowLoginOut: false
    }
  },
  computed: {
    ...mapState({
      sessionList: state => state.chat.sessionList,
      userInfo: state => state.userInfo
    })
  },
  components: {
    sessionItem
  },
  methods: {
    toggleLoginOut (flag = true) {
      if (flag) this.isShowLoginOut = !this.isShowLoginOut
      else this.isShowLoginOut = false
    },
    handleLoginOut () {
      this.$store.dispatch('doScatterLogout')
      this.$store.commit('chatAppLogin', false)
      this.$store.commit('toApp', false)
    }
  },
  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>