Vue实现购物车C

分类管理

category/CatgoryMainLeft.vue

<template>
    <div id="cate_left"> 
         <div class="category_left">
                <ul class="childbox">
                    <li :class="{active:cur==i}" v-for="(item,i) in leftDatas" 
                  @click="cur=i"  :key="i" >
                        <router-link :to="'/catgory/'+item.category_id">
                        {{item.category_name}}
                        </router-link>
                    </li>
                   
                </ul>
            </div>
    </div>
</template>
<script>
export default{
    data() {
        return{
            leftDatas:[],
            cur:0,
        }
    },
    //生命周期
    mounted() {
        this.getLeftDatas();
    },
    methods:{
        getLeftDatas() {
            this.$http.get('/category').then((res)=>{
                this.leftDatas = res.data;
            },(err)=>{
                console.log(err);
            })
        },

    }
}
</script>
<style scoped>
.active {
    background: #999;
    color:blue;
}
</style>

 

category/CatgoryMainRight.vue

<template>
    <div id="cate_right">
         <div class="category_right">
                <div class="category_banner">
                    <a href="#">
                        <img src="../../assets/images/banner_1.png" alt="">
                    </a>
                </div> 
                <div class="category_detail">
                    <h3 class="category_n">Hot Category Goods</h3>
                    <ul>
                        <li class="category_detail_item" v-for="item in rightDatas" :key="item.product_id">
                            <router-link :to="'/detail/'+item.product_id" class="category_detail_item_link">
                                <img v-lazy="item.product_img_url" alt="" class="category_detail_item_pic">
                                <p class="category_detail_item_name">{{item.product_name}}</p>
                            </router-link>
                        </li>
                    
                    </ul>
                </div>
            </div> 
    </div>
</template>

<script>
export default {
  data () {
    return {
     name:'catgory',
     rightDatas:[]
    }
  }, 
  mounted(){
    if(this.$route.params.id) {
      this.getRightData(this.$route.params.id);
    }
  },
  watch:{   //监听
    //$router   $route
    $route(to,from){   //路由监听      to当前的值   from 旧的值
      console.log(to);
      if(to.params.id){
        this.getRightData(to.params.id);
      }
    }
  },
  methods:{
    getRightData(id){
      this.$http.get('/categorygoods',{params:{mId:id}}).then((res)=>{
        console.log(res.data);
                this.rightDatas = res.data;
            },(err)=>{
                console.log(err);
            })
    }
  }
}

</script>
<style scoped>

</style>

 

category/CatgoryMain.vue

<template>
    <div class="category_content">
       <CatgoryMainLeft />
       <CatgoryMainRight/>
    </div>
</template>

<script>
import CatgoryMainLeft from './CatgoryMainLeft'
import CatgoryMainRight from './CatgoryMainRight'
export default {
  data () {
    return {
     name:'catgory'
    }
  },
  components:{
    CatgoryMainLeft,
    CatgoryMainRight
  } 
  
}

</script>
<style scoped>

</style>

 

category/CatgoryHead.vue

<template>
    <div id="caregoty_head">
        <header class="top_bar">
            <a onclick="window.history.go(-1)" class="icon_back"></a>
            <form action="" class="goods_search">
                <input type="search" class="goods_search_content" placeholder="搜索"  @click="goSearch($event)">
            </form>
            <a href="#" class="icon_menu"></a>
        </header>
    </div>
</template>
<script>
export default{
        methods:{
            goSearch(event){
                this.$router.push('/search');
            }
        }
    }
</script>

 

category/Catgory.vue

<template>
    <div>
       <CatgoryHead />
       <CatgoryMain/>
    </div>
</template>

<script>
import CatgoryHead from './CatgoryHead'
import CatgoryMain from './CatgoryMain'
export default {
  data () {
    return {
     name:'catgory'
    }
  },
  components:{
    CatgoryHead,
    CatgoryMain
  } 
  
}

</script>
<style >
@import '../../assets/css/category.css';
</style>