<template>
|
<view class="my-container">
|
<!-- 用户信息卡片 -->
|
<view class="user-card">
|
<view class="user-info" @tap="navigateTo('/pages/my/profile')">
|
<image src="@/static/avatar/default.png" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<text class="name">{{ userInfo.name }}</text>
|
<text class="id">就诊卡号：{{ userInfo.cardNo }}</text>
|
</view>
|
</view>
|
<view class="vip-info" @tap="navigateTo('/pages/my/vip')">
|
<text class="level">{{ userInfo.vipLevel }}</text>
|
<text class="desc">查看会员权益 ></text>
|
</view>
|
</view>
|
|
<!-- 快速入口 -->
|
<view class="quick-access">
|
<view
|
class="access-item"
|
v-for="(item, index) in quickAccess"
|
:key="index"
|
@tap="navigateTo(item.path)"
|
>
|
<text class="count">{{ item.count }}</text>
|
<text class="label">{{ item.label }}</text>
|
</view>
|
</view>
|
|
<!-- 功能列表 -->
|
<view class="function-list">
|
<view class="section" v-for="(section, idx) in functionList" :key="idx">
|
<text class="section-title" v-if="section.title">{{
|
section.title
|
}}</text>
|
<view class="menu-list">
|
<view
|
class="menu-item"
|
v-for="(item, index) in section.items"
|
:key="index"
|
@tap="navigateTo(item.path)"
|
>
|
<view class="left">
|
<text class="iconfont" :class="item.icon"></text>
|
<text class="label">{{ item.label }}</text>
|
</view>
|
<view class="right">
|
<text class="value" v-if="item.value">{{ item.value }}</text>
|
<text class="tag" v-if="item.tag">{{ item.tag }}</text>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 退出登录 -->
|
<view class="logout-btn" @tap="handleLogout"> 退出登录 </view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
|
// 用户信息
|
const userInfo = ref({
|
name: "小毛🥚",
|
avatar: "@/static/avatar/default.png",
|
cardNo: "1234567890",
|
vipLevel: "VIP 99",
|
});
|
|
// 快速入口
|
const quickAccess = ref([
|
{ label: "待就诊", count: 1, path: "/pages/appointment/record" },
|
{ label: "待付款", count: 2, path: "/pages/payment/record" },
|
{ label: "待评价", count: 3, path: "/pages/my/reviews" },
|
{ label: "优惠券", count: 5, path: "/pages/my/coupons" },
|
]);
|
|
// 功能列表
|
const functionList = ref([
|
{
|
title: "就医服务",
|
items: [
|
{
|
label: "挂号记录",
|
icon: "icon-record",
|
path: "/pages/appointment/record",
|
},
|
{
|
label: "缴费记录",
|
icon: "icon-payment",
|
path: "/pages/payment/record",
|
},
|
{
|
label: "就医记录",
|
icon: "icon-medical",
|
path: "/pages/records/medical",
|
},
|
{
|
label: "就诊人管理",
|
icon: "icon-contacts",
|
path: "/pages/patient/list",
|
value: "已添加3人",
|
},
|
],
|
},
|
{
|
title: "健康服务",
|
items: [
|
{
|
label: "健康档案",
|
icon: "icon-health",
|
path: "/pages/my/health-records",
|
},
|
{
|
label: "检查报告",
|
icon: "icon-report",
|
path: "/pages/records/reports",
|
tag: "新",
|
},
|
],
|
},
|
{
|
title: "账户设置",
|
items: [
|
{
|
label: "实名认证",
|
icon: "icon-verify",
|
path: "/pages/my/verify",
|
value: "已认证",
|
},
|
{
|
label: "支付方式",
|
icon: "icon-wallet",
|
path: "/pages/my/payment-method",
|
},
|
{
|
label: "消息通知",
|
icon: "icon-notification",
|
path: "/pages/my/notification",
|
},
|
],
|
},
|
{
|
items: [
|
{
|
label: "客服中心",
|
icon: "icon-service",
|
path: "/pages/my/service",
|
},
|
{
|
label: "设置",
|
icon: "icon-settings",
|
path: "/pages/my/settings",
|
},
|
],
|
},
|
]);
|
|
// 页面跳转
|
const navigateTo = (url) => {
|
uni.navigateTo({
|
url,
|
fail: (err) => {
|
console.error("导航失败:", err);
|
// 如果导航失败，尝试使用 redirectTo
|
uni.redirectTo({
|
url,
|
fail: (err2) => {
|
console.error("重定向失败:", err2);
|
},
|
});
|
},
|
});
|
};
|
|
// 退出登录
|
const handleLogout = () => {
|
uni.showModal({
|
title: "提示",
|
content: "确定要退出登录吗？",
|
success: (res) => {
|
if (res.confirm) {
|
// 清除登录状态
|
uni.clearStorageSync();
|
// 跳转到登录页
|
uni.reLaunch({
|
url: "/pages/login/index",
|
});
|
}
|
},
|
});
|
};
|
</script>
|
|
<style lang="scss">
|
.my-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding-bottom: 40rpx;
|
|
.user-card {
|
background: $primary-gradient;
|
padding: 40rpx 30rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
|
.avatar {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
margin-right: 20rpx;
|
}
|
|
.info {
|
.name {
|
font-size: 36rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.id {
|
font-size: 26rpx;
|
color: rgba(255, 255, 255, 0.9);
|
}
|
}
|
}
|
|
.vip-info {
|
text-align: right;
|
|
.level {
|
font-size: 32rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 24rpx;
|
color: rgba(255, 255, 255, 0.9);
|
}
|
}
|
}
|
|
.quick-access {
|
margin: -40rpx 20rpx 0;
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20rpx;
|
box-shadow: $shadow-sm;
|
|
.access-item {
|
text-align: center;
|
|
.count {
|
font-size: 36rpx;
|
color: $primary-color;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
|
.function-list {
|
margin-top: 20rpx;
|
|
.section {
|
margin-bottom: 20rpx;
|
|
.section-title {
|
font-size: 28rpx;
|
color: $text-secondary;
|
padding: 20rpx 30rpx;
|
}
|
|
.menu-list {
|
background: #fff;
|
|
.menu-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.iconfont {
|
font-size: 40rpx;
|
color: $primary-color;
|
margin-right: 20rpx;
|
}
|
|
.label {
|
font-size: 30rpx;
|
color: $text-primary;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.value {
|
font-size: 26rpx;
|
color: $text-secondary;
|
margin-right: 12rpx;
|
}
|
|
.tag {
|
font-size: 22rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 12rpx;
|
}
|
|
.icon-arrow-right {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
&:active {
|
background: darken(#fff, 2%);
|
}
|
}
|
}
|
}
|
}
|
|
.logout-btn {
|
margin: 40rpx 30rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
font-size: 30rpx;
|
color: $danger;
|
background: #fff;
|
border-radius: $radius-lg;
|
|
&:active {
|
background: darken(#fff, 2%);
|
}
|
}
|
}
|
</style>
|
