yiliangyiyun-app/pages/user/setUp.vue

<template>
	<view class="container">
		<view class=" flex headPortrait justify-between">
			<view class="title">头像</view>
			<view class="nextStep flex">
				<view class="pictures">
					<image :src="headUrl" class="picture"></image>
				</view>
				<image src="../../static/img/myimg/gengduo1@3x.png" class="arrow" @click="switchPicture"></image>
			</view>
			
		</view>
		<view class="flex headPortrait justify-between">
			<view class="title">昵称</view>
			<view class="nextStep flex">
				<view class="username">
					{{username}}
					</view>
				<image src="../../static/img/myimg/gengduo1@3x.png" class="arrow" @click="nickname"></image>
			</view>
	
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				headUrl:"../../static/img/myimg/YongHu@3x.png",
				username:"",
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			if(this.userInfo.avatarUrl != null || this.userInfo.avatarUrl != ""){
				this.headUrl = this.userInfo.avatarUrl
			}
			if(this.userInfo.userName != null || this.userInfo.userName != ""){
				this.username = this.userInfo.userName
			}
		},
		methods:{
			switchPicture(){	
				uni.navigateTo({
					url: `/pages/user/set_picture`
				})
			},
			nickname(){
				uni.navigateTo({
					url: `/pages/user/set_nickname`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10px 10px 0px;
		background-color: #F5F6FA;
	}

	.headPortrait {
		width: 100%;
		height: 52px;
		margin-top: 15px;
		background-color: #FFFFFF;
		border-radius: 6px;
		// justify-content: flex-end;
	}

	.title {
		font-size: 16px;
		line-height: 50px;
		font-weight: 600;
		margin-left: 10px;
	}

	.pictures {
		justify-content: flex-end;
		width: 35px;
		height: 35px;
		background-color: #E0FAF6;
		border-radius: 18px;
		margin-top: 6px;
	}

	.picture {
		width: 35px;
		height: 35px;
	}
	.arrow {
		margin-left: 15px;
		width: 8px;
		height: 12px;
		top: 18px;
		// justify-content: flex-end

	}
	.nextStep{
		margin-right: 20px;
	}
	.username{
		line-height: 50px;
		color: #6D6D72;
	}
</style>