vue uniapp 小程序 判断日期是今天(显示时分秒)、昨天、本周的周几、超出本周显示年月日

效果图:

util.js

bash 复制代码
/**
 * 转换时间
 */
const messageFormat = (datetime) =>{	
	let result = "";
	let currentTime = new Date();
	if(isToday(datetime)){
		result = datetime.substring(11,16);
	}else if(isYesterday(datetime)){
		result = "昨天";
	}else if(isCurrentWeek(datetime)){
		let day = new Date(datetime).getDay();
		switch (day)
		{
			case 1:
				result = "星期一";
				break;
			case 2:
				result = "星期二";
				break;
			case 3:
				result = "星期三";
				break;
			case 4:
				result = "星期四";
				break;
			case 5:
				result = "星期五";
				break;
			case 6:
				result = "星期六";
				break;
			default:
				result = "星期日";
		}
	}else{
		result = datetime.substring(0,10);
	}	
	return result;
}

//是否为今天
function isToday(str){
    var d = new Date(str.replace(/-/g,"/"));
    var todaysDate = new Date();
    if(d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)){
        return true;
    } else {
        return false;
    }
}

//是否为昨天
function isYesterday(str){
    var d = new Date(str.replace(/-/g,"/"));
    var todaysDate = new Date();
	todaysDate.setDate(todaysDate.getDate()-1);
    if(d.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)){
        return true;
    } else {
        return false;
    }
}
//是否为本周内的一天
function isCurrentWeek(str){
	var d = new Date(str.replace(/-/g,"/"));
    var todaysDate = new Date();
	var firstdayoffset = (todaysDate.getDay()==0?7:todaysDate.getDay())-1;
	todaysDate.setDate(todaysDate.getDate()-firstdayoffset-1);
    var firstday = todaysDate.toISOString().substring(0,10);
	firstday = new Date(firstday);
	todaysDate.setDate(todaysDate.getDate()+8);
	var lastday = todaysDate.toISOString().substring(0,10);
	lastday = new Date(lastday);
	if((d.setHours(0,0,0,0) > firstday.setHours(0,0,0,0)) && (d.setHours(0,0,0,0) < lastday.setHours(0,0,0,0))){
        return true;
    } else {
        return false;
    }
}

module.exports = {
	messageFormat
}

script

bash 复制代码
<script>
	import {messageFormat} from "@/utils/util.js"
	export default {
		data() {
			return {
				myApplicationQty: 0, //我的用车数量
				myApplicationQtyTime: null, //我的用车时间
			}
		}
</script>

template

bash 复制代码
<view class="item-time-count">
	<view class="time" v-if="myApplicationQty != 0">{{myApplicationQtyTime}}</view>
	<view class="mes-count" v-if="myApplicationQty != 0">{{myApplicationQty > 99 ? '99+' : myApplicationQty}}</view>
</view>

methods

bash 复制代码
methods: {
	//请求接口返回数据(此处省略)
	//对返回的时间数据进行转换时间处理
	if(res.data.myApplicationQtyTime){
		// 转换时间
		this.myApplicationQtyTime = messageFormat(res.data.myApplicationQtyTime)
	}
}
相关推荐
北漂的老猿26 分钟前
知识付费小程序 梦想贩卖机v2
小程序
用户8417948145643 分钟前
vxe-table 使用 spanMethod 合并卡顿的解决方案
vue.js
临江仙4551 小时前
Vite 性能优化实战:从 0 到 1 打造极速开发体验(附完整配置)
vue.js·vite
q_19132846951 小时前
基于Springboot2+Vue2的旅游景点购票系统
java·vue.js·spring boot·后端·mysql·毕业设计·计算机毕业设计
季禮祥1 小时前
彻底弄懂KeepAlive
javascript·vue.js·面试
小胖霞1 小时前
彻底搞懂 JWT 登录认证与路由守卫(五)
前端·vue.js·node.js
灵魂学者2 小时前
Vue3.x —— ref 的使用
前端·javascript·vue.js
一 乐2 小时前
鲜花销售|基于springboot+vue的鲜花销售系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
梦6502 小时前
VUE树形菜单组件如何实现展开/收起、全选/取消功能
前端·javascript·vue.js
我命由我123452 小时前
微信小程序 - 避免在 data 初始化中引用全局变量
开发语言·前端·javascript·微信小程序·小程序·前端框架·js