applet/pages/distribution/partner.vue

<template>
  <view class="container">
    <view class="partner">
      <image class="top-bg" src="/static/image/distribution-top-bg.png"></image>
      <view class="userInfo">
        <view class="u-plr30">
          <view class="head u-flex-sb">
            <view class="u-flex">
              <image v-if="accountInfo.headPhoto" :src="accountInfo.headPhoto"></image>
              <image v-else :src="$defaultAvatar" mode=""></image>

              <view class="u-ml30 u-mt10">
                <view class="u-font30 u-1A1A1A nickname u-text1">{{
                  accountInfo.nickname || accountInfo.realName
                }}</view>
              </view>
            </view>
            <view class="u-font24 u-999 u-mt10">直接伙伴：<text class="u-FF0000">{{ Total || 0 }}</text>人
            </view>
          </view>
        </view>
        <view class="partner-list">
          <image class="partner-bg" src="/static/image/partner-bg.png"></image>
          <view class="position-ab">
            <view v-if="RowsList.length > 0">
              <view class="item u-plr30" v-for="(item, index) in RowsList" :key="item.id">
                <view class="u-flex u-border-one-one pd44">
                  <image class="u-avatar106" v-if="item.headPhoto" :src="item.headPhoto"></image>
                  <image class="u-avatar106" v-else :src="$defaultAvatar"></image>
                  <view class="u-font24 u-999">
                    <view class="u-font28 u-1A1A1A ht36 u-text-width">{{
                      item.nickname
                    }}</view>
                    <view>
                      <rich-text :nodes="'*******' + $mUtil.cutOut(item.mobile)"></rich-text>
                    </view>
                    <view>绑定时间：{{ item.createTime }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="nogoods u-mt30 u-flex-column-center" v-if="RowsList.length == 0">
              <noData :config="{ top: 5, content: '暂无数据~' }"></noData>
              <loadMore v-if="RowsList.length > 0" :status="LoadStatus"></loadMore>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { userInfo } from "@/api/login.js";
import { partnerPage_Api } from "@/api/userInfo.js";
import { usePageData } from "@/hooks/usePageData"

const { RowsList, LoadStatus, initData, Total } = usePageData(partnerPage_Api);
const accountInfo = ref({});
const getUserInfo = () => {
  userInfo().then((res) => {
    if (res && res.code == 200) {
      accountInfo.value = res.data;
    }
  });
}

onLoad(() => {
  //获取用户信息
  getUserInfo();
  initData();
});
</script>

<style lang="scss">
.nickname {
  width: 300rpx;
}

.u-flex-sb {
  display: flex;
  justify-content: space-between;
}

.ht36 {
  height: 36rpx;
  line-height: 36rpx;
}

.partner {
  position: relative;

  .top-bg {
    width: 100%;
    height: 238rpx;
  }

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

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

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

  .partner-list {
    margin-top: -48rpx;
    position: relative;

    .partner-bg {
      height: 70vh;
      width: 100%;
    }

    .position-ab {
      position: absolute;
      top: 50rpx;
      width: 100%;
    }

    .pd44 {
      padding: 44rpx 0rpx;
    }
  }
}
</style>