gubi/yinyuan/pages/mine/index.vue

<template>
	<view>
		<view class="personal">
			<view class="personal-main">
				<u-avatar :src="avatar" mode="square" size="60" class="u-avatar"></u-avatar>
				<view class="personal-info">
					<view class="">用户名</view>
					<view class="">{{userInfo.username}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="n-p" v-for="(item,index) in list" :key="index" hover-class="hover-class" @click="onClick(item)">
			<view style="position: relative">
				<view class="p-left">
					<u-icon :name="item.icon" size="30" color="#757575"></u-icon>
				</view>
			</view>
			<view class="p-right">
				<view class="p-right-main">
					<view class="p-right-main-name">{{item.name}}</view>
				</view>

				<view class="lfet-a">
					<view style="position: relative">
					</view>
					<u-icon name="arrow-right" size="20" class="p-right-icon"></u-icon>
				</view>
			</view>
		</view> -->
		<view class="button-login" @click="layout">退出登录</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin'])
		},
		onShow() {
			if (this.hasLogin || uni.getStorageSync("userInfo").username) {
				this.userInfo = uni.getStorageSync("userInfo")
			} else {
				uni.navigateTo({
					url: "/pages/login/login"
				})
				// uni.({
				// 	url: '/pages/index/index'
				// })
			}
		},
		data() {
			return {
				userInfo: {},
				avatar: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1730713693,2130926401&fm=26&gp=0.jpg',
				list: [
					// 	{
					// 	name: '收藏',
					// 	id: 'favorites',
					// 	icon: 'star-fill',
					// 	iconBackground: '#398c0c',
					// }, 
					// {
					// 	name: '相册',
					// 	id: 'photoAlbum',
					// 	icon: 'photo-fill',
					// 	iconBackground: '#5e2d88',
					// }, {
					// 	name: '卡包',
					// 	id: 'cardPackage',
					// 	icon: 'grid-fill',
					// 	iconBackground: '#33696c',
					// }, {
					// 	name: '表情',
					// 	id: 'expression',
					// 	icon: 'gift-fill',
					// 	iconBackground: '#833456',
					// },
					{
						name: '修改密码',
						id: 'setUp',
						icon: 'setting-fill',
						iconBackground: '#3b2021',
					},
				],
			}
		},
		methods: {
			layout() {
				this.$store.commit('logout', {})
				uni.clearStorageSync();
				uni.navigateTo({
					url: "/pages/login/login"
				})

			},
			onClick(item) {
				uni.navigateTo({
					url: "/pages/login/forget"
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.personal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0 40rpx 30rpx;
	}

	.personal-main {
		display: flex;
		align-items: center;
	}

	.personal-info {
		display: flex;
		/* flex-direction: column; */
	}

	.u-avatar {
		margin-right: 30rpx;
	}

	.navbar-right {
		padding: 0 40rpx;
	}

	.navbar-right-icon {
		margin-left: 50rpx;
	}

	.hover-class {
		background-color: #efefef;
	}

	.n-p {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.p-right-icon {
		padding: 0 40rpx;
	}

	.p-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
		margin: 20rpx;
		color: #FFFFFF;
		border-radius: 10rpx;

	}

	.p-right {
		height: 90rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main-name {
		font-size: 36rpx;
		font-weight: 500;
	}

	.p-right-main-time {
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #9d9d9d;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
</style>