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='handleNavClick("/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='handleNavClick("/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='handleNavClick("/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" @click="handleUserAgreement">
						<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" @click="handlePrivacyPolicy">
						<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>
		<!-- 登录弹窗组件（与 index 同结构，盖住底部 tabbar） -->
		<view class="login-modal-wrapper">
			<LoginModal v-model:open="showLoginModal" @success="handleLoginSuccess" @cancel="handleLoginCancel" />
		</view>
		<!-- 底部导航 -->
		<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 { GetUserInfo } from '@/api/dining.js';

const userStore = useUserStore();
const showLoginModal = ref(false);
// 仅用接口返回的用户信息展示，不使用缓存
const userInfoFromApi = ref({});

// 将接口返回的用户信息转为页面展示字段（头像、昵称等）
function normalizeUserInfoFromApi(raw) {
	if (!raw || typeof raw !== 'object') return raw;
	return {
		...raw,
		avatarUrl: raw.avatarUrl ?? raw.avatar ?? raw.headImgUrl ?? raw.icon ?? '',
		nickName: raw.nickName ?? raw.nickname ?? raw.name ?? raw.userName ?? ''
	};
}

async function fetchAndSetUserInfo() {
	try {
		const res = await GetUserInfo();
		const data = res?.data ?? res ?? {};
		const userData = data?.data ?? data;
		if (userData && typeof userData === 'object') {
			const normalized = normalizeUserInfoFromApi(userData);
			userInfoFromApi.value = normalized;
			userStore.setUserInfo({ ...userStore.getUserInfo, ...normalized });
		} else {
			userInfoFromApi.value = {};
		}
	} catch (e) {
		console.warn('个人中心获取用户信息失败:', e);
		userInfoFromApi.value = {};
	}
}

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

// 展示用用户信息：仅来自接口，不使用缓存
const displayUserInfo = computed(() => userInfoFromApi.value || {});

// 头像：从接口获取并缓存后的用户信息中取 avatarUrl/avatar，无则默认图
const avatarDisplayUrl = computed(() => {
	const info = displayUserInfo.value;
	const url = (info?.avatarUrl ?? info?.avatar ?? '').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);
});

// 昵称：从接口获取并缓存后的用户信息中取 nickName/nickname/name
const displayNickName = computed(() => {
	const info = displayUserInfo.value;
	return info?.nickName ?? info?.nickname ?? info?.name ?? info?.userName ?? '用户';
});

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

// 需登录才能访问的导航：未登录时禁止跳转，提示并弹出登录框
const handleNavClick = (url) => {
	if (!userStore.getToken) {
		uni.showToast({ title: '请先登录', icon: 'none' });
		showLoginModal.value = true;
		return;
	}
	go(url);
};

// 登录成功回调：重新拉取用户信息接口，保证头像/昵称马上更新
const handleLoginSuccess = () => {
	fetchAndSetUserInfo();
};

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

// 隐私政策：跳转 webview 打开
const PRIVACY_URL = 'https://ossfile.ailien.shop/privacy/%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE931648.html';
const handlePrivacyPolicy = () => {
	go(`/pages/webview/index?url=${encodeURIComponent(PRIVACY_URL)}`);
};

// 用户协议：跳转 webview 打开（U店在这-平台规则）
const USER_AGREEMENT_URL = 'https://ossfile.ailien.shop/privacy/U%E5%BA%97%E5%9C%A8%E8%BF%99-%E5%B9%B3%E5%8F%B0%E8%A7%84%E5%88%99456793.htm';
const handleUserAgreement = () => {
	go(`/pages/webview/index?url=${encodeURIComponent(USER_AGREEMENT_URL)}`);
};

</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;
			border-radius: 50%;
		}

		.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;
			}
		}
	}
}

/* 登录弹窗层级设置（与 index 一致，盖住底部 tabbar） */
.login-modal-wrapper {
	position: relative;
	z-index: 99999;

	:deep(.uni-popup) {
		z-index: 99999 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
	}
	:deep(.uni-popup__wrapper) {
		z-index: 99999 !important;
	}
}
</style>