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.slice(0,2).toUpperCase()"></div>
      </div>
      <ul class="panel-ctrls">
        <li class="current">
          <i class="mee-icon-chat"></i>
        </li>
      </ul>
    </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"></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 {
    }
  },
  computed: {
    ...mapState({
      sessionList: state => state.chat.sessionList,
      userInfo: state => state.userInfo
    })
  },
  components: {
    sessionItem
  },
  created () {
    this.$store.dispatch('getSessionList')
    this.$store.dispatch('getUserInfo')
  }
}
</script>

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