ydd_front/mer_uniapp/pages/user/index.vue

<template>
	<view>
		<!-- 状态栏高度 -->
		<view :style="{ height: `${statusBarHeight}px` }"></view>

		<!-- 导航栏 -->
		<view :style="{ height: `${navigationBarHeight}px`,lineHeight: `${navigationBarHeight}px`}" class="order-nav">
			北京大学校园送
		</view>

		<view style="background-color: #FF6702;height: 60rpx;"></view>

		<view class="card">
			<view class="card-left">
				<view class="name" v-if="!isLogin" @tap="openAuto">
					<img class="avatar" src="/static/img/ic-buy.png" alt="默认头像">
					<view class="username">请点击登录</view>
				</view>

				<template v-else>
					<img class="avatar" src="/static/img/ic-buy.png" alt="用户头像">
					<view class="username">老番茄333 <image src="/static/img/ic-code.png" class="code"></image>
					</view>

					<view class="phone-info">
						<text>绑定手机号：185-7033-6037</text>
						<image src="/static/img/ic-copy.png">
						</image>
					</view>
				</template>

			</view>

			<view class="card-right">
				<view class="card-content">
					<view class="content-item">
						<img class="content-icon" src="/static/img/ic-tickets.png" alt="我的票劵">
						<view class="content-text1">我的票劵</view>
					</view>
					<view class="content-item" @click="menusTap('/pages/goods/order_list/index')">
						<img class="content-icon" src="/static/img/ic-order.png" alt="我的订单">
						<view class="content-text2">我的订单</view>
					</view>
					<view class="content-item">
						<img class="content-icon" src="/static/img/ic-gold.png" alt="我的金币">
						<view class="content-text3">我的金币</view>
					</view>
				</view>

				<view class="profile-link">
					<text>个人中心</text>
					<img src="/static/img/ic-right.png" />
				</view>
			</view>
		</view>

		<view class="item-settled">
			<image @tap="menusTap('/pages/users/settled/index')" src="/static/img/ic-settled-left.png"
				style="width: 350rpx;height: 116rpx;"></image>

			<image src="/static/img/ic-bg-line.png" style="width: 4rpx;height: 154rpx;margin: 0 20rpx;"></image>

			<image @tap="menusTap('')" src="/static/img/ic-settled-right.png"
				style="width: 350rpx;height: 116rpx;"></image>
		</view>

		<view class="item-features" v-if="isLogin">
			<view class="item-features-title">我的功能</view>
			<div class="grid-container">
				<!-- 示例：12 个格子（3行x4列） -->
				<div class="grid-item" v-for="item in featuresList" :key="item.id" @click="menusTap(item.url)">
					<img class="grid-img" :src="item.icon">
					<div class="grid-text">{{item.text}}</div>
				</div>
			</div>
		</view>



	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import Cache from '@/utils/cache';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		BACK_URL
	} from '@/config/cache';
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 0,
				featuresList: [{
						id: 1,
						icon: '/static/img/ic-express.png',
						text: '我的快递',
						url: ''
					},
					{
						id: 2,
						icon: '/static/img/ic-address.png',
						text: '通用地址',
						url: '/pages/address/user_address_list/index'
					},
					{
						id: 3,
						icon: '/static/img/ic-comments.png',
						text: '我的评论',
						url: ''
					},
					{
						id: 4,
						icon: '/static/img/ic-collection.png',
						text: '我的收藏',
						url: '/pages/goods/user_goods_collection/index'
					},
					{
						id: 5,
						icon: '/static/img/ic-buy.png',
						text: '我的团购',
						url: ''
					},
					{
						id: 6,
						icon: '/static/img/ic-vouchers.png',
						text: '我的卡券',
						url: '/pages/users/user_coupon/index'
					},
					{
						id: 7,
						icon: '/static/img/ic-distribution.png',
						text: '我的分销',
						url: '/pages/users/user_spread_user/index'
					},
					{
						id: 8,
						icon: '/static/img/ic-friend.png',
						text: '邀请好友',
						url: ''
					},
					{
						id: 9,
						icon: '/static/img/ic-feedback.png',
						text: '帮助反馈',
						url: ''
					},
					{
						id: 10,
						icon: '/static/img/ic-security-settings.png',
						text: '安全设置',
						url: ''
					}
				],
			}
		},
		onLoad(options) {
			let that = this;
			//首页数据加载
			// this.getIndexConfig();
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
			// #endif

		},
		methods: {
			menusTap(url) {
				if (!this.isLogin) {
					this.openAuto();
				} else {
					if (url === '') return
					this.$util.navigateTo(url);
				}
			},
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
		},
	}
</script>

<style scoped>
	.order-nav {
		font-weight: 500;
		font-size: 35rpx;
		color: #FFFFFF;
		background-color: #FF6702;
		text-align: center;
	}

	.item-settled {
		background: linear-gradient(135deg, #FED0A7 0%, #FFF3E2 52%, #FAEDD3 100%);
		border-radius: 8rpx;
		padding: 20rpx;
		box-shadow: 0 0 0 2rpx rgba(255, 220, 135, 1);
		position: relative;
		top: -90rpx;
		margin: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.item-settled::after {
		content: "";
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		right: -2rpx;
		bottom: -2rpx;
		background: linear-gradient(200deg, rgba(255, 220, 135, 1), rgba(255, 172, 33, 1), rgba(255, 201, 24, 1));
		border-radius: 10rpx;
		z-index: -1;
		pointer-events: none;
	}

	.card {
		position: relative;
		display: flex;
		/* 启用flex布局 */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		padding: 40rpx 30rpx 120rpx 30rpx;
		box-sizing: border-box;
		background: linear-gradient(225deg, #ECF3FE 0%, #FEFEFE 100%);
		border-radius: 23rpx;
		top: -20rpx;
	}

	.card-left {
		position: relative;
	}

	.card-right {
		flex: 1;
	}

	.avatar {
		position: absolute;
		top: -80rpx;
		left: 0;
		width: 131rpx;
		height: 131rpx;
		background-color: #D8D8D8;
		border: 4rpx solid #FFFFFF;
		border-radius: 50%;
		object-fit: cover;
	}

	.username {
		margin-top: 70rpx;
		color: #141414;
		font-size: 35rpx;
		font-weight: bold;
	}

	.code {
		width: 31rpx;
		height: 31rpx;
		margin-left: 20rpx;
	}

	.card-content {
		display: flex;
		justify-content: space-between;
	}

	.content-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33%;
	}

	.content-icon {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 15rpx;
	}

	.content-text1 {
		font-size: 23rpx;
		background: linear-gradient(90deg, #FFB908 0%, #DC7A11 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.content-text2 {
		font-size: 23rpx;
		background: linear-gradient(90deg, #93B0FF 0%, #1B4EFF 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.content-text3 {
		font-size: 23rpx;
		background: linear-gradient(90deg, #F4D600 0%, #FF9100 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.phone-info {
		font-size: 21rpx;
		padding-top: 10rpx;
	}

	.phone-info text {
		margin-right: 14rpx;
	}

	.phone-info image {
		width: 27rpx;
		height: 27rpx;
		vertical-align: middle;
	}

	.profile-link {
		margin-top: 20rpx;
		font-size: 23rpx;
		font-weight: 600;
		line-height: 21rpx;
		text-align: right;
	}

	.profile-link img {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		margin-left: 12rpx;
	}

	.grid-container {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		/* 改用 margin 控制间距 */
		padding: 20rpx;
		/* 父容器内边距 */
		box-sizing: border-box;
		/* 包含 padding 在宽度内 */
	}

	.grid-item {
		width: 25%;
		/* 直接 25% 无需 calc */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
		/* 行间距 */
		padding: 0 10rpx;
		/* 左右间隙（替代 gap） */
		box-sizing: border-box;
		/* 关键 */
	}

	.grid-img {
		width: 58rpx;
		height: 58rpx;
		margin-bottom: 8rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #333;
	}

	.item-features {
		background: #FFFFFF;
		border-radius: 23rpx;
		margin: -60rpx 20rpx 20rpx 20rpx;
	}

	.item-features-title {
		padding: 20rpx;
		font-weight: 600;
		font-size: 27rpx;
		color: #2E261E;
		line-height: 38rpx;
	}
</style>