MiniScm/subpkg/myAccount/myAccount.vue

<template>
	<view class="page">
		<view class="infoItem" @click="gotoUpdateName">
			<text class="tip">姓名</text>
			<text class="info">{{name}}</text>
		</view>
		<view class="infoItem" @click="gotoUpdateIdNumber">
			<text class="tip">身份证号</text>
			<text class="info">{{idNumber}}</text>
		</view>
		<view class="infoItem">
			<text class="tip">手机号</text>
			<text class="info">{{phone}}</text>
		</view>
		<view class="infoItem">
			<text class="tip">邮箱</text>
			<text class="info">{{email}}</text>
		</view>
		<view>
			<u-modal :show="modalShow" :content="modalContent" @confirm="modalShow=false"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				name: '',
				phone: '',
				email: '',
				idNumber: '',
				canNameUpdate: false,
				modalShow: false,
				modalContent: '请完善姓名及身份证号以正常使用！'
			};
		},
		computed: {
			...mapState('m_user', ['token', 'userInfo'])
		},
		methods: {
			gotoUpdateName() {
				if (this.canNameUpdate) {
					uni.navigateTo({
						url: '/subpkg/updateName/updateName'
					})
				} else {
					uni.$showMsg('您已修改过姓名，无法再次修改')
				}
			},
			gotoUpdateIdNumber() {
				uni.navigateTo({
					url: '/subpkg/updateIdNumber/updateIdNumber'
				})
			}
		},
		onShow() {
			this.canNameUpdate = this.userInfo.canNameUpdate;
			this.name = (this.userInfo.name ? this.userInfo.name[0] + '**' : '') + (this.userInfo.canNameUpdate ? ' >' :
				'');
			this.idNumber = (this.userInfo.idNumber ?
				this.userInfo.idNumber.slice(0, 6) + '********' + this.userInfo.idNumber.slice(14, 18) :
				'立即完善') + ' >';
			this.phone = (this.userInfo.phone ? this.userInfo.phone.slice(0, 3) + '****' + this.userInfo.phone.slice(7,
				11) : '') + ' >';
			this.email = (this.userInfo.email || '') + '无 >';
		},
		onLoad(options) {
			if (options.needSetIdNumber === 'true') {
				this.modalShow = true
			}

		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #F5F5F5;
	}

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