需求:
时间显示规则:
5分钟内的消息显示同一个时间,超过5分钟间隔的每条都显示时间(以显示的时间开始计算5分钟,和目前的IM时间显示规则保持一致)
/**
* 个位数,加0前缀
* @param {*} number
* @returns
*/
function addZeroPrefix(number) {
return number < 10 ? `0${number}` : number
}
/**
* 返回当天凌晨时间
* @export
* @param {*} time
* @returns
*/
function getTodayTime() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const today = `${year}/${month}/${day}`
const todayTime = new Date(today).getTime() // 当天凌晨的时间
return todayTime
}
/**
* 返回年月日
* @export
* @param {Date} date
* @param {string} [splitor='-']
* @returns
*/
export function getDate(date, splitor = '-') {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}${splitor}${addZeroPrefix(month)}${splitor}${addZeroPrefix(day)}`
}
/**
* 返回时分秒/时分
* @export
* @param {*} date
* @param {boolean} [withSecond=false]
* @returns
*/
export function getTime(date, withSecond = false) {
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return withSecond
? `${addZeroPrefix(hour)}:${addZeroPrefix(minute)}:${addZeroPrefix(second)}`
: `${addZeroPrefix(hour)}:${addZeroPrefix(minute)}`
}
export function getFullDate(date) {
return `${getDate(date)} ${getTime(date)}`
}
export function isToday(date) {
return date.toDateString() === new Date().toDateString()
}
export function isYesterday(time) {
const todayTime = getTodayTime() // 当天凌晨时间
const yesterdayTime = new Date(todayTime - 24 * 60 * 60 * 1000).getTime() // 昨天凌晨的时间
return time < todayTime && yesterdayTime <= time
}
export function isWeek(time) {
const todayTime = getTodayTime() // 当天凌晨时间
const lastWeekTime = new Date(todayTime - 24 * 60 * 60 * 1000 * 6).getTime() // 一周前凌晨的时间,因当天凌晨开始算,故*6
return time < todayTime && lastWeekTime <= time
}
export function NoToday(time, yearTime = false) {
const data = new Date(time)
if (isYesterday(time)) {
return `昨天 ${getTime(time)}`
}
if (isWeek(time)) {
let week
if (data.getDay() == 0) week = '星期日'
if (data.getDay() == 1) week = '星期一'
if (data.getDay() == 2) week = '星期二'
if (data.getDay() == 3) week = '星期三'
if (data.getDay() == 4) week = '星期四'
if (data.getDay() == 5) week = '星期五'
if (data.getDay() == 6) week = '星期六'
return `${week} ${getTime(time)}`
}
return yearTime ? `${getDate(time)} ${getTime(time)}` : getDate(time)
}
/**
* 咨询互动-时间格式化(合并)
* 规则:
* 1. 每五分钟为一个跨度
* 2. 今天显示,小时:分钟,例如:11:12
* 3. 昨天显示,昨天 小时:分钟 例如:昨天 11:12
* 4. 一周内显示,星期几 小时:分钟 例如:星期四 11:12
* 5. 日期差大于一周显示,年月日 小时:分钟 例如:2021年9月30日 11:12(时分可控)
* @param time 传入的当前会话数组
* @param yearTime 年月日后是否显示 小时:分钟
* @returns {string|null}
*/
export function timestampFormat(time, yearTime) {
if (isToday(time)) {
return getTime(time)
}
return NoToday(time, yearTime)
}
/**
* 咨询互动-聊天时间格式化
* 规则:
* 1. 每五分钟为一个跨度
* 2. 今天显示,小时:分钟,例如:11:12
* 3. 昨天显示,昨天 小时:分钟 例如:昨天 11:12
* 4. 一周内显示,星期几 小时:分钟 例如:星期四 11:12
* 5. 日期差大于一周显示,年月日 小时:分钟 例如:2021年9月30日 11:12
* @param currentMessageList 传入的当前会话数组
* @param sort 传入数组排序:0-数组时间倒序;1-数组时间正序
* @param type 五分钟规则区分:0-永远跟上一个显示的时间对比是否超5分钟 ;1-永远两条消息对比是否超5分钟
* @returns {Array|null}
*/
export function msgTimeFormat(currentMessageList, sort, type) {
// console.log('传入的会话数组', currentMessageList)
const newMessageList = []
const currentFilterList = currentMessageList.filter((item) => {
return item.type !== 'showTime'
})
currentFilterList.forEach((item, index) => {
const date = new Date(item.time * 1000)
let showTime
if (index === 0) {
showTime = timestampFormat(date, true)
// 显示的消息时间
newMessageList.push({
payload: {
text: showTime
},
type: 'showTime',
time: item.time
})
newMessageList.push(item)
} else if (index <= currentFilterList.length - 1) {
const current = currentFilterList[index].time
let minutes
const showTimeList = newMessageList.filter((item) => {
return item.type === 'showTime'
})
const lastShowTime = showTimeList[showTimeList.length - 1].time
if (type) {
const prev = currentFilterList[index - 1].time
minutes = (current - prev) / 60
}
if (!sort) {
minutes = (current - lastShowTime) / 60
} else {
minutes = (lastShowTime - current) / 60
}
if (minutes > 5) {
showTime = timestampFormat(date, true)
// 显示的消息时间
newMessageList.push({
payload: {
text: showTime
},
type: 'showTime',
time: item.time
})
newMessageList.push(item)
} else {
newMessageList.push(item)
}
}
})
// console.log('最后得到的数组', newMessageList)
return newMessageList
}