cyywl_server/yudao-ui-app/pages/sale_performance/index.vue

<template>
  <view class="box">
    <u-navbar autoBack :title="performance[active].name" bgColor="rgba(255,255,255,0)" :placeholder="true" leftIconSize="40"
      leftIconColor="#fff" titleStyle="font-size:35rpx;color:#fff">
     <!-- <view slot="right">
        <u-icon name="more-dot-fill" color="#fff" @click="show = true"></u-icon>
      </view> -->
    </u-navbar>
    <u-sticky bgColor="#fff">
      <u-tabs @change="handleChange" :list="list" itemStyle=" padding-left: 46rpx; padding-right: 46rpx; height: 46px;" lineColor="#DA2E55" lineWidth="48rpx" lineHeight="10rpx" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
    </u-sticky>
    <view class="sale_content">
      <view class="sale_money">
        <view class="money_total">
          <view class="money_left">
            <image src="../../static/images/money1.png" ></image>
            <text>总计金额</text>
          </view>
          <view  class="money_right"><text>￥</text>{{orderDetail.totalAmount}}</view>
        </view>
        <view class="money_statistics">
          <view class="money_left">
            <image class="logo" src="../../static/images/money2.png" ></image>
            <view class="segmentation" style="background: linear-gradient(0deg, #FFFFFF 0%, #FFE0C5 47%, #FFFFFF 100%);"></view>
            <text>已发展会员个数</text>
          </view>
          <view  class="money_right" style="color: #FF4800;">{{orderDetail.memberCount}}个</view>
          <image class="fillet" src="../../static/images/fillet1.png" ></image>
        </view>
     <view class="money_statistics">
       <view class="money_left">
         <image class="logo" src="../../static/images/money3.png" ></image>
         <view class="segmentation" style="background: linear-gradient(0deg, #FFFFFF 0%, #C8EFFF 47%, #FFFFFF 100%);"></view>
         <text>提成比例</text>
       </view>
       <view  class="money_right" style="color: #1082FF;">{{orderDetail.memberCommission}}%</view>
       <image class="fillet" src="../../static/images/fillet2.png" ></image>
     </view>
     <view class="money_statistics">
       <view class="money_left">
         <image class="logo" src="../../static/images/money4.png" ></image>
         <view class="segmentation"  style="background: linear-gradient(0deg, #FFFFFF 0%, #CEF0DA 47%, #FFFFFF 100%);"></view>
         <text>预计提成金额</text>
       </view>
       <view  class="money_right" style="color: #32A84F;">{{parseFloat(orderDetail.totalAmount*(parseFloat(orderDetail.memberCommission) / 100))}}</view>
       <image class="fillet" src="../../static/images/fillet3.png" ></image>
     </view>
      </view>
      <view class="sale_turnover">
        <view class="turnover_title">
          {{performance[active].fund}}
        </view>
        <view class="turnover_list">
        <u-list
          height="500"
        			@scrolltolower="scrolltolower"
        		>
          <u-list-item
          	v-for="(item, index) in orderData"
          	:key="index"
          >
            <view class="list_item">
              <view>
                <view class="item_radius"></view>
                <text>{{item.nickname}}</text>
              </view>
              <text>￥{{item.payPrice}}</text>
              </view>
            </u-list-item>
        </u-list>
        </view>
      </view>
    </view>
    <u-action-sheet :actions="performance" @close="show = false" :closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectClick" :title="title" :show="show"></u-action-sheet>
  </view>
</template>

<script>
  import {
    promoterOrderInfo,
    promoterOrderCount
  } from '@/api/member.js';

  export default {
    name: "sale_performance",
    data() {
      return {
        activeStyle:{
          fontSize: '34rpx',
          fontFamily: 'PingFang SC',
          fontWeight: '400',
          color: '#DA2E55'
        },
        inactiveStyle:{
          fontSize: '30rpx',
          fontFamily: 'PingFang SC',
          fontWeight: '400',
          color: '#fff'
        },
        show:false,
        title:'业绩',
        active:0,
        performance: [
        				{
                  fund:'流水明细',
        					name:'发展会员业绩',
        					fontSize:'30',
                  id:0
        				},
        				{
                  fund:'订单流水',
        					name: '商品订单业绩',
        					fontSize:'30',
                  id:1
        				},
        			],
        list: [{
          name: '今日',
        }, {
          name: '上周',
        }, {
          name: '上月'
        }, {
          name: '累计'
        }],
        pageData:{
          pageNo:1,
          pageSize:10
        },
        orderDetail:{},
        orderData:[],
        total:0
      };
    },

    async onLoad() {
      try {
        uni.showLoading({
          title: '加载中'
        });
        await this.orderCount(0)
        await this.orderInfo(false)
      } finally {
        uni.hideLoading();
      }
    },
    methods: {
      selectClick(value){
        console.log(value)
        this.active = value.id
      		},
     async scrolltolower() {
       if(this.total>this.orderData.length){
         this.pageData.pageNo++
         await this.orderInfo(true)
       }
     },
    async orderInfo(bool=true){
        const res =  await promoterOrderInfo(this.pageData)
        this.orderData = bool? this.orderData.concat(res.data.list):this.orderData = res.data.list
        this.total = res.data.total
      },
   async orderCount(index){
     const res = await promoterOrderCount(index+1)
     this.orderDetail = res.data
    },
   async handleChange(value){
     this.pageData.pageNo = 1
    await this.orderCount(value.index)
    await this.orderInfo(false)
    }
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    position: relative;
    min-height: 100vh;
    background: url(../../static/images/sale_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 0 40rpx;
    ::v-deep .u-sticky{
      background: rgba(255, 255, 255, 0) !important;
      display: flex;
      justify-content: center;
    }
    .sale_content{
      display: flex;
      flex-direction: column;
      .sale_money{
        display: flex;
        flex-direction: column;
        .money_total{
          margin-bottom: 14rpx;
          display: flex;
          justify-content: space-between;
          min-height: 160rpx;
          background: url(../../static/images/money_total.png);
          background-size: 100%;
          background-repeat: no-repeat;
          .money_left{
            display: flex;
            align-items: center;

            text{
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
              margin-left: 37rpx;
            }
            image{
              margin:10rpx 0 0 10rpx;
              width: 100rpx;
              height: 111rpx;
              align-self: flex-start;
            }
          }
          .money_right{
            display: flex;
            align-items: center;
            margin-right: 48rpx;
            font-size: 45rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #DA2E55;
            text{
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #DA2E55;
            }
          }

        }
        .money_statistics{
          margin-bottom: 14rpx;
          padding: 19rpx 36rpx 15rpx 19rpx;
          background: #FFFFFF;
          box-shadow: 0px 0px 18rpx 0px rgba(127,127,127,0.08);
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          .fillet{
            width: 23rpx;
            height: 20rpx;
            position: absolute;
            bottom: 10rpx;
            right: 10rpx;
          }
          .money_left{
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
            .logo{
              width: 80rpx;
              height: 80rpx;
            }
            .segmentation{
              margin: 0 24rpx  0 18rpx;
             width: 6rpx;
             height: 43rpx;
            }
          }
          .money_right{
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 400;
          }
        }
      }
      .sale_turnover{
        margin-top: 22rpx;
        padding: 30rpx 32rpx;
        background: #FFFFFF;
        box-shadow: 0px 0px 18rpx 0px rgba(127,127,127,0.08);
        border-radius: 20rpx;
        .turnover_title{
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #000000;
        }
        .turnover_list{
          display: flex;
          flex-direction: column;
          .list_item{
            display: flex;
            justify-content: space-between;
            padding: 29rpx 0;
            border-bottom: 1px solid #D8D8D8;
            text{
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
            }
            view{
              display: flex;
              align-items: center;

              .item_radius{
                margin-right: 19rpx;
                width: 10rpx;
                height: 10rpx;
                background: #FF4106;
                border-radius: 50%;
              }
            }

          }
        }
      }
    }
  }
</style>