giftlaw/pages/profile/profile.vue

<template>
	<view class="content">
		<image src="https://aliyunoss.hn12301.net/learnlaw/gift_zt_bj.jpg" mode="scaleToFill" :style="{ width: '750rpx', height: bgHeight + 'px', position: 'absolute', top: 0, left: 0, zIndex: 0 }"></image>
		<view class="page-body">
			<view class="login-box" v-if="!isLoggedIn">
				<text class="login-tip">注册后享受更多功能</text>
				<button class="login-btn" @tap="goRegister">立即注册</button>
			</view>
			<template v-if="isLoggedIn">
				<view class="user-card">
					<view class="user-avatar">
						<text class="avatar-text">{{ userName.charAt(0) }}</text>
					</view>
					<view class="user-info">
						<text class="user-name">{{ userName }}</text>
						<text class="user-phone">{{ maskedPhone }}</text>
					</view>
				</view>
				<view class="menu-list">
					<view class="menu-item" @tap="goMyPrizes">
						<view class="menu-icon menu-icon-prize">
							<text>🎁</text>
						</view>
						<text class="menu-text">我的奖品</text>
						<text class="menu-arrow">›</text>
					</view>
					<view class="menu-item" @tap="goAnswerRecords">
						<view class="menu-icon menu-icon-points">
							<text>📊</text>
						</view>
						<text class="menu-text">答题记录</text>
						<text class="menu-arrow">›</text>
					</view>
				</view>
			</template>
		</view>
		<u-tabbar
			:list="tabbarList"
			:hideTabBar="true"
			activeColor="#FD5401"
			inactiveColor="#5D533D"
			:borderTop="false"
			height="120rpx"
			iconSize="48"
		></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgHeight: 0,
				tabbarList: [
					{ pagePath: "/pages/index/index", iconPath: "/static/shouye.png", selectedIconPath: "/static/shouye_select.png", text: "首页" },
					{ pagePath: "/pages/records/records", iconPath: "/static/zhongjiangjilu.png", selectedIconPath: "/static/zhongjiangjilu_select.png", text: "中奖记录" },
					{ pagePath: "/pages/profile/profile", iconPath: "/static/wode.png", selectedIconPath: "/static/wode_select.png", text: "我的" }
				],
				isLoggedIn: false,
				userName: '',
				userPhone: ''
			}
		},
		computed: {
			maskedPhone() {
				const p = this.userPhone
				if (!p || p.length < 7) return p
				return p.slice(0, 3) + '****' + p.slice(-4)
			}
		},
		onLoad() {
			const sys = uni.getSystemInfoSync()
			const tabbarHeight = sys.windowWidth / 750 * 120
			this.bgHeight = sys.windowHeight - tabbarHeight
		},
		onShow() {
			this.checkLogin()
		},
		methods: {
			checkLogin() {
				const userId = uni.getStorageSync('userIdGift')
				if (userId) {
					this.isLoggedIn = true
					this.userName = uni.getStorageSync('userNameGift') || ''
					this.userPhone = uni.getStorageSync('userPhoneGift') || ''
				} else {
					this.isLoggedIn = false
				}
			},
			goRegister() {
				uni.navigateTo({ url: '/pages/register/register' })
			},
			goMyPrizes() {
				const phone = uni.getStorageSync('userPhoneGift') || ''
				window.location.href = 'https://goldnar.hntgov.net/cardholder/index.html#/?phone=' + phone
			},
			goAnswerRecords() {
				uni.navigateTo({ url: '/pages/answer-record/answer-record' })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #6EC5E3;
	}

	.content {
		position: relative;
	    display: flex;
		flex-direction: column;
	
	}

	.page-body {
		position: relative;
		z-index: 1;
		flex: 1;
		padding: 160rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.login-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.login-tip {
		font-size: 28rpx;
		color: rgba(255,255,255,0.85);
		margin-bottom: 30rpx;
	}

	.login-btn {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(135deg, #FD5401, #FF7A3D);
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		border: none;
		border-radius: 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(253,84,1,0.3);
	}

	.user-card {
		background: rgba(255,255,255,0.95);
		border-radius: 20rpx;
		padding: 36rpx 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #FD5401, #FF7A3D);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 24rpx;
	}

	.avatar-text {
		font-size: 32rpx;
		font-weight: 700;
		color: #fff;
	}

	.user-info {
		flex: 1;
		min-width: 0;
	}

	.user-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		display: block;
	}

	.user-phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
		display: block;
	}

	.menu-list {
		background: rgba(255,255,255,0.95);
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx 28rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 20rpx;
		font-size: 28rpx;
	}

	.menu-icon-prize {
		background: #fff7e6;
	}

	.menu-icon-points {
		background: #e6f7ff;
	}

	.menu-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.menu-arrow {
		font-size: 36rpx;
		color: #ccc;
		flex-shrink: 0;
	}

	::v-deep .u-tabbar__content {
		background: linear-gradient(to bottom, #FAFFC7, #B2FFC9) !important;
	}

	::v-deep .u-tabbar__content__item {
		background: linear-gradient(to bottom, #FAFFC7, #B2FFC9) !important;
	}

	::v-deep .u-tabbar {
		.u-border-top {
			border-top: none !important;
		}
	}

	::v-deep .u-icon__img {
		object-fit: contain !important;
	}

	::v-deep .u-tabbar__content__item {
		padding: 16rpx 0 !important;
	}
</style>