root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-04-14 11:42:21 +08:00
parent b614f2482e
commit a706b60c90
30 changed files with 700 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/user/components/AccompanyingMentor.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>

23
src/pages/user/components/Inviter.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
import Avatar from '../../../static/images/Avatar.png'
</script>
<template>
<view class="p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !mt-[40rpx] !flex items-center">
<image class="!size-[64rpx]" mode="aspectFill" :src="Avatar"></image>
<view class="test-24r !ml-[24rpx]">Adam</view>
<view
class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[var(--primary-color)] !flex items-center justify-center !ml-auto">
联系TA
</view>
<view
class="px-[20rpx] py-[7rpx] test-22r text-[#fff] rounded-full bg-[#C9CDD4] !flex items-center justify-center !ml-[20rpx]">
投诉
</view>
</view>
</template>
<style scoped lang="scss">
</style>

55
src/pages/user/components/MyTeam.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup>
</script>
<template>
<view class="!mt-[40rpx] p-[20rpx] bg-[#F2F3F5] rounded-[16rpx] !flex items-center">
<view class="invitationCode">
我的邀请码：
</view>
<view class="invitationCodeValue">
123445
</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]">323</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]">323</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]">323</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>

181
src/pages/user/index.vue
View File

@@ -1,8 +1,40 @@
<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>
@@ -12,7 +44,7 @@ import CreditScore from "../../components/CreditScore.vue";
<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="test !w-full relative z-10 p-[20rpx] !flex gap-[34rpx] relative">
<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>
@@ -20,19 +52,162 @@ import CreditScore from "../../components/CreditScore.vue";
<view class="user_phone">uid：38578</view>
</view>
<credit-score></credit-score>
<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]">编辑</view>
<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]">
<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]">
<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;