270 lines
9.4 KiB
Vue
270 lines
9.4 KiB
Vue
<script setup>
|
||
import {defineAsyncComponent, onMounted, reactive, 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/yqhy.png';
|
||
import ICON5 from '../../static/icons/zhgl.png';
|
||
import ICON6 from '../../static/icons/lxkf.png';
|
||
import ICON7 from '../../static/icons/xxts.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 {copy, toPage} from "../../utils/uils.js";
|
||
import {useUserStore} from "../../pinia/UserStore/index.js";
|
||
import AddCustomerServiceModal from "../../components/AddCustomerServiceModal.vue";
|
||
import OpenTypeFun from "../../components/OpenTypeFun.js";
|
||
import Api from "../../api/index.js";
|
||
|
||
// #ifdef APP-PLUS
|
||
// #endif
|
||
|
||
// #ifndef APP-PLUS
|
||
const MyTeam = defineAsyncComponent(() => import('./components/MyTeam.vue'));
|
||
const Inviter = defineAsyncComponent(() => import('./components/Inviter.vue'));
|
||
const AccompanyingMentor = defineAsyncComponent(() => import('./components/AccompanyingMentor.vue'));
|
||
// #endif
|
||
|
||
const tabCur = ref('MyTeam');
|
||
const advList = reactive([]);
|
||
const tabs = [
|
||
{
|
||
key: 'MyTeam',
|
||
name: '我的团队',
|
||
component: MyTeam,
|
||
},
|
||
{
|
||
key: 'Inviter',
|
||
name: '邀请人',
|
||
component: Inviter,
|
||
},
|
||
{
|
||
key: 'AccompanyingMentor',
|
||
name: '陪跑导师',
|
||
component: AccompanyingMentor,
|
||
},
|
||
]
|
||
|
||
const UserStore = useUserStore();
|
||
const state = reactive({
|
||
showAddCustomer: false,
|
||
});
|
||
|
||
onMounted(() => {
|
||
UserStore.getUserInfo();
|
||
Api.system.getAdvList({
|
||
position: 2,
|
||
}).then(({data}) => {
|
||
advList.length = 0;
|
||
advList.push(...data);
|
||
});
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<!--我的-->
|
||
<x-nav :show-back="false"></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] rounded-[50%]" :src="UserStore.userInfo?.avatar" mode="aspectFill"></image>
|
||
<view class="!flex flex-col items-start justify-between box-border py-[4rpx]">
|
||
<view class="user_name">{{ UserStore?.userInfo?.nickname }}</view>
|
||
<view class="user_phone">手机号：{{ UserStore?.userInfo?.mobile }}</view>
|
||
<view class="user_phone" @click="copy(UserStore?.userInfo?.uid)">uid：{{
|
||
UserStore?.userInfo?.uid
|
||
}}
|
||
</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" @click="toPage('/pages/wallet/index')">
|
||
<view class="py-[52rpx] px-[44rpx] !grid grid-cols-2">
|
||
<view>
|
||
<view class="info-title">总收益（元）</view>
|
||
<view class="info-balance">
|
||
{{ UserStore?.userInfo?.total_money.toFixed(2) }}
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="info-title">可提现（元）</view>
|
||
<view class="info-balance">
|
||
{{ UserStore?.userInfo?.money.toFixed(2) }}
|
||
</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">{{
|
||
UserStore?.userInfo?.withraw_money.toFixed(2)
|
||
}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="px-[34rpx] py-[20rpx] !flex justify-between">
|
||
<view class="!flex items-center gap-[12rpx]" @click="toPage('/pages/withdrawalLog/index')">
|
||
<image class="!size-[40rpx]" mode="aspectFill" :src="ICON1"></image>
|
||
<view class="test-24r">提现记录</view>
|
||
</view>
|
||
<view class="!flex items-center gap-[12rpx]" @click="toPage('/pages/walletLog/index')">
|
||
<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="rounded-[20rpx] !mx-[20rpx] !mt-[20rpx]">
|
||
<swiper class="!h-[120rpx] !w-full overflow-hidden rounded-[8rpx]">
|
||
<swiper-item class="!w-full !h-full" v-for="i in advList">
|
||
<image @click="OpenTypeFun(i)" class="!w-full !h-full" mode="aspectFill" :src="i.file"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</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]"
|
||
@click="toPage('/pages/InviteFriends/index')">
|
||
<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]"
|
||
@click="toPage('/pages/accountManagement/index')">
|
||
<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]" @click="state.showAddCustomer=true">
|
||
<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>
|
||
|
||
<add-customer-service-modal v-model:show="state.showAddCustomer"></add-customer-service-modal>
|
||
</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>
|