消息中心

pages/user/user.vue

@@ -21,11 +21,38 @@
           ></image>
           <view class="name">{{ userInfo.nickName }}</view>
         </view>
-        <image
-          class="my_info_right_qr"
-          src="/static/icon/code.png"
-          mode="aspectFill"
-        ></image>
+		<view class="right-icons">
+			<image
+			  class="my_info_right_qr"
+			  src="/static/icon/code.png"
+			  mode="aspectFill"
+			></image>
+		<view class="msg-view" @click="viewUserMsgList">
+			<view class="msg-icon-wrapper">
+				<image
+				v-if="unreadMsgCount > 0"
+				class="my-msg-icon"
+				src="/static/mine/msg_select.png"
+				mode="aspectFill"
+				></image>
+				<image
+				v-else
+				class="my-msg-icon"
+				src="/static/mine/msg.png"
+				mode="aspectFill"
+				></image>
+
+				<!-- 角标 -->
+				<view
+				v-if="unreadMsgCount > 0"
+				class="badge"
+				>
+				<text class="badge-text">{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}</text>
+				</view>
+			</view>
+		</view>
+		</view>
+
 
         <!-- 		<image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
 					:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
@@ -258,6 +285,7 @@ import { productStore } from "@/stores/user.js";
 import * as vipApi from "@/common/api/account/vip.js";
 import * as rechargeApi from "@/common/api/market/recharge.js";
 import { pointsShopList } from '@/common/api/market/points.js'
+import { getUnReadCountReq } from "../../common/api/account/message";
 
 
 
@@ -473,6 +501,32 @@ function toCoin() {
   });
 }
 
+const unreadMsgCount = ref(0);
+
+const getUnReadMsgCount = async () => {
+	let res = await getUnReadCountReq()
+
+	let badge = Number(res)
+	if (badge > 0) {
+		uni.setTabBarBadge({
+			index: 2,
+			text: badge.toString()
+		})
+	} else {
+		uni.removeTabBarBadge({
+			index: 2
+		})
+	}
+
+	unreadMsgCount.value = badge
+}
+
+const viewUserMsgList = () => {
+	uni.navigateTo({
+		url: "/pages/user/message/index"
+	})
+}
+
 onShow(() => {
   store.actionsAPIuser();
   if (uni.cache.get("shopId")) {
@@ -485,6 +539,8 @@ onShow(() => {
   }
   console.log("userInfo", userInfo);
   getData();
+
+  getUnReadMsgCount()
 });
 
 const qrcode = ref("");
@@ -547,11 +603,6 @@ const showQrcode = computed(() => {
         color: #ffffff;
       }
     }
-
-    .my_info_right_qr {
-      width: 40rpx;
-      height: 40rpx;
-    }
   }
 
   .my_item {
@@ -673,4 +724,47 @@ const showQrcode = computed(() => {
   position: fixed;
   transform: translateX(200vw, 200vh);
 }
+
+.right-icons {
+  display: flex;
+
+  .my_info_right_qr {
+    width: 50rpx;
+    height: 50rpx;
+  }
+
+  .msg-icon-wrapper {
+    position: relative;
+    margin-left: 30rpx;
+  }
+
+  .my-msg-icon {
+    width: 50rpx;
+    height: 50rpx;
+  }
+
+  // 角标样式
+  .badge {
+    position: absolute;
+    top: -8rpx;
+    right: -8rpx;
+    min-width: 32rpx;
+    height: 32rpx;
+    background-color: #ff3b30;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6rpx;
+    z-index: 10;
+
+    .badge-text {
+      color: white;
+      font-size: 20rpx;
+      font-weight: bold;
+      line-height: 1;
+      text-align: center;
+    }
+  }
+}
 </style>