zoukankan      html  css  js  c++  java
  • 看看(详情)

    <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 }}:&emsp;</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': ''
              }
          }
        }
      }
    }
  • 相关阅读:
    SVN Monitor工具推荐
    Linux Netbeans汉化不全
    PMWiki安装教程
    JIRA重启服务器后需要重启TOMCAT的解决
    SVN分支与合并
    WCF无法捕获FaultException
    非完美C++ Singleton实现[转载]
    C语言结构体的对齐原则
    C++ STL 学习笔记
    字符串笔试题
  • 原文地址:https://www.cnblogs.com/fqh123/p/10195408.html
Copyright © 2011-2022 走看看