看看（詳情）
<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,…}
apihtml
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); } }
configvue
// 靜態資源以/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': ''
}
}
}
}
}
相關文章
- 1. 商品詳情頁上拉查看詳情開源庫
- 2. druid的使用詳情，還不快來看看？
- 3. iOS非wifi下查看H5詳情
- 4. git 查看提交歷史詳情
- 5. Andriodjie——RecyclerView點擊查看商品詳情
- 6. linux 查看CPU詳情命令
- 7. 【keytool】keytool查看jks證書詳情
- 8. git查看commit提交記錄詳情
- 9. 溢出隱藏後綴(...查看詳情)
- 10. 獲取id查看詳情信息
- 更多相關文章...
- • 查看 XML 文件 - XML 教程
- • Git 查看提交歷史 - Git 教程
- • Flink 數據傳輸及反壓詳解
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章