<template> <div class="productDetail"> <div class="main" ref="main" v-if="!createLoading"> <!-- 选择规格遮罩层 --> <div class="shadow" v-if="shadowShow"> <div class="shadowContent"> <img class="close" @click="closeShadow()" src="../../images/footer/close_shadow.png" alt="关闭按钮"> <div class="productImg"><img :src="productGroup.imageFile" alt="商品图"></div> <span class="productPrice">¥{{ productGroup.price }}</span> <span class="reserveNumber">库存{{ productGroup.reserveNumber }}件</span> <div class="specificationContent"> <div class="specification" v-for="(groupSpec, groupIndex) in productGroupSpec" :key="groupIndex"> <p class="specificationName">{{ groupSpec.specName }}</p> <div class="specificationWrap"> <button class="specificationItem" v-for="(spec, itemIndex) in groupSpec.values" :disabled="spec.disable" @click="clickSpec(groupIndex, itemIndex)" :class="{cyan:spec.isSelect&&spec.isSelect==1,disAble:spec.disable}" :title="spec.specValue" :key="itemIndex">{{spec.specValue}}</button> </div> </div> <div class="buyNum"> <span class="buyNumber">购买数量</span> <div class="controlNumber"> <span class="min" @click="minNumber()">-</span> <input type="number" max="1000000" min="1" v-model="postDataReserveNumber"> <span class="plus" @click="addNumber()">+</span> </div> </div> </div> <div class="shadow_footer"> <span class="join_cart" v-if="!isSure" @click="addToCart('shadow')">加入购物车</span> <span class="buy_now" v-if="!isSure" @click="goBuy('shadow')">立即购买</span> <span class="determine_btn" v-if="isSure" @click="determineClick()">确定</span> </div> </div> </div> <!-- 购物车 --> <div class="shoppingCart" @click="goShoppingCart()"><img src="../../images/productDetails/shoppingCart.png" alt="购物车按钮"></div> <!-- banner --> <div class="bannerBox" > <div class="designBox" v-if="isCustomization == 1" @click="showOptionDesign()">选择设计</div> <div class="modification" @click="showModification()">修改定制信息</div> <!-- 横向轮播 --> <swiper class="swiperBox" :options="bannerOption" ref="myBanner" v-if="effectImg_460.length>0"> <swiper-slide class="swiper_slide" v-for="(effect,index) in effectImg_460" :key="index"> <div class="slideWrap"><img :src="effect" alt="商品组效果图"></div> </swiper-slide> <div class="swiper_pagination" slot="pagination"></div> </swiper> <!-- 纵向轮播 --> <div class="designBannerBox" v-if="isCustomization == 1"> <p class="designTitle" @click="hideOptionDesign()">选择设计</p> <swiper class="optionDesignBox" :options="optionDesign"> <swiper-slide class="swiper_slide" v-for="(design,index) in groupDesignList" :key="index"> <div class="slideWrap" @click="clickSlide(index)"><img :src="design.design.coverImageFile" alt="设计封面图"></div> </swiper-slide> </swiper> </div> </div> <!-- 修改定制信息遮罩层 --> <div class="modificationBox" v-if="modificationShow"> <div class="formBox"> <img class="close" @click="hiddemodification()" src="../../images/footer/close_shadow.png" alt="关闭修改定制信息图标"> <ul class="formContent"> <li v-if="cloneSingles.name"> <p> <img src="../../images/shoppingProcess/willSelect.png" alt="未选择的表单按钮" @click="clickName()" v-if="show.name==false"> <img src="../../images/shoppingProcess/endSelect.png" alt="未选择的表单按钮" @click="clickName()" v-if="show.name==true"> <span>姓名</span> </p> <input v-if="show.name==true" v-model="design.name" type="text" placeholder="请在这里输入"> </li> <li v-if="cloneSingles.slogan"> <p> <img src="../../images/shoppingProcess/willSelect.png" alt="未选择的表单按钮" @click="clickSlogan()" v-if="show.slogan==false"> <img src="../../images/shoppingProcess/endSelect.png" alt="未选择的表单按钮" @click="clickSlogan()" v-if="show.slogan==true"> <span>座右铭</span> </p> <input v-if="show.slogan==true" v-model="design.slogan" type="text" placeholder="请在这里输入"> </li> <li v-if="cloneSingles.image"> <p> <img src="../../images/shoppingProcess/willSelect.png" alt="未选择的表单按钮" @click="clickPhoto()" v-if="show.photo==false"> <img src="../../images/shoppingProcess/endSelect.png" alt="未选择的表单按钮" @click="clickPhoto()" v-if="show.photo==true"> <span>照片</span> </p> <label v-if="show.photo==true" for="filePhoto" class="photo"> <input id="filePhoto" type="file" @change="filePhotoChange($event)"> <img :src="design.image" alt="照片"> </label> </li> </ul> <button class="save" @click="clickSave()">保存</button> </div> </div> <!-- 商品订货信息 --> <ul class="productInfo"> <li class="titleBox"> <div class="top"> <!-- 商品名称 --> <span>{{ data.name }}</span> <span></span><!-- 类别:入定制校服 --> <span></span><!-- 性别:女 --> <span class="price">¥{{ productPrice }}</span> </div> <div class="bottom">{{ groupDescr}}</div><!-- 商品简介 --> </li> <li class="infoBox"> <ul> <li style="display:none;"> <div class="infoKey">定做周期</div> <div class="infoValue">3个工作日</div> </li> <li> <div class="infoKey">起订量</div> <div class="infoValue">{{ data.reserveNumber }}件</div> </li> <li> <div class="infoKey">试运营期</div> <div class="infoValue">15天内到货</div> </li> <li> <div class="infoKey">商品重量</div> <div class="infoValue">{{ data.weight }}kg</div> </li> <li> <div class="infoKey">运费规则</div> <div class="infoValue">满{{ freeAmount }}元,包邮</div> </li> </ul> </li> <!-- 商品规格 --> <li class="specificationBox" @click="showShadow('boxClick')"> <span class="specification_title">参数规格</span> <span class="specification_Item" v-for="(item,index) in productGroupSpec" :key="index">{{ item.specName }}</span> <img src="../../images/shoppingProcess/rightJiantou.png" alt="更多logo"> </li> </ul> <!-- 商品展示 --> <div class="productDisplay"> <div class="titleBox"> <div class="title_top"> <p class="ch">商品详情</p> <p class="en">PRODUCT DETAILS</p> </div> <div class="namePlate"> <p @click="showNamePlate()">商品铭牌</p> <div v-if="namePlateShow" class="namePlateBox"> <p class="namePlateBox_title">商品铭牌</p> <div class="namePlateItem" v-for="(item,index) in attrDefinition" :key="index"> <span class="namePlateItem_k">{{ item.k }}: </span><span class="namePlateItem_v">{{ item.v }}</span> </div> </div> </div> </div> </div> <div class="productDisplayBigImg"><img v-if="detailInfo" :src="detailInfo.file" alt="商品展示大图"></div> <!-- 底部 --> <div class="footer"> <div class="custom" @click="contactCustomerService()"> <img src="../../images/productDetails/custom.png" alt="客服logo"> <span>客服</span> </div> <div class="collect" @click="moveIntoCollection()"> <img v-if="isCollection==false" src="../../images/productDetails/collect.png" alt="收藏logo"> <img v-if="isCollection==true" src="../../images/productDetails/activeCollect.png" alt="已收藏logo"> <span v-if="isCollection==false">收藏</span> <span v-if="isCollection==true">已收藏</span> </div> <div class="joinCart" @click="addToCart('footer')">加入购物车</div> <div class="buyNow" @click="goBuy('footer')">立即购买</div> </div> </div> <div class="createLoading" v-if="createLoading"> <img class="createMallGif" src="../../images/createMall.gif" alt="创建商城loading"> <div class="createMallTxt">小哒正在为每一个小王子、小公主<br/>创建自己的商品城堡</div> </div> <!-- 要footer但是不显示 --> <FooterModel ref="footer" :hideFooter="1" /> </div> </template> <script> import api from '@/js/api'; import tool from '@/js/tools'; import alert from '@/js/alertView'; import { swiper,swiperSlide } from 'vue-awesome-swiper'; import {conService} from '../../js/contactService.js'; import eduAlert from '@/js/alertView.js'; import FooterModel from '../FooterModel.vue'; export default { components:{ swiper, swiperSlide, FooterModel }, data(){ return { createLoading:true,//创建商城的loading bannerOption:{//banner配置 pagination: {//分页器 el: '.swiper_pagination', type: 'fraction', bulletElement : 'span', clickable:true, paginationClickable: true, notNextTick:true } }, optionDesign:{//纵向轮播配置 direction: "vertical", spaceBetween:2, slidesPerView: 4, }, file: null, //上传文件 step:1, //每次添加到购物车的数量 modificationShow:false,//控制修改定制信息的盒子出现韩式隐藏 addressCode:"", userState:"",//用户状态 cmCustomState:"", //商城审核状态 cmCustomInfo:"",//商城定制信息 cmCustomInfos:[],//商品组定制信息 cmCustomComment:"", //cm审核未通过理由 comment:"", //pg审核未通过理由 loginState:"", idx:null, groupId:"", //首页路径传过来的groupId isCustomization:"", //是不是0定制 groupDesignList:[], //设计列表 designId:"", //商品设计ID productId:"",//商品ID imgComposeState:"", //查询图片生成状态 cmId:"", //商城id productGroupList: {},//商品组列表 productGroup:{}, //商品组信息 isCollection:"", //收藏状态 attrDefinition:[], //商品详情信息 productGroupSpec:[],//商品组规格 indexObj: {}, //处理返回的规格数据 arrSpec:[], //商品规格 groupDescr:"",//商品描述 namePlateShow:false,//控制铭牌出现与隐藏 data: {}, productsArr:[],//商品组内的全部规格商品数组 productSpecArr:[],//盛放点击收获到的规格数组的集合 productPrice:null, productListPrice:null, effectImg_68:[], //效果图68 effectImg_460:[], //效果图460 detailInfo:{}, //请求效果图详情信息 effectInfo:[], //效果图信息 recommendList:[], //关联销售列表 freeAmount:"", //免邮金额 authState:"", //定制信息审核状态 customType:"", //定制信息类型 customId:"", //定制信息id changeSpec:[], //选择规格数组 postDataReserveNumber:1, //购买数量 cloneSingles:{//控制是否能修改此项定制信息 nickName: false, fullName: false, logo: false, slogan: false, name: false, phone: false, addressCode: false, image: false, text: false }, singles:{ nickName: false, fullName: false, logo: false, slogan: false, name: false, phone: false, addressCode: false, image: false, text: false }, design:{//自定义的商城定制信息以及回显 nickName: "", fullName: "", logo: "", slogan: "", name: "", phone: "", addressCode: "", image:require('../../images/footer/preLogo.png'), text: "" }, shadowShow:false,//控制阴影出现与隐藏 isSure:false,//是否是确定按钮 isPayNow:false,//如果在footer按钮上选择了立即购买 选好规格立即购买 show:{//控制修改定制信息的显示 name:false, logo:false, fullName:false, easyName:false, photo:false, slogan:false }, infoTypes:[],//能够修改那些定制信息的信息 switch1:false,//控制修改定制信息的input框是否能点击 activeArr:[],//盛放目前选中的规格值数组 activeNameArr:[],////盛放目前选中的规格名数组 allSpecValArr:[],//盛放商品组所有规格值数组 allproSpecValArr:[],//盛放所有商品的商品规格值数组 activeValArr:[],//当前选中的所有规格值的数组 } }, created(){ var self=this; self.groupId = tool.getParam('groupId'); self.addressCode = tool.getAddressCode(); //获取当前商城状态/商城定制信息 self.adminAuth(); //获取商品组图片生成状态 self.getHomeImgCompose(); }, mounted(){ }, watch:{ 'data':function(value){ document.title = value.name; }, }, computed:{ }, methods:{ contactCustomerService(){//联系客服点击 conService(); }, hiddemodification(){//隐藏修改定制窗口 this.modificationShow=false; this.getAuthState(); this.switch1 = false; }, showModification(){//显示修改定制信息窗口 var self = this; if(self.groupDesignList.length<=0){ eduAlert.eduToast('该商品没有设计!',2000); return; } if(self.addressCode != 'wodaa' && self.userState == "NORMAL"){ eduAlert.eduToast('请认证商城!',2000); return; }else if(self.addressCode == 'wodaa' && self.userState == "NORMAL"){ eduAlert.eduToast('请创建商城!',2000); return; } self.modificationShow=true; }, showNamePlate(){ this.namePlateShow=!this.namePlateShow; }, showOptionDesign(){//显示设计 var self = this; if(self.groupDesignList.length<=0){ eduAlert.eduToast('该商品没有设计!',2000); return; } document.querySelector('.designBannerBox').style.left=0; document.querySelector('.designBox').style.display='none'; }, hideOptionDesign(){//隐藏设计 document.querySelector('.designBannerBox').style.left=-1.14+'rem'; document.querySelector('.designBox').style.display='block'; }, getHomeImgCompose(){ //查询商品组图片生成状态接口 var self = this; api.get('/multi-tenant/api/cm/'+ self.addressCode +'/image-compose/product-group/'+ self.groupId,null,response =>{ self.imgComposeState = response.data.payload;//获取图片生成状态 if(response.data.payload == "GENERATING"){ // 生成中自动刷新 self.AutoRefresh(5000); self.createLoading = true; return; } if(response.data.payload == "FINISHED"){ self.createLoading = false; self.getCmInfo();//获取商城Id } }),error =>{ console.log(error); }; }, getCmInfo(){//获取商城信息接口 cmId var self=this; api.get('/multi-tenant/api/cm/' + self.addressCode, null , response => { self.cmId = response.data.payload.cm.id;//获取商城id console.log(response.data.payload) // 查询商品组信息接口 api.get("/shopping/api/cm/"+self.addressCode+"/product-group/" + self.groupId, null, response => { //在每个规格值加一个isSelect属性,切记要先加属性,再赋值给变量 for(var i=0; i < response.data.payload.productGroupSpec.length; i++){ for(var j=0; j<response.data.payload.productGroupSpec[i].values.length; j++){ response.data.payload.productGroupSpec[i].values[j].isSelect = false; } } console.log(response.data.payload.productGroupSpec) //给各个变量赋值 console.log(response.data.payload); self.productGroupList = response.data.payload;//整个商品组信息 self.groupDescr=response.data.payload.productGroup.descr; console.log(self.productGroupList); self.productsArr=response.data.payload.products;//商品组内全部规格的商品 console.log(self.productsArr); self.productGroup = self.productGroupList.productGroup;//商品组门户商品信息 for(var z=0; z<self.productGroup.length; z++){//处理group里的图片路径 if(self.productGroup[z].file){ var imageFilePath = self.productGroup[z].file.split("tzd")[1]; var imageFileName = imageFilePath.split(".")[0]; var imageFileSurfix = imageFilePath.split(".")[1]; self.effectImg_460.push(self.productGroup[z].file.split("tzd")[0] + "cm/" + self.cmId + imageFileName + "_460." + imageFileSurfix); } } self.infoTypes = response.data.payload.infoTypes;//获取到infoType信息,来确定能修改那些定制信息 console.log(self.infoTypes) self.isCollection = response.data.payload.isCollection;//是否收藏 console.log(self.isCollection) self.groupPrice = self.productGroup.price;//商品价格 self.isCustomization = self.productGroup.isCustomization;//是否为0定制 if(response.data.payload.productGroupSpec){ self.productGroupSpec = response.data.payload.productGroupSpec;//商品组规格 for(var i=0; i<self.productGroupSpec.length; i++){ self.arrSpec.push(self.productGroupSpec[i].specName);//商品规格名称数组 for(var j=0; j<self.productGroupSpec[i].values.length; j++){ self.productGroupSpec[i].values[j].disable =false;//控制规格值是否能被点击 } } console.log(self.productGroupSpec); self.initProductGroupSpec(); } //哪个方式进入的详情 有more 、search 、home // var type = sessionStorage.getItem('type'); // if(self.type=='search'){ // //搜索-商品列表 // MtaH5.clickStat('mallHomeSearchResultGoodsClick',{'category':self.productGroup.categoryName}); // }else if(self.type=='home'){ // //商城首页_商品点击 // MtaH5.clickStat('mallHomeGoodsClick',{'category':self.productGroup.categoryName}); // } if(self.infoTypes && self.infoTypes.length > 0){ for(var key in self.singles){//将singles中能更改的定制信息变为true self.singles[key] = false; for(var i=0; i<self.infoTypes.length; i++){ if(key == self.infoTypes[i]){ self.singles[key] = true; } } } for(var key in self.cloneSingles){//将cloneSingles中能更改的信息变为true self.cloneSingles[key] = false; for(var i=0; i<self.infoTypes.length; i++){ if(key == self.infoTypes[i]){ self.cloneSingles[key] = true; } } } self.singles = JSON.parse(JSON.stringify(self.cloneSingles)); } if(response.data.payload.productGroup.attrDefinition){ self.attrDefinition = JSON.parse(response.data.payload.productGroup.attrDefinition); console.log(self.attrDefinition) } // if(response.data.payload.products){ // for(var i=0; i<response.data.payload.products.length; i++){ // var result = []; // var results = []; // var arr = [];// 二维数组 // var ele = response.data.payload.products[i]; // for(var j=0; j<ele.specs.length; j++){ // arr.push([ele.specs[j].specValue]); // } // self.doExchange(arr, 0, result, results); // console.log(arr) // console.log(results) // for(var k=0; k<results.length; k++){ // self.indexObj[results[k]] = ele.id; // } // } // } if(self.isCustomization == 1){//1为非0定制 // 查询商品组下的设计接口 api.get("/shopping/api/cm/"+self.addressCode+"/product-group/" + self.groupId + "/design/custom", null, resp => { if(resp.data.payload.length > 0){ console.log(resp.data.payload); //处理设计图路径 self.groupDesignList = resp.data.payload; self.designId = self.groupDesignList[0].groupDesignId;//默认为第一个设计 for(var z=0; z<self.groupDesignList.length; z++){ if(self.groupDesignList[z].design.coverImageFile){ var imageFilePath = self.groupDesignList[z].design.coverImageFile.split("tzd")[1]; var imageFileName = imageFilePath.split(".")[0]; var imageFileSurfix = imageFilePath.split(".")[1]; self.groupDesignList[z].design.coverImageFile = self.groupDesignList[z].design.coverImageFile.split("tzd")[0] + "cm/" + self.cmId + imageFileName + "_" + self.groupDesignList[z].design.id + "_72." + imageFileSurfix; } } console.log(self.groupDesignList) // 根据商品组id查询商品,默认是商品组id api.get("/shopping/api/cm/"+self.addressCode+"/product-group/" + self.groupId + "/product", null, response => { self.data = response.data.payload; console.log(self.data) if(response.data.payload.price){ self.productPrice = response.data.payload.price;//商品价格 }else{ self.productPrice = self.productGroupList.productGroup.price; } if(response.data.payload.listPrice){ self.productListPrice = response.data.payload.listPrice;//商品列表价格 }else{ self.productListPrice = self.productGroupList.productGroup.listPrice; } self.productId = response.data.payload.id;//商品id self.getEffectImage(); }, error => { console.log(error); }); }else{ console.log("没有设计"); } }, err => { console.log(err); }); //获取定制信息审核状态 self.getAuthState(); }else if(self.isCustomization == 0){ // 根据商品组id查询商品,默认第一个 api.get("/shopping/api/cm/"+self.addressCode+"/product-group/" + self.groupId + "/product", null, response => { self.data = response.data.payload; if(response.data.payload.price){ self.productPrice = response.data.payload.price; }else{ self.productPrice = self.productGroupList.productGroup.price; } if(response.data.payload.listPrice){ self.productListPrice = response.data.payload.listPrice; }else{ self.productListPrice = self.productGroupList.productGroup.listPrice; } self.productId = response.data.payload.id; self.getZeroDesignImg(); }, error => { console.log(error); }); } }, error => { console.log(error); }); // 商品销量 // api.get('/marketing/api/cm/'+self.addressCode+'/product-group/'+ self.groupId +'/recommend', null , response => { // self.recommendList = response.data.payload; // for(var z=0; z<self.recommendList.length; z++){ // if(self.recommendList[z].imageFile){ // var imageFilePath = self.recommendList[z].imageFile.split("tzd")[1]; // var imageFileName = imageFilePath.split(".")[0]; // var imageFileSurfix = imageFilePath.split(".")[1]; // self.recommendList[z].imageFile = self.recommendList[z].imageFile.split("tzd")[0] + "cm/" + self.cmId + imageFileName + "_460." + imageFileSurfix; // } // } // }, error => { // }); //获取配送地址对应的运费信息 api.get('/shopping/api/cm/' + self.addressCode +'/freight', null, response => { self.freeAmount = response.data.payload.freeAmount; }, error => { console.log(error) }); }, error => { console.log(error) }); }, getEffectImage(){ var self = this; self.effectImg_68 = []; self.effectImg_460 = []; //根据商品id-设计id查询效果图 if(self.productId != "" && self.designId != ""){ api.get("/shopping/api/cm/"+ self.addressCode +"/product/"+ self.productId +"/design/"+ self.designId +"/image", null, response => { self.detailInfo = response.data.payload.detailImage;//底部展示图片 console.log(response.data.payload) if(self.detailInfo && self.detailInfo.file){//更改底部展示图片的图片路径 self.detailInfo.file = self.detailInfo.file.split("tzd")[0] + "cm/" + self.cmId + self.detailInfo.file.split("tzd")[1]; } self.effectInfo = response.data.payload.effectImage;//效果图信息 for(var z=0; z<self.effectInfo.length; z++){ if(self.effectInfo[z].file){ var imageFilePath = self.effectInfo[z].file.split("tzd")[1]; var imageFileName = imageFilePath.split(".")[0]; var imageFileSurfix = imageFilePath.split(".")[1]; // self.effectImg_68.push(self.effectInfo[z].file.split("tzd")[0] + "cm/" + self.cmId + imageFileName + "_68." + imageFileSurfix); self.effectImg_460.push(self.effectInfo[z].file.split("tzd")[0] + "cm/" + self.cmId + imageFileName + "_460." + imageFileSurfix); } } }, error => { console.log(error); }); } }, getAuthState(){//获取定制信息审核状态 var self = this; api.get("/multi-tenant/api/cm/" + self.addressCode + "/product-group/" + self.groupId + "/custom-info/current", null, response => { console.log(response.data.payload) self.authState = response.data.payload.custom.authState; self.customType = response.data.payload.customType; self.customId = response.data.payload.custom.id; self.cmCustomInfos = response.data.payload.custom.cmCustomInfos; console.log(self.cmCustomInfos) if(response.data.payload.custom.comment){ self.comment = response.data.payload.custom.comment;//定制信息未通过审核的理由 } if(self.customType == "PG" && self.authState == "APPROVED"){//处理每次添加到购物车的数量 for(var i=0; i<self.cmCustomInfos.length; i++){ if(self.cmCustomInfos[i].infoType == "NAME_IMPORT_FILE"){ self.step = parseInt(self.cmCustomInfos[i].specialValue1); } } } for(var i=0; i<self.cmCustomInfos.length; i++){ if(self.cmCustomInfos[i].infoType == "NAME_IMPORT_FILE"){ self.file = self.cmCustomInfos[i].infoValue;//上传的文件 if(self.customType == "PG" && self.authState == "APPROVED"){ self.step = parseInt(self.cmCustomInfos[i].specialValue1);//加入购物车数量 } } } for(var key in self.design){//拿到商城定制信息 for(var i=0; i<self.cmCustomInfos.length; i++){ if(key == self.cmCustomInfos[i].infoTypeHump){ self.design[key] = self.cmCustomInfos[i].infoValue; } } } console.log(self.design) for(var key in self.singles){ for(var item in self.design){ if(self.singles[key] == true){//能改 if(self.design[key] != ""){ //商城定制信息不为空 self.singles[key] = true; }else{ self.singles[key] = false;//如果商城定制信息里的这一项为空,也不能修改此定制信息 } } } } for(var i=0; i<self.cmCustomInfos.length; i++){ for(var key in self.singles){ if(key == self.cmCustomInfos[i].infoTypeHump){ self.singles[key] = true; } } } // sessionStorage.setItem('step',self.step);//存储每次加入购物车的数量 for(var i=0; i<self.cmCustomInfos.length; i++){ if(self.cmCustomInfos[i].infoType == 'NAME_IMPORT_FILE'){ self.switch1 = true; self.singles.name = true; self.file = self.cmCustomInfos[i].infoValue; } } }, error => { console.log(error); }); }, AutoRefresh:function(t){//自动更新 var self = this; setTimeout(self.getHomeImgCompose, t); }, // doExchange:function (arr, index, result, results){//????????? // for (var i = 0; i<arr[index].length; i++) { // result[index] = arr[index][i]; // if (index != arr.length - 1) { // this.doExchange(arr, index + 1, result, results) // } else { // results.push(result.join(',')) // } // } // }, getZeroDesignImg(){ var self = this; self.effectImg_68 = []; self.effectImg_460 = []; api.get("/shopping/api/cm/"+self.addressCode+"/product/" + self.productId + "/zero-design/image", null, response => { self.detailInfo = response.data.payload.detailImage; if(self.detailInfo && self.detailInfo.file){ self.detailInfo.file = self.detailInfo.file.split("tzd")[0] + "cm/" + self.cmId + self.detailInfo.file.split("tzd")[1]; } self.effectInfo = response.data.payload.effectImage; for(var z=0; z<self.effectInfo.length; z++){ if(self.effectInfo[z].file){ var imageFilePath = self.effectInfo[z].file.split("tzd")[1]; var imageFileName = imageFilePath.split(".")[0]; var imageFileSurfix = imageFilePath.split(".")[1]; self.effectImg_68.push(self.effectInfo[z].file.split("tzd")[0]+ 'tzd' + imageFileName + "_68." + imageFileSurfix); self.effectImg_460.push(self.effectInfo[z].file.split("tzd")[0]+ 'tzd' + imageFileName + "_460." + imageFileSurfix); } } }, error => { console.log(error); }); }, clickSlide(index){//点击纵向轮播切换效果图 var self=this; self.designId=self.groupDesignList[index].groupDesignId; self.getEffectImage();//获取对应设计的效果图 }, /**宋辉 */ initProductGroupSpec(){ let self = this; let groupSpec = self.productGroupSpec; groupSpec.selectQueue = { groupSpec:groupSpec, selectedList:[], //已选规格列表,这里记录的元素是简单的specName,specValue组合 toFiltList:[], //待筛选列表,这里记录的元素干脆直接把绑定界面的对象直接引进来,后面处理比较方便 current:null, push:function(nameIndex,valueIndex){ this.current={ specName:groupSpec[nameIndex].specName, specValue:groupSpec[nameIndex].values[valueIndex].specValue }; //把当前选中的规格插入已选规格列表,如果规格已经存在,那么更新规格值,并且清空已选规格列表后面的内容 let foundIndex = this.findSpecInSelected(this.current); if (foundIndex>=0 ){ let leftCount = this.selectedList.length - foundIndex - 1; if (leftCount>0){ this.selectedList.splice(foundIndex+1,leftCount); } this.selectedList[foundIndex].specValue = this.current.specValue; }else{ this.selectedList.push(this.current); } //根据选中列表,决定待筛选列表的内容 this.toFiltList = []; for (let i=0;i<groupSpec.length;i++){ let oneSpec = groupSpec[i]; if (this.findSpecInSelected(oneSpec)<0){ this.toFiltList.push(oneSpec); } } }, findSpecInSelected(specObj){ for (let i=0;i<this.selectedList.length;i++){ let selectedItem = this.selectedList[i]; if (selectedItem.specName==specObj.specName){ return i; } } return -1; } } groupSpec.selectCurrent = function(nameIndex, valueIndex){ for (let i in this[nameIndex].values){ let value = this[nameIndex].values[i]; if (i==valueIndex){ value.isSelect=1; }else{ value.isSelect=0; } } //把当前选中的规格项和规格值记录到已选队列,并更新待筛选队列 this.selectQueue.push(nameIndex,valueIndex); } groupSpec.filt = function(){ let toFiltList = this.selectQueue.toFiltList; //根据最新的选择,筛选待筛选队列中的规格 for (let i=0; i<toFiltList.length;i++){ let toFiltSpec = toFiltList[i]; self.disableSpecSelection(this.selectQueue, toFiltSpec); } } }, clickSpec(nameIndex, valueIndex){ this.productGroupSpec.selectCurrent(nameIndex, valueIndex); this.productGroupSpec.filt(); this.filtProduct(); }, disableSpecSelection(selectQueue, toFiltSpec){ let self = this; let products = self.productsArr; let selectedList = selectQueue.selectedList; let foundProducts = this.findProduct(selectedList, products); let specMap = this.getSpecValuesFromProducts(foundProducts, toFiltSpec.specName); for (let k in toFiltSpec.values){ let spec = toFiltSpec.values[k]; if (specMap[spec.specValue]){ spec.disable = false; }else{ spec.disable = true; spec.isSelect = 0; } } }, getSpecValuesFromProducts(products, specName){ let specMap = {}; for (let g in products){ let product = products[g]; for (let i in product.specs){ let spec = product.specs[i]; if (spec.specName==specName){ specMap[spec.specValue]=true; } } } return specMap; }, checkSpecExist(spec,originSpecs){ for (let i in originSpecs){ let originSpec = originSpecs[i]; if(spec.specName==originSpec.specName && spec.specValue==originSpec.specValue){ return true; } } return false; }, findProduct(selected, products){ let foundProducts = []; for (let i in products){ let product = products[i]; let hasAll = true; for (let i in selected){ let spec = selected[i]; if (!this.checkSpecExist(spec,product.specs)){ hasAll = false; break; } } if (hasAll){ foundProducts.push(product); } } return foundProducts; }, //筛选商品 filtProduct(){ var self = this; //拿到已选择的规格项的名称数组,给detectionSpecifi方法用 self.changeSpec=[]; self.productGroupSpec.selectQueue.selectedList.forEach(item => { self.changeSpec.push(item.specName) }); //拿商品id if(self.findProduct(self.productGroupSpec.selectQueue.selectedList,self.productsArr).length==1){ self.productId=self.findProduct(self.productGroupSpec.selectQueue.selectedList,self.productsArr)[0].id; console.log(self.productId) }else{ return; } //拿到商品id后获取效果图 if(typeof(self.productId) != "undefined" && self.isCustomization == 1){ self.getEffectImage(); }else if(typeof(self.productId) != "undefined" && self.isCustomization == 0){ self.getZeroDesignImg(); } // 根据商品组id查询商品价格 if(typeof(self.productId) != "undefined"){ api.get("/shopping/api/cm/"+self.addressCode + "/product/" + self.productId, null, response => { self.data = response.data.payload; if(response.data.payload.price){ self.productPrice = response.data.payload.price; }else{ self.productPrice = self.productGroupList.productGroup.price; } if(response.data.payload.listPrice){ self.productListPrice = response.data.payload.listPrice; }else{ self.productListPrice = self.productGroupList.productGroup.listPrice; } console.log(self.data) }, error => { console.log(error); }); }else{ alert.eduToast('没有此规格商品!',2000); } // self.changeSpec.push(groupSpec);//点击那个规则就把那个规则名添加进去 // self.changeSpec = [...new Set(self.changeSpec)];//用来判断哪些规格还未选择 数组去重 }, //检测规格是否选择完成 // type [shadow footer]对话框还是底部按钮 // btnType [buy cart]购物车还是立即购买 detectionSpecifi(type,btnType){ var self = this; var arr = []; for(let i=0; i < self.arrSpec.length; i++){ if (!self.changeSpec.includes(self.arrSpec[i])) { arr.push(self.arrSpec[i]);//还未选择的商品规则项 } } if(arr.length > 0){ var strSpec = ""; for(var i=0; i<arr.length; i++){ strSpec += arr[i]; } //如果是弹框中的加入购物车没有商品规格-提醒 if(type == 'shadow'){ alert.eduToast("请选择商品"+strSpec,2000); } //如果是底部加入购物车没有商品规格-选规格弹窗显示 else if(type == 'footer'){ self.showShadow('notBoxClick',btnType); } return false; } else{ return true; } }, showShadow(type,btnType){ //如果是弹窗来选择规格,下面的按钮是加入购物车和立即购买(boxClick) //如果是立即购买 或者 加入购物车调起的 弹窗 下面是确定按钮(notBoxClick) // btnType [buy cart]购物车还是立即购买 var self = this; if(type == 'boxClick'){ self.isSure = false; }else{ self.isSure = true; } self.shadowShow=true; if(type == 'notBoxClick' && btnType == 'buy'){ self.isPayNow = true; } }, //蒙版上的确定按钮 determineClick(){ var self = this; self.closeShadow(); //如果确定按钮之前是立即购买调起来的 直接立即购买 if(self.isPayNow){ self.goBuy(); }else{ self.addToCart(); } }, //立即购买按钮点击 type[shadow footer] goBuy: function(type) { var self = this; //如果没有检测通过 if(!self.detectionSpecifi(type,'buy')){ return; } if(typeof(self.productId) == "undefined"){ alert.eduToast("没有此规格商品!"); return; } let productsList = []; let productsMap = {}; productsMap.productId = self.productId;// 商品id if(self.postDataReserveNumber == null){ alert.eduToast("请填写购买数量!"); return; } productsMap.number = self.postDataReserveNumber;// 商品数量 if (self.isCustomization == 1) { productsMap.pgDesignId = self.designId;// 设计id:用户选择的定制蒙版,对于0定制商品这个字段为空 productsMap.pgCustomId = self.customId;// 定制信息id: 当用户独立定制这个产品时,这个字段才有值 productsMap.customType = self.customType; } productsList.push(productsMap); var orderDraftPostData={}; orderDraftPostData.products = productsList; api.post("/order/api/cm/"+self.addressCode+"/draft", orderDraftPostData, response => { let orderDraftId = response.data.payload; // 订单草稿id self.$router.push('/mall/confirmOrder?orderDraftId='+orderDraftId); }, error => { alert.eduToast(error.data); if (error.status == 401) { self.closeShadow(); } }); }, //加入购物车按钮点击 type[shadow footer] addToCart(type){ var self = this; //如果没有检测通过 if(!self.detectionSpecifi(type,'cart')){ return; } var cartData; if(typeof(self.productId) == "undefined"){ alert.eduToast("没有此规格商品!"); return; } let productsList = []; let productsMap = {}; productsMap.productId = self.productId;// 商品id if(self.postDataReserveNumber == null){ alert.eduToast("请填写购买数量!"); return; } if(self.isCustomization == 0){ cartData = { productId: self.productId, num: self.postDataReserveNumber } }else{ cartData = { productId: self.productId, num: self.postDataReserveNumber, pgDesignId: self.designId, pgCustomId: self.customId, customType: self.customType } } api.post("/shopping/api/cm/"+self.addressCode+"/shipping-cat/product", cartData, response => { alert.eduToast("已加入购物车!"); }, error => { alert.eduToast(error.data,2000); if (error.status == 401) { self.closeShadow(); } }); }, minNumber(){ this.postDataReserveNumber-=1; if(this.postDataReserveNumber<=0){ this.postDataReserveNumber=0; } }, addNumber(){ this.postDataReserveNumber+=1; if(this.postDataReserveNumber>=1000000){ this.postDataReserveNumber=1000000; } }, //去购物车页面 goShoppingCart(){ this.$router.push('/mall/shoppingCart'); }, //获取当前商城状态/商城定制信息 adminAuth(){ var self = this; api.get('/multi-tenant/api/cm/'+self.addressCode+'/state', null, response => { console.log(response.data.payload); if(response.data.payload.userStatus){ self.userState = response.data.payload.userStatus; } self.cmCustomState = response.data.payload.cmCustomState; self.cmCustomInfo = response.data.payload.cmCustomInfo; if(response.data.payload.cmCustomComment){ self.cmCustomComment = response.data.payload.cmCustomComment; } // self.loginState = localStorage.getItem('login');//暂时没有登陆状态 }, error => { console.log(error) }); }, moveIntoCollection(){//点击收藏 var self = this; var collectionArr = []; collectionArr.push(self.data.groupId); console.log(self.data.groupId) console.log("点击收藏") api.post("/shopping/api/cm/"+self.addressCode+"/collection", { groupIds:collectionArr }, response => { console.log("请求收藏接口") api.get("/shopping/api/cm/"+self.addressCode+"/product-group/" + self.groupId, null, response => { self.isCollection = response.data.payload.isCollection; console.log(self.isCollection) }, error => { }); alert.eduToast('收藏成功') }, error => { alert.eduToast(error.data,2000); }); }, closeShadow(){ this.shadowShow=false; }, clickName(){//选中姓名 var self=this; self.show.name=!self.show.name; }, clickLogo(){//选中logo var self=this; self.show.logo=!self.show.logo; }, clickFullName(){//选中全称 var self=this; self.show.fullName=!self.show.fullName; }, clickEasyName(){//选中简称 var self=this; self.show.easyName=!self.show.easyName; }, clickPhoto(){ var self=this; self.show.photo=!self.show.photo; }, clickSlogan(){//座右铭 var self=this; self.show.slogan=!self.show.slogan; }, clickSave(){//点击保存 提交修改 var self=this; var formdata = new FormData(); var reg = new RegExp("[`~!@#$^&*()=|{}':;',\[\].<>《》/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");//特殊字符验证 if(self.design.name){ if(reg.test(self.design.name)){ eduAlert.eduToast('姓名含有特殊字符~',2000); return; } formdata.append('name',self.design.name); } if(self.design.slogan){ if(reg.test(self.design.slogan)){ eduAlert.eduToast('座右铭含有特殊字符~',2000); return; } formdata.append('slogan',self.design.slogan); } if(self.design.image){ formdata.append('image',self.design.image); } api.post("/multi-tenant/api/cm/"+ self.addressCode +"/product-group/"+ self.groupId +"/custom-info", formdata, response => { self.modificationShow=false; window.location.reload(); }, error => { eduAlert.eduToast('保存出错~',2000); }); }, filePhotoChange(event){//照片文件筐改变事件 var self = this; var files = event.target.files, file; if (files && files.length > 0) { // 获取目前上传的文件 file = files[0];// 文件大小校验的动作 if(!tool.formatUpload(file)){ return false; } let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { console.log(e.target.result); self.design.image = e.target.result; } } } } } </script> <style scoped> </style>
{payload: {isCollection: false, infoTypes: [],…}}
payload: {isCollection: false, infoTypes: [],…}
infoTypes: []
isCollection: false
productGroup: {name: "自粘性标签", listPrice: 2.4, price: 1.8, descr: "", isOnShelve: 1,…}
productGroupSpec: [{groupId: 84, specId: 88, specName: "颜色",…}, {groupId: 84, specId: 90, specName: "规格",…}]
0: {groupId: 84, specId: 88, specName: "颜色",…}
createBy: 2
createTime: "2018-10-08 09:51:53"
deleteState: 0
groupId: 84
id: 88
specId: 88
specName: "颜色"
updateBy: 2
updateTime: "2018-11-23 14:20:05"
values: [{groupId: 84, specId: 88, specName: "颜色", specValue: "红", id: 92, deleteState: 0},…]
0: {groupId: 84, specId: 88, specName: "颜色", specValue: "红", id: 92, deleteState: 0}
1: {groupId: 84, specId: 88, specName: "颜色", specValue: "蓝", id: 93, deleteState: 0}
1: {groupId: 84, specId: 90, specName: "规格",…}
createBy: 2
createTime: "2018-10-09 11:05:32"
deleteState: 0
groupId: 84
id: 90
specId: 90
specName: "规格"
updateBy: 2
updateTime: "2018-11-23 14:20:05"
values: [{groupId: 84, specId: 90, specName: "规格", specValue: "YT-09", id: 103, deleteState: 0},…]
0: {groupId: 84, specId: 90, specName: "规格", specValue: "YT-09", id: 103, deleteState: 0}
1: {groupId: 84, specId: 90, specName: "规格", specValue: "YT-10", id: 104, deleteState: 0}
2: {groupId: 84, specId: 90, specName: "规格", specValue: "YT-14", id: 105, deleteState: 0}
3: {groupId: 84, specId: 90, specName: "规格", specValue: "YT-15", id: 106, deleteState: 0}
4: {groupId: 84, specId: 90, specName: "规格", specValue: "YT-16", id: 107, deleteState: 0}
5: {groupId: 84, specId: 90, specName: "规格", specValue: "YT-17", id: 108, deleteState: 0}
products: [{isLimited: 0,…}, {isLimited: 0,…}, {isLimited: 0,…}, {isLimited: 0,…}, {isLimited: 0,…},…]
0: {isLimited: 0,…}
id: 113
isLimited: 0
specs: [{productId: 113, groupSpecValueId: 93, specId: 88, specName: "颜色", specValue: "蓝", id: 483,…},…]
0: {productId: 113, groupSpecValueId: 93, specId: 88, specName: "颜色", specValue: "蓝", id: 483,…}
1: {productId: 113, groupSpecValueId: 104, specId: 90, specName: "规格", specValue: "YT-10", id: 484,…}
1: {isLimited: 0,…}
2: {isLimited: 0,…}
3: {isLimited: 0,…}
4: {isLimited: 0,…}
5: {isLimited: 0,…}
api
import axios from 'axios'; let env = process.env.NODE_ENV; var needLogin = ""; let root = ''; let yxHeader; if (env === 'development') { console.log("api"); // root = '/api/'; root = ''; } else if (env === 'production') { console.log("pro"); root = ''; } else { throw '请检查process.env.NODE_ENV的值,是否符合这些值之一:development,production'; } Date.prototype.format = function (fmt) { var o = { "y+": this.getFullYear(), "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds() //秒 }; if (!fmt) { fmt = 'yyyy-MM-dd HH:mm:ss'; } if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } // 自定义判断元素类型JS function toType(obj) { return ({}).toString.call(obj).match(/s([a-zA-Z]+)/)[1].toLowerCase(); } // 参数过滤函数 function filterNull(o) { for (var key in o) { if (o[key] === null) { delete o[key]; } if (toType(o[key]) === 'string') { o[key] = o[key].trim(); } else if (toType(o[key]) === 'date') { o[key] = (o[key].format()); } else if (toType(o[key]) === 'object') { o[key] = filterNull(o[key]); } else if (toType(o[key]) === 'array') { o[key] = filterNull(o[key]); } } return o; } function apiAxios(method, url, params, success, failure, authFail) { console.log('url:' + url); if (params) { params = filterNull(params); } var base = ""; if (url.indexOf(".html") != -1) { base = ""; } else { base = root; } axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' || method === 'DELETE' ? params : null, params: method === 'GET' ? params : null, baseURL: base, withCredentials: true }).then(function (res) { if (res.status >= 200 && res.status <= 210) { if (success) { success(res); } } else { //不走 // window.alert('error: ' + JSON.stringify(res.data)); } }).catch(function (err) { let res = err.response; if (err && res) { console.log(res.status); if (res.status == 504) { alert("服务器连接失败!请检查您的网络或服务器!!"); return; } else if (res.status == 401) { console.log('------------------:status'+res.status); console.log('------------------:authFail'+authFail); showHeaderSignin(); // if (authFail) { // localStorage.setItem('login', ''); // authFail(res); // } else { // showHeaderSignin(); // return; // } } else if(res.status == 750){ var host = window.location.host; window.location.href = window.location.href.split(host)[0] + host; } if (failure) { failure(res); } else { window.alert(res.data); } } else { if(authFail){ localStorage.setItem('login', ''); authFail(res); }else{ window.alert(err); } } }); } // 返回在vue模板中的调用接口 export default { get: function (url, params, success, failure,authFail) { return apiAxios('GET', url, params, success, failure,authFail); }, post: function (url, params, success, failure) { return apiAxios('POST', url, params, success, failure); }, put: function (url, params, success, failure) { return apiAxios('PUT', url, params, success, failure); }, delete: function (url, params, success, failure) { return apiAxios('DELETE', url, params, success, failure); }, initHeader: function (headerModel) { yxHeader = headerModel; console.log('------------------:initHeader'+yxHeader); if (needLogin && needLogin == "1") { yxHeader.showSignin(); } } }; function showHeaderSignin() { console.log('------------------:yxHeader'+yxHeader); if (yxHeader) { if(localStorage.getItem('login') == "logining"){ alert.eduToast('登录已过期请重新登录!',2000); } localStorage.setItem('login', ''); console.log('------------------:yxHeader.showSignin'+yxHeader.showSignin); yxHeader.showSignin(); console.log('------------------:闫雪方法调用'); } else { localStorage.setItem('login', ''); needLogin = "1"; console.log('------------------:needLogin'+needLogin); } }
config
// 静态资源以/cm和/tzd/开头的目前直接代理到192.168.1.237。
// interfaceHost: 接口请求代理的主机。
let interfaceHost = '192.168.1.237';
module.exports = {
// baseUrl: '/',
devServer: {
port: 8088,
proxy: {
'/cm/': {
target: 'http://192.168.1.237:80',
changeOrigin: true,
pathRewrite: {}
},
'/tzd/': {
target: 'http://192.168.1.237:80',
changeOrigin: true,
pathRewrite: {}
},
'/acl/': {
target: 'http://' + interfaceHost + ':8001',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/shopping/': {
target: 'http://' + interfaceHost + ':8002',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/order/': {
target: 'http://' + interfaceHost + ':8003',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/multi-tenant/': {
target: 'http://' + interfaceHost + ':8004',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/marketing/': {
target: 'http://' + interfaceHost + ':8005',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/image-compose/': {
target: 'http://' + interfaceHost + ':8006',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/tzding/': {
target: 'http://' + interfaceHost + ':8008',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}