yanxiang_h5/pages/home/share.vue

<template>
  <view class="pageHome">
    <yx-navbar :isBack="false" title="分享给我"></yx-navbar>
    <view class="pageIndex">
      <view class="tabs">
        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">
          <text>可视化大屏</text>
        </view>
        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">
          <text>自助报表</text>
        </view>
      </view>
      <view class="search">
        <u-search
          :placeholder="placeholder" v-model="params.name" :show-action="false"
          bg-color="#f6f6f6" @change="onSearch" shape="square"
        ></u-search>
      </view>
      <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
        <view class="main" v-if="dataList.length > 0">
          <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <img v-if="item.visualData.backgroundUrl" class="infoImg" :src="item.visualData.backgroundUrl" alt="">
            <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
            <view class="info-box">
              <view class="name">{{ item.visualData.title }}</view>
              <view class="info">
                <view class="num"><i class="el-icon-view"></i> 访问量:{{ item.count }}</view>
                <view class="dateTime">{{ item.date }}</view>
              </view>
            </view>
          </view>
        </view>
        <template v-if="!loading&&!dataList.length">
          <image class="none" v-if="params.name" src="../../static/img/no-search.png" style="width: 100%" mode="aspectFit"></image>
          <image class="none" v-else src="../../static/img/no-data.png" style="width: 100%" mode="aspectFit"></image>
        </template>
      </scroll-view>
      <tab-bar tabbarValue='分享给我'></tab-bar>
    </view>
  </view>
</template>
<script>
import {getShareList, getPv} from '@/common/api.js'
import moment from 'moment'
export default {
  data() {
    return {
      placeholder: "请输入大屏名称",
      tabIndex: 0,
      params: {
        size: 10,
        page: 1,
        name: "",
      },
      dataList: [],
      propsShow: false,
      loading: true,
    }
  },
  onShow() {
    this.getData(true)
  },
  methods: {
    getCount(data, type) {
      return new Promise((resolve, reject) => {
        if (!data.length) {
          resolve()
        } else {
          let visualIds = data.map(i => i.visualData.id)
          getPv({type, visualIds}).then(rr => {
            let counts = rr.data.reduce((r, i) => ({...r, [i.visualId]: i.viewCount}), {})
            data.forEach(item => item.count = counts[item.visualData.id] || 0)
            resolve()
          })
        }
      })
    },
    getData(reload) {
      if (reload) {
        this.params.page = 1
      }
      this.loading = true
      if (this.tabIndex === 0) {
        getShareList({...this.params, type: 0}).then(res => {
          let data = res.data.records
          this.getCount(data, 0).then(() => {
            data.forEach(item => {
              item.date = moment(item.visualData.createTime).format('YYYY-MM-DD')
            })
            if (data.length) this.params.page++
            this.dataList = reload ? data : this.dataList.concat(data)
          })
        }).finally(() => this.loading = false)
      }
      if (this.tabIndex === 1) {
        getShareList({...this.params, type: 1}).then(res => {
          let data = res.data.records
          this.getCount(data, 1).then(() => {
            data.forEach(item => {
              item.date = moment(item.visualData.createTime).format('YYYY-MM-DD')
            })
            if (data.length) this.params.page++
            this.dataList = reload ? data : this.dataList.concat(data)
          })
        }).finally(() => this.loading = false)
      }
    },
    onClickTab(index) {
      this.placeholder = index ? '请输入报表名称' : '请输入大屏名称'
      this.tabIndex = index
      this.params.name = ''
      this.getData(true)
    },
    onSearch(e) {
      this.getData(true)
    },
    goDetail(item) {
      uni.navigateTo({url: '/pages/detail/bigdata?id=' + item.visualData.id + '&title=' + item.visualData.title})
    },
  },
}
</script>
<style lang="less">
@import "./home.less";
</style>