chat/_src/components/panel/sessionItem.vue

<template>
  <div class="chat-item"
    :class="item.session_id == curSession ? 'current' : ''"
    @click="changeSessionId(item.session_id)">
    <!-- <i class="ext">2</i> -->
    <img v-if="item.cover_photo" class="user-avatar" :src="item.cover_photo" alt="">
    <div v-else class="user-avatar"
      :class="`avatar_bg${bgColorNum(item.session_id)}`"
      :data-name="item.name.slice(0,2).toUpperCase()">
    </div>
    <div class="info">
      <h3>{{item.name}}</h3>
      <!-- <p>外媒：刘鹤现身中美经贸磋商“出人意料”，陆慷：“情理之中”</p> -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'msgItem',
  props: {
    item: {
      type: Object
    }
  },
  computed: {
    ...mapState(['curSession', 'userId']),
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  methods: {
    changeSessionId (id) {
      this.$store.commit('changeSessionId', id)
    },
    bgColorNum (str) {
      if (str.match('-')) {
        let num = 0
        str.split('-').forEach(e => {
          if (e !== this.userId) {
            num = e % 9
          }
        })
        return num
      } else {
        return str % 9
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-item{
  padding: 10px 13px 10px 20px;
  height: 40px;
  cursor: pointer;
  position: relative;
  @include webkitbox(1);
  &.current{
    background: #3f424c;
    cursor: default;
  }
  .info{
    @include flex(1);
    margin-right: 20px;
    margin-left: 10px;
    h3{
      font-size: 13px;
      color: #fff;
      line-height: 20px;
    }
    p{
      font-size: 12px;
      line-height: 20px;
      color: #7c8ca5;
      @include ellipsis;
    }
  }
}
</style>