xl-mobile/src/pages/user/index.vue

<script setup>
import {defineAsyncComponent, ref} from 'vue';
import ICON1 from '../../static/icons/icon_提现记录.png';
import ICON2 from '../../static/icons/icon_变动记录.png';
import ICON3 from '../../static/icons/icon_我的钱包.png';
import ICON4 from '../../static/icons/邀请好友.png';
import ICON5 from '../../static/icons/账号管理.png';
import ICON6 from '../../static/icons/联系客服.png';
import ICON7 from '../../static/icons/消息推送.png';
import Avatar from "../../static/images/Avatar.png";
import user_BG from '../../static/images/user_bg.png';
import XNav from "../../components/XNav.vue";
import CreditScore from "../../components/CreditScore.vue";
import {toPage} from "../../utils/uils.js";

const MyTeam = defineAsyncComponent(() => import('./components/MyTeam.vue'));
const Inviter = defineAsyncComponent(() => import('./components/Inviter.vue'));
const AccompanyingMentor = defineAsyncComponent(() => import('./components/AccompanyingMentor.vue'));

const tabCur = ref('MyTeam');
const tabs = [
    {
        key: 'MyTeam',
        name: '我的团队',
        component: MyTeam,
    },
    {
        key: 'Inviter',
        name: '邀请人',
        component: Inviter,
    },
    {
        key: 'AccompanyingMentor',
        name: '陪跑导师',
        component: AccompanyingMentor,
    },
]
</script>

<template>
    <!--我的-->
    <x-nav></x-nav>

    <view class="!w-full !h-[484rpx] overflow-hidden relative">
        <image class="!w-[1200rpx] !h-[480rpx] !absolute left-[-200rpx]" :src="user_BG" mode="aspectFill"></image>

        <view class="!w-full relative z-10 p-[20rpx] !flex gap-[34rpx] justify-between">
            <image class="!size-[132rpx]" :src="Avatar" mode="aspectFill"></image>
            <view class="!flex flex-col items-start justify-between box-border py-[4rpx]">
                <view class="user_name">用户名称</view>
                <view class="user_phone">手机号：1570****061</view>
                <view class="user_phone">uid：38578</view>
            </view>

            <credit-score class="!mr-[110rpx] !ml-auto"></credit-score>

            <view
                class="bg-[rgba(0,0,0,.8)] text-[#fff] absolute right-0 py-[7rpx] w-[120rpx] rounded-l-full !flex items-center justify-center gap-[4rpx]"
                style="font-size: 22rpx">
                <tui-icon name="edit" size="16"></tui-icon>
                <view class="!mt-[2rpx]" @click="toPage('/pages/userInfo/index')">编辑</view>
            </view>
        </view>
    </view>

    <view class="!mx-[20rpx] relative !mt-[-300rpx] z-10 bg-[#fff] rounded-[20rpx]">
        <view class="balance-card">
            <view class="py-[52rpx] px-[44rpx] !grid grid-cols-2">
                <view>
                    <view class="info-title">总收益（元）</view>
                    <view class="info-balance">
                        24687.65
                    </view>
                </view>
                <view>
                    <view class="info-title">可提现（元）</view>
                    <view class="info-balance">
                        358.32
                    </view>
                </view>
            </view>
            <view class="gap-line"></view>
            <view class="py-[32rpx] px-[42rpx] !flex items-center gap-[20rpx]">
                <view class="info-title !mb-0">已提现（元）</view>
                <view class="info-balance" style="font-size: 28rpx">24239.33</view>
            </view>
        </view>

        <view class="px-[34rpx] py-[20rpx] !flex justify-between">
            <view class="!flex items-center gap-[12rpx]">
                <image class="!size-[40rpx]" mode="aspectFill" :src="ICON1"></image>
                <view class="test-24r">提现记录</view>
            </view>
            <view class="!flex items-center gap-[12rpx]">
                <image class="!size-[40rpx]" mode="aspectFill" :src="ICON2"></image>
                <view class="test-24r">变动记录</view>
            </view>
            <view class="!flex items-center gap-[12rpx]" @click="toPage('/pages/wallet/index')">
                <image class="!size-[40rpx]" mode="aspectFill" :src="ICON3"></image>
                <view class="test-24r">我的钱包</view>
            </view>
        </view>
    </view>

    <view class="h-[120rpx] rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx]"></view>

    <view class="rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx] py-[26rpx] px-[32rpx]">
        <view class="!flex gap-[64rpx]">
            <view v-for="item in tabs" :key="item.key"
                  :class="['tabs-item', tabCur === item.key ? 'tabs-item-cur' : '']"
                  @click="tabCur=item.key">{{ item.name }}
            </view>
        </view>

        <Suspense>
            <template #default>
                <component :is="tabs.find(v=>v.key===tabCur).component"></component>
            </template>

            <template #fallback>
                加载中...
            </template>
        </Suspense>
    </view>

    <view class="rounded-[20rpx] bg-[#fff] !mx-[20rpx] !mt-[20rpx] py-[26rpx] px-[32rpx]">
        <view class="test-28r !mb-[40rpx]" style="font-weight: 700;">其他内容</view>
        <view class="!grid grid-cols-4">
            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON4"></image>
                <view class="test-24r">邀请好友</view>
            </view>
            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON5"></image>
                <view class="test-24r">邀请好友</view>
            </view>
            <view class="!flex items-center flex-col justify-center gap-[12rpx]">
                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON6"></image>
                <view class="test-24r">联系客服</view>
            </view>
            <view class="!flex items-center flex-col justify-center gap-[12rpx]"
                  @click="toPage('/pages/messagePush/index')">
                <image class="!size-[84rpx]" mode="aspectFill" :src="ICON7"></image>
                <view class="test-24r">消息推送</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.tabs-item {
    color: rgb(134, 144, 156);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    transition: 500ms;
    position: relative;

    &::before {
        content: '';
        width: 12rpx;
        height: 12rpx;
        display: block;
        position: absolute;
        background-color: var(--primary-color);
        border-radius: 50%;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        opacity: 0;
        transition: 500ms;
    }
}

.tabs-item-cur {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;

    &::before {
        opacity: 1;
    }
}

.balance-card {
    border-radius: 20rpx;
    background: linear-gradient(90.00deg, rgb(109, 154, 225) 2.278%, rgb(98, 147, 224) 98.521%);

    .gap-line {
        height: 2px;
        width: 100%;
        background-color: rgba(232, 243, 255, 0.14);
    }

    .info-title {
        color: rgb(190, 218, 255);
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 16rpx;
    }

    .info-balance {
        color: rgb(255, 255, 255);
        font-size: 52rpx;
        font-weight: 500;
        letter-spacing: 0;
    }
}

.user_name {
    color: rgb(29, 33, 41);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0;
    text-align: center;
}

.user_phone {
    color: rgb(134, 144, 156);
    font-size: 22rpx;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
}
</style>