caimei365-www/src/main/resources/static/js/quickOpreation/index.js

let quickOpreationMain = new Vue({
    el: '#app',
    mixins: [swiperMixin, showMoreMixin, cmSysVitaMixins],
    data: {
        isMobile: window.innerWidth < 992,
        showCouponEntry: false,
        isActive: true,
        isRequest: true,
        isLoading: true,
        showPhoneNum: false,
        showWechat: false,
        // showScrollTop: false,
        activityEntryVisiable: false,
        contactVisiable: false,
        scrollTopSize: 0,
        msg: 'hello world',
        src: './img/test.jpg',
        // 显示个数
        countMap: {},
        size: 10,
        swiperList: {},
        needReload: false,
        floorList: [],
        pageInfo: null,
        params: {
            //请求参数
            pageId: '293',
            userId: '',
            source: 1
        },
        selectVideoTabMap: {},
        //用户权限
        globalUserData: '',
        GLOBAL_USER_ID: 0,
        GLOBAL_USER_IDENTITY: 0,//2-会员机构；3-供应商；4-普通机构
        GLOBAL_SHOP_ID: 0,
    },
    filters: {
        NumFormat: function NumFormat(value) {//处理金额
            return Number(value).toFixed(2);
        }
        ,
        tabTime: function tabTime(val) { // 处理时间
            // 2021-08-16 00:00:00
            const first = val.split(' ')[0];
            const second = first.split('-');
            return second[1] + '-' + second[2];
        }
    },
    watch: {
        isMobile: function isMobile() {
            // if (this.needReload) window.location.reload()
            this.isLoading = true;
            window.location.reload();
        }
    },
    computed: {
        showScrollTop: function () {
            return this.scrollTopSize > 600
        }
    },
    created() {
        this.cmSysParams.pageType = 13;
        this.initUserInfo();
        this.getQuickOpreationList();
    },
    mounted() {
        // this.getQuickOpreationList() // 快捷运营信息
        this.pageLoaded();
        // this.showCouponEntry = true 优惠券弹窗入口2
        // 关闭视频播放
        this.$nextTick(function(){
            $('#video-popup .close').on('click', function(){
                $(this).parents('#video-popup').hide();
            });
        })
    },
    methods: {
        // 获取快捷运营信息
        getQuickOpreationList() {
            const paramsArr = window.location.pathname.split(".")[0].split("-");
            this.params.pageId = paramsArr.length >= 1 ? paramsArr[1] : '';
            ProductApi.getActivityData(this.params, (res) => {
                if (res.code === 0) {
                    this.floorList = res.data.floorList;
                    this.pageInfo = res.data.page;
                    this.cmSysParams.pageLabel = this.pageInfo.contentLabel;
                    this.isRequest = false;
                    this.makeVideoFetchMap();
                    this.contactVisiable = res.data.page.infoBarStatus === 1;
                }
            })
        },
        //    初始化用户信息
        initUserInfo () {
            const userInfo = localStorage.getItem('userInfo');
            if (!userInfo) {
                console.log('用户未登录...');
                return false
            }
            this.globalUserData = JSON.parse(localStorage.getItem('userInfo'));
            this.GLOBAL_USER_ID = this.globalUserData.userId * 1;
            this.GLOBAL_USER_IDENTITY = this.globalUserData.userIdentity * 1;
            this.GLOBAL_SHOP_ID = this.globalUserData.shopId * 1;
            this.params.userId = this.globalUserData.userId;
            if (this.GLOBAL_USER_ID === 5261 || this.GLOBAL_USER_ID === 10947 || this.GLOBAL_USER_ID === 11579) {
                this.GLOBAL_USER_IDENTITY = 1;
            }
            console.log('已获取用户登录信息')
        },
        fetchTemplate: function fetchTemplate(list, type) {
            return list.indexOf(parseInt(type)) !== -1;
        },
        //促销活动类型数据处理
        PromotionsFormat: function (promo) {
            if (promo !== null) {
                if (promo.type === 1 && promo.mode === 1) {
                    return true;
                } else {
                    return false;
                }
            }
            return false;
        },
        // 创建tab与轮播图的对应关系
        makeVideoFetchMap: function makeVideoFetchMap() {
            const videoList = [22, 23, 24, 25];
            const videoMap = {};
            this.floorList.forEach((item, index) => {
                if (videoList.indexOf(parseInt(item["floorContent"]["templateType"])) !== -1) {
                    videoMap[item["floorContent"]["templateType"] + '-' + index] = 0;
                }
            });
            this.selectVideoTabMap = videoMap;
        },
        // tab点击事件
        handleTabClick(type, index, val) {
            const swiperId = 'swiper-template-' + index + '-' + type + '-' + val;
            this.selectVideoTabMap[type + '-' + index] = val;
            if (this.swiperList[swiperId]) this.swiperList[swiperId].destroy();
            setTimeout(() => {
                this.swiperList[swiperId] = utils.createSwiperId(swiperId, swiperConfig);
                utils.responsive('.aspect', 'scalc');
                console.log('轮播图切换');
            });
        },
        // 当前选中的轮播图
        currentVideoSwiper(type, index) {
            return this.selectVideoTabMap[type + '-' + index];
        },
        getFloorImageListType(index) {
            return index === 0 ? 'floorImageList' : 'floorImageList' + (index + 1);
        },
        // 获取直播状态
        makeVideoStatus(floorData, index) {
            const displayDate = new Date(floorData.floorContent['displayDate' + index].replace(/-/g, '/')).getTime();
            const nowDate = new Date().getTime();
            // 一天的时间戳
            const oneDay = 60 * 60 * 24 * 1000;
            // 直播开始时间：displayDate
            // 直播结束时间：displayDate + oneDay
            if (nowDate < displayDate) return 0; // 未开始
            if (nowDate >= displayDate && nowDate <= displayDate + oneDay) return 1; // 已开始
            if (nowDate - oneDay > displayDate) return 2; // 已结束
        },
        // 使用产品楼层的布局
        getProductScalcMap(templateId) {
            const current = this.isMobile ? 'mobile' : 'pc';
            const scalcLayout = layoutMapping.productScalcMap['template-' + templateId];
            return {
                scalc: scalcLayout[current].scalc,
                col: scalcLayout[current].col
            };
        },
        // 使用文章楼层的布局
        getArticleScalcMap(templateId) {
            const current = this.isMobile ? 'mobile' : 'pc';
            const scalcLayout = layoutMapping.articleScalcMap['template-' + templateId];
            return {
                scalc: scalcLayout[current],
                swiper: scalcLayout['swiper']
            };
        },
        // 使用图片楼层的布局
        getImageScalcMap(templateId) {
            const current = this.isMobile ? 'mobile' : 'pc';
            const scalcLayout = layoutMapping.imageScalcMap['template-' + templateId];
            return {
                scalc: scalcLayout[current],
                swiper: scalcLayout['swiper']
            };
        },
        // 使用直播楼层的布局
        getVideoScalcMap(templateId) {
            const current = this.isMobile ? 'mobile' : 'pc';
            const scalcLayout = layoutMapping.videoScalcMap['template-' + templateId];
            return {
                scalc: scalcLayout[current],
                swiper: scalcLayout['swiper']
            };
        },
        // 播放视频
        onPlayVideo(link) {
            $('#video-popup video').attr('src', link);
            $('#video-popup').show();
        },
        // 处理link
        reallink(link) {
            if(!link) return 'javascript:void(0)';
            return link;
        },
        handleToggleActive(flag) {
            this.isActive = flag;
        },
        // 页面挂载完毕
        pageLoaded() {
            // 轮播图配置
            const options = {
                el: '.swiper-container',
                split: '-',
                config: swiperConfig,
                protertyFix: 'swiper-template-'
            };
            let resizeTimer = null;
            // 延迟处理
            let timer;
            timer = setInterval(() => {
                if (!this.isRequest) {
                    this.swiperList = utils.createSwiper(options);
                    // console.log(that.swiperList);
                    console.log('轮播图创建完毕...');
                    this.initCountMap(countMapping);
                    // console.log(that.countMap);
                    console.log('商品列表处理完毕...');
                    utils.responsive('.aspect', 'scalc');
                    this.isLoading = false;
                    clearInterval(timer);
                    this.$nextTick(() => {
                        $('img[data-original]').lazyload();
                    });
                    console.log('页面图片初始化完成...');
                }
            }, 500);
            // 监听window窗口大小
            window.addEventListener('resize', () => {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(() => {
                    utils.responsive('.aspect', 'scalc');
                    console.log('图片大小已刷新...');
                }, 200);
                quickOpreationMain.$set(quickOpreationMain.$data, 'isMobile', window.innerWidth < 560);
            });
            window.addEventListener('scroll', (event) => {
                this.scrollTopSize = $('body').scrollTop();
            });
            console.log('窗口resize事件注册完毕...');
        },
    }
})