kailin_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>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					username:"请登录",
					userpic:"../../static/icon/doctor.png",
					phone:"kailin",
					status:0,
					city_id:0,
				},
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShow() {
			// 登录提示
			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: {
			
		}
	}
</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;
	}
</style>