subject_gxj/xj_project_app/pages/mine/index.vue

<template>
	<view class="container">
		<view class="header">
			<view class="avatar">
				<image src="@/static/desktop-logo.png" mode=""></image>
			</view>

			<view class="base-info">
				<view class="base-info-item">{{userInfo?.realName || '未命名用户'}}</view>
				<!-- 		<view class="base-info-item">{{userInfo?.sex || "性别"}}</view>
				<view class="base-info-item">{{userInfo?.age || "年龄"}}</view> -->
			</view>

			<!-- 	<view class="guide" @click="goToPage('/pages/mine/setting/index')">
				<text>编辑信息</text>
				<u-icon name="arrow-right" color="#fff" size="14" customStyle="margin-left:10rpx"></u-icon>
			</view> -->
		</view>

		<view class="func">
			<view class="func-item" @click="goToPage('/pages/mine/verify-email/index')">
				<view class="func-name">
					<view class="func-icon">
						<image src="@/static/pass-change.png" mode=""></image>
					</view>
					密码修改
				</view>

				<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
			</view>

			<view class="func-item" @click="goToPage('/pages/mine/account-manage/index')">
				<view class="func-name">
					<view class="func-icon">
						<image src="@/static/account-manage.png" mode=""></image>
					</view>
					账号管理
				</view>

				<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
			</view>

			<view class="func-item">
				<view class="func-name">
					<view class="func-icon">
						<image src="@/static/vision-now.png" mode=""></image>
					</view>
					当前版本
				</view>

				<view class="vision-now">{{visionText}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		getInfo
	} from "@/api/login.js"

	function goToPage(url) {
		uni.navigateTo({
			url
		})
	}

	let userInfo = ref(null)

	let visionText = ref(null)

	onLoad(() => {
		let vision = uni.getStorageSync('visionNow')
		visionText.value = vision ? 'V ' + vision : '获取版本失败'
		getInfo().then(res => {
			userInfo.value = res.data.user;
			if (userInfo.value.realName.length > 8) {
				let tempName = userInfo.value.realName
				userInfo.value.realName = tempName.substring(0, 7) + '...'
			}
		})
	})
</script>

<style lang="scss">
	.header {
		width: 92%;
		height: 36%;
		margin: 0 auto;
		z-index: 1;
		background: url('@/static/mine_bg.png') no-repeat;
		background-size: 494rpx 504rpx;
		background-position: 50% 120%;

		.avatar {
			position: absolute;
			top: 9.8%;
			left: 4%;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			background-color: #fff;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.base-info {
			position: absolute;
			top: 9.8%;
			left: calc(4% + 168rpx);
			display: flex;
			justify-content: space-between;
			height: 128rpx;
			width: 306rpx;

			.base-info-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFF;
			}
		}

		.guide {
			position: absolute;
			top: 9.8%;
			right: 4%;
			display: flex;
			align-items: center;
			height: 128rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.func {
		position: absolute;
		top: 20.5%;
		left: 0;
		width: 100%;
		height: 79.5%;
		padding: 40rpx 4%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.func-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 112rpx;
			font-size: 36rpx;
			color: #343437;
			line-height: 30rpx;
		}

		.func-name {
			display: flex;
			align-items: center;
		}

		.func-icon {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			margin-right: 36rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
</style>