pms-app/pages/user/index.vue

<template>
	<view class=" page  mine-container" :style="{height: `${windowHeight}px`}">
		<view class="page-back"></view>
		<view class="navgator justify-center align-center">
			<view class="nav-title">
				{{ $t('app.appName') }}
			</view>
		</view>
		<view class="content-section">
			<!--顶部个人信息栏-->
			<view class="user-info flex-row justify-start align-center">
				<image class="avatar" :src="userInfo?.avatar ? userInfo?.avatar : '/static/common/avata.gif'"></image>
				<view class="info flex-col align-center justify-start">
					<view class="text flex-row"> <span
							class="span">{{$t('user.username')}}:</span>{{ userInfo?.nickname }} </view>
					<view class="text flex-row"> <span class="span">{{$t('user.phone')}}:</span>{{ userInfo?.mobile }}
					</view>

				</view>
			</view>
			<!-- 菜单 -->
			<view class="menu-list">
				<view class="card-cell flex-row align-center justify-between" @click="navigateToChange">
					<image src="/static/user/anquanzhongxin.svg" mode="aspectFill"></image>
					<view class="cell-con flex-row align-center justify-between">
						<view class="cell-text flex-row align-center justify-start">
							<view class="title">
								{{ $t('user.securityCenter') }}
							</view>
							<view class="subtitle">
								{{ $t('user.modifyPhoneAndPassword') }}
							</view>
						</view>
						<uni-icons type="right" :color="'#CACCCF'" size="15" />
					</view>
				</view>

				<view class="card-cell flex-row align-center justify-between">
					<image src="/static/user/guanyuwomen.svg" mode="aspectFill"></image>
					<view class="cell-con flex-row align-center justify-between">
						<view class="cell-text flex-row align-center justify-start">
							<view class="title">
								{{ $t('user.aboutUs') }}
							</view>
							<view class="subtitle">
								{{ $t('user.currentVersion') + ' ' + version }}
							</view>
						</view>
						<uni-icons type="right" :color="'#CACCCF'" size="15" />
					</view>
				</view>

				<view class="card-cell flex-row align-center justify-between" @click="logout">
					<image src="/static/user/tuichu.svg" mode="aspectFill"></image>
					<view class="cell-con flex-row align-center justify-between">
						<view class="cell-text flex-row align-center justify-start">
							<view class="title">
								{{ $t('user.logout') }}
							</view>
						</view>
						<uni-icons type="right" :color="'#CACCCF'" size="15" />
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n'
	import {
		getLoginUserInfo
	} from "@/api/login";
	const {
		t
	} = useI18n({
		useScope: 'global'
	})

	import $store from '@/store';
	// const userStore = $store('user');
	//
	// const userInfo = ref(JSON.parse(getUserInfo()))
	// userInfo.value = JSON.parse(userInfo.value).user
	// console.log('useer---', userInfo.value)
	// const avatar = userInfo.value.avatar
	// const name = userInfo.value.nickname
	// const phone = userInfo.value.phone || ''
	const windowHeight = ref(0)
	uni.getSystemInfo({
		success: function(res) {
			windowHeight.value = res.windowHeight
		}
	})

	const navigateToChange = () => {
		uni.navigateTo({
			url: '/pages/user/change?info=' + JSON.stringify(userInfo.value)
		})
	}

	const userStore = $store('user')
	const logout = () => {
		uni.showModal({
			title: t('api.message'),
			content: `${t('login.logoutConfirm')}？`,
			success: async function(res) {
				if (res.confirm) {
					await userStore.LogOut();
					await uni.reLaunch({
						url: '/pages/user/login'
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	const userInfo = ref({})
	const version = ref('')
	onMounted(async () => {
		version.value = uni.getAppBaseInfo().appVersion
		userInfo.value = (await getLoginUserInfo()).data

		uni.$once('updateUserInfo', async () => {
			userInfo.value = (await getLoginUserInfo()).data
		})
	})
</script>

<style lang="scss" scoped>
	.page {
		padding: 10px !important;
	}

	.mine-container {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.page-back {
		background-image: url("/static/common/1.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 350px;
		z-index: 0;
	}

	.navgator {
		position: fixed;
		top: 1.5625rem;
		left: 0;
		width: 100%;
		height: 55px;
		padding: 15px 0;

		z-index: 2;
		// background-image: url('/static/common/nav-back.png');
	}

	.nav-title {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 22px;
		text-align: right;
		font-style: normal;
	}

	.content-section {
		position: relative;
		margin-top: 70px;
		width: 100%;
		height: calc(100% - 55px - 20px);
		overflow-y: auto;
	}

	.user-info {
		width: 100%;
		height: 80px;
		padding: 14px 20px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 6px;
		font-size: 14px;
		color: #333333;

		.avatar {
			width: 52px;
			height: 52px;
			border-radius: 50%;
			margin-right: 18px;
		}

		.info {
			width: calc(100% - 52px - 18px);
		}

	}

	.text {
		height: 19px;
		width: 100%;

		.span {
			display: block;
			min-width: 70px;
		}
	}

	.menu-list {
		height: 274px;
		background: #FFFFFF;
		border-radius: 6px;
		margin-top: 10px;
		padding: 20px;
		box-sizing: border-box;
	}

	.card-cell {
		width: 100%;
		height: 50px;

		image {
			width: 32px;
			height: 32px;
		}
	}

	.cell-con {
		margin-left: 20px;
		margin-right: 10px;
		width: calc(100% - 32px - 20px - 10px);
		height: 100%;
		border-bottom: 0.5px solid #CACCCF;
	}

	.cell-text {
		font-weight: 500;


		.title {
			font-size: 14px;
			color: #333333;
			line-height: 20px;
		}

		.subtitle {
			font-size: 12px;
			color: #999999;
			line-height: 17px;
			margin-left: 10px;
		}

		.icon {
			width: 6px;
			height: 10px;
		}
	}
</style>