applet/pages/distribution/partner.vue

<template>
  <view class="container">
    <view class="partner">
      <image
        class="top-bg"
        :src="$mConfig.staticUrl + '/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.head_photo"
                :src="accountInfo.head_photo"
              ></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
                }}</view>
              </view>
            </view>
            <view class="u-font24 u-999 u-mt10"
              >直接伙伴：<text class="u-FF0000">{{ num }}</text
              >人
            </view>
          </view>
        </view>
        <view class="partner-list">
          <image
            class="partner-bg"
            :src="$mConfig.staticUrl + '/partner-bg.png'"
          ></image>
          <view class="position-ab">
            <view v-if="partnerList.length > 0">
              <view
                class="item u-plr30"
                v-for="(item, index) in partnerList"
                :key="item.id"
              >
                <view class="u-flex u-border-one-one pd44">
                  <image
                    class="u-avatar106"
                    v-if="item.head_photo"
                    :src="item.head_photo"
                  ></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.register_time }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view
              class="nogoods u-mt30 u-flex-column-center"
              v-if="partnerList.length == 0"
            >
              <nodata :config="{ top: 5, content: '暂无数据~' }"></nodata>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const num = ref(0);
const partnerList = ref([]);
const accountInfo = ref({});

onLoad(() => {
  //获取用户信息
  uni.$http.get("/account/getAccountInfo").then((res) => {
    if (res && res.code == 200) {
      accountInfo.value = res.data;
    }
  });
  //获取伙伴列表
  uni.$http.get("/account/myPartner").then((res) => {
    if (res && res.code == 200) {
      num.value = res.num;
      partnerList.value = res.data;
    }
  });
});
</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>