uniMultipleStar/pages/index/detialIndex....

<template>
  <view class="pageCon">
    <scroll-view scroll-y="true" class="dataBoxFather">
      <view v-for="(item,index) in dataList" :key="index" class="tMar20">
        <view class="infoBox">
          <view>
            <img v-if="item.img" :src="item.img" alt="" class="img">
            <img v-else src="../../static/defaultAvatar.png" alt="" class="img">
          </view>
          <view style="width: 100%">
            <view class="bigFont">{{item.name || '-'}}</view>
            <view class="flex-bewteen smallFont">
              <view>粉丝数：{{$NumberHandle(item.fans)}}</view>
              <view>任务ID：{{item.taskId || '-'}}</view>
            </view>
          </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 {
      dataList:[],
      showNoData:true
    }
  },
  components:{},
  onLoad (option) {
    this.showNoData = false
    uni.setNavigationBarTitle({title: option.date + '(' + option.cusName + ')' })
    this.init(option)
  },
  onPullDownRefresh(){

  },
  onShow(){

  },
  onHide(){
  },
  onUnload(){
  },
  methods: {
    init(option){
      if(!option.cust_id || !option.date){
        uni.showToast({
          title: '传参错误',
          icon: 'none',
          duration: 2000
        })
        return
      }
      let paramsModel = {
        cust_id:option.cust_id,
        date:option.date,
      }
      this.$req(this.$api.Traffic_dailyList_detial, 'get', paramsModel,(res)=>{
        if (res && res.code == 0) {
          let resNew = res.data
          this.dataList = []
          if(resNew&&resNew.length>0){
            this.showNoData = false
            resNew.forEach(item=>{
              this.dataList.push({
                img:item.head_url,
                name:item.star_name,
                fans:item.fan,
                taskId:item.task_id,
                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'},
                ]
              })
            })
          }else{
            this.showNoData = true
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
  }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.pageCon{
  background: #fff;
  height: 100vh;
  .dataBoxFather{
    height: 100vh;
    overflow-y: auto;
    padding: 0 40rpx;
    .infoBox{
      display: flex;
      align-items: center;
      .img{
        width: 88rpx;
        height: 88rpx;
        background: #D8D8D8;
        margin-right: 16rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .bigFont{
        font-size: 28rpx;
        font-weight: 600;
        color: #0D1546;
      }
      .smallFont{
        font-size: 24rpx;
        color: #666FA7;
        margin-top: 10rpx;
      }
    }

    .dataBox{
      background: #F0F7FF;
      border-radius: 12rpx;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      padding-bottom: 40rpx;
      margin-top: 12rpx;
      .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>