jcyjdt_applet/pages/home/index.vue

<template>
	<view class="main">
		<view class="one">
			<view class="name">{{user.name||'暂无昵称'}}</view>
			<view class="account">账号：<text>{{user.account||'暂无账号'}}</text></view>
		</view>
		<view class="two">
			<view class="list" :class="[index==0?'color0':index==1?'color1':index==2?'color2':'color3']"
				v-for="(item, index) in list" :key="index" @tap='toInfo(item)'>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				list: [{
						name: '基础研究平台',
						route: 'pagesBasic/home/index'
					},
					// {
					// 	name: '项目管理',
					// 	route: 'pagesProject/home/index'
					// },
					// {
					// 	name: '科学家工作室',
					// 	route: 'pagesStudio/home/index'
					// },
					{
						name: '退出登录',
						type: '0'
					}
				]
			}
		},
		onShow: function(e) {
			const that = this;
			that.searchToken();
		},
		methods: {
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					} else {
						uni.navigateTo({
							url: `/pages/login/index`
						})
					}
				} catch (e) {
					uni.showToast({
						title: err.errmsg,
						icon: 'error',
						duration: 2000
					});
				}
			},
			// 跳转
			toInfo(item) {
				const that = this;
				if (that.user && that.user._id) {
					if (item.type == '0') {
						uni.showModal({
							title: '提示',
							content: '确定退出登录吗?',
							success: async function(res) {
								if (res.confirm) {
									uni.removeStorage({
										key: 'token',
										success: function(res) {
											let url = `/pages/login/index`;
											uni.reLaunch({
												url
											})
										}
									});
								}
							}
						});
					} else {
						uni.navigateTo({
							url: `/${item.route}`
						})
					}

				} else {
					uni.navigateTo({
						url: `/pagesIndex/login/index`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 0 2vw;

		.one {
			border: 2px solid var(--f07CColor);
			border-radius: 10px;
			margin: 2vw 0;
			padding: 5vw;

			.name {
				font-size: var(--font18Size);
				font-weight: bold;
			}

			.account {
				margin: 2vw 0 0 0;
				font-size: var(--font14Size);

				text {
					color: var(--f85Color);
				}
			}
		}

		.two {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			.color0 {
				border: 2px solid var(--fF0Color);
				background: radial-gradient(circle at 7.2% 13.6%, rgb(255, 160, 122) 0%, rgb(255, 0, 0) 90%);
			}

			.color1 {
				border: 2px solid var(--f3CColor);
				background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(0, 122, 255) 90%);
			}

			.color2 {
				border: 2px solid var(--f08Color);
				background: radial-gradient(circle at 7.2% 13.6%, rgb(144, 238, 144) 0%, rgb(0, 128, 0) 90%);
			}

			.color3 {
				border: 2px solid var(--f07CColor);
				background: radial-gradient(circle at 7.2% 13.6%, rgb(175, 238, 238) 0%, rgb(7, 196, 175) 90%);
			}

			.list {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40vw;
				height: 40vw;
				border-radius: 30px;
				margin: 2vw 2.5vw 0 0;
				padding: 2vw;
				font-size: var(--font16Size);
				font-weight: bold;
				color: var(--mainColor);
			}

			.list:nth-child(2n) {
				margin: 2vw 0 0 0;
			}

		}
	}
</style>