// 热卖推荐显示不出来  getHomeRecommend(1); 在这里还能显示内容   console.log(data);//老师 在这里就打印不出内容了

// recommend.vue文件

<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">

      <router-link class="recommend-link" :to="{name: 'home-product', params: {id: item.baseinfo.itemId}}"

        >

      <!-- :to="{name:'home-product',params:{id:item.baseinfo.itemId}}" name是router的index.js文件有写过,params是参数,动态id -->

       <!-- router-link标签跳转到自己写的页面 a标签跳转到其他页面  v-for="(item,index) in 右括号不要和in挨着太近，不然会报错 -->

          <p class="recommend-pic"><img class="recommend-img" ></p>

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

          <p class="recommend-origpprice"><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>

    </router-link>

  </li>

</ul>

  </div> 

</template>

<script>

  import { getHomeRecommend } from 'api/home'; // { getHomeRecommend } 这个也是变量用大括号括起来

  import MeLoading from 'base/loading';

  export default{

    name: 'HomeRecommend',

    components: {

      MeLoading

    },

    data() {

      return {

        recommends: [], //这个数据返回回来是接口数据的itemList数组

        curPage: 1, //当前页数 这个是变量

        totalPage: 1 // 总页数

      };

    },

    created() {

      // getHomeRecommend(1); // 1表示当前第一页  // 老师在这里还能显示内容

      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);

          }//这里面的数据跟home.js获取数据(成功或失败)有关联

        });

      }

    }

  };

</script>

<style lang="scss" scoped>

</style>

// home.js文件的jsonp代码

export const getHomeRecommend = (page = 1, psize = HOME_RECOMMEND_PAGE_SIZE) => {

    const url = 'https://ju.taobao.com/json/tg/ajaxGetItemsV2.json';

    const params = {

        page,

        psize,

        type: 0,

        frontCatId: ''

    };

    return jsonp(url, params, jsonpOptions).then(res => {

        // console.log(res); // 是一个有code, 当前页, 总页码数, 有很多属性的数组

        if (res.code === '200') {

            return res;

        }

        throw new Error('没有获取到数据!');

    }).catch(err => {

        if (err) {

            console.log(err); // Error: Timeout

        }

    }).then(res => {

        new Promise(resolve => {

            setTimeout(() => {

                resolve(res);

            }, 1000); //1秒中后显示数据

        });

    });

};

// jsonp.js文件

import jsonp from 'jsonp';

// {

//   page: 1,

//   psize: 20

// }

// page=1&psize=20

const parseParam = param => {

    let params = [];

    for (const key in param) {

        params.push([key, param[key]]);

    }

    // [[page, 1], [pszie, 20]]

    return params.map(value => value.join('=')).join('&');

    // [[page, 1], [pszie, 20]]

    // [page=1, psize=20]

    // page=1&psize=20

};

export default (url, data, options) => {

    url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);

    // console.log(data);

    return new Promise((resolve, reject) => {

        jsonp(url, options, (err, data) => { //这个顺序是固定的,不可以更改

            if (err) {

                reject(err);

            } else {

                resolve(data);

            }

        });

    });

};