notarization_applet/pages/my/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="left">
				<u-avatar :text="formatName(user.nickname)" shape="square" fontSize="20" randomBgColor></u-avatar>
			</view>
			<view class="right" @tap="toLogin">
				<text v-if="user._id">{{user.nickname||'证'}}</text>
				<text v-else>点击登录</text>
				<u-icon :bold="true" color="#000" name="arrow-right" top="2px" size="18"></u-icon>
			</view>
		</view>
		<view class="two">
			<view class="list" v-for="(item, index) in $config.menuList" :key="index" @click="toCommon(item.route)">
				<view class="left">
					<view class="icon">
						<u-icon :name="item.icon" size="22"></u-icon>
					</view>
					<text class="title">{{item.title||'暂无'}}</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({});
	// 用户信息
	const user = ref({});
	onLoad(async () => {
		await searchConfig();
		await search();
	})
	onShow(() => {
		searchUser();
	})
	// 用户信息
	const searchUser = async () => {
		user.value = uni.getStorageSync('user');
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
	};
	// 登录
	const toLogin = () => {
		uni.navigateTo({
			url: `/pagesHome/login/index`
		})
	};
	// 公共跳转
	const toCommon = (e) => {
		if (user.value && user.value._id) {
			if (e) {
				uni.navigateTo({
					url: `/${e}`
				})
			} else {
				try {
					uni.clearStorage();
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} catch (e) { }
			}
		} else {
			uni.navigateTo({
				url: `/pagesHome/login/index`
			})
		}
	};
	const formatName = (str) => {
		if (str) return str.substr(0, 1) + new Array(str.length).join('');
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: var(--f1Color);

		.one {
			display: flex;
			align-items: center;
			padding: 0 8vw;
			height: 25vh;
			background: linear-gradient(to bottom, #2979ff, #f1f1f1);

			.left {
				.image {
					width: 50px;
					height: 50px;
					border-radius: 50px;
				}
			}

			.right {
				display: flex;
				align-items: center;
				margin: 0 0 0 3vw;
				font-size: var(--font16Size);
				font-weight: bold;
			}
		}

		.two {
			display: flex;
			flex-direction: column;
			padding: 2vw;
			margin: 2vw;

			.list {
				display: flex;
				justify-content: space-between;
				padding: 4vw;
				margin: 0 0 2vw 0;
				border-bottom: 1px solid var(--f9Color);
				background-color: var(--mainColor);
				border-radius: 10px;

				.left {
					display: flex;
					align-items: center;

					.icon {
						padding: 0 1vw 0 0;
					}

					.title {
						display: inline-block;
						font-size: var(--font14Size);
					}
				}

				.right {
					font-size: var(--font12Size);
					color: var(--f99Color);
				}
			}
		}
	}
</style>