uniMultipleStar/pages/index/multiDay.vue

<template>
  <view class="pageCon">
    <view class="flex topBox">
      <uni-data-select v-model="timeVal" :localdata="timeList" @change="timeChange" :clear="false" :isNoBorder="true" selfWidth="50px" style="margin-right: 30rpx"></uni-data-select>
      <uni-data-select v-model="cusVal" :localdata="cusList" @change="cusChange" :clear="false" :isNoBorder="true" :selfPullWidth="220"></uni-data-select>
      <view class="updateCss" @click="updateEvent">更新<view class="iconfont icon-gengxin"></view></view>
    </view>

    <scroll-view scroll-y="true" class="dataBoxFather">
      <view v-for="(item,index) in dataList" :key="index" class="tMar40">
        <view class="dateBox">
          <text>{{item.date || '-'}}</text>
          <view class="detialBtn" @click="previewEvent(item.date)">查看详情</view>
        </view>
        <view class="dataBox">
          <view v-for="(sub,index) in item.list" :key="sub.key" class="itemBox">
            <view class="num">{{$NumberHandle(sub.val)}} <text v-if="sub.hasPercent">%</text></view>
            <view class="name">{{sub.name || '-'}}</view>
          </view>
        </view>
      </view>
      <theEnd v-if="dataList&&dataList.length>3"></theEnd>
      <noData v-if="dataList&&dataList.length==0&&showNoData"></noData>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      timeVal: 7,
      cusVal: 0,
      timeList: [
        { value: 1, text: "今天" },
        { value: 7, text: "近7天" },
        { value: 30, text: "近30天" },
      ],
      cusList:[],
      dataList:[],
      showNoData:true
    }
  },
  components:{},
  onLoad (option) {
    // await this.$onLaunched;
    this.showNoData = false
    if(option.timeVal){
      this.timeVal = Number(option.timeVal)
    }
    this.init_cusList(option.cusVal ? option.cusVal : '')
  },
  onPullDownRefresh(){

  },
  onShow(){

  },
  onHide(){
    uni.setStorageSync('cusVal', this.cusVal)
  },
  onUnload(){
  },
  methods: {
    //客户列表
    init_cusList(optionVal){
      let paramsModel = {
        page:1,
        pageSize:500,
      }
      this.$req(this.$api.customerAuth_list, 'get', paramsModel,(res)=>{
        if (res && res.code == 0) {
          let resNew = res.data
          this.cusList = []
          resNew.data.forEach(item=>{
            this.cusList.push({value:item.id,text:item.name})
          })
          this.cusVal = optionVal ? Number(optionVal) : this.cusList[0].value
          this.init()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    //数据列表
    init(){
      this.$show_init_loading()
      let paramsModel = {
        page:1,
        pageSize:Number(this.timeVal + 1),
        cust_id:this.cusVal,
        st_date:this.$getDay(Number('-'+this.timeVal), false),
        en_date:this.$getDay(0, false),
      }
      this.$req(this.$api.Traffic_dailyList, 'get', paramsModel,(res)=>{
        this.$hide_init_loading()
        if (res && res.code == 0) {
          let resNew = res.data
          //清空值
          this.dataList = []
          //赋值
          if(resNew.data&&resNew.data.length>0){
            resNew.data.forEach(item=>{
              if(Number(item.consume_amount) || Number(item.play) || Number(item.action) || Number(item.conversion) || Number(item.ctr)
                  || Number(item.cpm) || Number(item.cpc) || Number(item.cpa) ||  Number(item.submissions_number) ||  Number(item.sub_cpa)){
                this.dataList.push({
                  date:item.date,
                  list:[
                    {name:'消耗',val:item.consume_amount,key:'consume_amount'},
                    {name:'播放数',val:item.play,key:'play'},
                    {name:'行为数',val:item.action,key:'action'},
                    {name:'激活数',val:item.conversion,key:'conversion'},
                    {name:'表单提交数',val:item.submissions_number,key:'submissions_number'},
                    {name:'表单提交数成本',val:item.sub_cpa,key:'sub_cpa'},
                    {name:'行为率',val:item.ctr,key:'ctr',hasPercent:true},
                    {name:'CPM',val:item.cpm,key:'cpm'},
                    {name:'行为成本',val:item.cpc,key:'cpc'},
                    {name:'激活成本',val:item.cpa,key:'cpa'},
                  ]
                })
              }
            })
          }

          if(this.dataList&&this.dataList.length>0){
            this.showNoData = false
          }else{
            this.showNoData = true
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    //去详情
    previewEvent(date){
      let cusName = this.cusList.filter(n => { return n.value == this.cusVal })[0].text
      uni.navigateTo({
        url: './detialIndex?cust_id=' + this.cusVal + '&date=' + date + '&cusName=' + cusName
      })
    },
    //时间改变
    timeChange(e) {
      this.timeVal = e
      if(e == '1'){
        uni.setStorageSync('cusVal', this.cusVal)
        uni.redirectTo({
          url: './index?cusVal=' + this.cusVal
        })
      }else{
        this.init()
      }
    },
    //客户改变
    cusChange(e) {
      this.cusVal = e
      this.init()
    },
    //更新
    updateEvent(){
      this.$show_init_loading()
      let paramsModel = {
        cust_id:this.cusVal,
      }
      this.$req(this.$api.Traffic_dailyList_update, 'post', paramsModel,(res)=>{
        if (res && res.code == 0) {
          let resNew = res.data
          this.init()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
  }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.pageCon{
  background: #fff;
  height: 100vh;
  .topBox{
    border-bottom: 1px solid #F8F8F8;
    padding: 10rpx 0;
  }
  .updateCss{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #0275FF;
    margin-left: auto;
    padding: 0 40rpx;
    .iconfont{
      color: #0275FF;
      font-size: 28rpx;
      margin-left: 4rpx;
    }
  }
  .dataBoxFather{
    height: calc(100vh - 96rpx);
    overflow-y: auto;
    padding: 0 40rpx;
    .dateBox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      text{
        color: #363F7A;
        font-size: 34rpx;
      }
      .detialBtn{
        width: 126rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        background: #0275FF;
        border-radius: 12rpx;
        color: #FFFFFF;
        font-size: 24rpx;
      }
    }

    .dataBox{
      background: #F0F7FF;
      border-radius: 12rpx;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      padding-bottom: 40rpx;
      margin-top: 16rpx;
      .itemBox{
        text-align: center;
        margin-top: 40rpx;
        width: 25%;
        .num{
          font-size: 32rpx;
          font-weight: 600;
          color: #0D1546;
        }
        .name{
          font-size: 24rpx;
          margin-top: 5rpx;
          color: rgba(13, 21, 70, .5);
        }
      }
      .rMar0{
        margin-right: 0;
      }
    }

  }


}
</style>