（十四）商品详情页实现

在购物的时候，我们在打开goods页面的时候，每点击其中一种具体的food的时候，都会有一个商品的详情页，该页面就是介绍该商品的一些具体的细节。如下图所示：

                   图1

当我们点击红色框中的任意一个food的时候，都会有该商品详情页缓慢过渡进来，如下图所示

                                 图2

当我们点击图2中左上角 的向左箭头的时候，图2又隐藏掉，出现图1的界面。

当点击任意一种商品的时候，会出现商品的详情页，这个详情页可以独立成一个food组件，这个food组件的数据是来自goods组件的，所以要将<food>组件添加到goods组件中。

1、food.vue中<template>内容如下，food页面的显示和隐藏有一个动画的过程

<template>
  <transition name="move">
    <!--每一种商品的详情页-->
    <!--正常情况下这个组件是隐藏的-->
    <div v-show="showFlag" class="food">
      <div class="foodContent">
        <div class="imageHeader">
          <img :src="food.image">
          <!--返回按钮,hide()将<food>组件隐藏-->
          <div class="back" @click="hide">
            <span class="icon-arrow_lift"></span>
          </div>

        </div>
      </div>
    </div>
  </transition>
</template>

2、food.vue中<script>中的内容如下

<script>
    export default {
      props:{
        //接收从父组件传递过来的数据food
        food:{
          type:Object
        }
      },
      data(){
        return {
          showFlag:false
        };
      },
      methods:{
        //将this.showFlag的值设为true
        //这个方法是给父组件调用的，当点击父组件的任意一个food区间，触发这个函数
        show(){
          this.showFlag = true;
        },
        //将this.showFlag的值设为false
        hide(){
          this.showFlag = false;
        }
      }
    }
</script>

3、food.vue中的<template>中的<style>内容如下

<style lang="stylus">
  @import "../../common/stylus/mixin.styl"
  .food
    position:fixed
    left:0
    top:0
    bottom:48px   /*底部的购物车的高度是48px*/
    z-index:30
    width: 100%
    background:#fff
    transform:translate3d(0,0,0)
    &.move-enter-active,&.move-leave-active
      transition:all 0.2s linear
    &.move-enter,&.move-leave-active
      transform :translate3d(100%,0,0)
    .imageHeader
      position:relative
      width: 100%
      height:0              /*设置图片的宽度=高度*/
      padding-bottom:100%  /*相对于这个盒子的宽度设置的，其值=width*/
      img
        position:absolute
        top:0
        left:0
        width: 100%
        height:100%
      .back
        position: absolute
        top:0
        left:0
        .icon-arrow_lift
          display: block
          padding:10px
          font-size:20px
          color:#fff
</style>

4、在父组件goods.vue中引进food.vue

5、在goods.vue中的<template>中引用<food>组件，注意在<template>下直系子元素只能有一个，否则会报错

在这里通过绑定属性:food="selectedFood"将选中的food对象传递给子组件food，ref="food"，通过this.$refs.food获取到<food>这个DOM元素，然后就可以在父组件里面调用子组件定义的方法了，具体如下：

首先，在goods.vue中的data()定义变量selectedFood，如下图所示：

这个selectedFood存放的是一个对象，表示被选中的food对象，通过点击相应的food，将food保存在selectedFood中，如下图所示：

selectFood(food,$event)在goods.vue中的methods中定义，主要有两个功能：将点击的food保存在selectedFood中；调用子组件<food>中的方法show()，显示商品详情页

        //将点击的相应的food放到数据this.selectedFood中，然后传递给子组件
        //其次调用子组件<food>在methods中定义的方法show()
        //这种方式定义的函数是可以被外部调用的
        selectFood(food,event){
          //不是自定义事件
          if(!event._constructed){
            return;
          }
          //将点击的food对象存放到this.selectedFood中
          this.selectedFood = food;
          // 在父组件中调用<food>中在methods定义的方法show()，显示商品详情页
          this.$refs.food.show();
        }