订单支付倒计时处理

最新推荐文章于 2024-09-10 14:15:01 发布

画了五官的猕猴

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量648

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/127013023

版权

文章介绍了如何在Vue项目中使用VantCountDown组件实现订单支付的倒计时功能。通过将创建订单时间、当前时间及订单过期时间转换为毫秒进行计算，确定倒计时的剩余时间。在处理日期格式时，需要注意不同浏览器对Date.parse()函数的支持差异，例如火狐浏览器需要将短日期格式从月-日-年转换为月/日/年。

摘要由CSDN通过智能技术生成

vant CountDown 倒计时组件

<van-count-down :time="countDownTime" />

export default {
  data() {
    return {
      countDownTime: 30 * 60 * 60 * 1000,  //30小时换算为毫秒
      //倒计时（vant单位为毫秒），需要设置个初始值，否则会直接倒计时结束
    };
  },
};

业务场景，购买物品未支付会有订单支付倒计时的提示

倒计时计算的方法：创建下单时间 + 超时时间 - 当前时间，单位：毫秒

创建下单时间和当前的时间均有接口返回,

Date.parse()函数

用于分析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间相差的毫秒数

短日期可使用/日期分隔符，但是必须符合月/日/年的格式

谷歌浏览器，IE浏览器都能够正常把日期parse掉，但是火狐就是特别点，查了资料才发现都支持这种格式月这“月/日/年”，而不是“月-日-年”，火狐会返回NaN。

快捷的替换方式，那就是直接“startDate.replace(/-/g, "/")”

创建下单时间
this.orderdetail.createTime = 2023-03-01 15：58:55
当前时间
this.orderdetail.nowDate = 2023/03/01 15：59:25
超时时间
config.orderExpires = 10 * 60 * 1000 //订单过期时间，单位毫秒，10分钟

let createDate = Date.parse(this.orderdetail.createTime.replace(/-/g, "/"));
let nowDate = Date.parse(this.orderdetail.nowDate);
this.countDownTime = createDate + config.orderExpires - nowDate;