pet_server/components/u-header.vue

<template>
	<view class="je">
		<view class="sheader" :style="'height:'+headerHeight+'px'">
			<view class="sheader_a" @click="side">
				<image src="http://pet.hdlkeji.com/assets/static/index_icon.png" class="sheader_b" mode=""></image>
				<view class="title">宠365</view>
			</view>
		</view>
		<u-popup v-model="show" mode="left">
			<view class="indexa" :style="'top:'+headerHeight+'px'">
				<view class="sheader_a" @click="side">
					<image src="http://pet.hdlkeji.com/assets/static/index_icon.png" class="sheader_b" mode=""></image>
					<image src="http://pet.hdlkeji.com/assets/static/index_logo.png" class="sheader_img" mode=""></image>
				</view>
				<view class="indexb">
					<view class="indexc">
						<image :src="hasLogin && userinfo.avatar ? userinfo.avatar :'http://pet.hdlkeji.com/assets/static/moren.png'"
							class="indexc_img" mode=""></image>
						<view class="indexd" @click="GoLogin">
							<view class="indexd_p">{{ hasLogin? (userinfo.nickname || '未设置昵称') : '立即登录' }}</view>
							<view class="indexd_p1" v-if="hasLogin">{{userinfo.mobile}}</view>
						</view>
					</view>
					<view class="indexe">
						<view class="indexe_a" @click="GoIndex">
							<view class="indexe_box">
								<image src="http://pet.hdlkeji.com/assets/static/meun_1.png" class="indexe_icon" mode=""></image>
							</view>
							<view class="indexe_p">代办事项</view>
						</view>
						<view class="indexe_a" @click="GoOrder">
							<view class="indexe_box">
								<image src="http://pet.hdlkeji.com/assets/static/meun_1.png" class="indexe_icon" mode=""></image>
							</view>
							<view class="indexe_p">订单管理</view>
						</view>
						<view class="indexe_a" @click="GoMarket">
							<view class="indexe_box">
								<image src="http://pet.hdlkeji.com/assets/static/meun_1.png" class="indexe_icon" mode=""></image>
							</view>
							<view class="indexe_p">营销设计</view>
						</view>
						<view class="indexe_a" @click="GoDelivery">
							<view class="indexe_box">
								<image src="http://pet.hdlkeji.com/assets/static/meun_1.png" class="indexe_icon" mode=""></image>
							</view>
							<view class="indexe_p">配送员管理</view>
						</view>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth';
	export default {
		name: "u-header",
		data() {
			return {
				headerHeight: 0,
				show: false,
				hasLogin: false,
				userinfo: {}
			};
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
					const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
					let statusBarHeight = res.statusBarHeight
					let navHeight = menuButton.height + navBarPadding
					this.headerHeight = navHeight + statusBarHeight
				}
			})
			this.GetUser()
		},
		methods: {
			// 代办事项
			GoIndex(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			GoDelivery(){
				uni.navigateTo({
					url:'/pages/Delivery/Delivery'
				})
			},
			// 点击营销设置
			GoMarket(){
				uni.navigateTo({
					url:'/pages/Marketing/Marketing'
				})
			},
			// 点击前往订单页面
			GoOrder(){
				uni.navigateTo({
					url:'/pages/order/order'
				})
			},
			//去登陆
			GoLogin() {
				var token = getToken();
				if (!token) {
					this.side()
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			//获取用户信息
			GetUser() {
				this.request('/user/index', '', 'post').then(res => {
					var token = getToken();
					if (token) {
						this.userinfo = res.data
						this.hasLogin = true
					}

				});
			},
			side() {
				this.show = !this.show
			},
		}
	}
</script>

<style lang="scss">
	.u-drawer-content {
		width: 68% !important;
	}

	.indexa {
		position: relative;
		.sheader_a {
			margin-top: -60rpx;
			width: 100%;
			height: 60rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.sheader_b {
				width: 48rpx;
				height: 38rpx;
			}

			.sheader_img {
				width: 132rpx;
				height: 50rpx;
				margin-left: 36rpx;
			}
		}
	}

	.indexb {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.indexc {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30rpx;

			.indexc_img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				opacity: 1;
			}

			.indexd {
				margin-left: 20rpx;

				.indexd_p {
					font-size: 36rpx;
					font-family: PingFangSC-Semibold;
					line-height: 50rpx;
					color: #111111;
					opacity: 1;
				}

				.indexd_p1 {
					font-size: 32rpx;
					font-family: PingFangSC-Regular;
					line-height: 44rpx;
					color: #111111;
					opacity: 1;
					margin-top: 6rpx;
				}
			}
		}

		.indexe {
			margin-top: 40rpx;

			.indexe_a {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 32rpx 15rpx;
				box-sizing: border-box;

				.indexe_box {
					width: 49rpx;
					text-align: center;

					.indexe_icon {
						width: 45rpx;
						height: 43rpx;
					}

					.indexe_icona {
						width: 41rpx;
						height: 47rpx;
					}

					.indexe_iconb {
						width: 49rpx;
						height: 47rpx;
					}

					.indexe_iconc {
						width: 39rpx;
						height: 45rpx;
					}

					.indexe_icond {
						width: 43rpx;
						height: 49rpx;
					}
				}

				.indexe_p {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 42rpx;
					color: #111111;
					opacity: 1;
					margin-left: 30rpx;
				}
			}
		}

	}

	.je {
		position: fixed;
		left: 0;
		top: 0;
		// height: 100vh;
		width: 100%;
		background: #ffffff;
		z-index: 999;

		.sheader {
			position: absolute;
			top: -5rpx;
			left: 0;
			width: 100%;
			color: #000000;
			z-index: 99;
			// background: linear-gradient(360deg, rgba(236, 236, 236, 0) 0%, #FFFFFF 100%);
			background-color: #FFFFFF;

			.sheader_a {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 60rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.title {
					width: 100%;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					opacity: 1;
					padding-right: 50rpx;
					box-sizing: border-box;
				}

				.sheader_b {
					width: 48rpx;
					height: 38rpx;
				}

				.sheader_img {
					width: 132rpx;
					height: 50rpx;
					margin-left: 36rpx;
				}
			}
		}





	}
</style>