我的页面样式

pages/user/index.vue

@@ -6,8 +6,17 @@
         {{ $t("app.user") }}
       </view>
 
-      <view class="nav-icon" style="position: absolute; right: 20px">
-        <uni-icons type="gear" size="24" color="#fff"></uni-icons>
+      <view class="nav-actions">
+        <view class="notice-wrap" @click="navigateToMessage">
+          <uni-badge :text="messageCount" absolute="rightTop" size="small">
+            <view class="notice-button">
+              <image
+                src="~@/static/home/message.png"
+                style="width: 15px; height: 15px; background-color: transparent"
+              />
+            </view>
+          </uni-badge>
+        </view>
       </view>
     </view>
     <view class="content-section">
@@ -159,6 +168,8 @@ import { getCurrentWgtInfo } from "@/utils/hot-update";
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { getLoginUserInfo } from "@/api/login";
+import { getUnreadMessageCount } from "@/api/message";
+import { onShow } from "@dcloudio/uni-app";
 const { t } = useI18n({
   useScope: "global",
 });
@@ -185,6 +196,12 @@ const navigateToChange = () => {
   });
 };
 
+const navigateToMessage = () => {
+  uni.navigateTo({
+    url: "/pages/message/index",
+  });
+};
+
 const userStore = $store("user");
 const logout = () => {
   uni.showModal({
@@ -205,8 +222,19 @@ const logout = () => {
 
 const userInfo = ref({});
 const version = ref("");
+const messageCount = ref(0);
+
+const loadUserPageData = async () => {
+  const [userRes, messageRes] = await Promise.all([
+    getLoginUserInfo(),
+    getUnreadMessageCount(),
+  ]);
+  userInfo.value = userRes?.data || {};
+  messageCount.value = messageRes?.code === 0 ? messageRes.data || 0 : 0;
+};
+
 onMounted(async () => {
-  userInfo.value = (await getLoginUserInfo()).data;
+  await loadUserPageData();
   const wgtInfo = await getCurrentWgtInfo();
   version.value = wgtInfo?.version || "";
 
@@ -214,6 +242,10 @@ onMounted(async () => {
     userInfo.value = (await getLoginUserInfo()).data;
   });
 });
+
+onShow(() => {
+  loadUserPageData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -253,6 +285,14 @@ onMounted(async () => {
   // background-image: url('/static/common/nav-back.png');
 }
 
+.nav-actions {
+  position: absolute;
+  right: 30px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .nav-title {
   font-family: PingFang-SC, PingFang-SC;
   padding-bottom: 10rpx;
@@ -271,10 +311,24 @@ onMounted(async () => {
   overflow-y: auto;
 }
 
+.notice-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.notice-button {
+  width: 30rpx;
+  height: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .user-info {
   width: 100%;
   height: 120px;
   padding: 14px 20px;
+  padding-top: 20px;
   box-sizing: border-box;
   background: #ffffff;
   border-radius: 6px;