Blame view

public/js/home/coupon-new/controller.js 8.24 KB
郭成尧 authored
1
import $ from 'yoho-jquery';
陈峰 authored
2 3
import tip from 'js/plugin/tip';
import Page from 'js/yoho-page';
郭成尧 authored
4
郭成尧 authored
5 6 7
class ConponController extends Page {
    constructor() {
        super();
郭成尧 authored
8
郭成尧 authored
9 10 11 12
        this.couponType = 'notuse';
        this.couponFilter = 0;
        this.page = 1;
郭成尧 authored
13
        this.view = {
郭成尧 authored
14
            page: $('.coupon-new-page'),
郭成尧 authored
15 16
            filterBtn: $('.filter-btn'),
            filterItem: $('.filter-item'),
郭成尧 authored
17
            showFilterBtn: $('.show-filter-btn'),
郭成尧 authored
18
            couponList: $('#couponList'),
郭成尧 authored
19
            couponSection: $('.coupon-section'),
郭成尧 authored
20 21
            noConponNow: $('.no-conpon-now'),
            exchangeCouponBtn: $('#exchangeCouponBtn'),
郭成尧 authored
22
            couponCodeInput: $('input[name=couponCodeInput]'),
郭成尧 authored
23 24
            usedTip: $('.used-tip'),
            exchangeBox: $('.exchange-box')
郭成尧 authored
25 26
        };
郭成尧 authored
27
        this.view.filterBtn.on('click', this.tabChange.bind(this));
郭成尧 authored
28
        this.view.showFilterBtn.on('click', this.showFilter.bind(this));
郭成尧 authored
29
        this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));
郭成尧 authored
30
        this.view.couponSection.on('click', '.show-intro-btn', this.showIntro.bind(this));
郭成尧 authored
31 32
        this.view.exchangeCouponBtn.on('click', this.exchangeCoupon.bind(this));
        this.view.couponCodeInput.on('input', this.changeExchangeBtnStatus.bind(this));
郭成尧 authored
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

        this.loading = false;
        this.loadEnd = false;
        this.beforeScroll = $(window).scrollTop(); // 滚动前位置记录
        this.afterScroll; // 滚动后的位置
        window.onscroll = () => {
            if (this.loading || this.loadEnd) {
                return;
            }

            setTimeout(() => {
                this.afterScroll = $(window).scrollTop();

                if (this.afterScroll - this.beforeScroll > 0) {
                    window.requestAnimationFrame(() => {
                        this.scrollHandler();
                    });
                }
                this.beforeScroll = this.afterScroll;
            }, 100);
        };
    }

    /**
郭成尧 authored
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
     * 改变兑换按钮状态
     */
    changeExchangeBtnStatus() {
        if (this.view.couponCodeInput.val().length > 0) {
            this.view.exchangeCouponBtn.addClass('active');
        } else {
            this.view.exchangeCouponBtn.removeClass('active');
        }
    }

    /**
     * 使用优惠券码
     */
    exchangeCoupon() {
        let couponCode = this.view.couponCodeInput.val();

        if (!couponCode) {
            tip.show('请输入优惠券码');
            return false;
        }

        this.ajax({
            method: 'POST',
            url: '/cart/index/new/useCouponCode',
            data: {
                couponCode: couponCode
            }
郭成尧 authored
84
        }).then(res => {
郭成尧 authored
85 86 87 88
            if (res.message) {
                tip.show(res.message);
            }
            if (res.code === 200) {
郭成尧 authored
89
                setTimeout(() => {
郭成尧 authored
90
                    location.reload();
郭成尧 authored
91
                }, 500);
郭成尧 authored
92 93 94 95 96
            }
        });
    }

    /**
郭成尧 authored
97 98 99 100 101 102 103 104
     * 滚动处理
     */
    scrollHandler() {
        let conponListHeight = this.view.couponList.height();

        if ($(window).scrollTop() > conponListHeight * 0.6) {
            this.renderCoupons(true);
        }
郭成尧 authored
105 106 107 108 109 110 111
    }

    /**
     * 筛选优惠券
     */
    filterCoupons(evt) {
        let currentTarget = $(evt.currentTarget);
郭成尧 authored
112
        let currentTargetData = currentTarget.data();
郭成尧 authored
113
郭成尧 authored
114 115
        this.couponType = 'notuse';
        this.page = 0;
郭成尧 authored
116
        this.couponFilter = currentTargetData.id;
郭成尧 authored
117
郭成尧 authored
118 119
        this.view.filterItem.find('button').removeClass('active');
        currentTarget.addClass('active');
郭成尧 authored
120 121
        this.view.filterItem.addClass('hide');
        this.view.showFilterBtn.removeClass('icon-up').addClass('icon-down');
郭成尧 authored
122
郭成尧 authored
123
        this.renderCoupons();
郭成尧 authored
124 125 126 127 128
    }

    /**
     * 获取优惠券
     */
郭成尧 authored
129 130 131 132 133 134 135 136
    renderCoupons(scroll) {
        if (this.loading) {
            return;
        }

        this.loading = true;
        this.page++;
        this.ajax({
郭成尧 authored
137
            type: 'POST',
郭成尧 authored
138
            url: '/home/couponsList',
郭成尧 authored
139
            data: {
郭成尧 authored
140 141 142
                type: this.couponType,
                filter: this.couponFilter,
                page: this.page
郭成尧 authored
143
            },
郭成尧 authored
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
        }).then(result => {
            this.loading = false;

            let noResult = !result || !result.length;

            if (scroll && noResult) {
                this.loadEnd = true;
                return;
            }

            if (noResult) {
                this.view.noConponNow.removeClass('hide');
            } else {
                this.view.noConponNow.addClass('hide');
            }
郭成尧 authored
160
            let couponValidHbsHtml = $(result);
郭成尧 authored
161 162

            couponValidHbsHtml.on('click', '.show-intro-btn', this.showIntro.bind(this));
郭成尧 authored
163
郭成尧 authored
164 165 166 167 168
            if (scroll) {
                this.view.couponList.append(couponValidHbsHtml);
            } else {
                this.view.couponList.html(couponValidHbsHtml);
            }
郭成尧 authored
169
        });
郭成尧 authored
170 171 172 173 174
    }

    /**
     * tab 切换
     */
郭成尧 authored
175
    tabChange(event) {
郭成尧 authored
176
        this.page = 0;
郭成尧 authored
177
        this.couponFilter = 0;
郭成尧 authored
178 179
        this.loadEnd = false;
郭成尧 authored
180
        let itemClicked = $(event.currentTarget);
郭成尧 authored
181
        let itemCouponNum = itemClicked.data('num');
郭成尧 authored
182
郭成尧 authored
183
        // 筛选参数更改
郭成尧 authored
184
        if (itemClicked.hasClass('no-used')) {
郭成尧 authored
185
            this.couponType = 'notuse';
郭成尧 authored
186 187
            this.view.usedTip.addClass('hide');
            this.view.usedTip.find('span').addClass('hide');
郭成尧 authored
188
        } else if (itemClicked.hasClass('used')) {
郭成尧 authored
189
            this.couponType = 'use';
郭成尧 authored
190 191 192 193
            if (itemCouponNum !== 0) {
                this.view.usedTip.removeClass('hide');
                this.view.usedTip.find('.used').removeClass('hide');
                this.view.usedTip.find('.invalid').addClass('hide');
郭成尧 authored
194 195
            } else {
                this.view.usedTip.addClass('hide');
郭成尧 authored
196
            }
郭成尧 authored
197
        } else if (itemClicked.hasClass('invalid')) {
郭成尧 authored
198
            this.couponType = 'overtime';
郭成尧 authored
199 200 201 202
            if (itemCouponNum !== 0) {
                this.view.usedTip.removeClass('hide');
                this.view.usedTip.find('.invalid').removeClass('hide');
                this.view.usedTip.find('.used').addClass('hide');
郭成尧 authored
203 204
            } else {
                this.view.usedTip.addClass('hide');
郭成尧 authored
205
            }
郭成尧 authored
206 207
        } else {
            tip.show('未知券类型');
郭成尧 authored
208 209
        }
郭成尧 authored
210
        // 筛选框控制按钮状态、优惠券码兑换输入框状态管理
郭成尧 authored
211
        if (itemClicked.hasClass('no-used')) {
郭成尧 authored
212
            this.view.page.addClass('cpage-padding284').removeClass('cpage-padding194');
郭成尧 authored
213
            this.view.showFilterBtn.addClass('active');
郭成尧 authored
214
            this.view.exchangeBox.removeClass('hide');
郭成尧 authored
215
        } else {
郭成尧 authored
216
            this.view.page.addClass('cpage-padding194').removeClass('cpage-padding284');
郭成尧 authored
217 218
            this.view.showFilterBtn.removeClass('icon-up').addClass('icon-down');
            this.view.showFilterBtn.removeClass('active');
郭成尧 authored
219
            this.view.exchangeBox.addClass('hide');
郭成尧 authored
220 221
        }
郭成尧 authored
222 223 224 225 226
        // 筛选项面板和筛选项状态重置
        this.view.filterItem.addClass('hide');
        this.view.filterItem.find('button').removeClass('active');

        if (!itemClicked.hasClass('active')) {
郭成尧 authored
227 228
            this.view.filterBtn.removeClass('active');
            itemClicked.addClass('active');
郭成尧 authored
229
            this.renderCoupons();
郭成尧 authored
230
        }
郭成尧 authored
231
    }
郭成尧 authored
232 233 234 235

    /**
     * 展示筛选器
     */
郭成尧 authored
236 237 238 239 240 241 242
    showFilter(e) {
        let currentTarget = $(e.currentTarget);

        if (!currentTarget.hasClass('active')) {
            return;
        }
郭成尧 authored
243 244
        if (this.view.filterItem.hasClass('hide')) {
            this.view.filterItem.removeClass('hide');
郭成尧 authored
245
            this.view.showFilterBtn.removeClass('icon-down').addClass('icon-up');
郭成尧 authored
246 247
        } else {
            this.view.filterItem.addClass('hide');
郭成尧 authored
248
            this.view.showFilterBtn.removeClass('icon-up').addClass('icon-down');
郭成尧 authored
249 250 251 252 253 254
        }
    }

    /**
     * 展示优惠券介绍
     */
郭成尧 authored
255 256 257
    showIntro(e) {
        let delegateTarget = $(e.delegateTarget);
        let couponIntro = delegateTarget.find('.coupon-intro');
郭成尧 authored
258
        let showIntroIcon = delegateTarget.find('.show-intro-btn');
郭成尧 authored
259 260 261

        if (couponIntro.hasClass('hide')) {
            couponIntro.removeClass('hide');
郭成尧 authored
262
            showIntroIcon.eq(1).removeClass('icon-down').addClass('icon-up');
郭成尧 authored
263
        } else {
郭成尧 authored
264
            couponIntro.addClass('hide');
郭成尧 authored
265
            showIntroIcon.eq(1).removeClass('icon-up').addClass('icon-down');
郭成尧 authored
266 267
        }
    }
郭成尧 authored
268 269 270
}

export default ConponController;