caimei365-www/src/main/resources/static/js/product/detail.js

var productDetail = new Vue({
    el: "#productDetail",
    data: {
        showProduct: false,
        productId: 0,
        userId: 0,
        number: 0,
        productStock: 0,
        images: [],
        priceObj: {
            actStatus: 0,
            ladderPriceFlag: 0,
            minBuyNumber: 1,
            price: 0,
            costPrice: 0,
            priceFlag: 3,
            productId: 0,
            promotions: '',
            step: 1,
            supplierId: 0,
            userIdentity: 0 //2-会员机构；3-供应商；4-普通机构
        },
        ladderList:[],//阶梯价
        promotions:{},//促销活动信息
        promotionsId:0,//活动id
        addStatus: true,
        recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐
        recommendPage: 1,
        recommends: [],
        parameters: [],
        tabsIndex:0,
        disabledText:'',
        isNoneDisabled:false,
        isServiceInfo:false,
        isTrainingMethod:false,
        productTypeName:"",
        beautyActFlag:'',
        trainingMethodText:'',
        trainingType:'',
        isShowPopup:true,
        currentTab:0,
        dataList:[
            {
                maxMoney:5000,
                minMoney:1000,
                couponType:1,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:1,
                couponBtnType:0,
                status:0,
            },
            {
                maxMoney:2000,
                minMoney:200,
                couponType:2,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:2,
                couponBtnType:0,
                status:1,
            },
            {
                maxMoney:4000,
                minMoney:800,
                couponType:3,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:3,
                couponBtnType:0,
                status:2,
            },
            {
                maxMoney:6000,
                minMoney:1000,
                couponType:4,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:1,
                couponBtnType:0,
                status:0,
            },
            {
                maxMoney:6000,
                minMoney:1000,
                couponType:4,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:1,
                couponBtnType:0,
                status:0,
            },
            {
                maxMoney:6000,
                minMoney:1000,
                couponType:4,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:1,
                couponBtnType:0,
                status:1,
            },
            {
                maxMoney:6000,
                minMoney:1000,
                couponType:4,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:1,
                couponBtnType:0,
                status:2,
            },
            {
                maxMoney:6000,
                minMoney:1000,
                couponType:5,
                couponTime:'2021.06.28~2021.07.28',
                couponText:'华熙生物技术有限公司',
                useType:2,
                couponBtnType:0,
                status:1,
            }
        ],
    },
    filters: {
        TypeFormat:function(value) {
            switch (value) {
                case 1:
                    return  '活动券';
                    break;
                case 2:
                    return  '品类券';
                    break;
                case 3:
                    return  '店铺券';
                    break;
                case 4:
                    return  '专享券';
                    break;
                case 5:
                    return  '新用户券';
                    break;
            }
        },
        TypeFormatText:function(value) {
            switch (value) {
                case 1:
                    return  '全商城商品通用';
                    break;
                case 2:
                    return  '仅限购买仪器类商品';
                    break;
                case 3:
                    return  '仅可购买店铺';
                    break;
            }
        }
    },
    computed: {},
    methods: {
        getImages: function(){
            var _self = this;
            if(!this.productId){return;}
            ProductApi.GetProductDdtailsImages({productId: _self.productId},function (response) {
                if (response.code === 0 && response.data) {
                    _self.images = response.data;
                    setTimeout(function(){
                        if (isPC) {
                            var magnifier = new ImageMagnifier(
                                '#imgShown .smallImage li',
                                '#imgShown .bigImage',
                                '#imgShown .zoomImage',
                                '#imgShown .mask',
                                '#imgShown .zoom',
                                "on"
                            ).init();
                        } else {
                            var swiper = new Swiper('#swiperImage', {
                                loop : true,
                                autoplay: {
                                    delay: 2000,
                                    disableOnInteraction: false
                                },
                                pagination: {
                                    el: '.swiper-pagination',
                                    type: 'fraction'
                                }
                            });
                        }
                    },500);
                }
            });
        },
        getProductDetails:function(){
            var _self = this;
            ProductApi.GetProductDdtails({userId:GLOBAL_USER_ID,productId:_self.productId},function (response) {
                if(response.code == 0){
                    var product = response.data;
                    _self.beautyActFlag = product.beautyActFlag
                    _self.productTypeName = product.typeName;
                    _self.recommendType = product.recommendType ? product.recommendType : 0;
                    if(product.productDetail.orderInfo!='' && product.productDetail.serviceInfo!=''){
                        _self.isServiceInfo = true;
                    }
                    if(product.commodityType == 2 && product.trainingMethod){
                        _self.isTrainingMethod = true;
                        _self.trainingMethodText = product.trainingMethod == 1 ? '线上培训' : '线下培训';
                        _self.trainingType = product.trainingType == 1 ? '￥'+product.trainingFee : '售价已包含';
                    }
                    if(product.validFlag == 3 || product.validFlag == 9 || product.validFlag == 0 ||  product.validFlag == 10 || product.stock == 0 ){
                        _self.isNoneDisabled = true;
                    }else{
                        _self.isNoneDisabled = false;
                    }
                    if(product.validFlag ==3){
                        _self.disabledText = '下架'
                    }
                    if(product.validFlag ==10){
                        _self.disabledText = '停售'
                    }
                    if(product.validFlag ==9 || product.validFlag ==0){
                        _self.disabledText = '失效'
                    }
                    if(product.stock == 0 && product.validFlag !=3){
                        _self.disabledText = '售罄'
                    }
                    _self.getRecommends();
                }else{
                    CAIMEI.Alert(response.msg, '确定', false);
                }
            })
        },
        getProductPrice:function(){//获取商品价格
            var _self = this;
            if(_self.productId ===0){return;}
            ProductApi.GetProductDdtailsPrice({ userId: GLOBAL_USER_ID,productId: _self.productId},function (response) {
                if (response.code === 0 && response.data) {
                    _self.priceObj = response.data;
                    _self.number = response.data.minBuyNumber;
                    if(response.data.ladderPriceFlag===1){
                        _self.ladderPrice();
                    }
                    if(response.data.actStatus==1){
                        _self.promotions =  response.data.promotions;
                        _self.promotionsId = response.data.promotions.id;
                    }
                }
            });
        },
        ladderPrice:function(){//获取商品阶梯价格
            var _self = this;
            if(!this.productId){return;}
            ProductApi.GetProductDdtailsLadderPrice({ productId: _self.productId },function (response) {
                if (response.code === 0 && response.data) {
                    _self.ladderList =response.data;
                    _self.numberResize();
                }
            });
        },
        getParameters: function(){//获取商品参数
            var _self = this;
            if(!this.productId){return;}
            ProductApi.GetProductDdtailsParameter({ productId: _self.productId},function (response) {
                if (response.code === 0 && response.data) {
                    _self.parameters = response.data;
                    console.log(_self.parameters)
                }
            });
        },
        toggleThisLadder: function(event){
            var el = event.currentTarget;
            if($(el).hasClass("on")){
                $(el).removeClass("on").siblings('.mFixed').hide();
                if(!isPC){looseBody();}
            }else{
                $(el).addClass("on").siblings('.mFixed').show();
                if(!isPC){fixedBody();}
            }
        },
        hideThisLadder: function(event){
            var el = event.currentTarget;
            $(el).parents('.priceTag').find('.tag').removeClass("on").siblings('.mFixed').hide();
            if(!isPC){looseBody();}
        },
        numberSub: function(){
            this.number -= this.priceObj.step;
            this.numberResize();
        },
        numberAdd: function(){
            this.number += this.priceObj.step;
            this.numberResize();

        },
        numberChange: function(){
            this.number = Math.ceil(this.number/this.priceObj.step)*this.priceObj.step;
            this.numberResize();

        },
        numberResize: function(){
            var _self = this;
            if (this.number<this.priceObj.minBuyNumber){
                this.number = this.priceObj.minBuyNumber;
            }
            if (this.number>this.productStock){
                this.number = this.productStock;
            }
            if(this.priceObj.ladderPriceFlag){
                this.ladderList.forEach(function(ladder){
                    if(_self.number>=ladder.buyNum){
                        _self.priceObj.price = ladder.buyPrice;
                    }
                });
            }
        },
        toLogin: function() {
            setBeforeUrl();
            window.location.href = '/login.html';
        },
        toUpgrade: function() {
            setBeforeUrl();
            window.location.href = '/user/setting/upgrade.html';
        },
		addShopCart: function(){ //加入购物车
		    var _self = this;
		    if(this.addStatus){
		        _self.addStatus = false;
                addShoppingCart(this.userId, this.productId, this.number,function(){
                    _self.addStatus = true;
                });
		    }
		},
        buyNowSubmit: function(){
            if(this.productId && this.number){
                // type:（1购物车提交[对应表cm_cart]，2直接购买提交, 3协销下单）
                window.location.href = '/shopping/confirm.html?type=2&id='+this.productId+'&count='+this.number;
            }
        },
        getRecommends: function(){
            var _self = this;
            if(!this.productId){return;}
            ProductApi.GetProductDdtailsRecommend(
                {
                    productId: _self.productId,
                    recommendType: _self.recommendType,
                    userId: _self.userId
                },
                function (response) {
                if (response.code === 0 && response.data) {
                    if(response.data.length > 0){
                        _self.recommends = response.data;
                        _self.recommendPage = isPC ? Math.ceil(response.data.length / 7) : Math.ceil(response.data.length / 3);
                        setTimeout(function(){
                            if (isPC) {
                                $('#productRecommend').slide({
                                    mainCell:".swiper-wrapper",
                                    titCell:".swiper-pagination span",
                                    effect: "leftLoop",
                                    interTime: 3000,
                                    autoPlay: true,
                                    scroll:7,
                                    vis:7,
                                    trigger: "mouseover"
                                });
                            } else {
                                var swiper = new Swiper('#productRecommend', {
                                    slidesPerView: 3,
                                    spaceBetween: 0,
                                    autoplay: {
                                        delay: 3000,
                                        disableOnInteraction: false
                                    },
                                    pagination: {
                                        el: '.swiper-pagination'
                                    }
                                });
                            }
                        },500);
                    }
                }
            });
        },
        queryCouponTabs:function (value){// 切换优惠券
            var _self = this;
            _self.currentTab = value;
        },
        showPopup:function(){// 显示优惠券弹窗
            var _self = this;
            _self.isShowPopup = true;
        },
        hidePopup:function(){// 隐藏优惠券弹窗
            var _self = this;
            _self.isShowPopup = false;
        },
        detailsClicktab:function(index){
            var _self = this;
            _self.tabsIndex = index;
        }
    },
    created: function () {
        this.productId = $("#productId").val();
        this.productStock = $("#productStock").val();
        this.getImages();
        // identity: 0个人，1协销，2会员机构，3供应商，4普通机构
        // visibility：3:所有人可见，2:普通机构可见，1:会员机构可见
        var visible = $("#productVisibility").val()*1;
        var identity = GLOBAL_USER_IDENTITY;
        this.showProduct = visible === 3 || identity === 1 || identity === 2 || (identity === 4 && visible === 2);
        if(!this.showProduct) {
            window.location.href = "/404.html?error=未查询到该商品";
        }
    },
    mounted: function () {
        this.userId = GLOBAL_USER_ID;
        this.getProductDetails();
        this.getProductPrice();
        this.getParameters();
        // $('.productInfo').slide({
        //     mainCell:".tabCon"
        //     ,titCell:".tabTit span"
        //     ,trigger: "click"
        // });
    }
});