zhishifufei_uniapp/pages/spread/spread.vue

<template>
  
  <BaseContainer class="promotion">
    <NavBar title="推广中心" />
    <template v-if="userInfo.uid">
      <view class="first">
        <view>可提现金额(元)</view>
        <view>{{ userInfo.brokerage_price }}</view>
        <view>
          <view class="item">
            <view>{{ data.income }}</view>
            <view>今日收益</view>
          </view>
          <view class="item">
            <view>{{ data.order_count }}</view>
            <view>今日订单</view>
          </view>
          <view class="item">
            <view>{{ data.spread_count }}</view>
            <view>新增学员</view>
          </view>
        </view>
      </view>
      <view class="second">
        <view class="second-child" @click="withdraw">
          <text>佣金提现</text>
        </view>
        <navigator hover-class="none" class="second-child" url="/pages/spread/spread_detail?type=2">
          <text>提现记录</text>
        </navigator>
      </view>
      <view class="third">
        <navigator hover-class="none" url="/pages/spread/special">
          <text>专题推广</text>
          <i class="iconfont iconxiangyou"></i>
        </navigator>
        <navigator hover-class="none" url="/pages/spread/my_promoter">
          <text>我的推广</text>
          <i class="iconfont iconxiangyou"></i>
        </navigator>
        <navigator hover-class="none" url="/pages/spread/commission">
          <text>佣金明细</text>
          <i class="iconfont iconxiangyou"></i>
        </navigator>
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getSpreadData } from "@/api/spread";

export default {
  data() {
    return {
      data: {},
      userInfo: {},
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      getSpreadData().then(({ data }) => {
        Object.assign(this, {
          data: data.data,
          userInfo: data.userInfo,
        });
      });
    },
    withdraw() {
      const num = Number(this.userInfo.brokerage_price);
      if (num) {
        uni.navigateTo({
          url: "/pages/spread/withdraw",
        });
      } else {
        this.$util.showMsg("可提现金额: " + num);
      }
    },
  },
};
</script>

<style scoped lang="scss">


/* 我的推广 */
.promotion .first {
  padding: 53rpx 0 42rpx;
  background: url(getAssetsPath("/wap/first/zsff/images/promotion.png")) center/cover
    no-repeat;
}

.promotion .first > view:first-child {
  font-size: 26rpx;
  line-height: 37rpx;
  text-align: center;
  color: #ffffff;
}

.promotion .first > view:nth-child(2) {
  margin-top: 14rpx;
  font-weight: 500;
  font-size: 80rpx;
  line-height: 97rpx;
  text-align: center;
  color: #ffffff;
}

.promotion .first > view:last-child {
  display: flex;
  margin-top: 72rpx;
}

.promotion .first .item {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.promotion .first .item view:first-child {
  font-weight: 500;
  font-size: 40rpx;
  line-height: 48rpx;
  text-align: center;
  color: #ffffff;
}

.promotion .first .item view:last-child {
  margin-top: 4rpx;
  font-size: 24rpx;
  line-height: 33rpx;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.promotion .second {
  display: flex;
  background: #ffffff;
}

.promotion .second .second-child {
  position: relative;
  flex: 1;
  font-size: 30rpx;
  line-height: 110rpx;
  text-align: center;
  color: #2c8eff;
}

.promotion .second .second-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  background: #f5f5f5;
}

.promotion .second .second-child:first-child::before {
  display: none;
}

.promotion .second text {
  display: inline-block;
  padding-left: 48rpx;
  background: left center/34rpx 34rpx no-repeat;
  vertical-align: middle;
  line-height: 42rpx;
}

.promotion .second .second-child:first-child text {
  background-image: url(getAssetsPath("/wap/first/zsff/images/promotion1.png"));
}

.promotion .second .second-child:last-child text {
  background-image: url(getAssetsPath("/wap/first/zsff/images/promotion2.png"));
}

.promotion .third {
  margin-top: 20rpx;
  background: #ffffff;
}

.promotion .third navigator {
  display: flex;

  justify-content: space-between;

  align-items: center;
  padding: 34rpx 30rpx;
  border-top: 1px solid #f5f5f5;
  font-weight: 500;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #282828;
}

.promotion .third a:first-child {
  border: 0;
}

.promotion .third .iconfont {
  font-size: 22rpx;
  color: #999999;
}
</style>