Homestay_manage_app/pages/my/my.vue

<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="title" :style="{ height: customBarH * 2 + 'rpx', top: statusBarH * 2 + 'rpx' }" v-if="!headerType">我的</view>

		<view class="title" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx', backgroundColor: '#fff', color: '#000' }" v-else>我的</view>

		<!-- 顶部用户信息区域 -->
		<view class="header">
			<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/18.png" />
			<!-- 头像区域 -->
			<img class="img" mode="aspectFill" v-if="flag" :src="userInfo.headPhoto" />
			<img class="img" v-else src="../../static/my/portrait.png" />
			<!-- 姓名区域 -->
			<view class="name" v-if="flag">{{ userInfo.user_name }}</view>
			<!-- 用户id区域 -->
			<view class="number" v-if="flag">ID：{{ userInfo.id }}</view>

			<view class="login" v-if="!flag" @click="goPageLogin">去登录</view>
		</view>

		<!-- 内容区域 -->
		<view class="body">
			<!-- 我的订单区域 -->
			<view class="myOrder">
				<view class="myOrder_header">
					<img class="header_img" src="../../static/my/myorder5.png" />
					<view class="header_title">我的订单</view>
					<view class="header_more" @click="handleShowTest">
						全部订单
						<img class="more_img" src="../../static/my/right.png" />
					</view>
				</view>
				<view class="myOrder_list">
					<view class="list_box" @click="handleShowTest">
						<img class="box_img" src="../../static/my/myorder.png" />
						<view class="box_text">待付款</view>
					</view>
					<view class="list_box" @click="handleShowTest">
						<img class="box_img" src="../../static/my/myorder2.png" />
						<view class="box_text">待发货</view>
					</view>
					<view class="list_box" @click="handleShowTest">
						<img class="box_img" src="../../static/my/myorder3.png" />
						<view class="box_text">待收货</view>
					</view>
					<view class="list_box" @click="handleShowTest">
						<img class="box_img" src="../../static/my/myorder4.png" />
						<view class="box_text">待评价</view>
					</view>
				</view>
			</view>
			<!-- 常用工具区域 -->
			<view class="body_box">
				<view class="box_title">常用工具</view>
				<view class="box_list">
					<view class="item_box" @click="handleShowTest">
						<img class="box_img" src="../../static/my/shopcar.png" />
						<view class="box_text">购物车</view>
					</view>
					<view class="item_box" @click="handleShowTest">
						<img class="box_img" src="../../static/my/address.png" />
						<view class="box_text">收货地址</view>
					</view>
					<view class="item_box" @click="handleGoPageHome">
						<img class="box_img" src="../../static/my/center.png" />
						<view class="box_text">个人主页</view>
					</view>
					<view class="item_box" @click="handleGoPage('/pages/set/set')">
						<img class="box_img" src="../../static/my/set.png" />
						<view class="box_text">设置</view>
					</view>
				</view>
			</view>
			<!-- 民宿管理区域 -->
			<view class="body_box">
				<view class="box_title">民宿管理</view>
				<view class="box_list">
					<view class="item_box" @click="handleGoPage('/pages/orderManage/orderManage')">
						<img class="box_img" src="../../static/my/order.png" />
						<view class="box_text">订单管理</view>
					</view>
					<view class="item_box" @click="handleGoPage('/pages/myEvaluate/myEvaluate')">
						<img class="box_img" src="../../static/my/evaluate.png" />
						<view class="box_text">我的评价</view>
					</view>
					<view class="item_box" @click="handleGoPage('/pages/myComplaint/myComplaint')">
						<img class="box_img" src="../../static/my/complaint.png" />
						<view class="box_text">投诉进度</view>
					</view>
					<view class="item_box" @click="handleGoPage('/pages/collect/collect')">
						<img class="box_img" src="../../static/my/collect.png" />
						<view class="box_text">收藏/住过</view>
					</view>
					<view class="item_box" @click="handleGoPage('/pages/myCoupon/myCoupon')">
						<img class="box_img" src="../../static/my/coupon.png" />
						<view class="box_text">我的卡券</view>
					</view>
					<view class="item_box" @click="handleGoPage('/pages/common/common')">
						<img class="box_img" src="../../static/my/people.png" />
						<view class="box_text">常用旅客</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { showTest } from '@/util/commonFunction.js'
export default {
	data() {
		return {
			// 是否登录标识
			flag: false,
			// 用户信息
			userInfo: {},
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 顶部页面标题栏显示隐藏控制
			headerType: false
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	onPageScroll(e) {
		if (e.scrollTop > 50) {
			this.headerType = true
		} else {
			this.headerType = false
		}
	},
	onLoad() {
		uni.$on('changeFlag', this.changeFlag)
	},
	onShow() {
		let openid = uni.getStorageSync('openid')
		if (openid) {
			this.flag = true
			this.userInfo = uni.getStorageSync('userInfo')
		} else {
			this.flag = false
		}
	},
	methods: {
		// 跳转页面回调
		handleGoPage(url) {
			if (this.isLogin()) {
				uni.navigateTo({
					url
				})
			}
		},
		changeFlag(e) {
			// console.log(e)
			this.flag = e.data
			this.userInfo = uni.getStorageSync('userInfo')
		},
		// 去登录文字回调
		goPageLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		isLogin() {
			if (this.flag) {
				return true
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		},
		handleGoPageHome() {
			let userId = uni.getStorageSync('userInfo').id
			uni.navigateTo({
				url: `/pages/myHome/myHome?userId=${userId}`
			})
		},
		handleShowTest() {
			showTest()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	min-height: 100vh;

	.title {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

	.header {
		position: relative;
		height: 480rpx;
		color: #fff;
		overflow: hidden;

		img {
			width: 100%;
		}

		.img {
			position: absolute;
			top: 190rpx;
			left: 32rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}

		.name {
			position: absolute;
			top: 200rpx;
			left: 202rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.number {
			position: absolute;
			top: 265rpx;
			left: 202rpx;
			font-size: 24rpx;
			opacity: 0.5;
		}

		.real {
			position: absolute;
			top: 285rpx;
			left: 202rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 13rpx;
			width: 179rpx;
			height: 42rpx;
			font-size: 24rpx;
			border-radius: 113rpx;
			background-color: rgba(255, 255, 255, 0.2);

			img {
				margin-right: 7rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.real2 {
			position: absolute;
			top: 285rpx;
			left: 202rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding-left: 13rpx;
			padding-bottom: 5rpx;
			width: 179rpx;
			height: 42rpx;
			font-size: 24rpx;
			border-radius: 113rpx;
			background-color: rgba(255, 255, 255, 0.2);

			img {
				margin-left: 12rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.login {
			position: absolute;
			top: 235rpx;
			left: 202rpx;
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.body {
		position: absolute;
		top: 360rpx;
		width: 100%;
		min-height: calc(100vh - 360rpx);
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f7f7f7;

		.myOrder {
			padding: 0 30rpx;
			margin-bottom: 23rpx;
			height: 224rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.myOrder_header {
				display: flex;
				align-items: flex-end;
				height: 64rpx;

				.header_img {
					width: 42rpx;
					height: 42rpx;
				}

				.header_title {
					margin-left: 11rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.header_more {
					display: flex;
					align-items: center;
					margin-left: auto;
					font-size: 24rpx;
					color: #b3b3b3;

					.more_img {
						margin-top: -5rpx;
						margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.myOrder_list {
				display: flex;
				justify-content: space-around;
				height: 160rpx;

				.list_box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 140rpx;

					.box_img {
						width: 50rpx;
						height: 50rpx;
					}

					.box_text {
						margin-top: 10rpx;
						color: #808080;
						font-size: 24rpx;
					}
				}
			}
		}

		.body_box {
			padding: 0 30rpx;
			margin-bottom: 23rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;

			.box_title {
				display: flex;
				align-items: flex-end;
				height: 64rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.box_list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-auto-rows: 160rpx;

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

					.box_img {
						width: 50rpx;
						height: 50rpx;
					}

					.box_text {
						margin-top: 10rpx;
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
		}
	}
}
</style>