uniMultipleStar/pages/index/index.vue

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

    <view class="updateTime">数据更新时间: {{updateTime || '-'}}</view>

    <view class="realTimeConsume">
      <view class="f28">实时消耗</view>
      <view class="tMar5"><text class="f40">¥ </text> <text class="f68 fWeight600">{{$NumberHandle(realConsume)}}</text></view>
    </view>

    <view class="dataBox">
      <view v-for="(item,index) in dataList" :key="item.key" class="itemBox">
        <view class="num">{{$NumberHandle(item.val)}} <text v-if="item.hasPercent">%</text></view>
        <view class="name">{{item.name || '-'}}</view>
      </view>
    </view>

    <view class="previewBtn" @click="goDetial">查看详情</view>

  </view>
</template>

<script>
export default {
  data () {
    return {
      timeVal: 1,
      cusVal: 1,
      timeList: [
        { value: 1, text: "今天" },
        { value: 7, text: "近7天" },
        { value: 30, text: "近30天" },
      ],
      cusList:[],
      updateTime:'',
      realConsume:'',
      dataList:[
        {name:'播放数',val:'',key:'play'},
        {name:'行为数',val:'',key:'action'},
        {name:'激活数',val:'',key:'conversion'},
        {name:'表单提交数',val:'',key:'submissions_number'},
        {name:'表单提交数成本',val:'',key:'sub_cpa'},
        {name:'评论数',val:'',key:'comment'},
        {name:'点赞数',val:'',key:'admire'},
        {name:'3s播放数',val:'',key:'played3s_cnt'},
        {name:'3s播放率',val:'',key:'played3s_percent',hasPercent:true},
        {name:'行为率',val:'',key:'ctr',hasPercent:true},
        {name:'千次观看成本',val:'',key:'cpm'},
        {name:'行为成本',val:'',key:'cpc'},
        {name:'激活成本',val:'',key:'cpa'},
      ]
    }
  },
  components:{},
  onLoad (option) {
    // await this.$onLaunched;
    this.init_cusList(option.cusVal ? option.cusVal : '')
    this.timeVal = 1
  },
  onPullDownRefresh(){

  },

  onShow() {
    this.timeVal = 1
    this.cusVal = uni.getStorageSync('cusVal') ? JSON.parse(JSON.stringify(uni.getStorageSync('cusVal'))) : 1
    uni.removeStorageSync('cusVal')
    this.init()
  },
  onHide(){
  },
  onUnload(){
  },
  methods: {
    //时间改变
    timeChange(e) {
      if(e == '7'){
        uni.navigateTo({
          url: './multiDay?timeVal=7&cusVal='+this.cusVal
        })
      }else if(e == '30'){
        uni.navigateTo({
          url: './multiDay?timeVal=30&cusVal='+this.cusVal
        })
      }
    },
    //客户改变
    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
          })
        }
      })
    },
    //客户列表
    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:1,
        cust_id:this.cusVal,
        st_date:this.$getDay(0, false),
        en_date:this.$getDay(0, false),
      }
      this.$req(this.$api.Traffic_dailyList, 'get', paramsModel,(res)=>{
        this.$hide_init_loading()
        this.updateTime = this.$getDay(0, true)['now']
        if (res && res.code == 0) {
          let resNew = res.data
          //清空值
          this.realConsume = ''
          this.dataList.forEach(item=>{
            item.val = ''
          })
          //赋值
          if(resNew.data&&resNew.data.length>0){
            this.dataList.forEach(item=>{
              item.val = resNew.data[0][item.key]
            })
            this.realConsume = resNew.data[0].consume_amount
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    //去详情
    goDetial(){
      let cusName = this.cusList.filter(n => { return n.value == this.cusVal })[0].text
      uni.navigateTo({
        url: './detialIndex?cust_id=' + this.cusVal + '&date=' + this.$getDay(0, false) + '&cusName=' + cusName
      })
    },
  }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.pageCon{
  background: #0D1546;
  padding: 40rpx;
  height: calc(100%);
  overflow-y: auto;
  .updateCss{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #0275FF;
    margin-left: auto;
    .iconfont{
      color: #0275FF;
      font-size: 28rpx;
      margin-left: 4rpx;
    }
  }
  .updateTime{
    font-size: 24rpx;
    color: #666FA7;
    margin: 32rpx 0 24rpx;
  }
  .realTimeConsume{
    width: 100%;
    height: 188rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    color: #0D1546;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .dataBox{
    background: #FFFFFF;
    border-radius: 12rpx;
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    padding-bottom: 64rpx;
    .itemBox{
      text-align: center;
      margin-top: 64rpx;
      width: 33.3%;
      .num{
        font-size: 40rpx;
        font-weight: 600;
        color: #0D1546;
      }
      .name{
        font-size: 28rpx;
        margin-top: 5rpx;
        color: rgba(13, 21, 70, .5);
      }
    }
    .rMar0{
      margin-right: 0;
    }
  }
  .previewBtn{
    width: 100%;
    height: 108rpx;
    line-height: 108rpx;
    background: #0275FF;
    border-radius: 12rpx;
    color: #fff;
    font-size: 36rpx;
    margin-top: 40rpx;
    text-align: center;
  }

}
</style>