数据获取失败

product.js
import jsonp from 'assets/js/jsonp';//引入的是assets/js/jsonp文件并不是包
 
export const getProductDetail = (id) => {
  //初始化跨域链接
  const url = 'https://unszacs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/';
  //初始化要传递给跨域链接的参数(拼接在链接上用的)
  const params = {
    api:'mtop.taobao.detail.getdetail',
    ttid:'2017@taobao_h5_6.6.0',
    data:`{"itemNumId":"${id}"}`,
    appkey:12574478,
    dataType:'jsonp',
    type:'jsonp',
    v:'6.0'
  }
  //jsonp请求的一些配置
  const options = {param: 'callback', timeout: 10000};
  //jsonp参数url要跨域的链接，params要拼接到链接上的参数，optionsjsonp请求配置比如请求多久超时等
  return jsonp(url, params, options).then(res => {
    if(res.code === '200'){
      console.log('商品详情数据请求成功！');
      return res;
    }
    throw new Error('商品详情数据请求失败');
  }).catch((err) => {
    if(err){
      console.log(err);
    }
  }).then(data => {//延时1s获取数据
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(data);
      }, 1000);
    });
  })
}

product/index.js

<template>
    <div class="product">
        <header class="g-header-container">
            <product-header/>
        </header>
        <me-scroll>
            <product-slider :productId="productId"></product-slider>
        </me-scroll>
    </div>
</template>
<script>
import productHeader from './header';
import productSlider from './slider';
import MeScroll from 'base/scroll';
export default {
    name: 'Product',
    components: {
        productHeader,
        productSlider,
        MeScroll
    },
    data() {
        return {
            productId: this.$route.params.id
        }
    },
    mounted() {
        console.log('接收商品id成功:'+this.$route.params.id);
    }
}
</script>
<style lang="scss" scoped>
@import '~assets/scss/mixins';
    .product {
        overflow: hidden;
        position: absolute;
        top:0;
        left: 0;
        z-index: $product-z-index;
        width: 100%;
        height: 100%;
        background-color: $bgc-theme;
    }
</style>

product/slider.js

<template>
  <div class="slider-wrapper">
    <MeLoading v-if="sliders.length"></MeLoading>
    <me-slider :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" :data="sliders" v-else>
        <swiper-slide v-for="(item,index) in sliders" v-bind:key="index">
            <a :href="item.linkUrl" class="slider-link">
                <img :src="item.picUrl" class="slider-img">
            </a>
        </swiper-slide>
    </me-slider>
  </div>
</template>
 
<script>
import MeSlider from 'base/slider';
import MeLoading from 'base/loading';
import { swiper,swiperSlider } from "vue-awesome-swiper";
import { getProductDetail } from "api/product.js";
 
export default {
  name:'productSlider',
  components: {
    MeSlider,
    MeLoading,
    swiper,
    swiperSlider
  },
  data() {
    return {
      direction: 'horizontal',
      loop: true,
      interval: 0,
      pagination: true,
      sliders: []
    }
  },
  props: {
    productId: {
      type: String,
      default:''
    }
  },
  created() {
    console.log('幻灯片组件接收商品ID成功');
    this.getDetail(this.productId);
  },
  methods: {
    getDetail(id) {
      return getProductDetail(id).then(data => {
        console.log(data);
        // this.sliders = data;
      })
    }
  }
}
</script>
 
<style lang="scss" scoped>
 
</style>