MiniScm/subpkg/myAccount/myAccount.vue

<template>
	<view>
		<view class="infoItem">
			<u-text text="姓名"></u-text>
			<u-text :text="name" align="right"></u-text>
		</view>
		<view class="infoItem">
			<u-text text="身份证号"></u-text>
			<u-text :text="idNumber" align="right"></u-text>
		</view>
		<view class="infoItem">
			<u-text text="手机号"></u-text>
			<u-text :text="phone" align="right"></u-text>
		</view>
		<view>
			<u-modal :show="modalShow" :content="modalContent" @confirm="modalShow=false"></u-modal>
		</view>
		<view class="btn">
			<u-button text="修改信息" color="#7896F5" @click="gotoUpdateNameAndIdNumber"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				name: '',
				phone: '',
				idNumber: '',
				canNameUpdate: false,
				modalShow: false,
				modalContent: '请完善姓名及身份证号以正常使用！'
			};
		},
		computed: {
			...mapState('m_user', ['token', 'userInfo'])
		},
		methods: {
			gotoUpdateNameAndIdNumber(){
				uni.navigateTo({
					url: '/subpkg/updateNameAndIdNumber/updateNameAndIdNumber'
				})
			}
		},
		onShow() {
			this.name = this.userInfo.name ? this.userInfo.name[0] + '**' : '';
			this.idNumber = this.userInfo.idNumber.slice(0, 6) + '********' + this.userInfo.idNumber.slice(14, 18);
			this.phone = this.userInfo.phone;
		},
		onLoad(options) {
			if (options.needSetIdNumber === 'true') {
				this.modalShow = true
			}
		}
	}
</script>

<style lang="scss">

	.infoItem {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 40rpx;
		border-bottom: black 1px solid;
	}
	.btn{
		margin: 40rpx auto;
		width: 80vw;
		color: #FFFFFF;
	}
</style>