school/pages/user/userInfo.vue

<template>
	<view class="content">
		<view class="row1">
			<text class="tit">头像</text>
			<view class="background-img"><image class="background-img" v-model="avatar" :src="avatar" mode="aspectFill"></image></view>
		</view>
		<view class="row">
			<text class="tit">家长</text>
			<input class="input" type="text" v-model="patriarch" placeholder-class="placeholder" />
		</view>
		<view class="row">
			<text class="tit">学生</text>
			<input class="input" type="text" v-model="student" placeholder-class="placeholder" />
		</view>
		<view class="row">
			<text class="tit">手机号</text>
			<input class="input" type="text" v-model="phone" placeholder-class="placeholder" />
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default{
	data(){
		return{
			avatar: '',
			patriarch: '',
			student: '',
			phone: ''
		}
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	onShow(option) {
		// 获取生日日期
		this.patriarch = this.userInfo.real_name || '';
		this.avatar = this.userInfo.avatar || '';
		this.phone = this.userInfo.phone || '';
	},
}
</script>

<style lang="scss">
	.row1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;
		margin-bottom: 20upx;
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: $font-lg;
			color: $font-color-dark;
		}
		
		.background-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #f2f2f2;
		}
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;
	
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: $font-lg;
			color: $font-color-dark;
		}
		.tit1 {
			flex-shrink: 0;
			width: 150upx;
			font-size: $font-lg;
			color: $font-color-dark;
			
		}
		.input {
			flex: 1;
			font-size: $font-base;
			color: $color-gray;
		}
	}
</style>