Homestay_manage_app/pages/my/my.vue

<template>
	<view class="container">
		<!-- 顶部用户信息区域 -->
		<view class="header">
			<img src="../../static/my/headerImg.png" />
			<!-- 页面标题 -->
			<view class="title">我的</view>
			<!-- 头像区域 -->
			<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="real" v-if="userInfo.card_number">
				<img src="../../static/my/true.png" />
				已实名认证
			</view>
			<view class="real2" v-if="flag" v-else @click="goPageCommon">
				去认证
				<img src="../../static/my/right2.png" />
			</view> -->

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

		<!-- 内容区域 -->
		<view class="body">
			<!-- 订单管理区域 -->
			<view class="body_item" @click="goPageOrder">
				<img class="img" src="../../static/my/order.png" />
				订单管理
				<img class="img_icon" src="../../static/my/right3.png" />
			</view>

			<!-- 常用旅客区域 -->
			<view class="body_item" @click="goPageCommon">
				<img class="img2" src="../../static/my/people.png" />
				常用旅客
				<img class="img_icon" src="../../static/my/right3.png" />
			</view>

			<!-- 我是商户区域 -->
			<view class="body_item" @click="handleClick(1)">
				<img class="img2" src="../../static/my/shop.png" />
				我是商户
				<img class="img_icon" src="../../static/my/right3.png" />
			</view>

			<!-- 我是业主区域 -->
			<view class="body_item" @click="handleClick(2)">
				<img class="img2" src="../../static/my/shop2.png" />
				我是业主
				<img class="img_icon" src="../../static/my/right3.png" />
			</view>

			<!-- 设置区域 -->
			<view class="body_item" @click="goPageSet">
				<img class="img3" src="../../static/my/set.png" />
				设置
				<img class="img_icon" src="../../static/my/right3.png" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 是否登录标识
			flag: false,
			// 用户信息
			userInfo: {}
		}
	},
	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: {
		changeFlag(e) {
			// console.log(e)
			this.flag = e.data
			this.userInfo = uni.getStorageSync('userInfo')
		},
		handleClick(type) {
			// 1为商户,2为业主
			uni.login({
				provider: 'weixin',
				success: (res) => {
					this.handleQuery(type, res.code)
				}
			})
		},

		// 查询请求
		async handleQuery(type, code) {
			if (type === 1) {
				// 查询商家是否绑定
				const res = await this.$myRequest({
					url: '/mhotel/appget_user_ma.action',
					data: {
						code
					}
				})
				if (res.code === 200) {
					let data = JSON.stringify(res.data)
					uni.navigateTo({
						url: `/pages/shopInfo/shopInfo?type=1&data=${data}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/shop/shop'
					})
				}
			} else if (type === 2) {
				// 查询业主是否已绑定
				const res = await this.$myRequest({
					url: '/mhotel/appgetUser.action',
					data: {
						code
					}
				})
				if (res.code === 200) {
					let data = JSON.stringify(res.data)
					uni.navigateTo({
						url: `/pages/shopInfo/shopInfo?type=2&data=${data}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/shop2/shop2'
					})
				}
			}
		},
		// 去登录文字回调
		goPageLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		// 点击订单管理按钮回调
		goPageOrder() {
			if (this.isLogin()) {
				uni.navigateTo({
					url: '/pages/orderManage/orderManage'
				})
			}
		},
		// 点击常用旅客按钮回调
		goPageCommon() {
			if (this.isLogin()) {
				uni.navigateTo({
					url: '/pages/common/common'
				})
			}
		},
		// 点击设置按钮回调
		goPageSet() {
			if (this.isLogin()) {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			}
		},
		isLogin() {
			if (this.flag) {
				return true
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		}
	}
}
</script>

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

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

		img {
			width: 100%;
		}

		.title {
			position: absolute;
			top: 65rpx;
			left: 342rpx;
			font-size: 28rpx;
			color: #fff;
		}

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

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

		.number {
			position: absolute;
			top: 240rpx;
			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;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		height: calc(100vh - 360rpx);
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;

		.body_item {
			display: flex;
			align-items: center;
			height: 121rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.img {
				margin-right: 17rpx;
				width: 53rpx;
				height: 53rpx;
			}

			.img2 {
				margin-right: 22rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.img3 {
				margin-right: 18rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.img_icon {
				margin-left: auto;
				width: 49rpx;
				height: 49rpx;
			}
		}
	}
}
</style>