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;
                }
            }
        }
阅读 3.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏