跟技术胖学vue+koa

首页热卖商品组件

技术点：1热卖商品封装成单独的组件  2路由和参数的传递  3详情页面路由参数的接收

//首页

<template>
    <div>
        <div class="search-bar">
            <van-row>
                <van-col span="3">
                    <img :src="locationIcon" width="80%" class="location-icon"/>
                </van-col>
                <van-col span="16">
                    <input type="text" class="search-input" />
                </van-col>
                <van-col span="5">
                    <van-button size="mini">查找</van-button>
                </van-col>
            </van-row>
        </div>
        <!--swiper area-->
        <div class="swiper-area">
            <van-swipe :autoplay="1000">
                <van-swipe-item v-for="( banner ,index) in bannerPicArray" :key="index" >
                    <img v-lazy="banner.image" width="100%"/>
                </van-swipe-item>
            </van-swipe>
        </div>  
        <!--type bar-->
        <div class="type-bar">
            <div v-for="(cate,index) in category" :key="index">
                <img v-lazy="cate.image" width="90%">
                <span>{{cate.mallCategoryName}}</span>

            </div>
        </div>  
        <!--adbanner area-->
        <div>
            <img v-lazy="adBanner" width="100%" />
        </div>
        <!--Recommend goods area-->
        <div class="recommend-area">
            <div class="recommend-title">
                商品推荐
            </div>
            <div class="recommend-body">
                <swiper :options="swiperOption">
                   <swiper-slide v-for="(item,index) in recommendGoods " :key="index" >
                       <div class="recommend-item">
                           <img :src="item.image" width="80%">
                           <div>{{item.goodsName}}</div>
                           <div>￥{{item.price | moneyFilter}}(￥{{item.mallPrice  | moneyFilter}})</div>
                       </div>
                   </swiper-slide> 
                </swiper>
            </div>
        </div>
        <floor-component :floorData="floor1" :floorTitle="floorName.floor1"></floor-component>
        <floor-component :floorData="floor2" :floorTitle="floorName.floor2"></floor-component>
        <floor-component :floorData="floor3" :floorTitle="floorName.floor3"></floor-component>
        <!--Hot Area-->
        <div class="hot-area">
            <div class="hot-title">热卖商品</div>
            <div class="hot-goods">
            <!--这里需要一个list组件-->
                <van-list>
                    <van-row gutter="20">
                        <van-col span="12" v-for="(item , index) in hotGoods" :key="index">
                     <goods-info :goodsId="item.goodsId" :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price">

                     </goods-info>          //********************** 通过  :goodsId="item.goodsId" 传参

                        </van-col>
                    </van-row>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import 'swiper/dist/css/swiper.css'
    import {swiper , swiperSlide} from 'vue-awesome-swiper'

    import floorComponent from '../component/floorComponent'
    import { toMoney } from '@/filter/moneyFilter.js'
    import goodsInfo from '../component/goodsInfoComponent'
    import url from '@/serviceAPI.config.js'

    export default {
        data() {
            return {
                swiperOption:{
                    slidesPerView:3
                },
                msg: 'Shopping Mall',
                locationIcon: require('../../assets/images/location.png'),
                bannerPicArray:[],
                category:[],
                adBanner:'',
                recommendGoods:[],
                floor1:[],
                floor2:[],
                floor3:[],
                floorName:{},
                hotGoods:[],  //热卖商品
            }
        },
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }
        },
        components:{swiper,swiperSlide,floorComponent,goodsInfo},
        created(){
            axios({
                url:url.getShopingMallInfo,
                method:'get',
            })
            .then(response=>{
                console.log(response)
                if(response.status==200){
                    this.category=response.data.data.category;
                    this.adBanner = response.data.data.advertesPicture.PICTURE_ADDRESS;
                    this.bannerPicArray= response.data.data.slides;
                    this.recommendGoods = response.data.data.recommend;
                    this.floor1 = response.data.data.floor1;
                    this.floor2 = response.data.data.floor2;
                    this.floor3 = response.data.data.floor3;
                    this.floorName = response.data.data.floorName;
                    this.hotGoods = response.data.data.hotGoods;
                }
            })
            .catch(error=>{
                console.log(error)
            })
        }

    }
</script>

<style scoped>
    .search-bar{
        height:2.2rem;
        background-color: #e5017d;
        line-height: 2.2rem;
        overflow: hidden;
    }
    .search-input{
        width:100%;
        height: 1.3rem;
        border-top:0px;
        border-left:0px;
        border-right:0px;
        border-bottom:1px solid #fff !important;
        background-color: #e5017d;
        color:#fff;
    }
    .location-icon{
        padding-top:.2rem;
        padding-left:.3rem;
    }
    .swiper-area{
        clear:both;
        max-height:15rem;
        overflow: hidden;
    }

    .type-bar{
        background-color: #fff;
        margin:0 .3rem .3rem .3rem;
        border-radius: .3rem;
        font-size:14px;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
    }
    .type-bar div{
        padding:.3rem;
        font-size:12px;
        text-align: center;
        flex:1;
    }
    .recommend-area{
        background-color: #fff;
        margin-top:.3rem;
    }
    .recommend-title{
        border-bottom:1px solid #eee;
        font-size:14px;
        padding:.2rem;
        color:#e5017d;
    }
    .recommend-body{
        border-bottom:1px solid #eee;
    }
    .recommend-item{
        width:99%;
        border-right:1px solid #eee;
        font-size:12px;
        text-align: center;
    }
    .hot-area{
        text-align: center;
        font-size:14px;
        height: 1.8rem;
        line-height:1.8rem;
    }
    .hot-goods{
        height: 130rem;
        overflow: hidden;
        background-color: #fff;
    }
</style>

热卖商品的子组件
<template>
    <div class="goods-info" @click="goGoodsPage()">
        <div class="goods-image">
            <img v-lazy="goodsImage" width="90%" />
        </div>
        <div class="goods-name">{{goodsName}}</div>
        <div class="goods-price">￥{{goodsPrice | moneyFilter }}</div>
    </div>
</template>

<script>
    import {toMoney}  from '@/filter/moneyFilter.js'
    export default {
        props:['goodsImage','goodsName','goodsPrice','goodsId'],      ***************prop 接收父组件的数据*************                           
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }
        },
        methods: {
            goGoodsPage() {         //跳转详情页面函数
                this.$router.push({name:'Goods',query:{goodsId:this.goodsId}})     **************跳转到详情页 及传递id******************
            }
        },
    }
</script>

<style scoped>
 .goods-name{
        padding: 0 8px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space:nowrap; 
    }
</style>

商品详情页面

<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar
                title="商品详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="topimage-div">
            <img :src="goodsInfo.IMAGE1" width="100%" />
        </div>
        <div class="goods-name">{{goodsInfo.NAME}} </div>
        <div class="goods-price">价格 ：￥{{goodsInfo.PRESENT_PRICE | moneyFilter}}元</div>
        <div>
            <van-tabs swipeable sticky>
                <van-tab title="商品详情">
                   <div class="detail" v-html="goodsInfo.DETAIL">

                   </div>
                </van-tab>
                <van-tab title="评论">
                    评论制作中
                </van-tab>
            </van-tabs>

        </div>

        <div class="goods-bottom">
            <div>
                <van-button size="large" type="primary" @click="addGoodsToCart">加入购物车</van-button>
            </div>
            <div>
                <van-button size="large" type="danger">直接购买</van-button>
            </div>
        </div>

    </div>
</template>

<script>
    import axios from 'axios'
    import url from '@/serviceAPI.config.js'
    import {Toast} from 'vant'
    import {toMoney} from '@/filter/moneyFilter.js'
    export default {
        data() {
            return {
                goodsId:'',
                goodsInfo:{},  //商品详细信息 
            }
        },
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }
        },
        created(){      //通过路由拿到id   然后根据id发请求
            this.goodsId= this.$route.query.goodsId ?this.$route.query.goodsId : this.$route.params.goodsId  
            console.log(this.goodsId)
            this.getInfo()
        },
        methods: {
            getInfo() {
                axios({
                    url:url.getDetailGoodsInfo,
                    method:'post',
                    data:{goodsId:this.goodsId}
                })
                .then(response=>{

                    if(response.data.code== 200 && response.data.message){
                        this.goodsInfo= response.data.message
                    }else{
                        Toast('服务器错误，数据获取失败')
                    }
                     console.log(this.goodsInfo)
                })
                .catch(error=>{
                    console.log(error)
                })
            },
            onClickLeft(){
                this.$router.go(-1)
            },
            addGoodsToCart(){
                //取出本地购物车中的商品
                //localStorage.removeItem('cartInfo')
                let cartInfo = localStorage.cartInfo ? JSON.parse(localStorage.cartInfo) : []
                let isHaveGoods = cartInfo.find(cart=>cart.goodsId== this.goodsId)
                console.log(isHaveGoods)
                console.log(this.goodsInfo)
                if(!isHaveGoods){
                    let newGoodsInfo = {
                        goodsId:this.goodsInfo.ID,
                        name:this.goodsInfo.NAME,
                        price:this.goodsInfo.PRESENT_PRICE,
                        image:this.goodsInfo.IMAGE1,
                        count:1
                    }
                    cartInfo.push(newGoodsInfo)  
                    localStorage.cartInfo = JSON.stringify(cartInfo)
                    Toast.success('添加成功')
                }else{
                    Toast.success('已有此商品')
                }

                this.$router.push({name:'Cart'})

            }

        },
    }
</script>

<style scoped>
    .goods-name{
        background-color: #fff;
    } 
    .goods-price{
        background-color: #fff;
    }
    .detail {
        font-size:0px;
    }
    .goods-bottom{
        position:fixed;
        bottom:0px;
        left:0px;
        background-color: #FFF;
        width:100%;
        display: flex;
        flex-direction: row;
        flex-flow:nowrap;
    }

    .goods-bottom > div {
        flex:1;
        padding:5px;
    }
</style>

商品分类页面

技术点 

<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="类别列表"/>
    </div>

    <div>
      <van-row>
        <van-col span="6">
          <div id="leftNav">
            <ul>
              <li @click="clickCategory(index,item.ID)" :class="{categoryActice:categoryIndex==index}"
                  v-for="(item , index) in category" :key="index">
                {{item.MALL_CATEGORY_NAME}}
              </li>
            </ul>
          </div>

        </van-col>
        <van-col span="18">
          <div class="tabCategorySub">
            <van-tabs v-model="active" @click="onClickCategorySub">
              <van-tab v-for="(item,index) in categorySub" :key="index" :title="item.MALL_SUB_NAME">

              </van-tab>
            </van-tabs>
          </div>

          <div id="list-div">
            <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" @load="onLoad">
                <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="(item,index) in goodList" :key="index">
                  <div class="list-item-img">
                    <img :src="item.IMAGE1"
                         width="100%"
                         :onerror="errorImg"
                    />

                  </div>
                  <div class="list-item-text">
                    <div>{{item.NAME}}</div>
                    <div>￥{{item.ORI_PRICE | moneyFilter}}</div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  import url from '@/serviceAPI.config.js'
  import {toMoney} from '@/filter/moneyFilter.js'

  export default {
    data() {
      return {
        category: [],
        categoryIndex: 0,
        categorySub: [],  //小类类别
        active: 0,    //激活标签的值
        loading: false,
        finished: false, //上拉加载是否有数据
        page: 1,        //商品列表的页数
        goodList: [],   //商品列表信息
        categorySubId: '', //商品子类ID
        isRefresh: false, //下拉刷新
        errorImg: 'this.src="' + require('@/assets/images/errorimg.png') + '"',
      }
    },
    filters: {
      moneyFilter(money) {
        return toMoney(money)
      }
    },
    created() {
      this.getCategory();

    },
    mounted() {
      let winHeight = document.documentElement.clientHeight
      document.getElementById("leftNav").style.height = winHeight - 46 - 50 + 'px'
      document.getElementById("list-div").style.height = winHeight - 90 - 50 + 'px'
    },
    methods: {
      getCategory() {
        axios({
          url: url.getCateGoryList,
          method: 'get',
        })
          .then(response => {
            console.log(response)
            if (response.data.code == 200 && response.data.message) {
              this.category = response.data.message
              this.getCategorySubByCategoryID(this.category[0].ID)
            } else {
              Toast('服务器错误，数据取得失败')
            }
          })
          .catch(error => {
            console.log(error)
          })

      },
      clickCategory(index, categoryId) {             编写clickCategory方法，点击大类时调用改方法，方法就是把点击的索引传递过去，然后付给刚才注册的categoryIndex属性

        this.categoryIndex = index
        this.page = 1
        this.finished = false
        this.goodList = []
        this.getCategorySubByCategoryID(categoryId)
      },
//根据大类ID读取小类类别列表
      getCategorySubByCategoryID(categoryId) {
        axios({
          url: url.getCateGorySubList,
          method: 'post',
          data: {categoryId: categoryId}
        })
          .then(response => {
            console.log(response)
            if (response.data.code == 200 && response.data.message) {
              this.categorySub = response.data.message
              this.active = 0
              this.categorySubId = this.categorySub[0].ID
              this.onLoad()
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
//上拉加载方法
      onLoad() {
        setTimeout(() => {
          this.categorySubId = this.categorySubId ? this.categorySubId : this.categorySub[0].ID
          this.getGoodList()
        }, 1000)
      },
//下拉刷新方法
      onRefresh() {
        setTimeout(() => {
          this.isRefresh = false;
          this.finished = false;
          this.goodList = []
          this.page = 1
          this.onLoad()

        }, 500)
      },
      getGoodList() {
        axios({
          url: url.getGoodsListByCategorySubID,
          method: 'post',
          data: {
            categorySubId: this.categorySubId,
            page: this.page
          }
        })
          .then(response => {
            console.log(response)
            if (response.data.code == 200 && response.data.message.length) {
              this.page++
              this.goodList = this.goodList.concat(response.data.message)
            } else {
              this.finished = true
            }
            this.loading = false;

          })
          .catch(error => {
            console.log(error)
          })
      },
      onClickCategorySub(index, title) {
        this.categorySubId = this.categorySub[index].ID
        console.log('categorySubId:' + this.categorySubId)
        this.goodList = []
        this.finished = false
        this.page = 1
        this.onLoad()

      },
//跳转到商品详细页
      goGoodsInfo(id) {
        this.$router.push({name: 'Goods', params: {goodsId: id}})
      }

    },
  }
</script>

<style scoped>
  #leftNav {
    background-color: aliceblue;
  }

  #leftNav ul li {
    line-height: 2rem;
    border-bottom: 1px solid #E4E7ED;
    padding: 3px;
    font-size: 0.8rem;
    text-align: center;
  }

  .categoryActice {                 *******************点击选中的active****************
    background-color: #fff;
  }

  .list-item {
    display: flex;
    flex-direction: row;
    font-size: 0.8rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    padding: 5px;
  }

  #list-div {
    overflow: scroll;
  }

  .list-item-img {
    flex: 8;
  }

  .list-item-text {
    flex: 16;
    margin-top: 10px;
    margin-left: 10px;
  }

</style>