Applet/pages/my/index.vue

<template>
	<view class="container">
		<view class="top">
			<image class="avatar"mode="aspectFill" :src="src"></image>
			<text v-if="role && role !== 'guest'" class="name">{{ userInfo.name}}</text>
			<button v-else type="default" :plain="true" style="border: none;" class="login" @click="register">注册</button>
		</view>
		<view class="main" v-if="role && role !== 'guest'">
			<uni-card>
				<uni-list :border="false">
					<uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[0]" title="个人资料" link clickable @click="onClick(0)"></uni-list-item>
				</uni-list>
			</uni-card>
			<uni-card>
				<uni-list :border="false">
					<uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[1]" title="家庭成员" link clickable @click="onClick(1)"></uni-list-item>
				</uni-list>
			</uni-card>
			<uni-card>
				<uni-list :border="false">
					<uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[2]" title="问卷调查" link clickable @click="onClick(2)"></uni-list-item>
				</uni-list>
			</uni-card>
			<uni-card>
				<uni-list :border="false">
					<uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[3]" title="我的积分" link clickable @click="onClick(3)"></uni-list-item>
				</uni-list>
			</uni-card>
			<!-- <uni-card>
				<uni-list :border="false">
					<uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[4]" title="意见反馈" link clickable @click="onClick(4)"></uni-list-item>
				</uni-list>
			</uni-card> -->
			<!-- <uni-card class="logoutBox">
				<uni-list :border="false">
					<uni-list-item size="mini" class="logout" title="退出登录" clickable @click="onClick(4)"></uni-list-item>
				</uni-list>
			</uni-card> -->
		</view>
	</view>
</template>

<script>
	import request from '../../api/user.js';
	import requestLogin from '../../api/login.js';
	export default {
		data() {
			return {
				extraIconList: [
					{
						color: '#ff8319',
						size: '22',
						type: 'person'
					},
					{
						color: '#ebc200',
						size: '22',
						type: 'home'
					},
					{
						color: '#429ff6',
						size: '22',
						type: 'mail-open-filled'
					},
					{
						color: '#4cd964',
						size: '22',
						type: 'star-filled'
					},
					{
						color: '#e70000',
						size: '22',
						type: 'email-filled'
					}
				],
				src: '',
				userInfo: {},
				role: ''
			}
		},
		async onShow() {
			this.role = uni.getStorageSync('role');
			if (this.role !== 'guest') {
				const userinfo = await request.getUser();
				uni.setStorageSync('userinfo', userinfo.data);
				this.userInfo = userinfo.data;
			}
		},
		async mounted() {
			const config = await requestLogin.getJson();
			const { avatar } = config.data;
			this.src = avatar;
			if (this.role == 'guest') {
				uni.navigateTo({
					url: '/pages/register/index'
				});
				return;
			}
		},
		methods: {
			register() {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			},
			onClick(e) {
				if (e == 0) {
					uni.navigateTo({
						url: '/pages/user/index'
					})
					return;
				}
				if (e == 1) {
					this.illness();
					return;
				}
				if (e == 2) {
					uni.navigateTo({
						url: '/pages/questionnaire/index'
					})
					return;
				}
				if (e == 3) {
					uni.navigateTo({
						url: '/pages/integral/index'
					})
					return;
				}
				uni.showToast({
					title: '敬请期待',
					icon: 'error',
					duration: 2000,
				});
			},
			illness() {
				uni.navigateTo({
					url: '/pages/illness/receive'
				})
			},
			logOut() {
				uni.clearStorage();
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
	}
	.top {
		height: 25vh;
		background-color: #cb0714;
		padding-top: 10px;
		position: relative;
		z-index: 1;
	}
	.avatar {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		overflow: hidden;
		display: block;
		margin: 0 auto;
	}
	.name {
		color: #fff;
		width: 100%;
		text-align: center;
		display: block;
		margin: 10px 0;
	}
	.login {
		margin: 10px auto;
		color: #fff !important;
		padding: 0;
		line-height: 1em;
	}
	.main {
		width: 90%;
		display: block;
		margin: 0 auto;
		margin-top: -40px;
		position: relative;
		z-index: 2;
	}
	.logoutBox {
		display: block;
		margin-top: 50px;
	}
	.logout .uni-list-item__content-title {
		text-align: center;
	}
</style>