official_website/static/js/project/listingItems/items.js

/**
 * Created by Administrator on 2021/4/5.
 */
define(['jquery', "template", "Tools", 'swiper'], function ($, template, Tools, swiper) {
    //数据存储
    var module = {
        data: {

        },
    };
    var tools = new Tools();

    module.init = function (page) {

        //焦点图
        module.swiperBanner();

        //tab切换
        module.tabClick();

    };

    //焦点图滚动
    module.swiperBanner = function (type) {
        var viewSwiper = new Swiper('.view .swiper-container', {
            onSlideChangeStart: function() {
                updateNavPosition()
            }
        })

        $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == 0) {
                viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
                return
            }
            viewSwiper.swipePrev()
        })
        $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                viewSwiper.swipeTo(0, 1000);
                return
            }
            viewSwiper.swipeNext()
        })

        var previewSwiper = new Swiper('.preview .swiper-container', {
            visibilityFullFit: true,
            slidesPerView: 'auto',
            onlyExternal: true,
            onSlideClick: function() {
                viewSwiper.swipeTo(previewSwiper.clickedSlideIndex)
            }
        })
        function updateNavPosition() {
            $('.preview .active-nav').removeClass('active-nav')
            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() > previewSwiper.activeIndex) {
                    var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                    previewSwiper.swipeTo(activeNav.index() - thumbsPerNav)
                } else {
                    previewSwiper.swipeTo(activeNav.index())
                }
            }
        }
    }

    //切换
    module.tabClick = function(){
        //标的物介绍
        document.getElementById('tab1').addEventListener('click',function(){
            for (var i = 0 ; i < 4 ; i++){
                document.getElementById('tabDetail'+(i+1)).style.display = 'none';
                document.getElementById('tab'+(i+1)).classList = '';
            }
           document.getElementById('tabDetail1').style.display = 'block';
           document.getElementById('tab1').classList = 'active';
        });
        //标的物图片
        document.getElementById('tab2').addEventListener('click',function(){
            for (var i = 0 ; i < 4 ; i++){
                document.getElementById('tabDetail'+(i+1)).style.display = 'none';
                document.getElementById('tab'+(i+1)).classList = '';
            }
            document.getElementById('tabDetail2').style.display = 'block';
            document.getElementById('tab2').classList = 'active';
        });
        //竞买须知
        document.getElementById('tab3').addEventListener('click',function(){
            for (var i = 0 ; i < 4 ; i++){
                document.getElementById('tabDetail'+(i+1)).style.display = 'none';
                document.getElementById('tab'+(i+1)).classList = '';
            }
            document.getElementById('tabDetail3').style.display = 'block';
            document.getElementById('tab3').classList = 'active';
        });
        //竞价记录
        document.getElementById('tab4').addEventListener('click',function(){
            for (var i = 0 ; i < 4 ; i++){
                document.getElementById('tabDetail'+(i+1)).style.display = 'none';
                document.getElementById('tab'+(i+1)).classList = '';
            }
            document.getElementById('tabDetail4').style.display = 'block';
            document.getElementById('tab4').classList = 'active';
        });
    }

    return module;
});