335 lines
7.7 KiB
Vue
335 lines
7.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<base-background />
|
|
<!-- 使用自定义导航栏组件 -->
|
|
<custom-navbar ref="customNavbar" title="个人中心" />
|
|
<view class="user-info">
|
|
<view class="avatar-container">
|
|
<image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
|
|
</view>
|
|
<view class="user-details">
|
|
<text class="phone-number">{{ userInfo.nickName }}</text>
|
|
<view class="verification-status">
|
|
<text class="status-text">{{ realNameStatus }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
|
|
<!-- 用户信息区域 -->
|
|
|
|
<!-- 功能菜单区域 -->
|
|
<view class="menu-section">
|
|
<view
|
|
v-for="(item, index) in filteredMenuItems"
|
|
:key="index"
|
|
class="menu-item"
|
|
@click="handleMenuClick(item)"
|
|
>
|
|
<view class="menu-icon">
|
|
<image v-if="item.icon" :src="item.icon" mode="aspectFit" />
|
|
</view>
|
|
<text class="menu-text">{{ item.title }}</text>
|
|
<view class="menu-arrow">
|
|
<image :src="CommonEnum.RIGHT_CHEVRON" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { CommonEnum } from "@/enum/common.js";
|
|
import { getUserInfo } from "@/api/personalCenter/index.js";
|
|
import { isSysAdmin, logout } from "../../api/auth/auth";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
filteredMenuItems: "",
|
|
bgc: {
|
|
backgroundColor: "#F5F0E7",
|
|
},
|
|
CommonEnum,
|
|
SysAdmin: false,
|
|
// 加载状态
|
|
loading: false,
|
|
// 用户信息
|
|
userInfo: {
|
|
nickName: "",
|
|
isReal: "",
|
|
avatar: "",
|
|
},
|
|
// 菜单项数据
|
|
menuItems: [
|
|
{
|
|
title: "我的预约",
|
|
icon: CommonEnum.MY_APPOINTMENT,
|
|
path: "/pages/personalCenter/myAppointment",
|
|
},
|
|
{
|
|
title: "我的收藏",
|
|
icon: CommonEnum.MY_COLLECTION,
|
|
path: "/pages/personalCenter/myCollection",
|
|
},
|
|
{
|
|
title: "捐赠历史记录",
|
|
icon: CommonEnum.MY_DONOR,
|
|
path: "/pages/personalCenter/myDonationList",
|
|
},
|
|
{
|
|
title: "祈福记录",
|
|
icon: CommonEnum.MY_PRAY,
|
|
path: "/pages/personalCenter/myPrayRecordList",
|
|
},
|
|
{
|
|
title: "设备录入",
|
|
icon: CommonEnum.MY_ACTIVITY,
|
|
path: "/page_user/luru/index",
|
|
},
|
|
{
|
|
title: "牌位管理",
|
|
icon: "https://api.ccttiot.com/7ee81e0f35cde641f80887485f287e0c-1760513960519.png",
|
|
// 无图标，仅管理员可见
|
|
path: "/pages/memorial/adminMemorial",
|
|
},
|
|
{
|
|
title: "设置",
|
|
icon: "https://api.ccttiot.com/7ee81e0f35cde641f80887485f287e0c-1760513960519.png",
|
|
// 无图标，仅管理员可见
|
|
path: "/pages/personalCenter/set",
|
|
},
|
|
{
|
|
title: "退出登录",
|
|
icon: "https://api.ccttiot.com/0f4e09531ddffda3aff94a5fd2b5d7d4-1760514133937.png",
|
|
path: "/pages/login/login",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 页面加载时获取用户信息
|
|
this.loadUserInfo();
|
|
this.getIsSysAdmin();
|
|
},
|
|
methods: {
|
|
async getIsSysAdmin() {
|
|
const res = await isSysAdmin();
|
|
this.SysAdmin = res.data;
|
|
console.log("isSystem", this.SysAdmin);
|
|
this.filteredMenuItems = this.toFilteredMenuItems();
|
|
},
|
|
// 加载用户信息
|
|
async loadUserInfo() {
|
|
try {
|
|
const response = await getUserInfo();
|
|
|
|
if (response.code === 200) {
|
|
// 更新用户信息
|
|
this.userInfo = {
|
|
nickName: response.data.nickName,
|
|
isReal: response.data.isReal,
|
|
avatar: response.data.avatar,
|
|
};
|
|
console.log("this.userInfo ", this.userInfo);
|
|
} else {
|
|
console.warn("获取用户信息失败:", response.msg);
|
|
// 使用默认信息
|
|
}
|
|
} catch (error) {
|
|
console.error("获取用户信息失败:", error);
|
|
// 使用默认信息
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
// 处理菜单点击
|
|
handleMenuClick(item) {
|
|
console.log("点击菜单项:", item.title);
|
|
if (item.path === "/pages/login/login") {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定退出登录",
|
|
confirmText: "确定",
|
|
cancelText: "取消",
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
await logout();
|
|
uni.navigateTo({
|
|
url: "/pages/login/login",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
// 跳转到对应页面
|
|
if (item.path) {
|
|
uni.navigateTo({
|
|
url: item.path,
|
|
fail: (err) => {
|
|
console.error("页面跳转失败:", err);
|
|
uni.showToast({
|
|
title: "页面开发中",
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
}
|
|
},
|
|
toFilteredMenuItems() {
|
|
console.log("filteredMenuItems触发了:", this.SysAdmin);
|
|
// 非管理员隐藏：牌位录入、牌位管理
|
|
if (this.SysAdmin) return this.menuItems;
|
|
return this.menuItems.filter(
|
|
(item) => item.title !== "牌位录入" && item.title !== "牌位管理",
|
|
);
|
|
},
|
|
},
|
|
computed: {
|
|
realNameStatus() {
|
|
console.log("<this.userInfo.isReal>:", this.userInfo.isReal);
|
|
return this.userInfo.isReal.toString() === "true" ? "已实名" : "未实名";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
width: 650rpx;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
padding: 38rpx 50rpx 50rpx 50rpx;
|
|
background: #fffbf5;
|
|
border-radius: 20rpx;
|
|
border: 2rpx solid #c7a26d;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
// 用户信息区域
|
|
.user-info {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 50rpx;
|
|
margin: 52rpx 0 54rpx 0;
|
|
//border: red solid 2px;
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.user-details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.phone-number {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #695347;
|
|
margin-bottom: 16rpx;
|
|
line-height: 1.2;
|
|
text-align: left;
|
|
//border: red solid 2px;
|
|
}
|
|
|
|
.verification-status {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.status-text {
|
|
background: #c7a26d;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
// 菜单区域
|
|
.menu-section {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.menu-item {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
margin-bottom: 20rpx;
|
|
background: #faf8f3;
|
|
border-radius: 16rpx;
|
|
//border: 1rpx solid #d8189b;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: #f0e8d8;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 60rpx;
|
|
height: 100rpx;
|
|
margin-right: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
//border: 1rpx solid #d8189b;
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.menu-text {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #695347;
|
|
line-height: 100rpx;
|
|
text-align: left;
|
|
align-items: center;
|
|
//border: red solid 2px;
|
|
}
|
|
|
|
.menu-arrow {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
//border: red solid 2px;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
</style>
|