<template>

    <div class="recommend">

        <h3 class="recommend-title">热卖推荐</h3>

        <ul class="recommend-list">

            <li class="recommend-item"

            v-for="(item,index) in recommends" :key="index">

                <route-link class="recommend-link" 

                :to="{name:'home-product',params:{id:item.baseinfo.itemId}}">

                <!-- 通过数据中的itemId来跳转到相应页面 -->

                <p class="recommend-pic"><img class="recommend-img" v-lazy="item.baseinfo.picUrlNew"></p>

          <p class="recommend-name">{{item.name.shortName}}</p>

          <p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>

          <p class="recommend-info">

            <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>

            <span class="recommend-count">{{item.remind.soldCount}}件已售</span>

          </p>

                </route-link>

            </li>

        </ul>

    </div>

</template>

<script>

import {getHomeRecommend} from 'api/home';

export default {

    name: 'HomeRecommend',

    data(){

        return {

           recommends: [],

           curPage: 1,

           totalPage: 1

        }

    },

    created() {

        this.getRecommend();

    },

    methods:{

        getRecommend(){

            if(this.curPage > this.totalPage){

                return;

            }

            getHomeRecommend(this.curPage).then(data => {

                if(data){

                    console.log(data);

                    this.curPage++;

                    this.totalPage = data.totalPage;

                    this.recommends = this.recommends.concat(data.itemlist);

                }

            })

        }

    },

};

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

    .recommend{

        &-title{

            position:relative;

            width:100%;

            padding :10px 0;

            font-size: $font-size-l;

            text-align: center;

        &:before,

        &:after{

            content: '';

            position: absolute;

            top:50%;

            width: 40%;

            height: 1px;

            background-color: #ddd;

        }

        &:before{

            left:0;

        }

        &:after{

            right:0;

        }

        &-list{

            @include flex-between();

            flex-wrap: wrap;

        }

        &-item{

            width: 49%;

            background-color: #fff; 

            box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);

        }

        &-link{

            display:block;

        }

        //图片根据容器大小自适应宽高

        &-pic{

            //如何在不设置高的情况下使图片容器变成正方形，padding-top和margin-top都是相对于宽的，不是相对于高的

      position: relative;

      width: 100%;

      padding-top: 100%;

      margin-bottom: 5px;

    }

    &-img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

    }

    &-name {

      height: 36px;

      padding: 0 5px;

      margin-bottom: 8px;

      line-height: 1.5;

      @include multiline-ellipsis();

    }

    &-origPrice {

      padding: 0 5px;

      margin-bottom: 8px;

      color: #ccc;

    }

    &-info {

      @include flex-between();

      padding: 0 5px;

      margin-bottom: 8px;

    }

    &-price {

      color: #e61414;

    }

    &-price-num {

      font-size: 20px;

    }

    &-count {

      color: #999;

    }

  }

        }

</style>

[Vue warn]: Error in render: "TypeError: item is undefined" found in ---> <HomeRecommend> at src/pages/home/recommend.vue       <Home> at src/pages/home/index.vue         <App> at src/App.vue           <Root> vue.runtime.esm.js:619

TypeError: "item is undefined"

    3 vue-loader/lib/selector.js?type=template&index=0!./src/pages/home/recommend.vue:23

    10 VueJS

    3 vue-loader/lib/selector.js?type=template&index=0!./src/pages/home/recommend.vue:11

    VueJS 7