educational_Template1/pages/user/index.vue

<template>
	<view class="page-container">
		<view class="top-cont">
			<image class="background-image" src="/static/message_top_bg.png" mode="aspectFill"></image>
			<view class="top-inner">
				<!-- 状态栏 -->
				<view class="status_bar" :style="{ height: statusBarHeight }"></view>

				<!-- 顶部标题 -->
				<view class="top-title">
					<text class="title-text">我的</text>
				</view>

				<!-- 用户信息区域 -->
				<view class="user-info">
					<view class="left">
						<view class="head-img">
							<image :src="user.avatarUrl ? user.avatarUrl : '/static/avatar.png'" mode="aspectFill">
							</image>
						</view>
						<view class="name-phone" v-if="UserInfo">
							<view class="name">{{ user.nickname }}
								<text class="fs24 ml12 mb20" style="color: #FF6633;" v-if="user.isShow == 1">会员</text>
								<text class="fs24 ml12 mb20" style="color: #666;" v-else>非会员</text>
							</view>
							<view class="phone">{{ user.phone }}</view>
						</view>
						<view class="fs40 bold name-phone center" @click='getOrderCount()' v-else>立即登录</view>
					</view>
					<!-- <view class="right">
						<uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="set" @click="navgetTo('/pages_user/user/personInfo')">
								<image src="https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/icon-set.png"
									mode=""></image>
							</view>
						</uni-badge>
					</view> -->
				</view>

				<!-- ✅ 四个栏目图标 - 移到 user-info 外面 -->
				<view class="columns">
					<view class="column-item" v-for="(item, index) in columns" :key="index">
						<view class="column-icon">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
						<text class="column-text">{{ item.text }}</text>
					</view>
				</view>

				<!-- ✅ 邀请好友横幅 - 移到 user-info 外面 -->
				<view class="invite-banner">
					<view class="invite-text">
						<view class="invite-title">邀请好友，可解锁xx课程</view>
						<view class="invite-subtitle">邀请减免无上限</view>
					</view>
					<view class="invite-icon">
						<image src="/static/course_img.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view style="padding-bottom: 20rpx;" v-if="UserInfo">
				<view @tap="loginOUt" class="log-out x-c">退出登录</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" @click="navgetTo('/pages_user/user/myCourses')">
				<view class="function-left">
					<image class="function-icon" src="/static/my_courses.png" mode="aspectFit"></image>
					<text class="function-text">我的课程</text>
				</view>
				<image class="function-arrow" src="/static/right_arrow_right.png" mode="aspectFit"></image>
			</view>
			<view class="function-item" @click="navgetTo('/pages_user/user/myCollection')">
				<view class="function-left">
					<image class="function-icon" src="/static/my_collection.png" mode="aspectFit"></image>
					<text class="function-text">我的收藏</text>
				</view>
				<image class="function-arrow" src="/static/right_arrow_right.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="function-list">
			
			<view class="function-item" @click="navgetTo('/pages_user/user/contactService')">
				<view class="function-left">
					<image class="function-icon" src="/static/service_center.png" mode="aspectFit"></image>
					<text class="function-text">联系客服</text>
				</view>
				<image class="function-arrow" src="/static/right_arrow_right.png" mode="aspectFit"></image>
			</view>
			<view class="function-item" @click="navgetTo('/pages_user/user/settings')">
				<view class="function-left">
					<image class="function-icon" src="/static/set_icon.png" mode="aspectFit"></image>
					<text class="function-text">设置</text>
				</view>
				<image class="function-arrow" src="/static/right_arrow_right.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getOrderCount
} from '@/api/storeOrder'
import {
	getUserInfo
} from '@/api/user'
import likeProduct from '@/components/likeProduct.vue'
export default {
	components: {
		likeProduct
	},
	data() {
		return {
			columns: [{
				text: '栏目1',
				icon: '/static/consultation_order_icon.png',
			},
			{
				text: '栏目2',
				icon: '/static/prescription_order.png',
			},
			{
				text: '栏目3',
				icon: '/static/service_pack.png',
			},
			{
				text: '栏目4',
				icon: '/static/my_service.png',
			}
			],
			count0: 0,
			count1: 0,
			count2: 0,
			afterSalesCount: 0,
			user: {
				isPromoter: 0,
				isWeixinAuth: 0,
				phone: "",
				nickname: "用户昵称",
				avatarUrl: "https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/detault_head.png"
			},
			// 状态栏的高度
			statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
			// 消息数量
			msgNum: 0,
			UserInfo: uni.getStorageSync('AppToken')
		};
	},
	watch: {
		UserInfo() {
			return uni.getStorageSync('AppToken')
		}
	},
	onLoad() {
		console.log("onload")
	},
	onShow() {
		console.log("onshow")
		this.UserInfo = uni.getStorageSync('AppToken') // 强制更新登录状态
		if (this.UserInfo) {
			this.getUserInfo()
		} else {
			// this.isuser=true
		}
		// this.getUserInfo();
		// this.getOrderCount();
	},
	onReachBottom() {
		console.log("onReachBottom")
		// 由于likeProduct组件已隐藏，暂时注释掉此调用
		// this.$refs.product.getGoodsProducts();
	},
	methods: {
		callService() {
			let orderKey = '5d81cf01-6f8d-4e1a-ae7a-dbc26c965b01';
			uni.navigateTo({
				url: '/pages_company/order/confirmOrder?orderKey=' + orderKey
			})
			return;
		},

		getOrderCount() {
			getOrderCount().then(
				res => {
					if (res.code == 200) {
						this.count0 = res.count0;
						this.count1 = res.count1;
						this.count2 = res.count2;
						this.afterSalesCount = res.afterSalesCount;
					}
				},
				rej => { }
			);
		},
		toManager() {
			if (this.utils.checkCompanyUserLoginState()) {
				uni.navigateTo({
					url: '/pages_company/index'
				})
			} else {
				uni.navigateTo({
					url: '/pages_company/auth/login'
				})
			}

		},
		toManagerCourse() {
			if (uni.getStorageSync('ManageToken')) {
				uni.navigateTo({
					url: '/pages_manage/index'
				})
			} else {
				uni.navigateTo({
					url: '/pages_manage/login'
				})
			}

		},
		openH5(url) {
			var requestPath = uni.getStorageSync('requestPath');
			uni.setStorageSync('url', requestPath + url);
			uni.navigateTo({
				url: '../home/h5?data=' + url
			})
		},
		getUserInfo() {
			getUserInfo().then(
				res => {
					if (res.code == 200) {
						if (res.user != null) {
							this.user = res.user;
						} else {
							this.utils.loginOut();
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
					}
				},
				rej => { }
			);
		},
		// 跳转页面
		navgetTo(url) {
			this.utils.isLogin().then(res => {
				if (res) {
					uni.navigateTo({
						url: url
					})
				}
			})
		},
		// 查看订单
		showOrder(status) {
			uni.navigateTo({
				url: '/pages_user/user/storeOrder?status=' + status
			})
		},
		loginOUt() {
			this.utils.loginOut();
			this.getUserInfo();
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 120rpx; // 为底部导航栏留出空间
}

.top-cont {
	width: 100%;
	min-height: 494rpx;
	position: relative;

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.top-inner {
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
		z-index: 2;

		.top-title {
	
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 30rpx;

			.title-text {
						font-weight: 500;
font-size: 34rpx;
color: #000000;
			}

			.top-right {
				display: flex;
				align-items: center;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}
		}

		.columns {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx 0;

			.column-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #222222;

				.column-icon {
					width: 56rpx;
					height: 56rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.column-text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.invite-banner {
			margin: 20rpx 30rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(90deg, #FDF1BF 0%, #FFDB83 100%);
			border-radius: 64rpx 64rpx 64rpx 64rpx;

			.invite-text {
				flex: 1;
				margin-left: 46rpx;

				.invite-title {
					line-height: 1.2;
					font-weight: 500;
					font-size: 32rpx;
					color: #592706;
				}

				.invite-subtitle {
					font-size: 24rpx;
					color: rgba(89, 39, 6, 0.7);
					line-height: 1.2;
				}
			}

			.invite-icon {
				width: 128rpx;
				height: 128rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.user-info {
			padding: 20rpx 30rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.left {
				position: relative;
				display: flex;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					border: 3rpx solid #FFFFFF;
					box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name-phone {
					.name {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 1;
					}

					.phone {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 1;
						margin-top: 10rpx;
					}
				}


			}

			.right {
				display: none;
			}
		}
	}

	.my-order {
		padding: 50rpx 20rpx 0;

		.inner {
			box-sizing: border-box;
			height: 245rpx;
			// height: 105rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					line-height: 1;
				}

				.all-order {
					display: flex;
					align-items: center;

					.text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 1;
						margin-right: 8rpx;
					}

					image {
						width: 14rpx;
						height: 24rpx;
					}
				}
			}

			.status-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10rpx;

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

					image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 18rpx;
					}

					.text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
					}
				}
			}
		}
	}

	.content {
		margin-top: 20rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.used-tools {
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 30rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}

			.tools-list {
				margin-top: 50rpx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.item {
					box-sizing: border-box;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 50rpx;
					position: relative;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
						margin-top: 20rpx;
					}

					.contact-btn {
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}
	}

	.log-out {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.sub-btn {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.like-product {
		padding: 0 20rpx;
	}

	.banner {
		padding: 20rpx 20rpx 0rpx 20rpx;
		height: 200rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}

		.tel_btn {
			width: 100%;
			height: 100%;
			top: 0rpx;
			position: absolute;
			opacity: 0.0;
		}
	}

	.log-out {
		height: 100rpx;
		line-height: 100rpx;
		margin: 10px;
		border-radius: 20rpx;
	}


}

/* 功能列表 */
.function-list {
	margin: 24rpx 24rpx 0;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
	// box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);

	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		// border-bottom: 1rpx solid #F0F0F0;

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

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

			.function-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.function-text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.function-arrow {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
</style>