payy-app/pages/myCenter/index.vue

<template>
	<view class="content">
		<view class="banner">
			<view class="avatar">
				<image :src="userAvatar" mode="widthFix"></image>
			</view>
			<view class="bottom">
				<view class="name">
					<text>{{userName}}</text>
				</view>
<!-- 				<view class="edit" @click="editHandle">
					<text class="zhcx-icon-bianji zhcx-iconfont"></text>
				</view> -->				
			</view>
		</view>
		 <uni-data-checkbox ></uni-data-checkbox>
		<view class="zhcx-table">
			<view class="zhcx-table-row" @click="handle(item.type)"
				  :class="item.type==='handle'?'drop-down':''"
				  v-for="item in items" :key="item.id">
				<view class="name">
					<text>{{item.name}}</text>
				</view>
				<view class="text" >
					<text v-if="item.type!=='handle'">{{item.value}}</text>
				</view>
			</view>			
		</view>		

	</view>
</template>

<script>
	import {request} from '@/libs/request.js';
	import {getUserInfo} from '@/api/user';
	export default{
		data(){
			return{
				userAvatar:"",
				userName:"",
				items:[
					{name:"姓名",value:""},
					{name:"电话号码",value:""},
					{name:"个人姓名",value:""},
					{name:"个人介绍",value:""}
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		methods:{
			async init(){
	
				let {data}=await getUserInfo();
				this.userAvatar=data.accountAvatar;
				this.userName=data.accountName;			
				this.$set(this.items[0],"value",data.accountName);
				this.$set(this.items[1],"value",data.accountPhone);
				this.$set(this.items[2],"value",data.accountRealName);
				this.$set(this.items[3],"value",data.accountIntro);			
			},
			handle(type){
				if(type!=='handle'){
					return;
				}				
			},
			editHandle(){
				//编辑修改密码
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.banner{
			height: 327upx;
			background-color: var(--sysblue);
			padding-top:46upx;
			.avatar{
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				overflow: hidden;
				image{
					display: block;
					width: 150upx;
					height: 150upx;
					border-radius: 50%;
				}
				margin:0 auto;
			}
			.bottom{
				position: relative;
				.name{
					font-size: 40upx;
					text-align: center;
					color: #fff;
					padding-top: 15upx;
				}
				.edit{
					position: absolute;
					right:48upx;
					bottom: 0;
					.zhcx-iconfont{
						font-size: 50upx;
						color: #fff;						
					}
				}				
			}
		}
	}
</style>