xl-mobile/src/pages/user/components/MyTeam.vue

<script setup>
import {onMounted, reactive} from "vue";
import {useUserStore} from "../../../pinia/UserStore/index.js";
import Api from "../../../api/index.js";

const UserStore = useUserStore();
const detail = reactive({});

onMounted(() => {
    Api.system.myTeamInfo().then(({data}) => {
        Object.assign(detail, data);
    });
})
</script>

<template>
    <view class="!mt-[40rpx] p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !flex items-center">
        <view class="invitationCode">
            我的邀请码：
        </view>
        <view class="invitationCodeValue">
            {{ UserStore?.userInfo?.invite }}
        </view>
        <view class="view-detail !ml-auto">查看团队详情></view>
    </view>

    <view class="!mt-[24rpx] !grid grid-cols-3 gap-[22rpx]">
        <view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
            <view class="test-22r text-[#86909C]">人数</view>
            <view class="test-36r text-[#165DFF]">{{ detail.count }}</view>
        </view>
        <view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
            <view class="test-22r text-[#86909C]">团队收益</view>
            <view class="test-36r text-[#165DFF]">{{ detail.income }}</view>
        </view>
        <view class="rounded-[16rpx] bg-[#E8F3FF] p-[20rpx] !flex gap-[6rpx] flex-col">
            <view class="test-22r text-[#86909C]">团队奖励</view>
            <view class="test-36r text-[#165DFF]">{{ detail.reward }}</view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.view-detail {
    color: rgb(29, 33, 41);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.invitationCode {
    color: rgb(78, 89, 105);
    font-size: 12px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
}

.invitationCodeValue {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
}
</style>