var productDetail = new Vue({ el: "#productDetail", mixins: [beautyArchiveDetailMixin,cmSysVitaMixins], data: { showProduct: false, productId: 0, typeId:0, userId: 0, identity: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-普通机构 }, product:{},// 商品信息 ladderList: [],//阶梯价 promotions: {},//促销活动信息 promotionsId: 0,//活动id addStatus: true, recommendType: 0,//相关推荐类型 0自动选择; 1手动推荐 recommendPage: 1, recommends: [], parameters: [], tabsIndex: 0, disabledText: '', isNoneDisabled: false, isServiceInfo: false, isTrainingMethod: false, isQualificationImg: false, productTypeName: "", beautyActFlag: '', trainingMethodText: '', trainingType: '', isShowPopup: false, currentTab: 1, listQuery:{ source:1, userId:0, productId:0, pageNum:1, pageSize:30, }, couponParam: {// 获取弹窗优惠券领取参数 userId: 0, productId: 0, status: 1, source: 1 }, isCouponEmpty: false, isProductChecked:false, productCoupon: [], // 优惠券 productCouponList: [], // 优惠券弹窗列表 collectionType:false, // 商品收藏状态 supportingList:[], productDetailChose:2, defaultSupportingList:[], isShowSupportingList:false, isShowMoreButton:false, totalPrice:0, // 勾选配套商品总价格 totalNumber:0, // 勾选配套商品总数量 isShowCaimeiShop:false, isHideButton: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; } }, NumFormat:function(value) { return Number(value).toFixed(2); } }, methods: { // 是否显示vip标签价格 showVipPriceTag: function(product){ return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2)); }, PromotionsFormat:function(promo){//促销活动类型数据处理 if(promo!=null){ if(promo.type == 1 && promo.mode == 1){ return true }else{ return false } } return false }, getCommodityCombinationList: function () {// 获取收藏商品列表 var _self = this; ProductApi.getCommodityCombinationList(_self.listQuery,function (response) { if (response.code === 0 ) { var data = response.data; if(data.results.length > 0 ){ var list = data.results.map((el,index)=>{ el.isChecked = false; el.number = el.minBuyNumber; return el; }); _self.supportingList = list; _self.defaultSupportingList = _self.supportingList.slice(0,5); if(_self.supportingList.length > 5 ){ _self.isShowMoreButton = true; } }else{ _self.supportingList = []; } }else { CAIMEI.Alert(response.msg, '确定'); } }); }, // 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,typeId:_self.typeId}, function (response) { if (response.code == 0) { var product = response.data; var $pageLabel = ''; _self.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 _self.productDetailChose = product.productDetailChose; // 同资质机构显示商品详情 if(product.tinyTypeName){ $pageLabel = product.tinyTypeName }else if(!product.tinyTypeName && product.smallTypeName){ $pageLabel = product.smallTypeName }else{ $pageLabel = product.bigTypeName } _self.cmSysParams.pageLabel = `${$pageLabel}-${product.brandName?product.brandName:''}`;//设置统计数据标签 if(product.shopType == 2){ _self.isShowCaimeiShop = true } 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.qualificationImg){//商品资质 _self.isQualificationImg = true }else{ _self.isQualificationImg = false } 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.handleShowProductType(product.commodityDetailsFlag); _self.getRecommends(); _self.getProdcutArchiveDetails(); //获取资料列表 // 获取路由hash标识,设置默认展开tab var str = CAIMEI.getUrlParam('open'); if (str === 'caimei365' && _self.archiveId > 0) { _self.tabsIndex = 4; } } else { console.log('<===Error===>',response.msg) } }) }, handleShowProductType: function (flag = ''){ // 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见 let showModal = false; const flagMap = { '2': true, '3': true, '4': true } const textMap = { '2': '该商品仅限已注册机构查看,请注册机构账户后继续查看。有采美账号的,请直接登录', '3': '该商品仅限资质机构查看,请注册资质机构后继续查看。有采美账号的,请直接登录。', '4': '该商品仅限医美类机构查看,请注册医美机构后继续查看。有采美账号的,请直接登录。', '34': '该商品仅限资质机构查看,请升级为资质机构后继续查看。', '44': '该商品仅限医美类机构查看,请升级为医美机构后继续查看。', '42': '该商品仅限医美类机构查看,您暂无权限。您可去机构资料页面查看机构类型。' } const code = flag === 4 && GLOBAL_USER_IDENTITY === 2 && GLOBAL_CLUB_TYPE !== 1 ? '42' : `${flag}${GLOBAL_USER_IDENTITY}` if (GLOBAL_USER_ID === 0) { showModal = flagMap[flag]; this.showProsPopup(showModal,textMap[flag],'去注册/登录','/login.html') return } if(GLOBAL_VIP_FLAG === 1){ return; } if (flag === 3 && GLOBAL_USER_IDENTITY === 4) { showModal = true this.showProsPopup(showModal,textMap[code],'去升级','/user/setting/upgrade.html') return } if (flag === 4 && GLOBAL_USER_IDENTITY === 4) { showModal = true this.showProsPopup(showModal,textMap[code],'去升级','/user/setting/upgrade.html') return } if (flag === 4 && GLOBAL_USER_IDENTITY=== 2 && GLOBAL_CLUB_TYPE !== 1) { showModal = true this.showProsPopup(showModal,textMap[code],'去查看资料','/user/setting/information.html') return } }, showProsPopup:function (showFlag,content,confitmBtnText,href) {// 商品详情限制弹窗 if(showFlag){ CAIMEI.Popup({ content: `

${content}

`, confitmBtnText: confitmBtnText, cancelBtnText: '关闭', closeIcon:false },function(){ // 确定 window.location.href = href; },function(){ // 关闭 if(window.history.length === 1){ window.location.href="/index.html"; window.close(); }else{ window.history.go(-1); } }); } }, 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; } console.log('userIdentity',_self.priceObj.userIdentity) if(_self.userId === 0 || GLOBAL_USER_IDENTITY === 2 || GLOBAL_USER_IDENTITY === 4){ _self.isShowSupportingList = true; } } }); }, 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:'
商品已成功加入购物车!

当前购物车共'+response.data+'种商品

', 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('获取优惠券列表失败') } }) }, toDeductCoupon:function (coupon) {// 点击购买按钮事件处理 var _self = this; console.log(coupon) if(_self.listQuery.userId == 0){ window.location.href='/login.html'; }else{ ProductApi.CreatePayCouponBeans({userId:_self.couponParam.userId, couponId:coupon.couponId, source:2}, function (response) { if(response.code == 0){ CAIMEI.dialog('抵扣成功',true,function () { setTimeout(function(){ _self.currentTab = 2; _self.couponParam.status = 2; _self.queryPopupCoupons(); },200) }); }else{ CAIMEI.Alert(response.msg, '确定', false); } }) } }, receiveCoupon: function (coupon) {// 点击领取优惠券 var _self = this; ProductApi.ReceiveCoupon({ userId: _self.couponParam.userId, couponId: coupon.couponId, source: 2 }, 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() }) } }, supportingNumberSub: function(pros){// 配套商品数量减减 var _self = this; if (pros.number <= pros.minBuyNumber) { pros.number = pros.minBuyNumber return } else { if (pros.step === 2) { pros.number -= pros.minBuyNumber } else { pros.number-- } } _self.numberChange(pros); }, supportingNumberAdd: function(pros){ // 配套商品数量加加 var _self = this; if (pros.step === 2) { pros.number += pros.minBuyNumber } else { pros.number++ } _self.numberChange(pros); }, supportingNumberChange: function(pros){ // 配套商品数量输入 var _self = this; pros.number = Math.ceil(pros.number/pros.step)*pros.step; _self.numberChange(pros); }, numberChange: function(pros){ var _self = this; if(pros.ladderPriceFlag){ pros.ladderPrices.forEach(function(ladder){ if(pros.number>=ladder.buyNum){ pros.price = ladder.buyPrice; pros.originalPrice = ladder.buyPrice; } }); } // 计算价格 _self.calculatetTtalPrice(); }, calculatetTtalPrice: function () { // 计算配套商品总价格 var _self = this; var totalPrice = 0; var totalNumber = 0; _self.supportingList.forEach(function (pros) { if(pros.isChecked){ pros.totalPrice = pros.number*pros.price; totalNumber+= pros.number }else{ pros.totalPrice = 0; } totalPrice += pros.totalPrice; }) _self.totalPrice = totalPrice; _self.totalNumber = totalNumber; }, checkedSoperv:function (pros) {// 勾选配套商品 console.log(pros) var _self = this; var goodsCheckedLength = 0; pros.isChecked = !pros.isChecked _self.supportingList.forEach(el => { if(el.isChecked) { goodsCheckedLength++; } }) if(goodsCheckedLength>0){ _self.isProductChecked = true }else{ _self.isProductChecked = false } _self.calculatetTtalPrice(); }, handleSupportingSubmit:function (type) { var _self = this; if (_self.userId > 0) { switch (type) { case 'buy': console.log('立即购买') _self.toConfirmation() break case 'add': console.log('加入购物车') _self.getAddProductCart() break } } else { _self.toLogin(); } }, getAddProductCart:function () { //批量增加购物车成功和toast弹窗提示成功 var _self = this; var checkedList = []; if(!_self.isProductChecked){ CAIMEI.dialog('请先选择商品',false); return; } _self.supportingList.forEach((el)=>{ if(el.isChecked){ checkedList.push({ productId:el.productId , productCount: el.number }); } }) ShoppingApi.ShoppingAddCarts({userId:_self.listQuery.userId,productInfo:JSON.stringify(checkedList)},function(response){ if(response.code === 0){ globalHead.getHeadCart(_self.listQuery.userId); $.confirm({ useBootstrap: false, boxWidth: (isPC?'338px':'74.6vw'), title: false, content:'
商品已成功加入购物车!

当前购物车共'+response.data+'种商品

', 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' } } }); } else { dialog("加入购物车失败!"); } }) }, toConfirmation:function () { var _self = this; //跳转确认订单页面 var checkedList = [] if(!_self.isProductChecked){ CAIMEI.dialog('请先选择商品',false); return; } _self.supportingList.forEach((el)=>{ if(el.isChecked){ checkedList.push({ id:el.productId , count: el.number }) } }) CAIMEI.Storage.setItem('KEY_SUPPORE', JSON.stringify(checkedList)); window.location.href = '/shopping/confirm.html?type=3'; }, toBuyCoupon:function (coupon) {// 点击购买按钮事件处理 var _self = this; ProductApi.createCouponRecord({userId:_self.listQuery.userId, couponId:coupon.couponId}, function (response) { if(response.code == 0){ let couponRecordId = response.data.couponRecordId window.location.href = '/pay/caimei-hlbpay.html?pageType=3&couponId='+coupon.couponId+'&couponRecordId='+couponRecordId; }else{ if(response.code == -1){//个人机构不能购买 CAIMEI.Alert('该优惠券仅限医美机构购买,请升级为医美机构后再次购买。', '去升级', true, function(){ window.location.href = "/user/setting/upgrade.html"; }); }else if(response.code == -2){//会员机构不是医美机构不能购买 CAIMEI.dialog('该优惠券仅限医美机构购买',false,function () {}); }else{ CAIMEI.Alert(response.msg, '确定', false); } } }) }, showSupportingMore:function () { var _self = this; _self.isShowMoreButton = false; _self.defaultSupportingList = _self.supportingList; }, // 是否显示vip标签价格 showVipPriceTag: function(pros){ //非会员 if(!GLOBAL_VIP_FLAG === 1) return false; // 商品所有机构可见 if(pros.priceFlag === 0 && pros.svipProductFlag === 1 ) return true; // 商品价格仅资质机构可见 if(pros.priceFlag === 2 && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true; // 商品价格仅医美机构可见 if(pros.priceFlag === 3 && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 && GLOBAL_CLUB_TYPE == 1) return true; // 其它 return false; }, }, created: function () { this.productId = this.couponParam.productId = this.listQuery.productId = $("#productId").val(); this.cmSysParams.pageType = 6; this.cmSysParams.productId = this.productId; this.typeId = $("#typeId").val(); console.log('typeId', this.typeId) this.userId = this.couponParam.userId = this.listQuery.userId = GLOBAL_USER_ID; this.productStock = $("#productStock").val(); // this.getImages(); // identity: 0个人,1协销,2会员机构,3供应商,4普通机构 // visibility:3:所有人可见,2:普通机构可见,1:会员机构可见 4:仅医美机构可见 // var visible = $("#productVisibility").val() * 1; // console.log('visible',visible) // var identity = GLOBAL_USER_IDENTITY; // console.log('identity',identity) // this.showProduct = visible === 3 || visible == 4 || 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(); this.getCommodityCombinationList(); console.log('GLOBAL_CLUB_TYPE',GLOBAL_CLUB_TYPE) // $('.productInfo').slide({ // mainCell:".tabCon" // ,titCell:".tabTit span" // ,trigger: "click" // }); 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); 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); } });