2025-10-15

添加字体
项目描述
聊天记录加载修改

pages/my/my.vue

@@ -1,12 +1,59 @@
 <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>
 
-		<view v-if="user!=null">
-			{{user.real_name}}
-		</view>
-
-		<u-button @click="loginOut">退出登录</u-button>
-
+				<u-button @click="loginOut">退出登录</u-button>
+			</view>
+		</scroll-view>
 	</view>
 	<Tabbar></Tabbar>
 </template>
@@ -14,10 +61,13 @@
 
 <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 = () => {
@@ -29,5 +79,42 @@
 </script>
 
 <style scoped lang="scss">
-	.my-container {}
+	.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>