Browse Source

feat: 添加消息分组功能,支持按日期(今天、昨天、更早)显示消息

zhangyong/feature-20260113094820-现金重构
zhangrenyuan 2 months ago
parent
commit
248935a43e
  1. 5
      src/components/locales/lang/en.js
  2. 9
      src/components/locales/lang/th.js
  3. 12
      src/components/locales/lang/zh-CN.js
  4. 39
      src/utils/getMessage.js
  5. 13
      src/views/home.vue

5
src/components/locales/lang/en.js

@ -969,6 +969,11 @@ export default {
registerTime: "Registered at",
},
orderNeedsReview: "A receipt order requires review",
messageGroups: {
today: "Today",
yesterday: "Yesterday",
earlier: "Earlier",
},
password: {
title: "Change Password",
oldPassword: "Old Password",

9
src/components/locales/lang/th.js

@ -30,5 +30,12 @@ export default {
waitAudit: 'รอตรวจสอบ',
passed: 'อนุมัติ',
rejected: 'ปฏิเสธ',
}
},
home: {
messageGroups: {
today: 'วันนี้',
yesterday: 'เมื่อวาน',
earlier: 'ก่อนหน้านี้',
},
},
}

12
src/components/locales/lang/zh-CN.js

@ -997,6 +997,11 @@ export default {
registerTime: "注册时间",
},
orderNeedsReview: "用户有条收款订单需审核",
messageGroups: {
today: "今天",
yesterday: "昨天",
earlier: "更早",
},
password: {
title: "修改密码",
oldPassword: "原密码",
@ -1166,5 +1171,12 @@ export default {
pending: "待处理",
refundSuccess: "退款成功",
},
// 消息
message: {
today: "今天",
yesterday: "昨天",
earlier: "更早",
},
};

39
src/utils/getMessage.js

@ -1,6 +1,7 @@
// 所有导入放在顶部
import API from '@/util/http.js';
import {ref} from "vue";
import API from '@/util/http.js'
import { ref } from 'vue'
import i18n from '@/components/locales'
// 声明变量
const messageList1 = ref()
@ -20,13 +21,13 @@ function formatTime(timeStr) {
const diffDays = Math.floor(diffHours / 24);
if (diffHours < 1) {
return `${diffMins}分钟前`;
return `${diffMins}分钟前`
} else if (diffDays < 1) {
return `${diffHours}小时前`;
return `${diffHours}小时前`
} else if (diffDays === 1) {
return '昨天';
return '昨天'
} else {
return `${msgTime.getFullYear()}-${String(msgTime.getMonth() + 1).padStart(2, '0')}-${String(msgTime.getDate()).padStart(2, '0')}`;
return `${msgTime.getFullYear()}-${String(msgTime.getMonth() + 1).padStart(2, '0')}-${String(msgTime.getDate()).padStart(2, '0')}`
}
}
@ -37,29 +38,33 @@ function formatTime(timeStr) {
* @returns {Array} 带分组信息的消息列表
*/
export function groupMessages(messages) {
const today = new Date();
today.setHours(0, 0, 0, 0);
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
const today = new Date()
today.setHours(0, 0, 0, 0)
const yesterday = new Date(today)
yesterday.setDate(yesterday.getDate() - 1)
const t = i18n.global.t
// 直接返回处理后的消息数组(每条消息带group字段)
return messages
.filter(msg => msg.flag !== 1)
.map(msg => {
const msgTime = new Date(msg.czTime);
const formattedTime = formatTime(msg.czTime);
let group;
const msgTime = new Date(msg.czTime)
const formattedTime = formatTime(msg.czTime)
let groupKey
if (msgTime >= today) {
group = '今天';
groupKey = 'today'
} else if (msgTime >= yesterday) {
group = '昨天';
groupKey = 'yesterday'
} else {
group = '更早';
groupKey = 'earlier'
}
return {...msg, czTime: formattedTime, group};
const group = t(`home.messageGroups.${groupKey}`)
return { ...msg, czTime: formattedTime, groupKey, group }
});
}

13
src/views/home.vue

@ -256,20 +256,21 @@ const displayMessages = computed(() => {
let count = 0
const limited = {}
const groupOrder = ['今天', '昨天', '更早']
const groupOrderKeys = ['today', 'yesterday', 'earlier']
for (const g of groupOrder) {
const group = groupedMessages.value[g]
for (const key of groupOrderKeys) {
const label = t(`home.messageGroups.${key}`)
const group = groupedMessages.value[label]
if (!group) continue
limited[g] = []
limited[label] = []
for (const item of group) {
if (count < 2) {
limited[g].push(item)
limited[label].push(item)
count++
}
}
if (limited[g].length === 0) delete limited[g]
if (limited[label].length === 0) delete limited[label]
if (count >= 2) break
}
return limited

Loading…
Cancel
Save