Spring Cloud SLAM xpath vue手册 后台管理ui admin框架 android项目实例 oracle查看数据库 mysql修改字段值 linux管道符 axure导出html文件 小程序下拉刷新样式 python练习 python基础教程 python写文件 python调用命令行 java实现 java基础学习 java基础代码 java怎么安装 java怎么配置环境变量 javasocket java接口规范 java的安装 脚本下载 骁龙660和625 黑白照片一键变彩色 pr滤镜插件 vbs编程教学 c语言程序100例 矩阵分析与应用 collect list删除指定元素 sendto函数 计划任务软件 android开发案例 ps反选 重复文件查找 音乐制作器 flash引导层
当前位置: 首页 > 学习教程  > 编程语言

Vue-教你实现一个订单列表倒数30分钟的功能

2020/9/19 14:47:00 文章标签:

文章目录

      • 来看一个demo
      • 简单结合后台的demo
      • 现在来看功能实现部分

想要实现一个支付倒计时的功能,提交订单,但是未支付,这时候订单就会变成30分钟内失效,而现在就是要实现这个订单未支付30分钟失效倒计时的功能

来看一个demo

这是我通过百度大法找到的简单demo,晒出来给大家看看,一个倒数计时器的功能

<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

    <div id="countdown">还剩 30 分 00 秒</div>

    <script>
        window.onload = function() {
            var countdown = document.getElementById("countdown");
            var time = 1800; //30分钟换算成1800秒
            setInterval(function() {
                time = time - 1;
                var minute = parseInt(time / 60);
                var second = parseInt(time % 60);
                countdown.innerHTML = '还剩' + minute + '分' + second + '秒';
            }, 1000);
        }
    </script>

</body>

</html>

简单结合后台的demo

这是我简单写的demo,项目中涉及订单功能的话,那么肯定是要用到当前时间和后台返回的创建订单的时间的,所以我改写了一下,这个是现在到创建订单的时间的倒计时

 window.onload = function() {
            var countdown = document.getElementById("countdown");
            let currentTime = Date.parse(new Date()); //当前时间戳
            console.log('当前', new Date());

            var  createTime =  Date.parse(new  Date('2020-09-17 09:40:47')); //后台时间戳,可以自定义较新的时间
            console.log('后台', createTime, new  Date('2020-09-17 09:40:47'));

            let seconds = (currentTime - createTime) / 1000; //时间戳差转换成秒

            console.log('时间差', seconds);
            setInterval(function() {
                seconds = seconds - 1;
                var minute = checkFigure(parseInt(seconds / 60));
                var second = checkFigure(parseInt(seconds % 60));
                countdown.innerHTML = '还剩' + minute + '分' + second + '秒';

            }, 1000);
        }
        //把单一位数字通过在前面+“0”转化为两位;
        function checkFigure(i) {
            if (i < 10) {
                i = '0' + i;
            }
            return i;
        }

现在来看功能实现部分

页面上

<view class="time">待支付 {{item.lastTime}} 后失效</view>

data部分

 data(){
    return {
      uid: "", //用户ID,用来请求后台数据的
      orderlist:[], //订单列表
      timer:[],//定时器ID数组
    }
  },

下面是方法,当跳转到订单页的时候,就请求后台了,所以在mounted中请求

mounted(options){
    this.uid = options.uId;
    let params = {
      uId:this.uid,
    }
    this.selMyOrderByUId(params);
},
beforeDestroy(){
//清除定时器
    this.timer.forEach(a =>{
      clearInterval(a);
    })
},
methods:{
    // 我的订单,请求了后台接口
    async selMyOrderByUId(params){
      let res = await this.$api.selMyOrderByUId(params);
      this.orderlist = res.orderlist;
      for(let i = 0; i < this.orderlist.length;i ++){
      //新建一个showTime属性,用来做倒数定时器的,表示有效时间:30分钟+创建时间-当前时间
      //createTime是后台字段,时间格式为'2020-09-17 09:40:47',转为时间戳比较好计算
        this.orderlist[i].showTime = this.getTime(this.orderlist[i].createTime);
      }
      if(this.orderlist.length > 0){
        this.showTime();//开始倒计时
      }
      
    },
    //获取倒数计时的时间差
    getTime(createTime){
      createTime = Date.parse(new Date(createTime));//parse方法只能精确到秒,也就是转成时间戳,
      //后面三位数是000,比如本来是124141,精确成了124000
      let timeDate = Date.parse(new Date());
      return createTime + 30*60*1000 - timeDate;
    },
    //开启定时器
    showTime(){
      let flag = true;//flag用来判断是不是刚开始触发函数,定时器延迟了1s才开始计算倒数的时间,
      //所以用一个flag做开关
      //订单列表,给每一个订单里面加定时器
      for(let i = 0;i < this.orderlist.length;i ++){
        if(this.orderlist[i].showTime >= 0){
          let time;
          if(flag){//刚开始的时候计算倒计时的时间,类似一个初始化的作用
            time = this.orderlist[i].showTime -= 1000;
            let timeOne = time / 1000;
            timeOne = timeOne - 1;
            let minute = this.checkFigure(parseInt(timeOne / 60));
            let second = this.checkFigure(parseInt(timeOne % 60));
            this.orderlist[i].lastTime = `${minute}:${second}`;
          }
          //加倒数的定时器
          let timerId = setInterval(()=>{
            flag = false;
            time = this.orderlist[i].showTime -= 1000;
            let timeOne = time / 1000;
            timeOne = timeOne - 1;
            let minute = this.checkFigure(parseInt(timeOne / 60));
            let second = this.checkFigure(parseInt(timeOne % 60));
            this.orderlist[i].lastTime = `${minute}:${second}`;//用来显示倒计时的
            this.$forceUpdate();//!!!划重点,这个是迫使Vue实例重新(rander)渲染虚拟DOM,
            //注意并不是重新加载组件,但是也达到更新的目的了,要不然你会发现数据一直在变化,页面却没变
          }, 1000)
          this.timer.push(timerId);
        }else{
        //请求后台接口,取消订单的接口
          this.cancelOrderByOId({
            oId:this.orderlist[i].oId,
            uId:this.uid
          });
        }
      }
    },
    //把单一位数字通过在前面+“0”转化为两位;
    checkFigure(i) {
      if (i < 10) {
        i = '0' + i;
      }
      return i;
    }
  },

大概的逻辑就是 获取后台创建时间->获取有效时间->开启列表定时器->失效,转入后台取消订单接口
定时器代码有点多,貌似还可以优化一下,大概跟我那个Demo较类似.
在自己实现一个复杂功能的时候,我发现提前写一个demo,比直接在项目中写代码,思路清晰很多

多多少少花了一些逻辑去思考这个功能怎么实现,可能有不足之处,也欢迎大家评论一起交流~


本文链接: http://www.dtmao.cc/news_show_200176.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?