WechatApp/pages/personal/index.vue

<template>
	<!-- 个人中心页面 -->
	<view class="content">
		<!-- 顶部 -->
		<view class="topBox">
			<image :src="getFileUrl('img/personal/bg.png')" mode="widthFix" class="top-Bg"></image>
			<image :src="getFileUrl('img/personal/uBg.png')" mode="widthFix" class="top-uBg"></image>
			<view class='top-title'>个人中心</view>
		</view>

		<!-- 内容 -->
		<view class="content-box">
			<view class="card">
				<view class="card-header">
					<image :src="avatarDisplayUrl" mode="aspectFill" class="card-header-icon">
					</image>
					<view class="card-header-title" hover-class="none" @click="handleLoginClick">{{ userStore.getToken ?
						(displayNickName) : '立即登录' }}</view>
				</view>

				<!-- 列表 -->
				<view class="card-list-container">
					<view class="card-list" hover-class="hover-active" @click='go("/pages/personal/userInfo")'>
						<view class='left'>
							<image :src="getFileUrl('img/personal/wszl.png')" mode="widthFix" class="card-icon"></image>
							<view class="title">完善资料</view>
						</view>
						<view class='right'>
							<image :src="getFileUrl('img/personal/right.png')" mode="widthFix" class="icon-right">
							</image>
						</view>
					</view>
					<view class="card-list" hover-class="hover-active" @click='go("/pages/orderInfo/index")'>
						<view class='left'>
							<image :src="getFileUrl('img/personal/wddd.png')" mode="widthFix" class="card-icon"></image>
							<view class="title">我的订单</view>
						</view>
						<view class='right'>
							<image :src="getFileUrl('img/personal/right.png')" mode="widthFix" class="icon-right">
							</image>
						</view>
					</view>
					<view class="card-list" hover-class="hover-active" @click='go("/pages/coupon/index")'>
						<view class='left'>
							<image :src="getFileUrl('img/personal/wdqb.png')" mode="widthFix" class="card-icon"></image>
							<view class="title">我的券包</view>
						</view>
						<view class='right'>
							<image :src="getFileUrl('img/personal/right.png')" mode="widthFix" class="icon-right">
							</image>
						</view>
					</view>
					<view class="card-list" hover-class="hover-active">
						<view class='left'>
							<image :src="getFileUrl('img/personal/yhxy.png')" mode="widthFix" class="card-icon"></image>
							<view class="title">用户协议</view>
						</view>
						<view class='right'>
							<image :src="getFileUrl('img/personal/right.png')" mode="widthFix" class="icon-right">
							</image>
						</view>
					</view>
					<view class="card-list" hover-class="hover-active">
						<view class='left'>
							<image :src="getFileUrl('img/personal/ysxy.png')" mode="widthFix" class="card-icon"></image>
							<view class="title">隐私政策</view>
						</view>
						<view class='right'>
							<image :src="getFileUrl('img/personal/right.png')" mode="widthFix" class="icon-right">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 登录弹窗组件 -->
		<LoginModal v-model:open="showLoginModal" @success="handleLoginSuccess" @cancel="handleLoginCancel" />
		<!-- 底部导航 -->
		<TabBar />
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import TabBar from '@/components/TabBar.vue';
import LoginModal from '@/pages/components/LoginModal.vue';
import { getFileUrl } from '@/utils/file.js';
import { useUserStore } from '@/store/user.js';
import { go } from '@/utils/utils.js';
import { USER_INFO } from '@/settings/enums.js';

const userStore = useUserStore();
const showLoginModal = ref(false);
const userInfoSync = ref({});

function syncUserFromStorage() {
	try {
		const raw = uni.getStorageSync(USER_INFO);
		userInfoSync.value = raw && typeof raw === 'object' ? raw : {};
	} catch (e) {
		userInfoSync.value = {};
	}
}

onShow(() => {
	syncUserFromStorage();
});
syncUserFromStorage();

// 展示用用户信息（优先 onShow 同步的 storage，保证登录后关弹窗能刷新）
const displayUserInfo = computed(() => {
	const sync = userInfoSync.value;
	if (sync && typeof sync === 'object' && Object.keys(sync).length > 0) return sync;
	return userStore.getUserInfo || {};
});

// 头像：绑定缓存的 avatarUrl；本地/临时路径（如 127.0.0.1/tmp、wxfile://）会报 500，改用默认图
const avatarDisplayUrl = computed(() => {
	const url = (displayUserInfo.value?.avatarUrl ?? '').trim();
	if (!url) return getFileUrl('img/personal/userDemo.png');
	const isLocalTemp = /127\.0\.0\.1|localhost|^\/tmp\/|wxfile:\/\/|^blob:/i.test(url);
	if (isLocalTemp) return getFileUrl('img/personal/userDemo.png');
	if (/^(https?|data):/i.test(url)) return url;
	return getFileUrl(url);
});

const displayNickName = computed(() => {
	const info = displayUserInfo.value;
	return info.nickName ?? info.nickname ?? info.name ?? '用户';
});

// 处理登录点击
const handleLoginClick = () => {
	if (!userStore.getToken) {
		showLoginModal.value = true;
	}
};

// 登录成功回调：立即从 storage 同步用户信息，保证头像/昵称马上更新
const handleLoginSuccess = () => {
	syncUserFromStorage();
};

// 取消登录回调
const handleLoginCancel = () => {
	console.log('用户取消登录');
};

</script>

<style scoped lang="scss">
.topBox {
	width: 100%;
	height: 400rpx;
	position: relative;

	.top-Bg {
		width: 100%;
		height: 100%;
	}

	.top-uBg {
		width: 360rpx;
		height: 360rpx;
		position: absolute;
		top: 50rpx;
		left: 40%;
		z-index: 1;
		transform: translateX(-50%);
	}

	.top-title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		line-height: 280rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}
}

.content-box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	margin-top: -100rpx;
	position: relative;
	z-index: 2;

	.card {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.06);
		padding: 30rpx;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-top: -50rpx;

		.card-header-icon {
			width: 132rpx;
			height: 132rpx;
		}

		.card-header-title {
			font-weight: bold;
			font-size: 38rpx;
			color: #151515;
			margin-left: 20rpx;
		}
	}

	.hover-active {
		opacity: 0.7;
	}

	.card-list-container {
		margin-top: 40rpx;
	}

	.card-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F5F5F5;

		&:last-child {
			border-bottom: none;
		}

		.left {
			display: flex;
			align-items: center;
			flex: 1;

			.card-icon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}

			.title {
				font-size: 32rpx;
				color: #151515;
			}
		}

		.right {
			.icon-right {
				width: 18rpx;
				height: 30rpx;
			}
		}
	}
}
</style>