applet/pages/distribution/index.vue

<template>
  <view class="container">
    <view class="distribution">
      <view class="bg"></view>
      <view class="userInfo">
        <view class="u-plr30">
          <view class="head u-flex-center-sb">
            <view class="u-flex">
              <image
                v-if="accountInfo.head_photo"
                :src="accountInfo.head_photo"
              ></image>
              <image v-else :src="$defaultAvatar()" mode=""></image>
              <view class="u-ml30 u-mt15">
                <view class="u-font30 u-1A1A1A u-text1" style="width: 350rpx">{{
                  accountInfo.nickname
                }}</view>
                <view class="u-mt5 u-font24"
                  >邀请码:
                  <text class="u-mr30">{{ accountInfo.invitation_code }}</text>
                  <text
                    class="u-FF0000"
                    @click="copy(accountInfo.invitation_code)"
                    >复制</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="u-plr30">
          <view class="list-item u-mt30">
            <view class="u-flex">
              <view class="iconfont bg-E8F9EF">&#xeb99;</view>
              <!-- 可提现 -->
              <text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15"
                >可提现金额</text
              >
            </view>
            <view class="bg-fff u-mt20 u-flex-center-sb">
              <view class="u-00BF5A u-bold u-font36 u-flex">
                <rich-text
                  :nodes="$mUtil.priceBigSmall(accountInfo.commission_able)"
                ></rich-text>
              </view>
              <view class="u-flex-center">
                <view class="wd-btn" @click="goWithdrawDeposit">
                  <button class="u-font24">点击提现</button>
                </view>
                <view class="wd-btn u-ml10 bgc" @click="goWithdrawDeposittwo">
                  <button class="u-font24">转入余额</button>
                </view>
              </view>
            </view>
          </view>
          <view class="list-item u-mt30">
            <view class="u-flex">
              <view class="iconfont bg-E8F9EF">&#xe673;</view>
              <text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15"
                >我的伙伴</text
              >
            </view>
            <view class="bg-fff u-mt20 u-flex-center-sb" @click="goPartner">
              <view>直接伙伴</view>
              <view>
                <text class="u-FF0000">{{ num }}</text> 人
                <text class="iconfont u-font24 u-999 u-ml15">&#xe6c7;</text>
              </view>
            </view>
          </view>
          <view class="list-item u-mt30">
            <view class="u-flex-center-sb">
              <view class="u-flex-center">
                <view class="iconfont bg-E8F9EF">&#xe63c;</view>
                <text class="u-bold u-font28 u-1A1A1A u-ml15 u-mt15"
                  >分销订单</text
                >
              </view>
              <view class="u-flex-center" @click="getMoenyList">
                <text class="u-font24 u-999">历史订单</text>
                <text class="iconfont u-font24 u-999 u-mr30">&#xe6c7;</text>
              </view>
            </view>
            <view class="bg-fff u-mt20 u-flex-center-sa">
              <view>
                <view>本周订单</view>
                <view class="u-text-center u-mt10">
                  <text class="u-00BF5A u-bold">{{
                    userordergains.week_user_order_gains_num
                  }}</text>
                  <text class="u-font20 u-666 u-ml5">单</text>
                </view>
              </view>
              <view>
                <view>本月订单</view>
                <view class="u-text-center u-mt10">
                  <text class="u-00BF5A u-bold">
                    {{ userordergains.month_user_order_gains_num }}
                  </text>
                  <text class="u-font20 u-666 u-ml5">单</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
const $http = uni.$http;
const $mUtil = uni.$mUtil;

const loading = ref(true);
const accountInfo = ref({}); // 用户信息
const num = ref(0); // 伙伴个数
const userordergains = ref({}); // 分销订单

// 生命周期
onShow((options) => {
    return
  // 获取用户信息
  $http.get("/account/getAccountInfo").then((res) => {
    if (res && res.code == 200) {
      accountInfo.value = res.data;
    }
  });

  // 获取伙伴个数
  $http.get("/account/myPartnerNum").then((res) => {
    if (res && res.code == 200) {
      num.value = res.data;
    }
  });

  // 获取分销订单
  $http.get("/userordergains/slim-statistics").then((res) => {
    loading.value = false;
    if (res && res.code == 200) {
      userordergains.value = res.data;
    }
  });
});

// 方法
// 分润订单
const getMoenyList = () => {
  uni.navigateTo({
    url: "moneyList",
  });
};

// 提现
const goWithdrawDeposit = () => {
  uni.navigateTo({
    url: "withdraw",
  });
};

// 转入余额
const goWithdrawDeposittwo = () => {
  uni.navigateTo({
    url: "withdrawTwo",
  });
};

// 我的伙伴
const goPartner = () => {
  uni.navigateTo({
    url: "partner",
  });
};

// 复制邀请码
const copy = (code) => {
  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: "复制成功",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.distribution {
  position: relative;
  view {
    font-size: 28rpx;
  }
  .bg {
    width: 100%;
    height: 185rpx;
    background-color: #00bf5a;
  }

  .userInfo {
    position: absolute;
    top: 68rpx;
    width: 100%;

    .head {
      background-color: #fffaee;
      padding: 40rpx 30rpx 36rpx;
      border-radius: 20rpx;

      image {
        width: 106rpx;
        height: 106rpx;
        border: 4rpx solid #ffffff;
        border-radius: 50%;
      }

      .font80 {
        font-size: 80rpx;
        color: #00bf5a;
      }
    }
  }

  .list-item {
    .bg-E8F9EF {
      background-color: #e8f9ef;
      color: #00bf5a;
      padding: 10rpx;
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 50%;
    }

    .bg-fff {
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 30rpx;
      border-radius: 20rpx;
      box-shadow: 0 0 20rpx #eee;

      .wd-btn button {
        width: 175rpx;
        height: 60rpx;
        border-radius: 30px;
        background-color: #f7f7f7;
      }
    }
  }
}
</style>