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

var productDetail = new Vue({
    el: "#productDetail",
    mixins: [beautyArchiveDetailMixin],
    data: {
        showProduct: false,
        productId: 0,
        userId: 0,
        number: 0,
        productStock: 0,
        pcActType: 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: false,
        currentTab: 1,
        couponParam: {// 获取弹窗优惠券领取参数
            userId: 0,
            productId: 0,
            status: 1,
            source: 1
        },
        isCouponEmpty: false,
        productCoupon: [], 							// 优惠券
        productCouponList: [],						// 优惠券弹窗列表
        collectionType:false,                       // 商品收藏状态

    },
    filters: {
        TypeFormat: function (value) {
            switch (value) {
                case 0:
                    return '活动券';
                    break;
                case 1:
                    return '品类券';
                    break;
                case 2:
                    return '用户专享券';
                    break;
                case 3:
                    return '店铺券';
                    break;
                case 4:
                    return '新用户券';
                    break;
            }
        }
    },
    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.pcActType = product.pcActType;
                    _self.beautyActFlag = product.beautyActFlag;
                    _self.productTypeName = product.typeName;
                    _self.recommendType = product.recommendType ? product.recommendType : 0;
                    _self.archiveId = product.archiveId; // 保存资料列表id
                    if (product.userLike && product.userLike == 1) {// 商品收藏
                        _self.collectionType = true
                    } else {
                        _self.collectionType = false
                    }
                    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();
                    _self.getProdcutArchiveDetails();  //获取资料列表
                    // 获取路由hash标识，设置默认展开tab
                    var str = CAIMEI.getUrlParam('open');
                    if (str === 'caimei365' && _self.archiveId > 0) {
                        _self.tabsIndex = 4;
                    }
                } 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;
                    }
                });
            }
        },
        handleCollection:function (){// 收藏操作
            var _self = this;
            console.log('_self.userId',_self.userId)
            if (_self.userId > 0) {
                ProductApi.getProductUserLike({userId: _self.userId, productId: _self.productId}, function (response) {
                    if (response.code === 0 && response.data) {
                        _self.collectionType = !_self.collectionType
                        CAIMEI.dialog(response.data,false);
                    } else {
                        CAIMEI.Alert(response.msg, '确定', false);
                    }
                });
            }else{
                _self.toLogin();
            }
        },
        toLogin: function () {
            setBeforeUrl();
            window.location.href = '/login.html';
        },
        toUpgrade: function () {
            setBeforeUrl();
            window.location.href = '/user/setting/upgrade.html';
        },
		addShopCart: function(){ //加入购物车
		    var _self = this;
		    if(_self.addStatus){
		        _self.addStatus = false;
                ShoppingApi.ClubAddCart(
                    {
                        productCount:this.number,
                        productId:this.productId,
                        userId:this.userId,
                        source:1
                    },
                    function (response){
                        if(response.code == 0){
                            _self.addStatus = true;
                            $.confirm({
                                useBootstrap: false,
                                boxWidth: (isPC?'338px':'74.6vw'),
                                title: false,
                                content:'<div class="cartAlert"><h6>商品已成功加入购物车！</h6><p>当前购物车共<em>'+response.data+'</em>种商品</p></div>',
                                closeIcon: true,
                                animation: 'opacity',
                                closeAnimation: 'opacity',
                                animateFromElement: false,
                                scrollToPreviousElement: false,
                                buttons: {
                                    login: {
                                        text: '去结算',
                                        btnClass: 'btn-to-cart',
                                        action: function(){
                                            window.location.href = '/shopping/cart.html';
                                        }
                                    },
                                    close: {
                                        text: '继续购物',
                                        btnClass: 'btn-to-goon',
                                        action:function(){

                                        }
                                    }
                                }
                            });
                            globalHead.getHeadCart(_self.userId);
                        }else{
                            CAIMEI.dialog('加入购物车失败！',true,function () {
                                _self.addStatus = true;
                            });
                        }
                    }
                )
		    }
		},
        buyNowSubmit: function(){ // type:（1购物车提交[对应表cm_cart]，2直接购买提交, 3协销下单）
            var _self = this;
            if(_self.productId && _self.number){
                window.location.href = '/shopping/confirm.html?type=2&productId='+_self.productId+'&count='+_self.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);
                        }
                    }
                });
        },
        queryProductDetilsCoupons: function() {// 初始化商品详情优惠券信息
            var _self = this;
            ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
                if (response.code == 0) {
                    var data = response.data;
                    if (isPC) {
                        _self.productCoupon = response.data.list.splice(0, 3);
                    } else {
                        _self.productCoupon = response.data.list.splice(0, 2);
                    }
                } else {
                    console.log('获取优惠券列表失败');
                }
            })
        },
        queryPopupCoupons: function () {// 获取弹窗优惠券列表
            var _self = this;
            ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {
                if (response.code == 0) {
                    var data = response.data;
                    if (data.couponList && data.couponList.length > 0) {
                        _self.productCouponList = data.couponList;
                        _self.isCouponEmpty = false;
                        console.log('有优惠券')
                        console.log(_self.productCouponList)
                    } else {
                        console.log('没有优惠券')
                        _self.isCouponEmpty = true;
                    }
                } else {
                    console.log('获取优惠券列表失败')
                }
            })
        },
        receiveCoupon: function (coupon) {// 点击领取优惠券
            var _self = this;
            ProductApi.ReceiveCoupon({
                userId: _self.couponParam.userId,
                couponId: coupon.couponId,
                source: 1
            }, function (response) {
                if (response.code == 0) {
                    _self.currentTab = 2;
                    _self.couponParam.status = 2;
                    _self.queryPopupCoupons();
                } else {
                    CAIMEI.Alert(response.msg, '确定', false);
                }
            })
        },
        queryCouponTabs: function (value) {// 切换优惠券
            var _self = this;
            _self.currentTab = _self.couponParam.status = value;
            _self.queryPopupCoupons();
        },
        showPopup: function () {// 显示优惠券弹窗
            var _self = this;
            if (_self.userId > 0) {
                _self.productCouponList = [];
                _self.currentTab = 1;
                _self.couponParam.status = 1;
                _self.queryPopupCoupons();
                _self.isShowPopup = true;
            } else {
                window.location.href = '/login.html';
            }
        },
        hidePopup: function () {// 隐藏优惠券弹窗
            var _self = this;
            _self.isShowPopup = false;
        },
        detailsClicktab: function (index) {
            var _self = this;
            _self.tabsIndex = index;
            if (index !== 4) return;
            // 只有当前用户权限为0,并且未初始化时初始化图片预览
            if (_self.permission === 0) {
                setTimeout(function () {
                    _self.initPreviewImage()
                })
            }
        },
        // 是否显示vip标签价格
        showVipPriceTag(product){
            return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));
        }
    },
    created: function () {
        this.productId = this.couponParam.productId = $("#productId").val();
        this.userId = this.couponParam.userId = GLOBAL_USER_ID;
        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 = this.couponParam.userId = GLOBAL_USER_ID;
        this.getProductDetails();
        this.getProductPrice();
        this.getParameters();
        this.queryProductDetilsCoupons();

        // $('.productInfo').slide({
        //     mainCell:".tabCon"
        //     ,titCell:".tabTit span"
        //     ,trigger: "click"
        // });
    }
});