uniapp 电商app支付倒计时处理

喜欢ヅ旅行 2021-07-25 16:40 703阅读 0赞

## 电商app支付倒计时 ##

所有电商app支付页面都是有倒计时的，一来可以促进消费，二来可以减少恶意减库存的问题发生。  
因为创建订单的时候，除了预售的商品外，实际销售的商品是需要减库存的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
一般的电商app倒计时都是30分钟或者45分钟的。

如果在此页面没有进行付款或者付款失败，则此订单会进入到待付款页面中，在那个页面还是可以进行二次支付的。此时的倒计时会延续之前的倒计时时间。如果倒计时到了0，则此订单默认为交易失败，订单关闭。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
此处的解决方法如下：

1.  创建订单时，默认是30分钟倒计时。
2.  创建订单成功后，如果未支付状态，则后台接口需要返回一个时间戳时间，在此时间戳的时间基础上进行倒计时处理。

onLoad(options) { 
    	// 这个expirationTime是从待支付列表中点击支付按钮传递过来的时间戳参数
    	this.expirationTime = options.expirationTime;
    	// 如果没有这个时间戳参数，则代表是从创建订单的时候进入的此支付页面，默认为4500000时间。
    	var result = 45000000;
    	if(options.expirationTime){ 
    		var now=new Date();
    		var end=new Date(options.expirationTime); 
    		// 用当前的时间与时间戳时间比较，如果到了时间戳时间，则代表倒计时结束，交易失败。
    		if(end-now > 45000000){ 
    			result=45000000;
    		}else{ 
    			result=Math.floor(end-now);
    		}
    	}
    	this.runBack(result);
    },
    methods:{ 
    runBack(cm) { 
     if (cm > 0) { 
    	cm > 60000? 
    	(this.rocallTime =(new Date(cm).getMinutes() < 10? "0" + new Date(cm).getMinutes(): new Date(cm).getMinutes()) + ":" + (new Date(cm).getSeconds() < 10? "0" + new Date(cm).getSeconds(): new Date(cm).getSeconds()))
    	: 
    	(this.rocallTime ="00:" +(new Date(cm).getSeconds() < 10 ? "0" + new Date(cm).getSeconds(): new Date(cm).getSeconds()));
    	let _msThis = this;
    	// 此处是一个递归，调用时间计时器函数，一秒时间减少一秒，一秒后继续调用当前函数，这就是函数的递归。
    	setTimeout(function() { 
    	  cm -= 1000;
    	  _msThis.runBack(cm);
    	}, 1000);
      } else { 
    	  this.ispay = false
      }
    },
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/524f8d9382464398b6336494c715fd27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/bd296d19269149a39e0348a38026fd85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/c765e9465d35404aaa2b8a76b7e5fe4f.png