js聊天时间显示规则,判断是当天,当前星期,当前月份

214 阅读1分钟
<view v-for="(item,index) in messageList" :key="index">
    <view class="img">
        <image :src="item.img"></image>
    </view>
    <view class="content">
        <view class="font-size-13">{{item.title}}</view>
        <view class="font-size-min mt-1">
            {{item.desc}}
        </view>
    </view>
    <view class="time">
        {{chatTimeFormat(item.time)}}
    </view>
</view>

data() {
    return {
        messageList: [{
                title: '',
                time: 1712914451,
                desc: '',
                img: ''
            },
            {
                title: '',
                time: 1711964051,
                desc: '',
                img: ''
            },
            {
                title: '',
                time: 1713110400,
                desc: '',
                img: ''
            },
            {
                title: '',
                time: 1702200851,
                desc: '',
                img: ''
            }
        ]
    }
},
/**
 * 聊天时间处理
 * 当天:时分秒
 * 本周:星期
 * 本月:月日
 * 本年:年月日
 */
chatTimeFormat(timeStamp, type) {
    let nowDate = new Date(); //当前时间
    let oldDate = new Date(timeStamp * 1000); //参数时间
    let time = ''

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/891261325913417a984779bad2eb2920~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=548&h=379&s=20660&e=png&b=fefefe)
    // 获取本周的开始日期(周一)和结束日期(周日)
    const startOfThisWeek = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - nowDate
        .getDay() + 1);
    const endOfThisWeek = new Date(startOfThisWeek.getFullYear(), startOfThisWeek.getMonth(), startOfThisWeek
        .getDate() + 6, 23, 59, 59);

    if (nowDate.toDateString() === oldDate.toDateString()) {
        // 判断是否为当天
        time = oldDate.format('hh:mm');
    } else if (oldDate >= startOfThisWeek && oldDate <= endOfThisWeek) {
        // 判断是否为本周
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        time = weekdays[oldDate.getDay()];
    } else if (nowDate.getMonth() === oldDate.getMonth()) {
        // 判断是否为本月
        time = oldDate.format('MM月dd日');
        if ('-' === type) {
            time = oldDate.format('MM-dd');
        }
    } else {
        time = oldDate.format('yyyy年MM月dd日')
        if ('-' === type) {
            time = oldDate.format('yyyy-MM-dd')
        }
    }
    return time
}

效果图:

image.png

参考链接:www.baidu.com/s?ie=utf-8&…

www.baidu.com/s?ie=UTF-8&…