粉丝管理

组件与路由配置

目标：配置粉丝组件路由

• 配置路由映射

import Fans from '@/views/Fans.vue'
{ path: 'fans', component: Fans }

• 路由链接

<el-menu-item index="/home/fans">

组件基本布局

目标：实现粉丝组件的基本布局

<el-card>
    <div slot="header">
      粉丝管理
    </div>
    <!-- 内容区 -->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="粉丝概况" name="base">
        <!-- 粉丝概况 -->
        <div>粉丝概况</div>
      </el-tab-pane>
      <el-tab-pane label="粉丝画像" name="picture">
        <!-- 粉丝画像 -->
        <div>粉丝画像</div>
      </el-tab-pane>
      <el-tab-pane label="粉丝列表" name="list">
        <!-- 粉丝列表 -->
        <div>粉丝列表</div>
      </el-tab-pane>
    </el-tabs>
</el-card>

粉丝列表

目标：实现粉丝列表动态渲染

• 相关数据

data () {
  return {
    // 粉丝列表
    fansList: [],
    // 请求参数
    filterParams: {
      page: 1,
      per_page: 21
    },
    // 总条数
    total: 0,
    // 当前激活选择卡名称
    activeName: 'list'
  }
}

• 获取接口数据

methods: {
  async loadFansList () {
    // 获取粉丝列表数据
    const [err, ret] = await getFansList(this.filterParams)
    if (err) {
      return this.$message.error('获取粉丝列表失败！')
    }
    this.list = ret.data.results
    this.total = ret.data.total_count
  }
},
created () {
  this.loadFansList()
}

• 列表渲染

<div class="fans_list">
  <!-- item.id.toString() 因为使用json-bigint后id变成了对象 -->
  <div class="fans_item" v-for="item in fansList" :key="item.id.toString()">
    <!-- 头像 -->
    <el-avatar :size="80" :src="item.photo">
        <!-- 如果src路径对应的图片加载失败，就显示默认的如下的图片 -->
        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
    </el-avatar>
    <!-- 用户名 -->
    <p>{{item.name}}</p>
    <!-- 关注按钮 -->
    <el-button type="primary" plain size="small">+关注</el-button>
  </div>
</div>
<el-pagination
  style="margin-top:20px"
  background
  layout="prev, pager, next"
  :total="total"
  :current-page="reqParams.page"
  :page-size="reqParams.per_page"
  @current-change="changePager"
></el-pagination>

• 列表样式

.fans_item {
  width: 120px;
  height: 170px;
  border: 1px dashed #ddd;
  text-align: center;
  padding: 10px 0;
  display: inline-block;
  margin-right: 50px;
  margin-bottom: 15px;
  p {
    font-size: 12px;
    padding: 5px 0;
  }
}

粉丝画像

目标：基于echarts实现粉丝画像功能

• 图标填充标签

<div ref="dom" style="width:600px;height:400px"></div>

• 初始化图表

initEcharts () {
  // 初始化图表
  const option = {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  }
  // 获取echarts的填充位置
  const div = this.$refs.fans
  // 创建echarts实例对象
  const chart = echarts.init(div)
  // 设置图片的选项
  chart.setOption(option)
},
mounted () {
  // 初始化粉丝画像的图表
  this.initEcharts()
}