top-coupon.js 7.19 KB
/**
 * 品牌、店铺优惠券
 * @auhtor: yyq<yanqing.yang@yoho.cn>
 * @date: 2016/10/27
 */

var $ = require('yoho-jquery'),
    Dialog = require('../../common/dialog').Dialog;

var $couponWrap = $('.top-coupon-wrap'),
    $couponItem = $couponWrap.find('.coupon-item'),
    $pickBtn = $couponWrap.find('.pick-btn'),
    $couponBtn = $couponWrap.find('.coupon-btn');

var itemWidth = $couponItem.outerWidth(true),
    couponObj = {};

var indexNum = 0;

var myCouponUrl = '//www.yohobuy.com/home/coupons';

var couponPickConfig = {
    success: {
        content: '<i class="iconfont">&#xe638;</i>已领取',
        className: 'top-coupon-dialog',
        btns: [{
            id: 1,
            name: '去购物啦',
            btnClass: ['black', 'btn-close']
        }, {
            id: 2,
            name: '查看优惠券',
            btnClass: ['btn-close'],
            cb: function() {
                window.open(myCouponUrl);
            }
        }]
    },
    got: {
        content: '<i class="iconfont">&#xe61f;</i>您已领取过优惠券',
        subContent: ['快去选购心仪的潮品吧'],
        className: 'top-coupon-dialog',
        btns: [{
            id: 1,
            name: '关闭',
            btnClass: ['btn-close']
        }]
    },
    expired: {
        content: '<i class="iconfont">&#xe61f;</i>优惠券已失效',
        className: 'top-coupon-dialog',
        btns: [{
            name: '去购物啦',
            btnClass: ['black', 'btn-close']
        }, {
            name: '查看优惠券',
            btnClass: ['btn-close'],
            cb: function() {
                window.open(myCouponUrl);
            }
        }]
    },
    failed: {
        content: '<i class="iconfont">&#xe61f;</i>领取失败',
        className: 'top-coupon-dialog',
        btns: [{
            id: 1,
            name: '关闭',
            btnClass: ['btn-close']
        }]
    },
    over: {
        content: '<i class="iconfont">&#xe61f;</i>优惠券已抢光',
        subContents: ['尝试领取其它优惠券吧'],
        className: 'top-coupon-dialog',
        btns: [{
            id: 1,
            name: '关闭',
            btnClass: ['btn-close']
        }]
    },
    notLogged: {
        content: '<i class="iconfont">&#xe61f;</i>领取失败',
        subContents: ['您当前处于未登录状态', '请登录后尝试领取优惠券'],
        className: 'top-coupon-dialog',
        btns: [{
            id: 1,
            name: '关闭',
            btnClass: ['btn-close']
        }]
    }
};

// 获取优惠券信息
function getCouponInfo() {
    $pickBtn.each(function() {
        var $this = $(this),
            data = $this.data();

        couponObj[data.id] = {
            id: data.id || '',
            dom: $this,
            money: data.money || 0,
            name: data.name || '',
            time: data.time || '',
            status: 1 // 1:可领取,2:已抢光,3:已领取
        };
    });
}

// 设置优惠券领取状态
function setPicked(info) {
    if (info) {
        info.dom.addClass('picked').text('已领取');
        info.status = 3;
    }
}

// 同步优惠券领取状态
function syncCouponStatus() {
    var data = $couponWrap.data(),
        url = '/product';

    url += data.shop ? '/shop' : '/brand';

    $.ajax({
        type: 'GET',
        url: url + '/couponsync',
        data: {id: data.shop || data.brand}
    }).then(function(result) {
        var i, coup, info;
        var asyncObj = {};

        if (result.code === 200) {
            info = result.data || [];

            for (i = 0; i < info.length; i++) {
                asyncObj[info[i].coupon_id] = info[i];
            }
        }

        for (i in couponObj) {
            if (couponObj.hasOwnProperty(i)) {
                coup = asyncObj[i];

                if (coup && (coup.status === 1 || coup.status === 3)) {
                    couponObj[i].status = coup.status;
                    coup.status === 3 ? setPicked(couponObj[i]) : false;
                } else {
                    couponObj[i].status = 2; // 券不存在设置领取状态为已抢光
                    couponObj[i].dom.text('已抢光');
                }
            }
        }
    });
}

// 根据配置执行展示弹窗
function couponAlert(opt) {
    var newAlert = new Dialog(opt);

    newAlert.show();
}

// 领取优惠券
function pickCoupon(info) {
    var that = this;

    if (that.picking || !info.id) {
        return;
    }

    // 防止重复触发
    that.picking = true;
    $.ajax({
        type: 'GET',
        url: '/coupon/sendcoupon',
        data: {id: info.id}
    }).then(function(data) {
        var opt;

        that.picking = false;
        switch (data.code) {
            case 200:
                setPicked(info);
                opt = $.extend({subContents: [
                    '<span class="price">¥ ' + info.money + '</span>',
                    info.name,
                    '有效日期: ' + info.time
                ]}, couponPickConfig.success);
                break;
            case 315:
                opt = $.extend({subContents: [
                    '有效日期: ' + info.time
                ]}, couponPickConfig.expired);
                break;
            case 400:
                if (data.data && data.data.refer) {
                    window.location.href = data.data.refer;
                    return;
                }
                opt = couponPickConfig.notLogged;
                break;
            case 401:
                setPicked(info);
                opt = couponPickConfig.got;
                break;
            default:
                couponPickConfig.failed.subContents = data.message ? [data.message] : [''];
                opt = couponPickConfig.failed;
                break;
        }

        couponAlert(opt);
    });
}

function couponSlide(num) {
    if (!this.$btns) {
        this.$btns = $couponBtn.children();
    }

    $couponItem.eq(0).animate({
        'margin-left': -itemWidth * num
    });

    this.$btns.removeClass('btn-end');

    if (!num) {
        this.$btns.eq(0).addClass('btn-end');
    } else if (num >= $couponItem.length - 3) {
        this.$btns.eq(1).addClass('btn-end');
    }
}

// 初始化与事件绑定
if ($couponWrap && $couponWrap.length) {
    getCouponInfo();

    syncCouponStatus();

    $pickBtn.click(function() {
        var id = $(this).data('id'),
            couponInfo = couponObj[id];

        if (!couponInfo) { // 优惠券号异常错误提示
            return couponAlert(couponPickConfig.failed);
        } else if (couponInfo.status === 2) { // 优惠券已抢光提示
            return couponAlert(couponPickConfig.over);
        } else if (couponInfo.status === 3) { // 优惠券已领取提示
            return couponAlert(couponPickConfig.got);
        }

        pickCoupon(couponInfo);
    });

    $couponBtn.on('click', '.pre-btn', function() {
        var $this = $(this);

        if ($this.hasClass('btn-end') || indexNum < 1) {
            return;
        }

        indexNum--;

        couponSlide(indexNum);
    }).on('click', '.next-btn', function() {
        var $this = $(this);

        if ($this.hasClass('btn-end')) {
            return;
        }

        indexNum++;

        couponSlide(indexNum);
    });
}