uniDataCenter/pages/index/todayPerform...

<template>
  <view class="acc_performance">
    <view class="splitLine"></view>
    <view class="bigTitle flex">
      账号今日表现
    </view>
    <view class="unit_pad">
      <view class="acc_thead flex">
        <view class="accInfo">账号信息</view>
        <view class="order">订单数</view>
        <view class="sale">销售额</view>
      </view>
      <view class="acc_tbody">
        <view v-if="accountRankList&&accountRankList.length>0">
          <view v-for="(acc,idx) in accountRankList" :key="acc.user_id" class="acc_tbody_item flex" :class="idx == accountRankList.length-1 ? '' : 'acc_tbody_item_border'">
            <view class="accInfo">
              <view class="imgPos">
                <img :src="acc.user.head" alt="" class="headImg">
                <img src="../../static/colorImg/rank1.png" alt="" class="rankImg" v-if="idx == 0">
                <img src="../../static/colorImg/rank2.png" alt="" class="rankImg" v-if="idx == 1">
                <img src="../../static/colorImg/rank3.png" alt="" class="rankImg" v-if="idx == 2">
              </view>
              <image class="platImg" v-if="acc.platform_type == '1'" src="../../static/kuai.png" mode="widthFix"></image>
              <image class="platImg" v-if="acc.platform_type == '2'" src="../../static/dou.png" mode="widthFix"></image>
              <text>{{acc.user.name}}</text>
            </view>
            <view class="order fWeight600">{{$formatNum(acc.order_count_sum)}}</view>
            <view class="sale fWeight600">{{$formatNum(acc.sell_money_sum)}}</view>
          </view>
        </view>
        <no-data v-else></no-data>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data(){
    return{
      accountRankList: [],
    }
  },
  methods:{
    init_uType_less2(){
      // this.get_todayAccountRank()//账号今日表现
      let pro1 = new Promise((resolve, reject)=>{
        this.get_todayAccountRank(()=>{
          resolve()
        })
      })
      Promise.all([pro1]).then(()=>{
        this.$hide_init_loading()
        uni.stopPullDownRefresh()
        this.$emit('todayTimerEdit',
            setTimeout(()=>{
              this.init_uType_less2()
            },10*1000)
        )
      })
    },
    get_todayAccountRank (cb) {
      this.$req(this.$api.todayAccountRank, 'get', {}, (res) => {
        cb ? cb() : ''
        if (res && res.errno == 0) {
          this.accountRankList = res.rst.data
        }
      },(err)=>{
        cb ? cb() : ''
      })
    },
  }
}

</script>
<style scoped lang="scss">

.acc_performance {
  background: #373E4E;
  .splitLine {
    height: 16rpx;
    background-color: #262C38;
  }
  .unit_pad {
    padding: 20rpx 32rpx;
  }
  .accInfo {
    display: flex;
    align-items: center;
    width: 50%;
    .imgPos {
      position: relative;
      .headImg {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        margin-right: 8rpx;
      }
      .rankImg {
        position: absolute;
        top: -6rpx;
        right: -6rpx;
        width: 40rpx;
        height: 40rpx;
      }
    }
    .platImg {
      width: 30rpx;
      height: 30rpx;
      margin: 8rpx;
      flex-shrink: 0;
    }
  }
  .order {
    display: inline-block;
    width: 25%;
    text-align: center;
  }
  .sale {
    display: inline-block;
    width: 25%;
    text-align: right;
  }
  .acc_thead {
    font-size: 26rpx;
    color: #b8b8b8;
  }
  .acc_tbody {
    font-size: 28rpx;
    .acc_tbody_item {
      padding: 26rpx 0;
    }
    .acc_tbody_item_border {
      border-bottom: 1px solid #303643;
    }
  }
}
.bigTitle {
  font-size: 32rpx;
  border-bottom: 2rpx solid #585c69;
  padding: 20rpx 32rpx;
  font-weight: 600;
  background: url("../../static/colorImg/bigTitleImg.png") no-repeat;
  background-size: 7%;
  background-position: 20rpx 10rpx;
}
.smallTitle {
  font-size: 28rpx;
  font-weight: 600;
}
</style>