diff --git a/CHANGELOG.md b/CHANGELOG.md index 247b757..fff647f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -64,6 +64,7 @@ ### 🔨 代码重构 范围|描述|commitId --|--|-- + - | 下滑时间轴添加备注 | [4fd20e3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4fd20e3) template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1) diff --git a/src/main.js b/src/main.js index b5ed992..045017f 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ import Tall from '@/utils/tall'; import App from './App'; import './common/styles/index.css'; import store from './store'; +import dayjs from 'dayjs'; //#ifdef H5 import './registerServiceWorker'; @@ -18,6 +19,7 @@ Vue.use(indexedDB); Vue.config.productionTip = false; Vue.use(uView); Vue.use(Tall); +Vue.use(dayjs); App.mpType = 'app'; diff --git a/src/utils/tall.js b/src/utils/tall.js index 8a962b0..3bce5fe 100644 --- a/src/utils/tall.js +++ b/src/utils/tall.js @@ -2,12 +2,14 @@ import app from '@/config/app.js'; import zIndex from '@/config/zIndex.js'; import plugin from '@/config/plugin.js'; import storage from '@/utils/storage.js'; +import time from '@/utils/time.js'; const $t = { zIndex, // 定位元素层级 app, // app级别的相关配置 plugin, // 插件相关配置信息 storage, // 本地存储storage封装 + time, // 时间处理 }; uni.$t = $t; diff --git a/src/utils/time.js b/src/utils/time.js new file mode 100644 index 0000000..5035e34 --- /dev/null +++ b/src/utils/time.js @@ -0,0 +1,297 @@ +import dayjs from 'dayjs'; +var advancedFormat = require('dayjs/plugin/advancedFormat'); +var weekOfYear = require('dayjs/plugin/weekOfYear'); +dayjs.extend(advancedFormat); +dayjs.extend(weekOfYear); + +/** + * 格式化数字 + * @param {*} n + */ +const formatNumber = n => { + const str = n.toString(); + return str[1] ? str : `0${str}`; +}; + +/** + * 格式化时间 + * @param {number} beginTime + */ +const formatTime = beginTime => { + const date = new Date(beginTime); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hour = date.getHours(); + const minute = date.getMinutes(); + const second = date.getSeconds(); + + return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`; +}; + +/** + * 时间转换 08:00 转换成8小时0分钟 + * @param {string} time + * @returns {{hours: number, minutes: number}} + */ +const convertTime = time => { + const arr = time.split(':'); + return { + hours: parseInt(arr[0], 10), + minutes: parseInt(arr[1], 10), + }; +}; + +/** + * 将秒 -> 分 秒 + * @param {number} seconds + */ +const secondToMinute = seconds => { + const minute = formatNumber(Math.floor(seconds / 60)); + const second = formatNumber(parseInt(seconds % 60, 10)); + return { + minute, + second, + }; +}; + +/** + * 将时间戳 -> 时:分 + * @param {Number} timestamp 时间戳 + * @return date:2018/10/09 time: 12:59 + */ +const setTimestampToStr = timestamp => { + const timeObj = new Date(timestamp); + const year = timeObj.getFullYear(); + const month = formatNumber(timeObj.getMonth() + 1); + const day = formatNumber(timeObj.getDate()); + const hour = formatNumber(timeObj.getHours()); + const minute = formatNumber(timeObj.getMinutes()); + const date = `${year}/${month}/${day}`; + const time = `${hour}:${minute}`; + return { + date, + time, + }; +}; + +/** + * 检测时间(ms)是不是今天 + * @param {Number} time 时间戳 + */ +const validateTimeIsToday = time => { + const timeDate = new Date(time); + const date = new Date(); + return timeDate.getFullYear() === date.getFullYear() && timeDate.getMonth() === date.getMonth() && timeDate.getDate() === date.getDate(); +}; + +/** + * 格式化开始时间 + * @param {Number} timestamp 时间戳 + * @return + * 如果是今天 -> 时:分 + * 如果不是今年 -> 年/月/日 时:分 + * 否则 *月*日 时:分 + */ +const formatBeginTime = timestamp => { + const timeObj = new Date(timestamp); + const year = timeObj.getFullYear(); + const month = formatNumber(timeObj.getMonth() + 1); + const day = formatNumber(timeObj.getDate()); + const hour = formatNumber(timeObj.getHours()); + const minute = formatNumber(timeObj.getMinutes()); + const date = `${year}/${month}/${day}`; + const time = `${hour}:${minute}`; + const currentYear = new Date().getFullYear(); + + if (validateTimeIsToday(timestamp)) { + // 今天 + return `今天 ${time}`; + } else if (currentYear !== year) { + // 不是今年 + return `${date} ${time}`; + } else { + return `${month}月${day}日 ${time}`; + } +}; + +/** + * 格式化时长 + * @param {Number} duration 时长 + * 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成天数 + 小时 + 分钟 + * 小于1分钟（ 60 * 1000 ms） 转换成秒钟 + * 其余的显示分钟 + * 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成小时 + 分钟数 + */ +const formatDuration = duration => { + const minuteTime = 60 * 1000; + const hourTime = 60 * minuteTime; + const dayTime = 24 * hourTime; + const days = Math.floor(duration / dayTime); + const hours = Math.floor((duration % dayTime) / hourTime); + const minutes = Math.floor((duration % hourTime) / minuteTime); + if (duration <= 60 * 1000) { + // 小于1分钟 返回几秒 + return `${Math.floor(duration / 1000)}秒`; + } else if (duration > dayTime) { + // 大于1天 + if (minutes === 0) { + if (hours === 0) { + // 分钟数是0 和 小时数是0 返回 几天 + return `${days}天`; + } else { + // 分钟是0 小时不是0 返回 几天几小时 + return `${days}天${hours}小时`; + } + } else { + // 分钟不是0 返回几天几时几分 + return `${days}天${hours}时${minutes}分`; + } + } else if (duration > 2 * hourTime) { + // 大于2h + if (minutes === 0) { + // 分钟是0 返回几小时 + return `${hours}小时`; + } else { + // 分钟不是0 返回几小时几分钟 + return `${hours}小时${minutes}分钟`; + } + } else { + // 其余情况 返回 几分钟 + return `${parseInt(duration / minuteTime)}分钟`; + } +}; + +/** + * 格式化时长 转换成对象格式 + * @param {Number} duration 时长 + * 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成{days, hours, minutes, seconds: 0} + * 小于1分钟（ 60 * 1000 ms） 转换成秒钟 { days: 0, hours: 0, minutes: 0, seconds } + * 其余的显示分钟 { days: 0, hours: 0, minutes, seconds: 0 } + * 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成{ days: 0, hours, minutes, seconds: 0 } + */ +const formatDurationToObject = duration => { + const minuteTime = 60 * 1000; + const hourTime = 60 * minuteTime; + const dayTime = 24 * hourTime; + const days = Math.floor(duration / dayTime); + const hours = Math.floor((duration % dayTime) / hourTime); + const minutes = Math.floor((duration % hourTime) / minuteTime); + const result = { + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }; + if (duration <= 60 * 1000) { + // 小于1分钟 返回几秒 + result.seconds = Math.floor(duration / 1000); + } else if (duration > dayTime) { + // 大于1天 + if (minutes === 0) { + if (hours === 0) { + // 分钟数是0 和 小时数是0 返回 几天 + result.days = days; + } else { + // 分钟是0 小时不是0 返回 几天几小时 + result.days = days; + result.hours = hours; + } + } else { + // 分钟不是0 返回几天几时几分 + result.days = days; + result.hours = hours; + result.minutes = minutes; + } + } else if (duration > 2 * hourTime) { + // 大于2h + if (minutes === 0) { + // 分钟是0 返回几小时 + result.hours = hours; + } else { + // 分钟不是0 返回几小时几分钟 + result.hours = hours; + result.minutes = minutes; + } + } else { + // 其余情况 返回 几分钟 + result.minutes = minutes; + } + return result; +}; + +/** + * 将对象格式的时间转换成时间戳 + * @param {obj} 对象格式的时间 days, hours, minutes, seconds + * @return 时长的ms + */ +const formatObjectTimeToMs = (days = 0, hours = 0, minutes = 0, seconds = 0) => { + return days * 24 * 60 * 60 * 1000 + hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000; +}; + +/** + * 计算过滤 周期 + * @param {string} time 周期字符串 + * @return {string} cycle 周期英文字符串 + */ +const computeCycle = time => { + // 加载下一个周期的任务 + let cycle = 'day'; + switch (time) { + case '天': + cycle = 'day'; + break; + case '周': + cycle = 'week'; + break; + case '月': + cycle = 'month'; + break; + default: + cycle = '日程'; + break; + } + return cycle; +}; + +/** + * 将时间按周期语义化 + * @param {string} cycle 周期 + * @param {number|string} time 时间 + */ +const formatStartTimeToCycleTime = (cycle, time) => { + let result = ''; + const _time = dayjs(+time); + switch (cycle) { + case '天': + result = _time.format('YYYY年M月D日'); + break; + case '周': + result = _time.format('YYYY年w周'); + break; + case '月': + result = _time.format('YYYY年M月'); + break; + case '日程': + result = _time.format('YYYY年M月D日 HH:mm'); + break; + default: + result = _time.format('YYYY年M月D日'); + break; + } + return result; +}; + +export default { + formatNumber, + formatTime, + convertTime, + secondToMinute, + setTimestampToStr, + formatBeginTime, + formatDuration, + formatDurationToObject, + formatObjectTimeToMs, + computeCycle, + formatStartTimeToCycleTime, +};