jurong_circle_front_app/pages/my/my.vue

<template>
	<view class="my-container">
		<scroll-view scroll-y="true" style="height: 100%;">
			<view v-if="user!=null">
				<view class="header">
					<view class="header-user">
						<view class="header-avatar">
							<u-avatar :src="getImageUrl(user.avatar)"></u-avatar>
						</view>
						<view class="header-username u-m-l-10">
							{{user.real_name}}
						</view>
					</view>
					<view class="header-setting">
						<image src="/static/icon/Settings.png" style="width: 100%;height: 100%;" mode=""></image>
					</view>
				</view>
				
				<view class="statistics">
					<view class="item">
						<view class="count">
							111
						</view>
						<view class="title">
							积分
						</view>
					</view>
					<view class="item">
						<view class="count">
							5
						</view>
						<view class="title">
							优惠券
						</view>
					</view>
					<view class="item">
						<view class="count">
							10
						</view>
						<view class="title">
							我的兑换
						</view>
					</view>
					<view class="item">
						<view class="count">
							283
						</view>
						<view class="title">
							我的收藏
						</view>
					</view>
				</view>

				<u-button @click="loginOut">退出登录</u-button>
			</view>
		</scroll-view>
	</view>
	<Tabbar></Tabbar>
</template>


<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getImageUrl } from '../../util/common';

	const user = ref()

	onMounted(() => {
		user.value = uni.getStorageSync("user")
		console.log(user.value);
	})

	const loginOut = () => {
		uni.removeStorageSync("token")
		uni.redirectTo({
			url: '/pages/login/login'
		})
	}
</script>

<style scoped lang="scss">
	.my-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #E3E8FF 0%, #E8EAF4 100%);
		background-blend-mode: lighten;
		padding: 60rpx 20rpx;

		.header {
			display: flex;
			width: 100%;
			justify-content: flex-end;

			.header-user {
				padding: 20rpx 10rpx;
				flex: 1;
				display: flex;
				align-items: center;
			}

			.header-setting {
				width: 52rpx;
				height: 52rpx;
			}
		}
		
		.statistics{
			display: flex;
			
			.item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				border: 1rpx solid #000;
			}
		}
	}
</style>