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.headPhoto" :src="accountInfo.headPhoto"></image>
              <image v-else :src="$defaultAvatar" class="pc-avatar" mode="aspectFill" />
              <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.invitationCode }}</text>
                  <text class="u-FF0000" @click="copy(accountInfo.invitationCode)">复制</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">&#xe634;</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.balance)"></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">&#xe614;</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">{{ accountInfo.partnerNum || 0 }}</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">&#xe645;</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">&#xe671;</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.weekNum || 0
                  }}</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.monthNum || 0 }}
                  </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";
import { distributionUserOrderGainsCount_Api } from "@/api/agencyCenter.js";
import { userInfo } from "@/api/login.js";


const loading = ref(true);
const accountInfo = ref({}); // 用户信息
const userordergains = ref({}); // 分销订单

// 获取用户信息
const getUserInfo = () => {
  userInfo().then((res) => {
    uni.stopPullDownRefresh();
    if (res && res.code == 200) {
      accountInfo.value = res.data || {};
    }
  });
}

// 获取会员的时间范围内内的分销订单数
const getCount_Api = (type) => {
  distributionUserOrderGainsCount_Api(type).then((res) => {
    if (res && res.code == 200) {
      if (type == "week") {
        userordergains.value.weekNum = res.data || 0;
      } else if (type == "month") {
        userordergains.value.monthNum = res.data || 0;
      }
    }
  });
}

// 生命周期
onShow((options) => {
  getUserInfo();
  getCount_Api("week");
  getCount_Api("month");
});

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

// 提现
const goWithdrawDeposit = () => {
  uni.navigateTo({
    url: "/pages/user/wallet/reflect?pageType=2",
  });
};

// 转入余额
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: #fa6138;
  }

  .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: #fa6138;
      }
    }
  }

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

    .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>