caimei365-www/src/main/resources/static/js/product/alliance-page.js

'use strict';
// loading组件
var LoadingWrap = {
    name: 'Loading',
    render: function render(h) {
        return h('div', { class: ['loading-wrap'] }, [h('img', { attrs: { src: '/img/alliance-page/loading.gif', alt: 'loading' } })]);
    }
};

function remove(el) {
    el.removeChild(el.instance.$el);
}

function append(el) {
    el.appendChild(el.instance.$el);
}

// 定义 loading 指令
var loadingDirective = {
    inserted: function inserted(el, binding) {
        // 创建 loading 组件构造函数
        var LoadingCtor = Vue.extend(LoadingWrap);
        // new 一个 loading组件实例
        var loadingInstance = new LoadingCtor();
        // 组件挂载
        el.instance = loadingInstance.$mount();
        // 传入值为 true 时才展示
        if (binding.value) {
            // 将组件挂载到绑定指令的元素上
            append(el);
        }
    },
    update: function update(el, binding) {
        // 值更新时进行操作
        if (binding.value !== binding.oldValue) {
            binding.value ? append(el) : remove(el);
        }
    }
};

// vue实例
var zplm = new Vue({
    el: '#zplm',
    directives: {
        loading: loadingDirective
    },
    data: {
        isPc: $(window).width() > 768,
        authCardVisible: false,
        statementVisible: false,
        showStatementContent: false,
        wechatVisible: true,
        showMask: false,
        isRequest: true,
        // 产品id
        productId: '',
        //产品参数对象
        productAuthInfo: {},
        //错误信息
        errorMessage: '',
        // 定时器
        timer: null
    },
    computed: {
        // 封面图 主图
        coverImage: function coverImage() {
            return this.isPc ? this.productAuthInfo.pcImage : this.productAuthInfo.appletsImage;
        },

        // 授权机构
        authOrigin: function authOrigin() {
            return this.productAuthInfo.agentFlag !== 0 ? this.productAuthInfo.shopName : this.productAuthInfo.brandName;
        },

        // 不换行
        noWarp: function noWarp() {
            if (this.isPc && this.productAuthInfo.paramList.length > 1) return { 'white-space': 'nowrap' };
            return '';
        }
    },
    created: function created() {
        this.getProductId();
        this.fetchProductAuthInfo();
    },

    filters: {
        // 处理sn码
        snCode: function snCode(code) {
            if (!code) return '';
            return code.replace(/^(\w{2})\w+(\w{4})$/, "$1******$2");
        }
    },
    methods: {
        // 获取商品id
        getProductId: function getProductId() {
            var productId = window.location.pathname.split('-')[1].split('.')[0];
            this.productId = parseInt(productId);
        },

        // 获取授权信息
        fetchProductAuthInfo: function fetchProductAuthInfo() {
            var that = this;
            var data = {productId:that.productId}
            $.ajax({
                url: 'https://zplma.caimei365.com/wx/auth/product/details',
                data: data,
                xhrFields: {//此处为跨域后台保持session一致,切勿删除!!!
                    withCredentials: true
                },
                type: 'GET',
                dataType: "json",
                async: false,
                // contentType: contentType,
                contentType: 'application/json;charset=UTF-8',
            }).then(res => {
                // 获取授权信息失败
                if (res.code) {
                    that.isRequest = false;
                    return that.errorMessage = res.msg;
                }
                // 获取授权信息成功
                that.productAuthInfo = res.data;
                that.isRequest = false;
            })
            setTimeout(function(){
                if(that.isRequest){
                    that.isRequest = false;
                    location.href = '/404.html'
                }
            }, 10000)
        },

        // 显示授权牌
        handleShowAuthCard: function handleShowAuthCard() {
            this.authCardVisible = !this.authCardVisible;
            this.showMask = !this.showMask;
        },

        // 显示声明弹窗
        handleShowStatement: function handleShowStatement() {
            var that = this;
            this.statementVisible = !this.statementVisible;
            this.showMask = !this.showMask;
            this.timer = setTimeout(function () {
                that.showStatementContent = !that.showStatementContent;
            }, 800);
        },

        // 显示微信二维码
        handleShowWechat: function handleShowWechat() {
            this.wechatVisible = !this.wechatVisible;
        }
    }
});