小白的vue学习之路05

图文分享思路：

图片懒加载：

而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。

用mint-ui中的lazy load

photoshare.vue

<template>
    <div class="tmpl">
        <nav-bar title="图文分享"></nav-bar>
        <!-- 引入返回导航 -->
        <div class="photo-header">
            <ul>
                <li v-for="category in categorys" :key="category.id">
                    <a href="javascript:;" @click="loadImg(category.id)">{{category.title}}</a>
                </li>
                
            </ul>
        </div>
        <div class="photo-list">
            <ul>
                <li v-for="img in imgs" :key="img.id">
                    <router-link :to="{name:'photo.detail',params:{id:img.id} }">
                         <!-- <img :src="img.img_url"> -->
                         <!-- 懒加载 -->
                         <img v-lazy="img.img_url">
                        <p>
                            <span v-text="img.title"></span>
                            <br>
                            <span v-text="img.zhaiyao"></span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            categorys:[],//分类
            imgs:[], //图片数据
        }
    },
    created(){
        //发起请求获取导航栏数据
        this.$ajax.get('getimgcategory')
        .then(res=>{
            this.categorys = res.data.message;

            //将全局添加到数组的第一个 unshift
            this.categorys.unshift({
                id:0,
                title:'全部'
            });
        })
        .catch(err=>{
            console.log(err);
        });
        //当页面加载默认传递0
        this.loadImg(0);  //该代码替换了下面的请求的代码，做了函数封装

        //将0作为参数，获取全部图片数据
        // this.$ajax.get('getimages/' + 0)
        // .then(res=>{
        //     this.imgs = res.data.message;
        // })
        // .catch(err=>{
        //     console.log(err);
        // })
    },
    methods:{
        loadImg(id){
            this.$ajax.get('getimages/' + id)
        .then(res=>{
            this.imgs = res.data.message;
        })
        .catch(err=>{
            console.log(err);
        })
        }
    }
}



</script>
<style>
.photo-header li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}

.photo-header ul {
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
}


/*下面的图片*/

.photo-list li {
    list-style: none;
    position: relative;
}

.photo-list li img {
    width: 100%;
    height: 230px;
    vertical-align: top;
}

.photo-list ul {
    padding-left: 0px;
    margin: 0;
}

.photo-list p {
    position: absolute;
    bottom: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}

.photo-list p span:nth-child(1) {
    font-weight: bold;
    font-size: 16px;
}

/*图片懒加载的样式*/
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

</style>

<template>
    <div class="tmpl">
        <!--  组件名navBar -->  
        <nav-bar title="图片详情"></nav-bar>
        <!-- 组件名:navbar -->
        <!--  使用：navbar-->
        <div class="photo-title">
            <p v-text="imgInfo.title"></p>
            <span>发起日期：{{imgInfo.add_time | convertDate}}</span>
            <span>{{imgInfo.click}}次浏览</span>
            <span>分类：民生经济</span>
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(img,index) in imgs"  :key="index"  class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <img :src="img.src">
            </li>
           
        </ul>
        <div class="photo-desc">
            <p v-html="imgInfo.content"></p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            imgs:[],//存放缩率图
            imgInfo:{},//详情数据对象
        }
    },
    created(){
        //1:获取路由参数
        let pid = this.$route.params.id;
        //2:发起请求2个
        //图片详情
        this.$ajax.get('getimageInfo/' + pid)
        .then(res=>{
            //一个id对应一个详情对象
            this.imgInfo = res.data.message[0];
        })
        .catch(err=>{
            console.log(err)
        });
        //缩略图
        this.$ajax.get('getthumimages/' + pid)
        .then(res=>{
            this.imgs = res.data.message;
        })
        .catch(err=>{
            console.log(err)
        })
        //3:放上数据
    }
}


</script>
<style scoped>
li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.photo-title {
    overflow: hidden;
}

.photo-title,
.photo-desc {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.photo-title p {
    color: #13c2f7;
    font-size: 20px;
    font-weight: bold;
}

.photo-title span {
    margin-right: 20px;
}

.mui-table-view.mui-grid-view.mui-grid-9 {
    background-color: white;
    border: 0;
}

.mui-table-view.mui-grid-view.mui-grid-9 li {
    border: 0;
}

.photo-desc p {
    font-size: 18px;
}

.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
    padding: 2 2;
}
</style>

缩略图：

使用vue-preview

//VuePreview:引入vue-preview
import VuePreview from 'vue-preview'

Vue.use(VuePreview);

在 webpack.config.js 加入

test: /vue-preview.src.*?js$/,
loader: 'babel-loader',
options: {   建议使用.babelrc文件，在当前根目录就可以了
presets: ['es2015'], //关键字
 plugins: ['transform-runtime'], //函数
 }

<template>
    <div class="tmpl">
        <!--  组件名navBar -->  
        <nav-bar title="图片详情"></nav-bar>
        <!-- 组件名:navbar -->
        <!--  使用：navbar-->
        <div class="photo-title">
            <p v-text="imgInfo.title"></p>
            <span>发起日期：{{imgInfo.add_time | convertDate}}</span>
            <span>{{imgInfo.click}}次浏览</span>
            <span>分类：民生经济</span>
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(img,index) in imgs"  :key="index"  class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!-- <img :src="img.src"> -->
                 <img class="preview-img" :src="img.src" height="100" @click="$preview.open(index, imgs)">
            </li>
           
        </ul>
        <div class="photo-desc">
            <p v-html="imgInfo.content"></p>
        </div>

        <!-- 评论内容开始 -->
        <div class="photo-bottom">
            <ul>
                <li class="photo-comment">
                    <div>
                        <span>提交评论</span>
                        <span><a >返回</a></span>
                    </div>
                </li>
                <li class="txt-comment">
                    <textarea></textarea>
                </li>
                <li>
                   发表评论按钮
                </li>
                <li class="photo-comment">
                    <div>
                        <span>评论列表</span>
                        <span>44条评论</span>
                    </div>
                </li>
            </ul>
            <ul class="comment-list">
                <li v-for="(comment,index) in comments" :key="index">
                    {{comment.user_name}}：{{comment.content}} {{comment.add_time|convertDate}}
                </li>
               
            </ul>
            <button @click="loadByPage">加载更多按钮</button>
        </div>

        <!-- 评论内容结束 -->



    </div>
</template>
<script>
export default {
    data(){
        return {
            imgs:[],//存放缩率图
            imgInfo:{},//详情数据对象
            comments:[],//存放评论数据
            pageIndex:1,//页码
            cid:this.$route.params.id, //记录当前图片id
        }
    },
    created(){
        //1:获取路由参数
        // let pid = this.$route.params.id;
        //2:发起请求2个
        //图片详情
        this.$ajax.get('getimageInfo/' + this.cid)
        .then(res=>{
            //一个id对应一个详情对象
            this.imgInfo = res.data.message[0];
        })
        .catch(err=>{
            console.log(err)
        });
        //缩略图
        this.$ajax.get('getthumimages/' + this.cid)
        .then(res=>{
            this.imgs = res.data.message;

            //forEach
            this.imgs.forEach((ele)=>{
                ele.w=300;
                ele.h=200; //缩率图显示的高
            })
        })
        .catch(err=>{
            console.log(err)
        })
        
        //评论操作 开始
        this.loadFirst();
        //评论操作 结束

    },
    methods:{
        //先调用这个函数
        loadFirst(){
            this.$ajax.get('getcomments/' + this.cid +'?pageindex=1')
            .then(res=>{
                this.comments = res.data.message;
            })
            .catch(err=>{
                console.log(err);
            })
        },
        //再点击按钮
        loadByPage(){
             this.$ajax.get('getcomments/' + this.cid +'?pageindex=' + (++this.pageIndex))
            .then(res=>{
                //追加
                this.comments = this.comments.concat(res.data.message);
            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}


</script>
<style scoped>
li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.photo-title {
    overflow: hidden;
}

.photo-title,
.photo-desc {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.photo-title p {
    color: #13c2f7;
    font-size: 20px;
    font-weight: bold;
}

.photo-title span {
    margin-right: 20px;
}

.mui-table-view.mui-grid-view.mui-grid-9 {
    background-color: white;
    border: 0;
}

.mui-table-view.mui-grid-view.mui-grid-9 li {
    border: 0;
}

.photo-desc p {
    font-size: 18px;
}

.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
    padding: 2 2;
}

/*评论样式 开始*/
.photo-comment > div span:nth-child(1) {
    float: left;
    font-weight: bold;
    margin-left: 5px;
}

.photo-comment > div span:nth-child(2) {
    float: right;
}

.photo-comment {
    height: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    line-height: 30px;
    margin-bottom: 5px;
}

.txt-comment {
    padding: 5 5;
}

.txt-comment textarea {
    margin-bottom: 5px;
}

.comment-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

/*评论样式 结束*/

</style>

评论思路：

评论思路 追加数据 提交评论 抽取组件（把comment.vue抽取出来)

抽取组件以后的

其中photoshare.vue

<template>
    <div class="tmpl">
        <nav-bar title="图文分享"></nav-bar>
        <!-- 引入返回导航 -->
        <div class="photo-header">
            <ul>
                <li v-for="category in categorys" :key="category.id">
                    <a href="javascript:;" @click="loadImg(category.id)">{{category.title}}</a>
                </li>
                
            </ul>
        </div>
        <div class="photo-list">
            <ul>
                <li v-for="img in imgs" :key="img.id">
                    <router-link :to="{name:'photo.detail',params:{id:img.id} }">
                         <!-- <img :src="img.img_url"> -->
                         <!-- 懒加载 -->
                         <img v-lazy="img.img_url">
                        <p>
                            <span v-text="img.title"></span>
                            <br>
                            <span v-text="img.zhaiyao"></span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            categorys:[],//分类
            imgs:[], //图片数据
        }
    },
    created(){
        //发起请求获取导航栏数据
        this.$ajax.get('getimgcategory')
        .then(res=>{
            this.categorys = res.data.message;

            //将全局添加到数组的第一个 unshift
            this.categorys.unshift({
                id:0,
                title:'全部'
            });
        })
        .catch(err=>{
            console.log(err);
        });
        //当页面加载默认传递0
        this.loadImg(0);  //该代码替换了下面的请求的代码，做了函数封装

        //将0作为参数，获取全部图片数据
        // this.$ajax.get('getimages/' + 0)
        // .then(res=>{
        //     this.imgs = res.data.message;
        // })
        // .catch(err=>{
        //     console.log(err);
        // })
    },
    methods:{
        loadImg(id){
            this.$ajax.get('getimages/' + id)
        .then(res=>{
            this.imgs = res.data.message;
        })
        .catch(err=>{
            console.log(err);
        })
        }
    }
}



</script>
<style>
.photo-header li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}

.photo-header ul {
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
}


/*下面的图片*/

.photo-list li {
    list-style: none;
    position: relative;
}

.photo-list li img {
    width: 100%;
    height: 230px;
    vertical-align: top;
}

.photo-list ul {
    padding-left: 0px;
    margin: 0;
}

.photo-list p {
    position: absolute;
    bottom: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}

.photo-list p span:nth-child(1) {
    font-weight: bold;
    font-size: 16px;
}

/*图片懒加载的样式*/
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

</style>

photodetail.vue

<template>
    <div class="tmpl">
        <!--  组件名navBar -->  
        <nav-bar title="图片详情"></nav-bar>
        <!-- 组件名:navbar -->
        <!--  使用：navbar-->
        <div class="photo-title">
            <p v-text="imgInfo.title"></p>
            <span>发起日期：{{imgInfo.add_time | convertDate}}</span>
            <span>{{imgInfo.click}}次浏览</span>
            <span>分类：民生经济</span>
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li v-for="(img,index) in imgs"  :key="index"  class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <!-- <img :src="img.src"> -->
                 <img class="preview-img" :src="img.src" height="100" @click="$preview.open(index, imgs)">
            </li>
           
        </ul>
        <div class="photo-desc">
            <p v-html="imgInfo.content"></p>
        </div>
        
        <!-- 使用评论子组件 -->
        <comment :cid="pid"></comment>
    </div>
</template>
<script>
export default {
    data(){
        return {
            imgs:[],//存放缩率图
            imgInfo:{},//详情数据对象
            pid:this.$route.params.id, //记录当前图片id
           
        }
    },
    created(){
        //1:获取路由参数
        // let pid = this.$route.params.id;
        //2:发起请求2个
        //图片详情
        this.$ajax.get('getimageInfo/' + this.pid)
        .then(res=>{
            //一个id对应一个详情对象
            this.imgInfo = res.data.message[0];
        })
        .catch(err=>{
            console.log(err)
        });
        //缩略图
        this.$ajax.get('getthumimages/' + this.pid)
        .then(res=>{
            this.imgs = res.data.message;

            //forEach
            this.imgs.forEach((ele)=>{
                ele.w=300;
                ele.h=200; //缩率图显示的高
            })
        })
        .catch(err=>{
            console.log(err)
        })
    }
    
}


</script>
<style scoped>
li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.photo-title {
    overflow: hidden;
}

.photo-title,
.photo-desc {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.photo-title p {
    color: #13c2f7;
    font-size: 20px;
    font-weight: bold;
}

.photo-title span {
    margin-right: 20px;
}

.mui-table-view.mui-grid-view.mui-grid-9 {
    background-color: white;
    border: 0;
}

.mui-table-view.mui-grid-view.mui-grid-9 li {
    border: 0;
}

.photo-desc p {
    font-size: 18px;
}

.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
    padding: 2 2;
}



</style>

comment.vue

<template>
    <div>
                <!-- 评论内容开始 -->
        <div class="photo-bottom">
            <ul>
                <li class="photo-comment">
                    <div>
                        <span>提交评论</span>
                        <span><a @click="goback">返回</a></span>
                    </div>
                </li>
                <li class="txt-comment">
                    <textarea v-model="msg"></textarea>
                </li>
                <li>
                   <mt-button @click="sendComment" size="large" type="primary">发表评论按钮</mt-button>
                </li>
                <li class="photo-comment">
                    <div>
                        <span>评论列表</span>
                        <span>66条评论</span>
                    </div>
                </li>
            </ul>
            <ul class="comment-list">
                <li v-for="(comment,index) in comments" :key="index">
                    {{comment.user_name}}：{{comment.content}} {{comment.add_time|convertDate}}
                </li>
               
            </ul>
            <mt-button type="danger" size="large" plain @click="loadByPage">加载更多按钮</mt-button>
        </div>

        <!-- 评论内容结束 -->

    
<!--改变颜色<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button> -->

<!-- 改变大小
<mt-button size="small">small</mt-button>
<mt-button size="large">large</mt-button>
<mt-button size="normal">normal</mt-button>
幽灵按钮
<mt-button type="danger" plain>plain</mt-button> -->


    </div>
</template>
<script>
    export default {
        data(){
            return {
                 comments:[],//存放评论数据
                 pageIndex:1,//页码
                 msg:'',//发表的评论
            }
        },created(){
            //评论操作 开始
            this.loadFirst();
            //评论操作 结束
        },props:['cid']
        ,methods:{
        //先调用这个函数
        loadFirst(){
            this.$ajax.get('getcomments/' + this.cid +'?pageindex=1')
            .then(res=>{
                this.comments = res.data.message;
            })
            .catch(err=>{
                console.log(err);
            })
        },
        //再点击按钮
        loadByPage(){
             this.$ajax.get('getcomments/' + this.cid +'?pageindex=' + (++this.pageIndex))
            .then(res=>{
                //追加
                this.comments = this.comments.concat(res.data.message);
            })
            .catch(err=>{
                console.log(err);
            })
        },
        //发表评论
        sendComment(){
            //发表评论请求后台
            this.$ajax.post('postcomment/'+ this.cid,'content='+this.msg)
            .then(res=>{
                console.log(res);
                //获取最新的第一页数据
                this.loadFirst();
                //清空数据
                this.msg = '';
            })
            .catch(err=>{
                console.log(err);
            })
           
        },
        goback(){
            this.$router.go(-1);
        }
    }
    }
</script>
<style scoped>
 /*评论样式 开始*/
.photo-comment > div span:nth-child(1) {
    float: left;
    font-weight: bold;
    margin-left: 5px;
}

.photo-comment > div span:nth-child(2) {
    float: right;
}

.photo-comment {
    height: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    line-height: 30px;
    margin-bottom: 5px;
}

.txt-comment {
    padding: 5 5;
}

.txt-comment textarea {
    margin-bottom: 5px;
}

.comment-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

/*评论样式 结束*/   
</style>

goodlist.vue 其中包含上拉加载更多用mint-ui中的loadmore实现

<template>
    <div class="tmpl" style="height:577px;">
        <nav-bar title="商品列表" ></nav-bar>
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
    <!-- 上啦完毕调用该元素的onBottomLoaded函数， -->
        <ul class="mui-table-view mui-grid-view">
            <li v-for="prod in prods" :key="prod.id" class="mui-table-view-cell mui-media mui-col-xs-6">
                <a>
                    <img class="mui-media-object" :src="prod.img_url">
                    <div class="mui-media-body">{{prod.title}}</div>
                    <div class="desc">
                        <div class="sell">
                            <span>￥{{prod.sell_price}}</span>
                            <s>￥{{prod.market_price}}</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩{{prod.stock_quantity}}件
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </mt-loadmore>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pageIndex:1,//页码
            prods:[],//商品列表数据
            allLoaded:false, //是否禁止触发上拉函数
            isAutoFill:false,//是否自动触发上拉函数
        }
    },
    created(){
       this.loadMore();//1
    },
    methods:{
        loadBottom(){
            //console.log('上啦触发了');
            this.loadmoreConcat();
        },
        loadMore(){
             //发起请求获取数据填充到页面
            this.$ajax.get('getgoods?pageindex=1')
            .then(res=>{
                this.prods = res.data.message;
            })
            .catch(err=>{
                console.log(err);
            });
        }, //追加数据
        loadmoreConcat(){
             this.$ajax.get('getgoods?pageindex='+ (++this.pageIndex))
            .then(res=>{
                this.prods = this.prods.concat(res.data.message);
                // console.log(this.$refs.loadmore.onBottomLoaded());
                //判断是否还有数据
                if(res.data.message.length != 10){
                    //数据不到10条，就是剩余的所有了
                    this.allLoaded = true;//禁止调用上拉函数了
                }
                // 通知上啦操作已经完结
                this.$refs.loadmore.onBottomLoaded();


            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}


</script>
<style scoped>
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
    margin: 0px;
    padding: 0px;
    border: 1px solid #5c5c5c;
    box-shadow: 0 0 4px #666;
}


.sell > span {
    float: left;
    color: red;
    text-align: left;
}


.detail >.hot {
    float: left;
    text-align: left;
    font-size: 15px;
}


.detail >.count {
    float: right;
    text-align: right;
    font-size: 15px;
}




/*撑开，去除浮动没有的高度*/


.detail {
    overflow: hidden;
}


.desc {
    color: rgba(92, 92, 92, 0.8);
    background-color: rgba(0, 0, 0, 0.2);
}


.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    height: 200px;
}
</style>

gooddetail.vue

<template>
    <div>
        <nav-bar title="商品详情"></nav-bar>
        <div class="outer-swiper">
            <div class="swiper">
               <my-swipe :url="goodsDetailUrl"></my-swipe>
            </div>
        </div>
        <div class="product-desc">
            <ul>
                <li><span class="product-desc-span">
                    {{prodInfo.title}}
                </span></li>
                <li class="price-li">市场价：
                    <s>￥{{prodInfo.market_price}}</s> 销售价：<span>￥{{prodInfo.sell_price}}</span></li>
                <li class="number-li">购买数量：<span>-</span><span>1</span><span>+</span></li>
                <li>
                    <mt-button type="primary">立即购买</mt-button>
                    <mt-button type="danger">加入购物车</mt-button>
                </li>
            </ul>
        </div>
        
            <div class="ball" v-if="isShow"></div>

        <div class="product-props">
            <ul>
                <li>商品参数</li>
                <li>商品货号：{{prodInfo.goods_no}}</li>
                <li>库存情况：{{prodInfo.stock_quantity}}件</li>
                <li>上架时间：{{prodInfo.add_time | convertDate}}</li>
            </ul>
        </div>
        <div class="product-info">
            <ul>
                <li>
                    <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                </li>
                <li>
                    <mt-button type="danger" size="large" plain>商品评论</mt-button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                isShow:false,//控制小球是否显示
                imgs:[],//缩略图数组
                prodInfo:{}, //商品信息
                goodsDetailUrl:'',//商品详情轮播图url
            }
        },
        created(){
            //1:获取路由参数id
            let id = this.$route.query.id;
            //2:获取详情数据
            // this.$ajax.get('goods/getinfo/' + id)
            // .then(res=>{
            //     this.prodInfo = res.data.message[0];
            // })
            // .catch(err=>{
            //     console.log(err);
            // })
            // //3:获取轮播图数据
            // this.$ajax.get('getthumimages/' + id)
            // .then(res=>{
            //     this.imgs = res.data.message;
            // })
            // .catch(err=>{
            //     console.log(err);
            // })
            
            //拼接url：传递给子组件
            this.goodsDetailUrl = 'getthumimages/' + id;

            //使用合并请求
            this.$ajax.all([
                this.$ajax.get('goods/getinfo/' + id)
                // ,this.$ajax.get('getthumimages/' + id)
            ])
            //分发响应
            .then(this.$ajax.spread( (resInfo)=>{
                this.prodInfo = resInfo.data.message[0];
                //this.imgs = resImgs.data.message;
            })   )
            .catch(err=>{
                console.log(err);
            })

        }

    }
</script>
<style scoped>
.ball-enter-active {
    animation: bounce-in 1s;
}

@keyframes bounce-in {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(140px, -50px, 0);
    }
    75% {
        transform: translate3d(160px, 0px, 0);
    }
    100% {
        transform: translate3d(140px, 300px, 0);
    }
}

.swiper {
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 8px;
    width: 95%;
    border-radius: 15px;
    overflow: hidden;
}

.outer-swiper,
.product-desc,
.product-props,
.product-info {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 3px;
}


/*请ulpadding*/

.outer-swiper ul,
.product-desc ul,
.product-props ul,
.product-info ul {
    padding: 0;
}

.product-desc ul li,
.product-props ul li,
.product-info ul li {
    list-style: none;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
}

.product-desc ul >:nth-child(1) span {
    color: blue;
    font-size: 22px;
    font-weight: bold;
}

.product-desc ul >:nth-child(1) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.product-desc ul,
.product-info ul,
.product-props ul {
    padding-left: 10px;
}

.price-li span {
    color: red;
    font-size: 25px;
}

.price-li s {
    margin-right: 16px;
}


/*加减*/

.number-li span {
    display: inline-block;
    border: 2px solid rgba(0, 0, 0, 0.1);
    width: 25px;
}


/*商品参数*/

.product-props ul >:nth-child(1) {
    text-align: left;
}

.product-props ul:not(:nth-child(1)) {
    margin-left: 40px;
}

.product-info ul {
    margin-bottom: 70px;
    padding: 0 5;
}

.number-li span {
    text-align: center;
}

.number-li >:nth-child(2) {
    width: 40px;
}

.ball {
    border-radius: 50%;
    background-color: red;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 440px;
    left: 120px;
    display: inline-block;
    z-index: 9999;
}
</style>

loading main.js中修改

'use strict';


//引入第三方包 开始
import Vue from 'vue';

//VueRouter:引入路由对象
import VueRouter from 'vue-router';
//VueRouter:安装插件
Vue.use(VueRouter);

//Mint:引入mint-ui
import Mint from 'mint-ui';
//Mint:引入css
import 'mint-ui/lib/style.css';
//Mint:安装插件
Vue.use(Mint);
//MUI:引入mui的样式
import './static/vendor/mui/dist/css/mui.css';
//全局样式
import './static/css/global.css';


//Axios:引入axios
import Axios from 'axios';
//Axios:挂载原型
Vue.prototype.$ajax = Axios;
//Axios:默认配置
Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';
//Axios:拦截器操作loadding
Axios.interceptors.request.use(function(config){
    //显示图标
    Mint.Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
    });
    return config;
});
Axios.interceptors.response.use(function(config){
    //隐藏图标
    Mint.Indicator.close();
    //获取到config中的data，进行加工
    return config;
});




//Moment:引入moment
import Moment from 'moment';

//VuePreview:引入vue-preview
import VuePreview from 'vue-preview'
Vue.use(VuePreview);

//引入第三方包 结束

//引入全局组件需要的组件对象 开始
import NavBar from './components/common/navBar.vue';
import Comment from './components/common/comment.vue';
import MySwipe from './components/common/mySwipe.vue';
//引入全局组件需要的组件对象 结束

//定义成全局组件或过滤器，大家都能使用 开始
Vue.filter('convertDate',function(value){
    return Moment(value).format('YYYY-MM-DD');
});
Vue.component('navBar',NavBar); //使用最好以nav-bar
Vue.component('comment',Comment);  //使用要以comment
Vue.component('mySwipe',MySwipe);  //使用要以my-Swipe
//定义全局组件或过滤器 结束

//引入自己的vue文件 开始  
import App from './app.vue';
import Home from './components/home/home.vue';
import Member from './components/member/member.vue';
import Shopcart from './components/shopcart/shopcart.vue';
import Search from './components/search/search.vue';
import NewsList from './components/news/newsList.vue';
import NewsDetail from './components/news/newsDetail.vue';
import PhotoShare from './components/photo/photoShare.vue';
import PhotoDetail from './components/photo/photoDetail.vue';
import GoodsList from './components/goods/goodsList.vue';
import GoodsDetail from './components/goods/goodsDetail.vue';

//引入自己的vue文件 结尾


//VueRouter:创建对象并配置路由规则！！！导航
let router = new VueRouter({
    linkActiveClass:'mui-active',
    routes: [
        //VueRouter：配置路由规则
        { path: '/', redirect: { name: 'home' } }, //重定向
        { name: 'home', path: '/home', component: Home },//首页
        { name:'member',path:'/member',component: Member}, //会员
        { name: 'shopcart',path:'/shopcart',component:Shopcart}, //购物车
        { name: 'search',path:'/search',component:Search}, //查找
        { name:'news.list',path:'/news/list',component:NewsList}, //新闻列表
        { name:'news.detail',path:'/news/detail',component:NewsDetail}, //新闻详情
        { name:'photo.share',path:'/photo/share',component:PhotoShare}, //图文分享
        { name:'photo.detail',path:'/photo/detail/:id',component:PhotoDetail},//图片详情
        { name:'goods.list',path:'/goods/list', component:GoodsList}, //商品列表
        { name:'goods.detail',path:'/goods/detail',component:GoodsDetail}, //商品详情
    ]
});

//创建vue实例
new Vue({
    el: '#app',
    router,
    render: c => c(App)
})