saas_miniprogram/pages2/wd/info.vue

<template>
	<view >
	<image mode="widthFix" src="/static/wd_bg_login.jpg" class="login_full_img"></image>
	<u-navbar  title="我的资料" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
		
	</u-navbar>
	
	<view  class="loginBox">
		<view style="display: flex;height: 160rpx;justify-content: center;" >
			<view style="text-align: center;">
				<image  :src="$method.splitImgHost(form.avatar, true)" class="avatar"></image>
				<view class="nick">{{form.realname}}</view>
				<view>
					<view class="item">
						<view>我的昵称</view>
						<view>{{form.nickname}}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view class="item">
						<view>性别</view>
						<view>{{ array_sex[form.sex] }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view class="item">
						<view>年龄</view>
						<view>{{ $method.getYears(form.userBirth) }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view class="item">
						<view>关联学员身份</view>
						<view style="display: flex;">
							<view style="text-align: right;">
								<view>{{ form.realname }}</view>
								<view>{{ form.idCard }}</view>
							</view>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view class="item">
						<view>所在城市</view>
						<view>{{ form.province }}-{{ form.city }}-{{ form.district }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view class="item">
						<view>手机号码</view>
						<view>{{ form.telphone }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view class="item">
						<view>微信绑定</view>
						<view>nihongjiewechat<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
export default {
	data() {
		return {
			form:{},
			array_sex: ['男', '女'],
			
		};
	},
	onShow(){
		this.form = this.userInfo
		console.log(this.form)
	},
	onLoad(option) {
		
	},
	methods: {
		
	},
	computed: {...mapGetters(['userInfo'])},
	watch:{
		userInfo(val, oldVal){//普通的watch监听
		     if(val){
				 this.form = this.userInfo
			 }
		 },
	}
	
};
</script>
<style >
	page{
		background-color: #F0F1F5;
	}
	
</style>

<style scope>
	.item{
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		color: #666666;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
	}
	.nick{
		font-size: 36rpx;
		font-weight: bold;
		color: #007AFF;
		margin-top: 20rpx;
	}
	.loginBox{
		position: relative;
		top: -108px;
	}
	.avatar{
		width: 80px;
		height: 80px;
	}
	.login_full_img {
		display: block;
		width: 100%;
		height: 280rpx !important;
		z-index: -999;
		top: 0;
	}
	.full_img {
		display: block;
		width: 100%;
		z-index: -999;
		top: 0;
	}
	.loginBtn{
		width: 526rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #015EEA, #00C0FA);
		box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
		border-radius: 40rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
</style>