view.js 3.09 KB
import {
    View
} from 'yoho-mvc';

let Swiper = require('yoho-swiper');
let lazyLoad = require('yoho-jquery-lazyload');

export class DetailView extends View {
    constructor() {
        super('#global-detail-page');

        setTimeout(() => {
            new Swiper('.banner-swiper', {
                preloadImages: false,
                lazyLoading: true,
                lazyLoadingInPrevNext: true,
                lazyLoadingOnTransitionStart: true,
                paginationClickable: true,
                pagination: '.banner-top .pagination-inner',
                nextButton: '.my-swiper-button-next',
                prevButton: '.my-swiper-button-prev',
                spaceBetween: 3
            });
        }, 500);

        let $cartBar = $('.cart-bar');
        let timer = setInterval(function() {
            if ($cartBar) {
                window.reMarginFooter('.cart-bar');
                clearInterval(timer);
            } else {
                $cartBar = $('.cart-bar');
            }
        }, 500);
    }

    setDetailHtml(htmldata) {
        let $productDesc = $('#productDesc');
        $productDesc.append(htmldata);
        
        window.rePosFooter && window.rePosFooter(); 

        lazyLoad($productDesc.find('img.lazy'));

        this.productDescStyle();
    }

    productDescStyle() {
        new Swiper('#swiper-recommend', {
            slidesPerView: 'auto',
            grabCursor: true,
            slideElement: 'a',
            lazyLoading: true,
            watchSlidesVisibility: true
        });

        var $service = $('.service-cont'),
            serviceH = $service.height(),
            serviceLi = $service.find('li'),
            showH = parseInt(serviceLi.eq(0).height()) + parseInt(serviceLi.eq(1).height()) - parseInt(serviceLi.eq(1).find('.service-answer').height()) / 2;

        $service.css({
            height: showH,
            overflow: 'hidden'
        });

        this.operation = {
            showH,
            serviceH
        }
        this.on('click', '.service-operation', this.serviceOperation.bind(this));
    }

    serviceOperation(e,) {
        function serviceState(opt) {
            opt.dom.html(opt.txt + '<i class="service-icon shrink-btn-' + opt.btnClass + '"></i>');

            $('.service-cont').animate({
                height: opt.height
            }, 0, function() {
                $(this).css({
                    overflow: opt.of
                });
            });
        }

        let $this = $(e.currentTarget);
        let curState = $this.find('i').hasClass('shrink-btn-up');

        if (curState) {
            serviceState({
                'dom': $this,
                'txt': '展开',
                'btnClass': 'down',
                'height': this.operation.showH,
                'of': 'hidden'
            });
        } else {
            serviceState({
                'dom': $this,
                'txt': '收起',
                'btnClass': 'up',
                'height': this.operation.serviceH,
                'of': 'visible'
            });
        }
    }

    getSkn() {
        return this.$base.data('skn');
    }
};