cxyy-applet/pages/my/index.vue

<template>
	<view class="container main">
		<view class="one">
			<view class="one_1">
				<view v-if="user.id" class="top" @tap="toView">
					<view class="top_left">
						<text class="t-icon t-icon-yonghu1"></text>
						<text class="name">{{user.nick_name||'微信用户'}}</text>
					</view>
					<view class="top_right">
						<text class="t-icon t-icon-tiaozhuan"></text>
					</view>
				</view>
				<view v-else class="top" @tap="toLogin">
					<view class="top_left">
						<text class="t-icon t-icon-yonghu1"></text>
						<text class="name">登录/注册</text>
					</view>
					<view class="top_right">
						<text class="t-icon t-icon-tiaozhuan"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="two">
			<view class="list" v-for="(item, index) in menuList" :key="index" @click="toCommon(item.route,item.type)">
				<view class="left">
					<text class="t-icon" :class="[item.icon]"></text>
					<text class="title">{{item.title||'暂无'}}</text>
				</view>
				<view class="right">
					<text class="t-icon t-icon-tiaozhuan"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				// 菜单
				menuList: []
			}
		},
		onShow: async function() {
			const that = this;
			await that.searchToken();
			await that.searchOther();
		},
		methods: {
			async searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						let arr;
						arr = await that.$api(`/user/${user.id}`, 'GET', {})
						if (arr.errcode == '0') {
							that.$set(that, `user`, arr.data)
						} else {
							uni.showToast({
								title: arr.errmsg,
							});
						}
					} else {
						that.$set(that, `user`, {});
					}
				} catch (e) {}
			},
			searchOther() {
				const that = this;
				let config = that.$config;
				let isShow = false
				if (that.user.id) {
					const hasCompetition = that.user.role.find((f) => f === 'Competition')
					if (hasCompetition) isShow = true
				}
				if (!isShow) config.menuList = config.menuList.filter((f) => f.title !== '我的赛事')
				that.$set(that, `menuList`, config.menuList);
			},
			// 登录或注册
			toLogin() {
				uni.navigateTo({
					url: `/pagesHome/login/index`
				})
			},
			// 查看用户信息
			toView() {
				uni.navigateTo({
					url: `/pagesMy/account/index`
				})
			},
			// 公共跳转
			toCommon(e, type) {
				const that = this;
				if (that.user && that.user.id || type == '1') {
					uni.navigateTo({
						url: `/${e}`
					})
				} else {
					uni.navigateTo({
						url: `/pagesHome/login/index`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: var(--footColor);

		.one {
			margin: 2vw;
			border-radius: 10px;
			background-color: var(--mainColor);

			.one_1 {
				padding: 4vw;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

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

						.name {
							margin: 0 2vw;
							font-size: var(--font16Size);
						}

						.t-icon {
							width: 70px !important;
							height: 70px !important;
						}
					}

					.top_right {
						.t-icon {
							width: var(--font14Size) !important;
							height: var(--font14Size) !important;
							color: var(--f99Color) !important;
						}
					}
				}
			}
		}


		.two {
			display: flex;
			flex-direction: column;
			padding: 2vw;
			margin: 0 2vw;
			border-radius: 10px;
			background-color: var(--mainColor);

			.list {
				display: flex;
				justify-content: space-between;
				padding: 3vw 2vw;
				border-bottom: 1px solid var(--f9Color);

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

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

				.right {
					.t-icon {
						width: var(--font14Size) !important;
						height: var(--font14Size) !important;
						color: var(--f99Color) !important;
					}
				}
			}
		}
	}
</style>