fourPayProject/51pay-uni/homePages/performance/performance.vue

<template>
  <view class="content">
    <view class="container">
      <headers :titles="titles">
        <uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons>
      </headers>
      <view class="content_top">
        <view class="top-box">
          <view class="bai-box">
            <view class="title-">本月分润</view>
            <view class="price-">¥{{ dealNum(formData.fenrun) || 0.00 }}</view>
          </view>
          <view class="anniu"  @click="goIncome()">
            查看详情
            <u-icon name="arrow-right" size="15"></u-icon>
          </view>
        </view>
        <view class="box-h" style="border-bottom: 1px solid rgba(0, 0, 0, 0.05);" @click="goteam()">
          <view class="dis">
            <view class="icon-box">
              <image src="../../static/imgs/newr1.png" mode=""></image>
            </view>
            <view class="">
              团队总交易量
            </view>
          </view>

          <view class="dis">
            <view class="">{{ dealNum(formData.agentGroupTradeCount) || 0.00 }}</view>
            <u-icon name="arrow-right" size="15"></u-icon>
          </view>
        </view>

        <view class="box-h" style="border-bottom: 1px solid rgba(0, 0, 0, 0.05);">
          <view class="dis">
            <view class="icon-box">
              <image src="../../static/imgs/newr2.png" mode=""></image>
            </view>
            <view class="">
              本月直营激活商户数量
            </view>
          </view>

          <view class="dis">
            <view class="">{{ formData.zhiyingMerNum || 0 }}</view>

          </view>
        </view>
        <view class="box-h">
          <view class="dis">
            <view class="icon-box">
              <image src="../../static/imgs/newr3.png" mode=""></image>
            </view>
            <view class="">
              本月团队激活用户数量
            </view>
          </view>
          <view class="dis">
            <view class="">{{ formData.merNum || 0 }}</view>

          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import request from '../../utils/request.js'
import headers from '../../components/header/headers.vue'
import tabbar from '../../components/tabbar/tabbar.vue'

export default {
  data() {
    return {
      titles: "业绩详情",
      formData: {}
    }
  },
  onShow() {
    this.uaAgentIndex()
    this.achievement()
  },
  components: {
    headers
  },
  methods: {
    dealNum(data) {
      console.log(data);
      if (data) {
        return parseFloat(data).toFixed(2)
      } else {
        return '0.00'
      }
    },
    achievement() {
      request({
        url: '/app/uaAgent/achievement',
        method: 'post',
        data: {}
      }).then(res => {

        this.formData.zhiyingMerNum = res.zhiyingMerNum,
            this.formData.merNum = res.merNum,
            this.formData.fenrun = res.fenrun
        this.$forceUpdate()
      })
    },
    uaAgentIndex() {
      request({
        url: '/app/uaAgent/index',
        method: 'post',
        data: {}
      }).then(res => {
        this.formData.agentGroupTradeCount = res.agentGroupTradeCount
        this.$forceUpdate()
      })
    },
    goteam() {
      uni.navigateTo({
        url: '/homePages/performance/team'
      })
    },
    goIncome() {
      uni.navigateTo({
        url: '/homePages/performance/income'
      })
    },
    goback() {
      uni.navigateBack()

    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background: #FFFFFF;

  height: 100vh;
}

.container {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding-top: 88px;
}

.top-box {
  width: 100%;
  display: flex;

  box-sizing: border-box;
  padding: 25rpx 20rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.bai-box {
  width: 70%;
  border-radius: 6px;
  // background: ;
  background: #FFFAF9;
  margin: 10px auto;
  box-sizing: border-box;
  //padding: 16rpx 10rpx;
}

.anniu {
  //height: 24px;
  border-radius: 50px;
  //background: #fff;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin: 10px auto;
}

.price- {
  font-size: 40rpx;
  color: #DA5A38;
  padding-top: 15rpx

}

.title- {
  font-weight: bold;
  font-size: 28rpx;
  color: #835346;
}

.box-h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 0;

}

.icon-box {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;

  image {
    width: 100%;
    height: 100%;
  }
}

.dis {
  display: flex;
  align-items: center;
  padding-right: 25rpx;
}

.bg-box {
  color: #333333;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
}

.content_top {
  //padding: 30rpx 15rpx;
  margin: 20rpx;
  background: #FFFAF9;
  border-radius: 20rpx;
  padding:15rpx
}
</style>