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 | currency}}</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 | currency}}%</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)) | currency}}
          </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 class="info-wrap">
                  <view class="name">
                    <view class="item_radius"></view>
                    <text>{{item.nickname}}</text>
                  </view>
                  <text class="extra">
                    {{ $util.timestampToTime(item.payTime) }}
                    <view>{{ item.grade }}</view>
                  </text>
                </view>
                <view class="price-wrap">
                  <text style="display:block; margin-bottom: 6rpx;">￥{{item.payPrice | currency}}</text>
                  <u-tag v-if="item.refundStatus === 2" plain  text="已退款" type="error"></u-tag>
                </view>
              </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: {
      // timestampToTime(timestamp) {
      //   // 时间戳为10位需*1000，时间戳为13位不需乘1000
      //   var date = new Date(timestamp);
      //   var Y = date.getFullYear() + "-";
      //   var M =
      //     (date.getMonth() + 1 < 10
      //       ? "0" + (date.getMonth() + 1)
      //       : date.getMonth() + 1) + "-";
      //   var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      //   var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      //   var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
      //   var s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
      //   return Y + M + D + h + m + s;
      // },
      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;
            align-items: center;
            padding: 29rpx 0;
            border-bottom: 1px solid #D8D8D8;

            text {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #000000;
            }

            .info-wrap {
              .extra {
                display: flex;
                margin-top: 10rpx;
                font-size: 26rpx;
                color: #909399;
              }

              .name {
                display: flex;
                align-items: center;
              }

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

          }
        }
      }
    }
  }
</style>