MiniScm/subpkg/myAccount/myAccount.vue

<template>
	<view>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="我的账户" control="back"  bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="我的账户" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</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="modalConfirm"></u-modal>
		</view>
		<view class="btn">
			<u-button text="修改信息" color="#a09cc4" @click="gotoUpdateNameAndIdNumber"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		stringHasText
	} from '../../utils/commonUtils.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				name: '',
				phone: '',
				idNumber: '',
				canNameUpdate: false,
				modalShow: false,
				modalContent: '请完善姓名及身份证号以正常使用！'
			};
		},
		computed: {
			...mapState('m_user', ['token', 'userInfo'])
		},
		methods: {
			modalConfirm(){
				this.modalShow=false
				this.gotoUpdateNameAndIdNumber()
			},
			gotoUpdateNameAndIdNumber() {
				uni.navigateTo({
					url: '/subpkg/updateNameAndIdNumber/updateNameAndIdNumber'
				})
			}
		},
		onShow() {
			if (!stringHasText(this.userInfo.name) || !stringHasText(this.userInfo.idNumber)) {
				this.modalShow = true
			} else {
				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;
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</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>