seckill.page.js 10.6 KB
/**
 * [秒抢页面js]
 * author: 陈峰<feng.chen@yoho.cn>
 * date: 2016/09/08
 */
require('common.js');
var yoho = require('../yoho-app');
var $ = require('yoho-jquery'),
    IScroll = require('yoho-iscroll'),
    loading = require('plugin/loading'),
    lazyload = require('yoho-jquery-lazyload'),
    tip = require('plugin/tip');


var seckillObj = {};

lazyload('img.lazy');
seckillObj = {
    $productList: null, // DOMContentLoaded的时候 赋值,即init

    el: {
        // doms
        $navUl: $('.nav-ul'),
        $navList: $('.nav-list'),

        // 变量
        times: $('.nav-ul>li').length,
        startX: 0,
        timeWidth: 0,
        focusTimeWidth: 0,
        iScroll: null,
        currentTick: null
    },

    /**
     * [初始化界面]
     */
    init: function() {
        var $el = this.el, that = this;
        var focus = $el.$navUl.find('>li.focus');

        this.$productList = $('.product-list');
        $el.$navUl.find('>li').click(function() {
            that.selectTime(this);
        });

        $(window).resize(function() {
            that.initNav();
        });

        that.initNav();

        if (focus.length && (focus.hasClass('now') || focus.hasClass('wait'))) {
            that.initTick($el.$navUl.find('>li.focus'));
        }

        this.bindEvents();
    },

    /**
     * [初始化时间段]
     */
    initNav: function() {
        var $el = this.el, that = this;

        $el.timeWidth = ($el.$navUl.find('>li:not(.focus)').width() + 1);
        $el.focusTimeWidth = ($el.$navUl.find('>li.focus').width() + 1);

        $el.$navUl.width($el.times * $el.timeWidth + $el.focusTimeWidth).removeClass('hide');

        // 只有时间段大于3个才需要定位
        if ($el.$navUl.find('>li').length > 3 && $el.$navUl.find('>li.focus').length) {
            $el.startX = (0 - ($el.$navUl.find('>li.focus').index() - 1) * $el.timeWidth);
        }
        if ($el.iScroll) {
            $el.iScroll.destroy();
        }
        $el.iScroll = new IScroll($el.$navList[0], {
            scrollX: true,
            scrollY: false,
            startX: $el.startX,
            tap: true,
            eventPassthrough: true,
            preventDefault: true,
            bounceTime: 400,
            bounceEasing: {
                style: 'cubic-bezier(0.333333, 0.666667, 0.666667, 1)'
            }
        });
        that.registerScrollEvents($el.iScroll);
    },

    /**
     * [注册iscroll事件,滑动停止时判断位置自动选中居中时间段]
     */
    registerScrollEvents: function(iScroll) {
        var $el = this.el, that = this;

        iScroll.on('scrollStart', function() {
            $el.$navList.addClass('srolling');
        });
        iScroll.on('scrollEnd', function() {
            var offsetLeft = 0;
            var i = 0;

            // 避免死循环
            if ($el.$navList.hasClass('srolling')) {
                $el.$navList.removeClass('srolling');
                offsetLeft = this.x - $(window).width() / 2;

                for (; i < $el.$navUl.find('>li').length; i++) {
                    offsetLeft += $el.$navUl.find('>li').eq(i).width();
                    if (offsetLeft >= 0) { // 判断选中时间段
                        that.selectTime($el.$navUl.find('>li').eq(i));
                        break;
                    }
                }
            }
        });
    },

    /**
     * [选中时间段]
     */
    selectTime: function(elem) {
        var $el = this.el, that = this;
        var index = 0;

        $el.$navUl.find('>li').removeClass('focus');
        index = $(elem).index();

        $(elem).addClass('focus');

        // 点击切换时遇到首尾特殊处理选中时间段位置,大于3个才需要滑动选中
        if ($el.$navUl.find('>li').length > 3) {
            if (index === 0) {
                $el.iScroll.scrollTo(0, 0, 400);
            } else if (index === $el.$navUl.find('>li').length - 1) {
                $el.iScroll.scrollTo(0 - $el.$navUl.width() + $el.timeWidth * 2 + $el.focusTimeWidth, 0, 400);
            } else {
                $el.iScroll.scrollTo((0 - (index - 1) * $el.timeWidth), 0, 400);
            }
        }

        if ($el.currentTick) {
            clearTimeout($el.currentTick);
            $el.currentTick = undefined;
        }

        if ($(elem).hasClass('now') || $(elem).hasClass('wait')) {
            // 初始化倒计时并开始计时
            that.initTick(elem);
        }

        // 刷新商品列表
        that.refreshProductList($(elem).find('input.activityId').val());
    },

    /**
     * [刷新状态]
     */
    refreshList: function(elem) {
        var $el = this.el, that = this, time, nowTime, nextTime;

        // 刷新时间段状态
        $el.$navUl.find('>li').each(function() {
            $(this).removeClass('now over wait');
            time = new Date(parseInt($(this).find('input.date').val(), 10));
            nowTime = new Date();

            if (nowTime > time) { // 当前时间大于这个时间段,已经开始和即将开始两种情况
                if ($(this).next('.time-item').length) {
                    nextTime = new Date(parseInt($(this).next().find('input.date').val(), 10));

                    if (nowTime < nextTime) { // 下一个时间段与当前时间来区别是否正在抢购
                        $(this).addClass('now');
                        that.selectTime(this);
                    } else {
                        $(this).addClass('over');
                    }
                } else { // 大于这个时间段但是后面没有秒抢时间端了,则依然显示抢购中
                    $(this).addClass('now');
                    that.selectTime(this);
                }
            } else {
                $(this).addClass('wait');
            }
        });

        // 刷新商品列表
        var focusElem = $el.$navUl.find('>li.focus');
        if (focusElem.length) {
            that.refreshProductList(focusElem.find('input.activityId').val());
        }
    },

    /**
     * [异步加载商品列表]
     */
    refreshProductList: function(activityId) {
        loading.show();
        $.ajax({
            url: '/product/seckill/get-product-list',
            data: {
                uid: yoho.isLogin(), // only app use;
                activityId: activityId
            },
            beforeSend: function(jqXhr, config) {
                if (yoho.isApp) {
                    config.url += '&app_version=1';
                }
            },
            success: function(data) {
                $('.product-list').html(data);
                lazyload('img.lazy');
                window.rePosFooter();
            },
            error: function(data) {
                tip.show('网络断开连接了~');
            }
        })
        .always(function() {
            loading.hide();
        });
    },

    /**
     * [初始化倒计时]
     */
    initTick: function(elem) {
        var $el = this.el, that = this,
            time,
            nowTime = Date.parse(new Date()) / 1000,
            offsetTime;

        if ($(elem).hasClass('now')) {
            time = $(elem).next().find('input.date').val() / 1000;
        } else {
            time = $(elem).find('input.date').val() / 1000;
        }
        offsetTime = time - nowTime;
        that.startTick(elem, offsetTime, nowTime);
    },

    /**
     * [开始倒计时]
     */
    startTick: function(elem, offsetTime, nowTime) {
        var that = this,
            $el = this.el,
            hour = parseInt(offsetTime / (60 * 60), 10),
            minute = parseInt(offsetTime % (60 * 60) / 60, 10),
            second = offsetTime % 60;

        if (offsetTime <= 0) { // 结束倒计时刷新状态
            that.refreshList(elem);
        } else {
            $(elem).find('.tick.hour').text(hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : hour));
            $(elem).find('.tick.minute').text(minute < 0 ? '00' : (minute < 10 ? ('0' + minute) : minute));
            $(elem).find('.tick.second').text(second < 0 ? '00' : (second < 10 ? ('0' + second) : second));

            $el.currentTick = setTimeout(function() {
                var curSec = Math.floor(Date.now() / 1000);

                offsetTime = offsetTime - (curSec - nowTime);
                that.startTick(elem, offsetTime, curSec);
            }, 1000);
        }
    },

    bindEvents: function() {
        if (yoho.isApp) {
            this.$productList.on('click', '[data-remind]', $.proxy(this.toggleRemind, this));
        }
    },

    /*
        only app
        添加/删除提醒
    */
    toggleRemind: function(event) {
        var $remindBtn,
            $product;

        var actionName,
            action,
            params,
            on_off;

        var okTip,
            failTip,
            onsuccess;

        event.stopPropagation();

        if (!yoho.isLogin()) {
            yoho.invokeMethod('go.login');
            return;
        }

        $remindBtn = $(event.currentTarget);
        $product = $remindBtn.closest('.item');

        actionName = $remindBtn.data('action');

        // default
        on_off = true;
        action = 'go.addSecKill';
        params = {
            skn: $product.data('skn'),
            startTime: $product.find('[data-start]').data('start'),
            productName: $.trim($product.find('.item-title').text())
        };
        okTip = '设置提醒成功<br>将在开抢3分钟前提醒';
        failTip = '设置提醒失败';
        onsuccess = $.noop;



        if (actionName === 'cancel') {
            on_off = false;
            action = 'go.delSecKill';
            okTip = '取消提醒成功';
            failTip = '取消提醒失败';
        }

        onsuccess = function() {
            $.post('/product/seckill/remind?app_version=1', {
                on_off: on_off,
                activity_id: $product.data('activity'),
                product_skn: $product.data('skn'),
                uid: yoho.isLogin(),
                sec_kill_id: 1,
                app_type: 0
            })
            .done(function(res) {
                if (res.code === 200 && res.data === 'success') {
                    $remindBtn.hide().siblings().show();
                    tip.show(okTip);
                } else {
                    tip.show(failTip);
                }
            })
            .fail(function() {
                tip.show(failTip);
            });
        };

        yoho.invokeMethod(action, params, onsuccess, function() {
            tip.show(failTip);
        });
    }
};


$(function() {
    !$('.seckill-list').hasClass('seckill-list-error') && seckillObj.init();
});

window.seckillRefresh = function() {
    location.reload();
};