消息中心

common/api/account/message.js

@@ -0,0 +1,30 @@
+// 引入 request 文件
+import request from '@/common/api/request.js'
+import {
+	prveUrl
+} from './config.js'
+
+// 获取未读消息数量
+export const getUnReadCountReq = () => {
+	return request({
+		url: prveUrl + '/user/msg/unReadCount',
+		method: 'get',
+	})
+}
+
+// 获取消息列表分页数据
+export const getUserMsgPageReq = (data) => {
+	return request({
+		url: prveUrl + '/user/msg/page',
+		method: 'get',
+		data: data
+	})
+}
+
+// 根据订单 Id 查询入账消息
+export const getMsgByOrderIdReq = (id) => {
+	return request({
+		url: prveUrl + '/user/msg/order/' + id,
+		method: 'get',
+	})
+}

components/msg-list-item/msg-list-item.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="item-bg">
+		<view class="title-info-view">
+			<view class="title-view">
+				<image src="/static/mine/msg_icon.png" mode=""></image>
+				<view class="title">
+					{{props.title}}
+				</view>
+			</view>
+			<view class="time">
+				{{props.createTime}}
+			</view>
+		</view>
+
+		<view class="msg-content-view">
+			{{props.content}}
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	interface MsgItemProps {
+		content : string,
+		title : string,
+		createTime : string
+	}
+
+	const props = defineProps<MsgItemProps>()
+</script>
+
+<style lang="scss" scoped>
+	.item-bg {
+		background-color: white;
+		// margin: 30rpx 30rpx 0 30rpx;
+		margin-bottom: 30rpx;
+		padding: 30rpx;
+		border-radius: 10rpx;
+	}
+
+	.title-info-view {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.title-view {
+		display: flex;
+		align-items: center;
+	}
+
+	.title-view image {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 20rpx;
+	}
+
+	.title {
+		font-size: 30rpx;
+	}
+
+	.time {
+		font-size: 26rpx;
+		color: #999999;
+	}
+
+	.msg-content-view {
+		margin-top: 20rpx;
+		font-size: 26rpx;
+		color: #666666;
+	}
+</style>

pages.json

@@ -213,6 +213,12 @@
 			"style": {
 				"navigationBarTitleText": "消息"
 			}
+		},
+		{
+			"path": "pages/user/message/index",
+			"style": {
+				"navigationBarTitleText": "消息通知"
+			}
 		}
 	],
 	"subPackages": [

pages/index/index.vue

@@ -151,6 +151,7 @@ import { APIhomehomePageUp, APIhome } from '@/common/api/index/index.js';
 import { APIgeocodelocation } from '@/common/api/api.js';
 import { useNavbarStore } from '@/stores/navbarStore';
 import { productStore } from '@/stores/user.js';
+import { getUnReadCountReq } from '../../common/api/account/message';
 const store = useNavbarStore();
 const storeuser = productStore();
 store.updateNavbarConfig({
@@ -352,9 +353,27 @@ onShow(async () => {
 
 const showPageLoading = ref(true);
 
+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
+		})
+	}
+}
+
 onMounted(async () => {
 	setTimeout(() => {
 		showPageLoading.value = false;
+		
+		getUnReadMsgCount();
 	}, 800);
 });
 

pages/order/confirm-order.vue

@@ -40,6 +40,13 @@
       >
     </view>
 
+		<view class="order-msg-list" v-if="listinfo.status=='done'">
+			<view class="item" v-for="item in orderMsgList" :key="item.id">
+				<msg-list-item :content="item.content" :title="item.title"
+					:create-time="item.createTime"></msg-list-item>
+			</view>
+		</view>
+
     <view class="wxQrcode" v-if="shopQrcode">
       <view class="left">
         <text class="title">扫码加好友，优惠多多</text>
@@ -265,6 +272,8 @@ import { useCartsStore } from "@/stores/carts.js";
 import { useWebSocket } from "@/stores/carts-websocket.js";
 import * as chatApi from "@/http/php/chat";
 
+	import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'
+
 function pwdClose() {
   ispws.value = false;
   pay_unlock();
@@ -413,6 +422,7 @@ import rechargeFree from "./components/rechargeFree.vue";
 import paymentMethodes from "@/components/paymentMethod.vue"; //支付方式
 import { onShow, onBackPress } from "@dcloudio/uni-app";
 import { onHide } from "@dcloudio/uni-app";
+import { getMsgByOrderIdReq } from "../../common/api/account/message";
 // 输入支付密码
 const ispws = ref(false);
 let userInfo = uni.cache.get("userInfo");
@@ -502,8 +512,24 @@ const orderorderInfo = async (isNpwGetOrderDetail = false) => {
   console.log(res);
 
   getOrderInfoAfterCalcInit(res);
+  
+  if (listinfo.status == 'done') {
+  	getOrderMsgInfo()
+  }
 };
 
+	const orderMsgList = ref([])
+
+	// 获取订单消息
+	const getOrderMsgInfo = async () => {
+		orderMsgList.value = []
+		let res = await getMsgByOrderIdReq(listinfo.id)
+
+		if (res) {
+			orderMsgList.value = res
+		}
+	}
+
 //拿到订单数据后续初始化处理
 function getOrderInfoAfterCalcInit(res) {
   console.log("getOrderInfoAfterCalcInit", res);
@@ -1762,4 +1788,8 @@ page {
     color: #666666;
   }
 }
+	
+	.order-msg-list {
+		margin-bottom: 30rpx;
+	}
 </style>

pages/order/detail.vue

@@ -16,6 +16,13 @@
 			</view>
 		</view>
 
+		<view class="order-msg-list" v-if="listinfo.status=='done'">
+			<view class="item" v-for="item in orderMsgList" :key="item.id">
+				<msg-list-item :content="item.content" :title="item.title"
+					:create-time="item.createTime"></msg-list-item>
+			</view>
+		</view>
+
 		<view class="wxQrcode" v-if="shopQrcode">
 			<view class="left">
 				<text class="title">扫码加好友，优惠多多</text>
@@ -123,6 +130,11 @@
 		onShow,
 		onBackPress
 	} from '@dcloudio/uni-app';
+	import {
+		getMsgByOrderIdReq
+	} from "@/common/api/account/message";
+
+	import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'
 
 	// 输入支付密码
 	const ispws = ref(false)
@@ -172,8 +184,10 @@
 		let res = await APIgetOrderById({
 			orderId: orderId.value
 		})
+			console.log("orderorderInfo1: res == ", res);
 		if (res) {
 			Object.assign(listinfo, res);
+			console.log("orderorderInfo: res == ", res);
 			// 历史订单
 			if (listinfo.detailMap) {
 				let combinedArray = [];
@@ -206,6 +220,22 @@
 			listinfo.pointsDiscountAmount = 0
 			// console.log(listinfo)
 
+			console.log("orderorderInfo list info: ", listinfo);
+			if (listinfo.status == 'done') {
+				getOrderMsgInfo()
+			}
+		}
+	}
+
+	const orderMsgList = ref([])
+
+	// 获取订单消息
+	const getOrderMsgInfo = async () => {
+		orderMsgList.value = []
+		let res = await getMsgByOrderIdReq(orderId.value)
+
+		if (res) {
+			orderMsgList.value = res
 		}
 	}
 
@@ -417,7 +447,7 @@
 			// 	})
 			//return
 			// } 
-			 if (orderVIP.value.payPwd == '') {
+			if (orderVIP.value.payPwd == '') {
 				uni.showModal({
 					title: '提示',
 					content: '您还未设置支付密码，是否去设置？',
@@ -584,6 +614,7 @@
 		orderVIP.value = uni.cache.get('orderVIP')
 		// 积分信息
 
+		console.log("orderInfo onMounted");
 		orderorderInfo()
 	})
 </script>
@@ -1056,4 +1087,8 @@
 
 		}
 	}
+	
+	.order-msg-list {
+		margin-bottom: 30rpx;
+	}
 </style>

pages/user/message/index.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="container">
+		<view class="list-wrap">
+			<view class="item" v-for="item in list.data" :key="item.id">
+				<msg-list-item :content="item.content" :title="item.title"
+					:create-time="item.createTime"></msg-list-item>
+			</view>
+		</view>
+		<u-loadmore :status="list.status"></u-loadmore>
+	</view>
+</template>
+
+<script setup>
+	// 导入 Vue 的响应式 API
+	import {
+		onMounted,
+		reactive
+	} from 'vue'
+	import {
+		onReachBottom
+	} from '@dcloudio/uni-app';
+	import {
+		getUserMsgPageReq
+	} from '@/common/api/account/message'
+
+	import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'
+
+	const list = reactive({
+		page: 1,
+		size: 10,
+		status: 'loading',
+		data: []
+	});
+
+	onMounted(() => {
+		getMessageList()
+	})
+
+	const getMessageList = async () => {
+		uni.showLoading({
+			title: '加载中...',
+			mask: true
+		});
+		let res = await getUserMsgPageReq({
+			page: list.page,
+			size: list.size
+		})
+
+		if (list.page == 1) {
+			list.data = res.records;
+		} else {
+			list.data.push(...res.records);
+		}
+
+		if (res.pageNumber == res.totalPage || res.records.length == 0) {
+			list.status = 'nomore';
+		}
+		uni.hideLoading();
+	}
+
+	onReachBottom(() => {
+		if (list.status != 'nomore') {
+			list.page++;
+			getMessageList();
+		}
+	});
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		background-color: #F7F7F7;
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		padding: 30rpx 30rpx 0 30rpx;
+
+		.list-wrap {
+			flex: 1;
+		}
+	}
+</style>

pages/user/user.vue

@@ -21,11 +21,38 @@
           ></image>
           <view class="name">{{ userInfo.nickName }}</view>
         </view>
-        <image
+		<view class="right-icons">
-          class="my_info_right_qr"
+			<image
-          src="/static/icon/code.png"
+			  class="my_info_right_qr"
-          mode="aspectFill"
+			  src="/static/icon/code.png"
-        ></image>
+			  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>