Vue.js 数据绑定制作订单倒计时,页面会直接变成空白-1秒闪一下

1.IOS App对应H5界面,下单时对订单倒计时两个小时支付。
2.进入倒计时页面除了一个button按钮,其余全空白,点击button按钮后,会闪一下,随着倒计时再次进入空白
3.第一版使用vue进行的倒计时控制,后来改成jq还是不好用,现在在取消状态
4.谢谢各位大神

![![图片描述][2]][1]

图片描述

图片描述

orderDetailVue = new Vue({

el: '#_orderDetail',

data: {

orderId: 0,

categoryId: 0,

timeHandle: 0,

address: {},

allExpress: [],

express: {},

amount: 0,

postFee: 0,

currency: '',

quantity: 1,

isGroup: false,

groupQuantity: '',

groupValue: '',

isPay: true,

isDelivery: true,

station: {},

url: '',

getbottom: false,

balanceId: 0,

balance: 0,

password: '',

balancePayed: true,

coupon: {},

coupons: [],

isActivity: 0

},

methods: {

changeAddress: function () {

window.location.href="#addressadd";

},

changeStation: function () {

for (var i in stationVue.stations) {

if (stationVue.stations[i].stationId == this.station.stationId) {

stationVue.stations[i].stationStatus = true;

}

}

window.location.href="#selectStation";

},

couponBoxShow: function () {

$(".settlement_bg").fadeIn();

$(".settlement_user").stop().animate({

bottom: 0

}, 300);

$("body").on('touchmove',function(event) { event.preventDefault(); }, false);

},

expressBoxShow: function () {

$(".settlement_bg").fadeIn();

$(".settlement_express").stop().animate({ bottom: "-0"},300);

$("body").on('touchmove',function(event) { event.preventDefault(); }, false);

},

distoryTime: function () {

clearInterval(timeHandle);

},

getInteger: function (val) {

return Math.floor(val);

},

getFloor: function (val) {

if (val) {

var ret = val.toString();

if (ret.indexOf('.') > 0) {

var arr = ret.split('.');

return arr[1];

}

}

return '00';

},

setPayment: function (url, event) {

if (url == 'balance' && !this.balancePayed) {

showMessage('余额不足!');

return;

}

var isActive = $(event.currentTarget).find('span').hasClass('current');

if (isActive) {

return;

} else {

$('.js_fs_con .inputs').children('span').removeClass('current');

$(event.currentTarget).find('span').addClass('current');

}

this.url = url + '/';

},

submitPay: function (type) {

if (!this.isPay) {

return;

}

if (!this.url) {

showMessage('请选择付款方式');

return;

}

//支付的请求this.currency

if (type == 0 && this.url == "balance/") {

$(".setpw_prompt").fadeIn(300);

return;

}

if (type == 1 ) {

if (!this.password) {

showMessage('请输入密码');

return;

}

$(".setpw_prompt").fadeOut(300);

}

var workId = 0;

var workType = 0;

var amount = 0;

if (this.isDelivery) {

if (!this.express.deliveryExpressId) {

showMessage('请选择快递公司!')

return;

}

workId = this.express.deliveryExpressId;

workType = 1;

amount = this.amount + this.postFee;

} else {

workId = this.station.stationId;

workType = 2;

amount = this.amount;

}

var isGroup;

if (this.isGroup) {

isGroup = 2;

} else {

isGroup = '';

}

var couponId = 0;

if (this.coupon.id) {

couponId = this.coupon.id;

}

$(".loadingbox").fadeIn(300);

var _self = this;

apiClient({

url: this.url,

type: 'post',

data: {

orderId: this.orderId,

categoryId: this.categoryId,

workId: workId,

workType: workType,

addressId: this.address.id,

amount: amount,

currency: this.currency,

isGroup: isGroup,

balanceId: this.balanceId,

password: this.password,

isLeader: 1, //区分在订单界面支付的情况

couponId: couponId,

isActivity: this.isActivity

},

success: function (data) {

if (data.code != "0") {

$(".loadingbox").fadeOut(300);

showMessage(data.message);

return;

}

if (data.model) {

_self.distoryTime();

if (_self.url == 'paypal/' || _self.url == 'credit/') {

setSessionItem('payLink', data.model);

setSessionItem('payType', _self.url);

window.location.href = 'pay_credit_cards.html';

} else {

window.location.href = data.model;

}

}

},

error: function (e) {

showMessage(e.status);

}

})

},

selectExpress: function (express) {

for (var i in this.allExpress) {

this.allExpress[i].deliveryStatus = false;

}

express.deliveryStatus = true;

this.postFee = express.deliveryCharge;

this.express = express;

$(".settlement_bg").fadeOut();

$(".settlement_express").stop().animate({ bottom: -$(".settlement_express").height()},300);

$("body").unbind('touchmove');

},

setpwPromptHide:function(){

$(".setpw_prompt").fadeOut(300);

}

},

watch: {

allExpress (newVal, val) {

this.getbottom = true;

}

},

updated: function () {

if (this.getbottom) {

$(".settlement_express").css({ bottom: -$(".settlement_express").height()});

if ($(".settlement_express").height() > 0) {

this.getbottom = false;

}

}

}

以上是 Vue.js 数据绑定制作订单倒计时,页面会直接变成空白-1秒闪一下 的全部内容, 来源链接: utcz.com/a/149933.html

回到顶部