huihouqin-new-ph/pages/user/index.vue

<template>
	<view>
		<view class="user-bg"> 
			<image src="../../images/userbg.png"></image>
		</view>
		
		<view class="user-top">
			<view class="user-info">
				<view class="user-info-avatar">
					<image v-if="imgLoad" :src="img" @error="onErrorImg" @load="onSuccessImg"></image>
					<image v-if="!imgLoad" src="../../images/avatar.png"></image>
				</view>
				<view class="user-info-nick">{{nickName}}</view>
			</view>
			
			<view class="menu-box">
				<view class="menu-box-list" @click="goAddress">
					<text class="menu-box-list-text">收货地址</text>
					<image class="menu-box-list-right" src="../../images/jiantouyou.png"></image>
				</view>
				<view class="menu-box-list" @click="goOrder">
					<text class="menu-box-list-text">我的订单</text>
					<image class="menu-box-list-right" src="../../images/jiantouyou.png"></image>
				</view>
				<view class="menu-box-list" @click="goIndex">
					<text class="menu-box-list-text">去订餐</text>
					<image class="menu-box-list-right" src="../../images/jiantouyou.png"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				nickName: '',
				img: '',
				imgLoad: true
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				this.nickName = res.data.data.nickname;
				this.img = res.data.data.img;
			}
		},
		methods: {
			goAddress(){
				uni.navigateTo({
				    url: '/pages/address/index'
				});
			},
			goOrder(){
				uni.navigateTo({
				    url: '/pages/order/index'
				});
			},
			goIndex(){
				uni.navigateTo({
				    url: '/pages/index/index'
				});
			},
			getUserInfo(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopUser/userInfo',
					type: 'POST',
					apiname: 'user'
				});
			},
			onErrorImg(item){
				this.imgLoad = false;
				this.$forceUpdate();
			},
			onSuccessImg(item){
				this.imgLoad = true;
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-bg{
		position: absolute;
		width: 750rpx;
		height: 475rpx;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.user-bg image{
		width: 100%;
		height: 100%;
	}
	.user-top{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.user-info{
		overflow: hidden;
		padding-top: 80rpx;
		padding-bottom: 40rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.user-info-avatar{
		overflow: hidden;
	}
	.user-info-avatar image{
		width: 128rpx;
		height: 128rpx;
		// border: 4rpx solid #FFFFFF;
		border-radius: 66rpx;
	}
	.menu-box{
		width: 687rpx;
		height: auto;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		padding: 0 15rpx;
	}
	.menu-box .menu-box-list{
		height: 108rpx;
		line-height: 108rpx;
		border-bottom: 1px solid #CCCCCC;
	}
	.menu-box .menu-box-list .menu-box-list-text{
		display: inline-block;
		width: 660rpx;
		vertical-align: middle;
	}
	.menu-box .menu-box-list .menu-box-list-right{
		width: 12rpx;
		height: 22rpx;
		vertical-align: middle;
	}
	.menu-box .menu-box-list:last-child{
		border: 0;
	}
	
</style>