heshui_shop_frontend/pages/commission/teamNew.vue

<!-- 我的团队  -->
<template>
  <s-layout class="my" title="我的团队" :bgStyle="bgStyle" onShareAppMessage>
    <view class="my-team">
      <view class="my-team-num">团队总数：{{ state.team_total }}人</view>
      <view class="my-team-friend">我的好友总数：{{ state.son_total }}人</view>
    </view>
    <view class="my-card" v-if="state.teamList.length > 0">
      <view class="my-card-item" v-for="item in state.teamList" :key="item.id">
        <view class="my-card-item-top ss-flex ss-col-center ss-row-between ss-m-b-15">
          <view class="my-card-item-top-left ss-flex ss-col-center ss-row-between">
            <image class="my-card-item-top-left-image" :src="sheep.$url.cdn(item.avatar)" />
            <view class="my-card-item-top-left-info">
              <view>{{ item.username }} <text>{{ item.agent.level_info.name }}</text></view>
              <view>{{ item.mobile }}</view>
            </view>
          </view>
          <view class="my-card-item-top-right">团队人数：<text>{{ item.nextUserCount }}人</text></view>
        </view>
        <view class="my-card-item-bottom">加入时间：{{ item.jointime }}</view>
      </view>
    </view>
    <s-empty v-if="state.teamList.length === 0" text="暂无数据" icon="/static/data-empty.png" />
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onShow } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  // 
  const state = reactive({
    teamList: [],
    son_total: 0,
    team_total: 0,
  });


  const bgStyle = {
    color: '#f2f2f2',
  };

  async function getTeamInfo() {
    let { code, data: { son_total, team_total, list } } = await sheep.$api.commission.myTeam();
    if(`${code}` === '1') {
      state.teamList = list;
      state.son_total = son_total;
      state.team_total = team_total;
    }
  }

  onShow(() => {
    getTeamInfo();
  });
</script>

<style lang="scss" scoped>
  :deep(.page-main) {
    background-size: 100% 100% !important;
  }
  .my {
    &-team {
      height: 188rpx;
      background-color: #DFF7F0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-num {
        margin-bottom: 15rpx;
      }
      &-num, &-friend {
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
      }
    }
    &-card {
      padding: 26rpx 25rpx;
      &-item {
        background: #fff;
        border-radius: 15rpx 15rpx 15rpx 15rpx;
        padding: 38rpx 40rpx 34rpx;
        margin-bottom: 15rpx;
        &-top {
          padding-bottom: 38rpx;
          border-bottom: 1rpx solid #eee;
          &-left {
            &-image {
              width: 84rpx;
              height: 83rpx;
              border-radius: 15rpx;
              margin-right: 20rpx;
            }
            &-info {
              view:first-child {
                font-weight: 500;
                font-size: 26rpx;
                color: #000;
                text {
                  font-weight: 400;
                  font-size: 18rpx;
                  color: #FFFFFF;
                  background: var(--ui-BG-Main);
                  color: #fff;
                  padding: 5rpx 10rpx;
                  border-radius: 14rpx 14rpx 14rpx 14rpx;
                }
              }
              view:last-child {
                font-weight: 400;
                font-size: 24rpx;
                color: #898989;
              }
            }
          }
          &-right {
            font-weight: 400;
            font-size: 20rpx;
            color: #000000;
            text {
              color: var(--ui-BG-Main);
            }
          }
        }
        &-bottom {
          font-weight: 400;
          font-size: 20rpx;
          color: #898989;
          padding: 34rpx 0 0;
        }
      }
    }
  } 
</style>