chat/src/pages/mine/myShare.vue

<template>
  <div class="cx-my-share">
    
    <!--头部-->
    <div class="headDiv">
      <!--统计文字-->
      <div class="textBox">
        <div class="textDiv">
          <p class="text" @click="todayCont()" :class="selectType == 'today' ? 'select' : 'noSelect'">今日统计</p>
          <div class="empty" v-if="selectType == 'today'"></div>
        </div>
        <div class="textDiv">
          <p class="text" @click="allCont()" :class="selectType == 'all' ? 'select' : 'noSelect'">总数据</p>
          <div class="empty" v-if="selectType == 'all'"></div>
        </div>
      </div>
      <div class="optionsDiv">
        <div class="detailDiv">
          <p class="num" v-text="selectType == 'today' ? todayStatistics.shareNum : allStatistics.shareNum"></p>
          <p class="text">分享内容数</p>
        </div>
        <div class="empty"></div>
        <div class="detailDiv">
          <p class="num" v-text="selectType == 'today' ? todayStatistics.shareNum : allStatistics.shareNum"></p>
          <p class="text">被查看人数</p>
        </div>
        <div class="empty"></div>
        <div class="detailDiv">
          <p class="num" v-text="selectType == 'today' ? todayStatistics.looksCardNum : allStatistics.looksCardNum"></p>
          <p class="text">查看名片人数</p>
        </div>
      </div>
    </div>

    <!--选项-->
    <div class="chooseOptions">
      <p class="text" :class="(looksType === 'all') ? 'selectOpt' : ''" @click="allsCont()">全部</p>
      <p class="text" :class="(looksType === 'article') ? 'selectOpt' : ''" @click="articleCont()">文章</p>
      <p class="text" :class="(looksType === 'video') ? 'selectOpt' : ''" @click="videoCont()">视频</p>
    </div>

    <!--文章列表-->
    <div class="contentListDiv" v-if="looksType == 'article'" v-for="(item, index) in articleData" :key="index">
      <div class="imgDiv">
        <img class="articleImg" :src="item.articleImg">
        <img class="play" src="/static/images/play2.png" v-if="item.isvideo">
      </div>
      <div class="surveyDiv">
        <p class="articleTitle">{{item.articleTitle}}</p>
        <p class="timeText">{{item.lastLooksTime}}</p>
        <div class="looksDiv">
          <div class="looksUser">
            <p class="user"></p>
            <p class="user"></p>
            <p class="user"></p>
            <p class="user"></p>
            <p class="user"></p>
            <p class="user"></p>
            <p class="user"></p>
            <p class="user"></p>
          </div>
          <p class="looksNum">查看:{{item.articleLooksNum}}</p>
          <p class="more">&gt;</p>
        </div>
      </div>
    </div>
    
    <!---->

  </div>
</template>

<script>
export default {
  data() {
    return {
      todayStatistics: {userId: 101, type: 'today', shareNum: 3, looksDataNum: 476, looksCardNum: 200},
      allStatistics: {userId: 101, type: 'all', shareNum: 4, looksDataNum: 478, looksCardNum: 300},
      selectType: 'today',
      looksType: 'article',
      articleData: [
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000}
      ],
      videoData: [
        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000}
      ],
      allData: [
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'article', articleImg: '../../static/images/testPic4.png', isvideo: false, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000},
        {userId: 101, type: 'video', articleImg: '../../static/images/testPic4.png', isvideo: true, articleTitle: '全球确诊病例超75万，美国超18万人将要嗝屁', lastLooksTime: '2020-02-02 14:00:45', articleLooksNum: 3000}
      ]
    }
  },
  onLoad() {

  },
  methods: {
    todayCont() {
      this.selectType = 'today';
    },
    allCont() {
      this.selectType = 'all';
    },
    allsCont() {
      this.looksType = 'all';
    },
    articleCont() {
      this.looksType = 'article';
    },
    videoCont() {
      this.looksType = 'video';
    }
  }
}
</script>

<style lang="less">

</style>