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

seckillObj = {
    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');

        $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'));
        }
    },

    /**
     * [初始化时间段]
     */
    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($(this).find('input.date').val());
            nowTime = new Date();

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

                    if (nowTime < nextTime) { // 下一个时间段与当前时间来区别是否正在抢购
                        $(this).addClass('now');
                    } else {
                        $(this).addClass('over');
                    }
                } else { // 大于这个时间段但是后面没有秒抢时间端了,则依然显示抢购中
                    $(this).addClass('now');
                }
            } else {
                $(this).addClass('wait');
            }
        });
        // 刷新商品列表
        var focusElem = $el.$navUl.find('>li.focus');
        if (focusElem.length) {
            that.refreshProductList(focusElem.find('input.activityId').val());
        }
    },
    /**
     * [异步加载商品列表]
     */
    refreshProductList: function(activityId) {
        $.ajax({
            url: '/product/seckill/get-product-list',
            data: {
                activityId: activityId
            },
            success: function(data) {
                $('.product-list').html(data);
            },
            error: function(data) {
                tip.show('网络断开连接了~');
            }
        })
    },

    /**
     * [初始化倒计时]
     */
    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);
    },

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

        if (offsetTime) {
            $(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));
            if (offsetTime <= 0) { // 结束倒计时刷新状态
                that.refreshList(elem);
            } else {
                $el.currentTick = setTimeout(function() {
                    that.startTick(elem, --offsetTime);
                }, 1000);
            }
        }
        
    }
};

seckillObj.init();