chat/_src/components/hotGroup/hotGroup.vue

<template>
  <div class="c-view">
    <div class="box">
      <div class="box-hd">
        <div class="title-wrap">{{$t('group.recommendGroup')}}
          <!-- <span>换一批</span> -->
        </div>
      </div>
      <div class="box-bd pub-scroll-box">
        <ul class="list-group">
          <li class="group-item" v-for="(item,index) in showHotList" :key="index">
            <div class="avatar-wrap" @click="joinGroup(item.group_id,item.is_join)">
              <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.group_id)}`"
                :data-name="item.group_title && item.group_title.slice(0,2).toUpperCase()"
              ></div>
              <i class="icon-auth" v-if="item.is_auth==1"></i>
            </div>
            <div class="info">
              <h3 @click="joinGroup(item.group_id,item.is_join)">{{item.group_title}}</h3>
              <p>
                <i class="icon-group"></i>
                {{item.member_num}}
              </p>
              <el-button type="primary" @click="joinGroup(item.group_id,item.is_join)">{{item.is_join==1? $t('group.enter') :`+ ${$t('group.join')}`}}</el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'
import { groupHotMixins } from '@/mixins/group'

Vue.component(Button.name, Button)

export default {
  name: 'hotGroup',
  mixins: [groupHotMixins]
}
</script>

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