feat: 完善个人资料页面，添加用户信息和钱包余额展示，优化应用列表和操作按钮
This commit is contained in:
@@ -1,30 +1,260 @@
|
||||
<script lang='ts' setup>
|
||||
import {
|
||||
alertCircleOutline,
|
||||
arrowDownOutline,
|
||||
arrowUpOutline,
|
||||
cardOutline,
|
||||
chatbubblesOutline,
|
||||
chevronForwardOutline,
|
||||
documentTextOutline,
|
||||
exitOutline,
|
||||
homeOutline,
|
||||
listOutline,
|
||||
locationOutline,
|
||||
lockClosedOutline,
|
||||
personOutline,
|
||||
settingsOutline,
|
||||
shieldCheckmarkOutline,
|
||||
walletOutline,
|
||||
} from "ionicons/icons";
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({
|
||||
name: "周少华",
|
||||
phone: "138****1234",
|
||||
inviteCode: "ABCD1234",
|
||||
avatar: "@/assets/images/avatar.jpg",
|
||||
});
|
||||
|
||||
// 钱包余额
|
||||
const wallet = ref({
|
||||
profitBalance: 15286.50, // 收益钱包余额
|
||||
accountBalance: 32150.80, // 账户余额
|
||||
});
|
||||
|
||||
// 我的应用列表
|
||||
const myApps = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "实名认证",
|
||||
icon: shieldCheckmarkOutline,
|
||||
color: "#c32120",
|
||||
path: "/real-name",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "收货地址",
|
||||
icon: locationOutline,
|
||||
color: "#c32120",
|
||||
path: "/address",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "收款方式",
|
||||
icon: cardOutline,
|
||||
color: "#c32120",
|
||||
path: "/payment",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "在线客服",
|
||||
icon: chatbubblesOutline,
|
||||
color: "#c32120",
|
||||
path: "/customer-service",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "个人设置",
|
||||
icon: settingsOutline,
|
||||
color: "#c32120",
|
||||
path: "/settings",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "安全中心",
|
||||
icon: lockClosedOutline,
|
||||
color: "#c32120",
|
||||
path: "/security",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "资产明细",
|
||||
icon: listOutline,
|
||||
color: "#c32120",
|
||||
path: "/asset-details",
|
||||
},
|
||||
]);
|
||||
|
||||
function handleRecharge() {
|
||||
console.log("快捷充值");
|
||||
// TODO: 实现充值功能
|
||||
}
|
||||
|
||||
function handleWithdraw() {
|
||||
console.log("快捷提现");
|
||||
// TODO: 实现提现功能
|
||||
}
|
||||
|
||||
function handleAppClick(app: any) {
|
||||
console.log("点击应用:", app.name);
|
||||
// TODO: 跳转到对应页面
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
console.log("退出登录");
|
||||
// TODO: 实现退出登录功能
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-content>
|
||||
<img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
|
||||
<!-- 顶部横幅和用户信息 -->
|
||||
<div class="relative -z-1">
|
||||
<img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
|
||||
|
||||
<div class="absolute top-10 left-5 flex-center gap-3">
|
||||
<ion-avatar class="size-18">
|
||||
<img alt="Silhouette of a person's head" src="@/assets/images/avatar.jpg">
|
||||
</ion-avatar>
|
||||
<div>
|
||||
<div class="text-primary text-xl font-bold">
|
||||
周少华
|
||||
</div>
|
||||
<div class="text-primary text-sm font-semibold">
|
||||
手机号：138****1234
|
||||
</div>
|
||||
<div class="text-primary text-sm font-semibold">
|
||||
邀请码：ABCD1234
|
||||
<div class="absolute top-10 left-5 flex items-center gap-3">
|
||||
<ion-avatar class="size-18 border-3 border-white shadow-lg">
|
||||
<img alt="用户头像" src="@/assets/images/avatar.jpg">
|
||||
</ion-avatar>
|
||||
<div>
|
||||
<div class="text-primary text-xl font-bold">
|
||||
{{ userInfo.name }}
|
||||
</div>
|
||||
<div class="text-primary text-sm font-semibold opacity-90">
|
||||
手机号：{{ userInfo.phone }}
|
||||
</div>
|
||||
<div class="text-primary text-sm font-semibold opacity-90">
|
||||
邀请码：{{ userInfo.inviteCode }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ion-padding">
|
||||
<!-- 钱包余额卡片 -->
|
||||
<section class="mb-4 -mt-12">
|
||||
<div class="card rounded-2xl shadow-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<ion-icon :icon="walletOutline" class="text-2xl text-[#c41e3a]" />
|
||||
<div class="text-lg font-bold text-[#1a1a1a] m-0">
|
||||
我的钱包
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 余额展示 -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
|
||||
<div class="text-xs mb-1">
|
||||
收益钱包
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-[#c41e3a] mb-1">
|
||||
¥{{ wallet.profitBalance.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
|
||||
<div class="text-xs mb-1">
|
||||
账户余额
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-[#c41e3a] mb-1">
|
||||
¥{{ wallet.accountBalance.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作按钮 -->
|
||||
<div class="flex gap-3">
|
||||
<ion-button
|
||||
expand="block"
|
||||
class="flex-1 recharge-btn"
|
||||
@click="handleRecharge"
|
||||
>
|
||||
<ion-icon slot="start" :icon="arrowDownOutline" />
|
||||
快捷充值
|
||||
</ion-button>
|
||||
<ion-button
|
||||
expand="block"
|
||||
class="flex-1 withdraw-btn"
|
||||
fill="outline"
|
||||
@click="handleWithdraw"
|
||||
>
|
||||
<ion-icon slot="start" :icon="arrowUpOutline" />
|
||||
快捷提现
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 我的应用 -->
|
||||
<section class="mb-4">
|
||||
<div class="card rounded-2xl shadow-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<ion-icon :icon="homeOutline" class="text-2xl text-[#c41e3a]" />
|
||||
<div class="text-lg font-bold text-[#1a1a1a] m-0">
|
||||
我的应用
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 gap-y-5 gap-x-2">
|
||||
<div
|
||||
v-for="app in myApps"
|
||||
:key="app.id"
|
||||
class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
|
||||
@click="handleAppClick(app)"
|
||||
>
|
||||
<div
|
||||
class="app-item w-13 h-13 rounded-xl flex-center shadow-md"
|
||||
>
|
||||
<ion-icon :icon="app.icon" class="text-2xl text-white" />
|
||||
</div>
|
||||
<span class="text-xs text-[#333] font-medium text-center leading-tight">{{ app.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<section class="mb-5">
|
||||
<ion-button expand="block" fill="outline" @click="handleLogout">
|
||||
<ion-icon slot="start" :icon="exitOutline" />
|
||||
安全退出登录
|
||||
</ion-button>
|
||||
</section>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
<style lang='css' scoped>
|
||||
.card {
|
||||
background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
|
||||
}
|
||||
.recharge-btn {
|
||||
--background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
--background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
|
||||
--border-radius: 12px;
|
||||
--box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
--border-color: #c41e3a;
|
||||
--color: #c41e3a;
|
||||
--border-radius: 12px;
|
||||
--border-width: 2px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.withdraw-btn::part(native) {
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-item {
|
||||
background: linear-gradient(135deg, rgb(249 103 102 / 93%), rgb(195, 33, 32));
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user