MiniScmV3/subpkg/myAccount/myAccount.vue

<template>
	<view class="account-info">
		<view class="info-item">
			<view class="item-label">
				<text>姓名</text>
			</view>
			<view class="item-content">
				<text>{{name}}</text>
			</view>
		</view>
		<view class="info-item">
			<view class="item-label">
				<text>身份证号</text>
			</view>
			<view class="item-content">
				<text>{{idNumber}}</text>
			</view>
		</view>
		<view class="info-item">
			<view class="item-label">
				<text>手机号</text>
			</view>
			<view class="item-content">
				<text>{{phone}}</text>
			</view>
		</view>
	</view>
	<view class="update-button">
		<button @click="gotoUpdateUserInfo">修改信息</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '../../store/userStore'
	let name = ref('')
	let idNumber = ref('')
	let phone = ref('')
	const userInfo = useUserStore().userInfo

	function gotoUpdateUserInfo() {
		uni.navigateTo({
			url: '/subpkg/updateUserInfo/updateUserInfo'
		})
	}

	onShow(() => {
		if (userInfo.name && userInfo.idNumber && userInfo.phone) {
			if (userInfo.name.length == 2) {
				name.value = userInfo.name[0] + '*'
			} else {
				name.value = userInfo.name[0] + '*' + userInfo.name[userInfo.name.length - 1]
			}
			idNumber.value = userInfo.idNumber.slice(0, 6) + '********' + userInfo.idNumber.slice(14, 18)
			phone.value = userInfo.phone.slice(0, 3) + '****' + userInfo.phone.slice(7)
		} else {
			uni.showModal({
				title: '请完善姓名及身份证号以正常使用！',
				success: res => {
					gotoUpdateUserInfo()
				},
				showCancel: false
			})
		}
	})
</script>

<style lang="scss">
	.account-info {
		.info-item {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 40rpx;
			border-bottom: black 1px solid;
			font-size: 30rpx;
		}
	}

	.update-button {
		button {
			margin: 40rpx auto;
			width: 80vw;
			background-color: #a09cc4;
			color: #ffffff;
		}
	}
</style>