education_mp/pages/user/index.vue

<template>
	<view>
		<!-- <view class="user_box">
			<view class="box_left">
				<navigator url="/pages/user/settings" > 
					<image class="user_image"  :src="userInfo.userpic" ></image>
				</navigator>
			</view>
			<view class="box_center">
				<view class="user_name">{{userInfo.username}}</view>
				<view class="user_info">{{userInfo.phone}}</view>
			</view>
			<view class="box_right">
				<navigator url="/pages/user/info" class="company_text" v-if="!userInfo.city_id">请选择城市</navigator>
				<navigator url="/pages/user/settings" class="setting_page" v-if="userInfo.city_id" >
					<image class="setting_icon"  src="../../static/icon/setting.png" ></image>
				</navigator>
			</view>
		</view>
		<view class="navigator_list">
			<navigator class="navigator_item" url="/pages/orders/index" >
				<image class="navigator_image" src="../../static/icon/orders.png" mode=""></image>
				<view class="navigator_title">预 约</view>
			</navigator>
			<navigator class="navigator_item" url="/pages/coupon/index" >
				<image class="navigator_image" src="../../static/icon/coupon.png" mode=""></image>
				<view class="navigator_title">优惠券</view>
			</navigator>
			<navigator class="navigator_item" url="/pages/score/orders" >
				<image class="navigator_image" src="../../static/icon/score_gift.png" mode=""></image>
				<view class="navigator_title">积分订单</view>
			</navigator>
		</view>
		<view class="alter_info">本程序暂不提供在线交易以及支付功能，您所提交的预约，我们将验证您的购药资质并交由有售卖药品资质的商业公司与您联系确认并提供线下后续服务。</view> -->
		
		<view class="status_bar" :style="{top:StatusBarHeight+ 'px'}">我的</view>
		<view class="user_box">
			<view :style="{height: NavBarHerder +'px'}"></view>
			<view class="user_content">
				<view class="box_left">
					<navigator url="/pages/user/settings"> 
						<image class="user_image"  :src="userInfo.userpic" ></image>
					</navigator>
				</view>
				<view class="box_center">
					<view class="user_name">{{userInfo.username}}</view>
					<view class="user_info">{{userInfo.phone}}</view>
				</view>
			</view>
		</view>
		<view class="navigator_content">
			<view class="navigator_list">
				<navigator class="navigator_item" url="/pagesA/orders/userorder" >
					<view class="navigator_image_order">
						<image class="navigator_image" src="../../static/user_icon/user_order_icon.png" mode=""></image>
					</view>
					<view class="navigator_title">我的订单</view>
				</navigator>
				<navigator class="navigator_item" url="/pagesA/course/usercourse" >
					<view class="navigator_image_class">
						<image class="navigator_image" src="../../static/user_icon/user_class_icon.png" mode=""></image>
					</view>
					<view class="navigator_title">课程表</view>
				</navigator>
				<navigator class="navigator_item" url="/pages/score/orders" >
					<view class="navigator_image_score">
						<image class="navigator_image" src="../../static/user_icon/user_score_icon.png" mode=""></image>
					</view>
					<view class="navigator_title">积分订单</view>
				</navigator>
				<navigator class="navigator_item" url="/pages/addr/index" >
					<view class="navigator_image_attr">
						<image class="navigator_image" src="../../static/user_icon/user_attr_icon.png" mode=""></image>
					</view>
					<view class="navigator_title">收货地址</view>
				</navigator>
				<navigator class="navigator_item" url="/pagesA/user/usercoupon" >
					<view class="navigator_image_coupon">
						<image class="navigator_image" src="../../static/user_icon/user_coupon_icon.png" mode=""></image>
					</view>
					<view class="navigator_title">优惠卷</view>
				</navigator>
				<navigator class="navigator_item" url="/pages/score/clockin" >
					<view class="navigator_image_order">
						<image class="navigator_image" src="../../static/user_icon/user_clockin_icon.png" mode=""></image>
					</view>
					<view class="navigator_title">签到</view>
				</navigator>
<!-- 				<navigator class="navigator_item" url="/pagesA/user/favorites" >
					<view class="navigator_image_favo">
						<view class="star_icon">
							<uni-icons type="star-filled" size="40" color= "#fff"></uni-icons>
						</view>
					</view>
					<view class="navigator_title">我的收藏</view>
				</navigator> -->
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					username:"请登录",
					userpic:"../../static/icon/doctor.png",
					phone:"kailin",
					status:0,
					city_id:0,
				},
				StatusBarHeight:0,
				TitleBarHeight:0,
				NavBarHerder:0,
			}
		},
		onLoad() {
			
		},
		onShow() {
			
			this.getStatusBarHeight();
			
			this.getTitleBarHeight();
			
			this.getNavBarHerder();
			// 登录提示
			if( !this.$checkAccess.alterLogin() ) return ;
			// 判断数据
			this.$http.request('api/custom/get_info').then((callback)=>{
				if( callback.code == 'success' ){
					if( !callback.data.userpic ) callback.data.userpic = "../../static/icon/doctor.png";
					// 赋值
					this.userInfo = callback.data;
					// 存储登录标识
					uni.setStorageSync('userInfo',callback.data);
				}
			});
		},
		methods: {
			getStatusBarHeight(){
				let SYSTEM_INFO = uni.getSystemInfoSync();
				this.StatusBarHeight = SYSTEM_INFO.statusBarHeight || 10;
			},
			
			getTitleBarHeight(){
				if(uni.getMenuButtonBoundingClientRect){
					let {top,height} = uni.getMenuButtonBoundingClientRect();
					this.TitleBarHeight = height + (top - this.StatusBarHeight)*2;
				}else{
					this.TitleBarHeight = 40
				}
			},
			
			getNavBarHerder(){
				this.NavBarHerder = this.StatusBarHeight + this.TitleBarHeight
			},
		}
	}
</script>

<style lang="less">
	// .user_box{
	// 	width: 680rpx;
	// 	height: 180rpx;
	// 	overflow: hidden;
	// 	background: #FFFFFF;
	// 	padding: 10rpx 35rpx;
	// 	.box_left{
	// 		float: left;
	// 		display: block;
	// 		width: 140rpx;
	// 		height: 140rpx;
	// 		.user_image{
	// 			display: block;
	// 			width: 120rpx;
	// 			height: 120rpx;
	// 			border-radius: 50%;
	// 			margin: 10rpx auto;
	// 		}
	// 	}
	// 	.box_center{
	// 		float: left;
	// 		width: 300rpx;
	// 		height: 140rpx;
	// 		margin-left: 35rpx;
	// 		.user_name{
	// 			font-size: 30rpx;
	// 			line-height: 80rpx;
	// 		}
	// 		.user_info{
	// 			color: #999999;
	// 			font-size: 24rpx;
	// 			line-height: 60rpx;
	// 		}
	// 	}
	// 	.box_right{
	// 		float: right;
	// 		width: 140rpx;
	// 		height: 140rpx;
	// 		font-size: 20rpx;
	// 		line-height: 140rpx;
	// 		.setting_page{
	// 			width: 140rpx;
	// 			height: 140rpx;
	// 			display: block;
	// 			overflow: hidden;
	// 			.setting_icon{
	// 				width: 60rpx;
	// 				height: 60rpx;
	// 				display: block;
	// 				margin: 40rpx auto;
	// 			}
	// 		}
	// 		.company_text{
	// 			color: #E03519;
	// 			width: 140rpx;
	// 			height: 140rpx;
	// 			font-size: 20rpx;
	// 			text-align: center;
	// 			line-height: 140rpx;
	// 		}
	// 	}
	// }
	// .navigator_list{
	// 	display: flex; // 弹性盒模型
	// 	overflow: hidden;
	// 	margin: 20rpx auto;
	// 	background: #FFFFFF;
	// 	padding: 35rpx 0rpx;
	// 	.navigator_item{
	// 		float: left;
	// 		height: 160rpx;
	// 		display: block;
	// 		margin: 0rpx auto;
	// 		text-align: center;
	// 		.navigator_image{
	// 			width: 80rpx;
	// 			height: 80rpx;
	// 			margin: 20rpx auto;
	// 			border-radius: 5rpx;
	// 		}
	// 		.navigator_title{
	// 			width: 120rpx;
	// 			display: block;
	// 			font-size: 30rpx;
	// 			line-height: 40rpx;
	// 			text-align: center;
	// 		}
	// 	}
	// }
	// .alter_info{
	// 	display: block;
	// 	color: #E03519;
	// 	font-size: 20rpx;
	// 	overflow: hidden;
	// 	margin: 20rpx auto;
	// 	background: #FFFFFF;
	// 	line-height: 40rpx;
	// 	padding: 35rpx 35rpx;
	// }
	.status_bar{
		position: fixed;
		width: 38px;
		height: 38px;
		left: 340rpx;
		margin-left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.user_box{
		width: 750rpx;
		height: 25vh;
		background-image: linear-gradient(to bottom, #ffe4e1, #f6efee);
		padding-bottom: 30rpx;
			.user_content{
				display: flex;
				.box_left{
					width: 160rpx;
					height: 160rpx;
					margin-top: 40rpx;
					margin-left: 30rpx;
					.user_image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
					}
				}
				.box_center{
					width: 300rpx;
					height: 160rpx;
					margin-top: 40rpx;
					margin-left: 20rpx;
					line-height: 80rpx;
				}
			}
	
		}
	.navigator_content{
		width: 750rpx;
		height: 75vh;
		background-color: #FFFFFF;
		.navigator_list{
				width: 690rpx;
				display: flex;
				flex-wrap: wrap;
				padding: 35rpx 0rpx;
				margin: 0rpx auto;
				.navigator_item{
					height: 180rpx;
					margin: 25rpx;
					text-align: center;
					.navigator_image_box{
						background-color: #ffac1e;
						border-radius: 40rpx;
						.navigator_image{
							width: 80rpx;
							height: 80rpx;
							margin: 20rpx auto;
							border-radius: 5rpx;
						}
					}
					.navigator_image_order{
						background-color: #ffac1e;
						border-radius: 40rpx;
						.navigator_image{
							width: 80rpx;
							height: 80rpx;
							margin: 20rpx auto;
							border-radius: 5rpx;
						}
					}
					.navigator_image_class{
						background-color: #29c78a;
						border-radius: 40rpx;
						.navigator_image{
							width: 80rpx;
							height: 80rpx;
							margin: 20rpx auto;
							border-radius: 5rpx;
						}
					}
					.navigator_image_score{
						background-color: #3a85ff;
						border-radius: 40rpx;
						.navigator_image{
							width: 80rpx;
							height: 80rpx;
							margin: 20rpx auto;
							border-radius: 5rpx;
						}
					}
					.navigator_image_attr{
						background-color: #b88fe9;
						border-radius: 40rpx;
						.navigator_image{
							width: 80rpx;
							height: 80rpx;
							margin: 20rpx auto;
							border-radius: 5rpx;
						}
					}
					.navigator_image_coupon{
						background-color: #b88fe9;
						border-radius: 40rpx;
						.navigator_image{
							width: 80rpx;
							height: 80rpx;
							margin: 20rpx auto;
							border-radius: 5rpx;
						}
					}
					.navigator_image_favo{
						background-color: #29c78a;
						border-radius: 40rpx;
						width: 120rpx;
						height: 125rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						.star_icon{
							// padding: 18rpx 0rpx;
						}
	
					}
					.navigator_title{
						width: 120rpx;
						margin-top: 20rpx;
						display: block;
						font-size: 30rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}
		
	}
</style>