zhengbasai/pages/mine/mine.vue

<template>
	<div class="mine">
		<div class="top">
			<UserInfoCard :userInfo="userInfo" />
		</div>
		<div class="list">
			<div class="item" @click="skipUrl('/pages/index/first_email')">
				<image src="@/static/images/mine/icon_1.png" mode="" class="icon"></image>
				<div class="text">第一封信</div>
				<u-icon name="arrow-right"></u-icon>
			</div>
			<div class="item" @click="skipUrl('/pages/gift/record')">
				<image src="@/static/images/mine/icon_2.png" mode="" class="icon"></image>
				<div class="text">兑换订单</div>
				<u-icon name="arrow-right"></u-icon>
			</div>
			<div class="item" @click="skipUrl('/pages/xuefen/record')">
				<image src="@/static/images/mine/icon_3.png" mode="" class="icon"></image>
				<div class="text">学分记录</div>
				<u-icon name="arrow-right"></u-icon>
			</div>
			<div class="item" @click="skipUrl('/pages/address/list')">
				<image src="@/static/images/mine/icon_4.png" mode="" class="icon"></image>
				<div class="text">地址管理</div>
				<u-icon name="arrow-right"></u-icon>
			</div>
			<div class="item" @click="skipUrl('/pages/mine/guize')">
				<image src="@/static/images/mine/icon_5.png" mode="" class="icon"></image>
				<div class="text">规则说明</div>
				<u-icon name="arrow-right"></u-icon>
			</div>
	<!-- 		<div class="item" @click="skipUrl('/pages/mine/test')">
				<image src="@/static/images/mine/icon_5.png" mode="" class="icon"></image>
				<div class="text">测试页面</div>
				<u-icon name="arrow-right"></u-icon>
			</div> -->
			<div class="item" @click="doLoginOut">
				<image src="@/static/images/mine/icon_7.png" mode="" class="icon"></image>
				<div class="text">退出登录</div>
				<u-icon name="arrow-right"></u-icon>
			</div>
		</div>
	</div>


</template>

<script>
	import UserInfoCard from '@/components/UserInfoCard.vue'

	export default {
		components: {
			UserInfoCard
		},
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			//获取当前用户的信息
			getUserInfo() {
				this.$u.get('/base/auth/me').then(res => {
					console.log(res)
					this.userInfo = res.data
					this.$u.vuex('vuex_user', res.data)
				})
			},
			skipUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			//退出登录
			doLoginOut() {
				uni.showModal({
					title: '提示',
					content: '您确定要退出当前登录账号吗？',
					success: (res) => {
						if (res.confirm) {
							this.$u.get('/base/auth/logout').then(res => {
								this.$u.vuex('vuex_token', '')
								uni.reLaunch({
									url: '/pages/login/skip'
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background: #F5F5F5;
	}

	.mine {
		.top {
			padding: 12px 12px 28px;
			background-color: #fff;
		}

		.list {
			padding: 20px 12px 20px;
			background: #F5F5F5;

			.item {
				padding: 20px;
				display: flex;
				align-items: center;
				border-radius: 12px;
				margin-bottom: 20px;
				opacity: 1;
				background: #FFFFFF;

				.text {
					flex: 1;
					font-size: 17px;
					color: #000000;
					margin-left: 12px;
				}

				.icon {
					height: 24px;
					width: 24px;
				}
			}
		}
	}
</style>