kxmall-ui/kxmall-app-ui/pages/user/promotion.vue

<template>
  <view class="my-promotion">
    <!-- 头部背景 -->
    <view class="header">
      <view class="name acea-row row-center-wrapper">
        <view>当前佣金</view>
        <view class="record" @click="goCashRecord()">
          提现记录
          <text class="iconfont icon-xiangyou"></text>
        </view>
      </view>
      <view class="num">{{ Info.commissionCount }}</view>
      <view class="profit acea-row row-between-wrapper">
        <view class="item">
          <view>昨日收益</view>
          <view class="money">{{ Info.lastDayCount }}</view>
        </view>
        <view class="item">
          <view>累积已提</view>
          <view class="money">{{ Info.extractCount }}</view>
        </view>
      </view>
    </view>

    <!-- 功能入口列表 -->
    <view class="list acea-row row-between-wrapper flex-wrap">
      <view class="item acea-row row-center-wrapper row-column" @click="goPoster()">
        <text class="iconfont icon-erweima"></text>
        <view>推广名片</view>
      </view>
      <view class="item acea-row row-center-wrapper row-column" @click="goPromoterList()">
        <text class="iconfont icon-tongji"></text>
        <view>推广人统计</view>
      </view>
      <view class="item acea-row row-center-wrapper row-column" @click="goCommissionDetails()">
        <text class="iconfont icon-qiandai"></text>
        <view>佣金明细</view>
      </view>
      <view class="item acea-row row-center-wrapper row-column" @click="goPromoterOrder()">
        <text class="iconfont icon-dingdan"></text>
        <view>推广人订单</view>
      </view>
      <view class="item acea-row row-center-wrapper row-column" @click="toCash()">
        <text class="iconfont icon-chongzhi"></text>
        <view>立即提现</view>
      </view>
    </view>
  </view>
</template>

<script>


export default {
  name: "UserPromotion",
  data() {
    return {
      Info: {
        lastDayCount: 0,
        extractCount: 0,
        commissionCount: 0
      }
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    goPoster() {
      uni.navigateTo({
        url: `/pages/user/promotion/Poster`
      })
    },
    goCashRecord() {
      uni.navigateTo({
        url: `/pages/user/promotion/CashRecord`
      })
    },
    goPromoterList() {
      uni.navigateTo({
        url: `/pages/user/promotion/PromoterList`
      })
    },
    goCommissionDetails() {
      uni.navigateTo({
        url: `/pages/user/promotion/CommissionDetails`
      })
    },
    goPromoterOrder() {
      uni.navigateTo({
        url: `/pages/user/promotion/PromoterOrder`
      })
    },
    getInfo() {
      let that = this;


      this.$api.request('get', 'user/app/getSpreadInfo').then(res => {
        that.Info = res.data;
      },
          function (err) {
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000
            });
          }
          );
    },
    toCash() {
      uni.navigateTo({
        url: `/pages/user/promotion/UserCash`
      })
    }
  }
};
</script>

<style lang="less">
/* layout */
.acea-row {
  display: flex;
  flex-wrap: wrap;
  /* 辅助类 */
}
.my-promotion {
  .header {
    background-image: url('https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 375rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .name {
      font-size: 30rpx;
      color: #fff;
      padding-top: 57rpx;
      position: relative;

      .record {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
        position: absolute;
        right: 20rpx;

        .iconfont {
          font-size: 25rpx;
          margin-left: 10rpx;
        }
      }
    }

    .num {
      text-align: center;
      color: #fff;
      font-size: 90rpx;
      font-family: 'GuildfordProBook 5';
      margin-top: 25rpx;
    }

    .profit {
      padding: 0 20rpx;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);

      .item {
        min-width: 200rpx;
        text-align: center;
        width: 50%;
        .money {
          font-size: 34rpx;
          color: #fff;
        }
      }
    }
  }

  .list {
    padding: 0 20rpx;
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 345rpx;
      height: 240rpx;
      border-radius: 20rpx;
      background-color: #fff;
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #666;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .iconfont {
        font-size: 70rpx;
        color: #eb3729;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>