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">
					<image class="avatar tui-skeleton-rect" :src='userInfo.avatar' v-if="userInfo.avatar" @click="goEdit()"></image>
					<image v-else class="avatar tui-skeleton-rect" :src="urlDomain+'crmebimage/presets/morenT.png'" mode="" @click="goEdit()">
					</image>
					<view class="username">请点击登录</view>
				</view>

				<template v-else>
					<image class="avatar tui-skeleton-rect" :src='userInfo.avatar' v-if="userInfo.avatar" @click="goEdit()"></image>
					<image v-else class="avatar tui-skeleton-rect" :src="urlDomain+'crmebimage/presets/morenT.png'" mode="" @click="goEdit()">
					</image>
					<view class="username">
						{{userInfo.nickname}}
						<!-- <image src="/static/img/ic-code.png" class="code"></image> -->
					</view>

					<view class="phone-info">
						<text>绑定手机号：{{userInfo.phone}}</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 style="position: relative;top: -90rpx;">
			<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: 10rpx;height: 154rpx;margin: 0 20rpx;"></image>
				<image v-if="!userInfo.isRider" @tap="menusRider('/pages/users/user_rider/index')" src="/static/img/ic-settled-right.png"
				 style="width: 350rpx;height: 116rpx;"></image>
				<image v-else @tap="menusRider('/pages/rider_index/index', true)" src="/static/img/go-shipping.png" style="width: 350rpx;height: 116rpx;"></image>
			</view>

			<view class="order-box">
				<view class="order-hd flex">
					<view class="left">订单中心</view>
					<view class="right flex" @click="menusTap('/pages/goods/order_list/index')">查看全部
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="order-bd">
					<block v-for="(item,index) in orderMenu" :key="index">
						<view class="order-item" @click="menusTap(item.url)">
							<view class="pic">
								<text class="iconfont pic_status" :class="item.img"></text>
								<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
							</view>
							<view class="txt tui-skeleton-rect">{{item.title}}</view>
						</view>
					</block>
				</view>
			</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>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import {
		userCenterInfo,
		copyrightImageApi
	} from '@/api/user.js';
	import Cache from '@/utils/cache';
	import {
		orderNum
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		BACK_URL
	} from '@/config/cache';
	import animationType from '@/utils/animationType.js'
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				navigationBarHeight: 0,
				userInfo: {},
				urlDomain: this.$Cache.get("imgHost"),
				orderMenu: [{
						img: 'icon-daifukuan',
						title: '待付款',
						url: '/pages/goods/order_list/index?status=0',
						num: 0
					},
					{
						img: 'icon-daifahuo',
						title: '待发货',
						url: '/pages/goods/order_list/index?status=1',
						num: 0
					},
					{
						img: 'icon-daihexiao',
						title: '待核销',
						url: '/pages/goods/order_list/index?status=3',
						num: 0
					},
					{
						img: 'icon-daishouhuo',
						title: '待收货',
						url: '/pages/goods/order_list/index?status=4',
						num: 0
					},
					{
						img: 'icon-daipingjia',
						title: '待评价',
						url: '/pages/goods/evaluation_list/index',
						num: 0
					},
					{
						img: 'icon-a-shouhoutuikuan',
						title: '售后/退款',
						url: '/pages/goods/user_return_list/index',
						num: 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: '/pages/users/user_setting/index'
					}
				],
			}
		},
		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

		},
		onShow: function() {
			if (this.isLogin) {
				this.getUserCenterInfo();
				this.getOrderData();
			}
		},
		methods: {
			getOrderData() {
				let that = this;
				orderNum().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = res.data.awaitPayCount
								break
							case '待发货':
								item.num = res.data.awaitShippedCount
								break
							case '待收货':
								item.num = res.data.receiptCount
								break
							case '待核销':
								item.num = res.data.verificationCount
								break
							case '待评价':
								item.num = res.data.awaitReplyCount
								break
							default:
								item.num = res.data.refundCount
						}
					})
					that.$set(that, 'orderMenu', that.orderMenu);
				})
			},
			/**
			 * 
			 * 获取个人中心详情
			 */
			getUserCenterInfo: function() {
				userCenterInfo().then(res => {
					let data = res.data;
					this.userInfo = data;
					console.log(this, UserInfo)
					// this.showSkeleton = false;
				}).catch(err => {
					// this.showSkeleton = false;
				});
			},
			menusTap(url) {
				if (!this.isLogin) {
					this.openAuto();
				} else {
					if (url === '') return
					this.$util.navigateTo(url);
				}
			},
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
			// 跳转骑手
			menusRider(url, falg) {
				if (!this.isLogin) {
					this.openAuto();
				} else {
					if (url === '') return
					falg ? uni.reLaunch({
						url: url
					}) : this.$util.navigateTo(url)
				}
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false) {
					this.openAuto();
				} else {
					uni.navigateTo({
						animationType: animationType.type,
						animationDuration: animationType.duration,
						url: '/pages/users/user_info/index'
					})
				}
			},
		},
	}
</script>

<style lang="scss" 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: 0rpx 20rpx;
	}

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

	.go-img {
		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);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.order-box {
		background-color: #fff;
		border-radius: 14rpx;
		padding: 30rpx 16rpx;
		position: relative;
		z-index: 11;
		margin:  20rpx;

		.order-hd {
			justify-content: space-between;
			font-size: 30rpx;
			color: #282828;
			margin-bottom: 40rpx;
			padding: 0 16rpx;

			.left {
				color: #282828;
				font-size: 30rpx;
				font-weight: 600;
			}

			.right {
				align-items: center;
				color: #666666;
				font-size: 26rpx;

				.icon-xiangyou {
					margin-left: 5rpx;
					font-size: 24rpx;
				}
			}
		}

		.order-bd {
			display: flex;
			justify-content: space-between;
			padding: 0;

			.order-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.pic {
					position: relative;
					text-align: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}
					
					.order-status-num {
						min-width: 13rpx;
						background-color: #fff;
						color: $bg-color-primary;
						border-radius: 15px;
						position: absolute;
						right: -14rpx;
						top: -15rpx;
						font-size: 20rpx;
						padding: 0 8rpx;
						border: 2rpx solid $bg-color-primary;
					}
				}

				.txt {
					margin-top: 15rpx;
					font-size: 26rpx;
					color: #454545;
				}
				
				.pic_status {
					color: $bg-color-primary;
				}
			}
		}
	}
</style>