uniDataCenter/pages/liveSituation/liveSituatio...

<template>
  <view class="con">
    <view class="time_con">
      <timeFiltrate @getchildTime="getchildTime"></timeFiltrate>
    </view>
    <view class="ec-table">
      <view class="flex ex-thead">
        <view class="cellItem">日期</view>
        <view class="cellItem" style="width: 300rpx;">账号</view>
        <view class="cellItem" v-for="(i,idx) in infoList_title" :key="idx" :id="'demo1'+idx" :class="i.key == sort_type ? 'xiangxia_active' : ''"  @click="init_title(i.key)">
          <text>{{i.name}}</text>
          <text v-if="i.support_sort == 1" class="iconfont icon-xiangxia_icon f18 lMar8"></text>
        </view>
        <view class="iconfont icon-bianji_icon" @click="showDrawer"></view>
      </view>
      <view class="ex-tbody">
        <view v-if="infoList&&infoList.length>0">
          <view v-for="item in infoList" :key="item.id" class="flex ex-tbody_item">
            <view class="cellItem">{{item.date}}</view>
            <view class="cellItem" style="width: 300rpx;display: inline-block;">
              <view class="flex" style="justify-content: center" v-for="ise in item.seller_info_list" :key="ise.sellerId">
                <img :src="ise.head" alt="" class="useImg">
                <text>{{ise.name}}</text>
              </view>
            </view>
            <view class="cellItem" v-for="(i,idx) in infoList_title" :key="idx" :id="'demo2'+idx" :class="i.key == sort_type ? 'xiangxia_active' : ''">
              <text v-if="i.key.substring(i.key.length - 4) == 'rate'">
                {{$formatNum(item[i.key] * 100)}}%
              </text>
              <text v-else-if="i.key == 'work_duration' || i.key == 'live_duration'">
                {{$formateHours(item[i.key])}}
              </text>
              <text v-else> {{item[i.key] || item[i.key] == 0 ? $formatNum(item[i.key]) : '-' }}</text>
            </view>
          </view>
        </view>
<!--        <noData v-else></noData>-->
      </view>
    </view>
    <view class="text-center f26 loadinfo" v-if="noMoreShow">没有更多了...</view>
    <view class="text-center f26 loadinfo" v-if="loadingShow">加载中...</view>


    <uni-drawer ref="showselfMask" mode="left">
      <selfIndicators ref="indicatorsRef" v-on:closeindicatorDrawer="closeindicatorDrawer"></selfIndicators>
    </uni-drawer>
	  <wm-watermark :text="real_name"></wm-watermark>
  </view>
</template>
<script>
import noData from "../../components/noData";
import timeFiltrate from '@/components/timeFiltrate.vue'
import selfIndicators from "../../components/selfIndicators";
export default {
  components:{
    noData,
    timeFiltrate,
    selfIndicators
  },
	data() { 
		return{
			real_name:'',
			infoList_title:[],
			sort_type: 'sell_money',
			infoList: [],
      start_time: this.$getDay(-30, false),
      end_time: this.$getDay(0, false),
			total: 0,
			page: 1,
			page_size: 20,
      noMoreShow:false,
      loadingShow:false
		}
	} ,
  computed:{
    timeChange(){
      const { start_time,end_time } = this
      return {
        start_time,
        end_time
      }
    }
  },
  watch:{
    timeChange(){//同时监听两个数据变化
      this.$show_init_loading()
      this.init_title()
    }
  },
	async onLoad(){
    await this.$onLaunched;
    this.$show_init_loading()
	  this.real_name = uni.getStorageSync('userInfo').info.real_name;
		this.init_title()
	},
  onPullDownRefresh(){
    this.init_title()
  },
  onReachBottom(){
    if(this.noMoreShow){
      return false
    }
    this.loadingShow = true
    setTimeout(()=>{
      this.page = Number(this.page)+1
      this.init()
    },1000)
  },
	methods:{
    showDrawer(){
      this.$refs.showselfMask.open();
      this.$refs.indicatorsRef.get_all_dot()
    },
    closeindicatorDrawer(num){
      this.$refs.showselfMask.close();
      if(num == 1){
        this.init_title()
      }
    },
    getchildTime(st, et){
      this.start_time = st
      this.end_time = et
    },
		init_title (sort) {
      this.infoList = []
      this.page = 1
      sort ? this.sort_type = sort : ''
			this.$req(this.$api.search_config_checked,'get',{
				type: "SMALLAPP_LIVE_EFFECT_LIST"
			},(res)=>{
				if(res && res.errno == 0){
				   this.infoList_title = res.rst
					  // if (sort) { // 自定义指标确认后,判断有没有销售额,只在初始化和确认修改时用
						// // 判断销售额是否存在,否的话传列表第一个
						// let sellFlag = false
						// this.infoList_title.forEach((i_key) => {
						//   if (i_key.key == 'sell_money') {
						// 	sellFlag = true
						//   }
						// })
						// this.sort_type = sellFlag ? 'sell_money' : this.infoList_title[0].key
					  // }
					  this.init()
				}else{
				}
			})
		},
		init () {
			this.$req(this.$api.live_situation,'get',{
        st_date: this.start_time,
        en_date: this.end_time,
        sort_column: this.sort_type,
        page: this.page,
        page_size: this.page_size,
        from_type:2
			},(res)=>{
				if(res && res.errno == 0){
          this.$hide_init_loading()
          uni.stopPullDownRefresh()
          this.loadingShow = false
          this.noMoreShow = false
          this.infoList = [...this.infoList,...res.rst.data]
          this.page = res.rst.pageInfo.page;
          if(res.rst.data.length < this.page_size){
            this.noMoreShow = true
          }
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped> 
.con{
  .time_con{
    padding: 0 20rpx;background: #333947;
    position: sticky;
    top: 0;
     z-index: 1;
  }
.icon-bianji_icon{
position: fixed;
right: 0;
background: #1C222E;
line-height: 78rpx;
padding: 0 10rpx;
top: 92rpx;
}
.ec-table{
  overflow: auto;
  position: relative;
.cellItem{
  width: 200rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ex-thead{
  font-size: 28rpx;
  color: #B8B8B8;
  //position: sticky;
  //top: 0;
  view{
    text-align: center;
  }
  .cellItem{
    background: #1C222E;
  }
}
.ex-tbody{
  //background-color: #373E4E;
  //overflow: auto;
  view{
    text-align: center;
  }
  .ex-tbody_item{
    font-size: 26rpx;
    padding: 10rpx 0;
    border-bottom: 1px solid #3D4453;
    width: fit-content;
    .useImg{
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      margin-right: 8rpx;
      flex-shrink: 0;
    }
  }
}

.xiangxia_active{
  color: #2E67FF;
}
}
}
</style>