这样写报错
recommend.vue这样写的:
<template>
<div class="recommends">
<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}}"
>
<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>
</router-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) {
this.curPage++;
this.totalPage = data.totalPage;
this.recommends = this.recommends.concat(data.itemList);
}
});
}
}
};
</script>
home.js这样写:
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 => {
if (res.code === '200') {
return res;
}
throw new Error('没有成功获取到数据!');
}).catch(err => {
if (err) {
console.log(err);
}
}).then(res => {
return new Promise(resolve => {
setTimeout(() => {
resolve(res);
}, 1000);
});
});
};
jsonp.js这样写:
import jsonp from 'jsonp';
/**
* 对jsonp进行封装
* @param {} param
*/
/**
* {page:1,psize:20}
* 将数据对象转化成page=1&psize=20
* @param {} param
*/
const parseParam = param => {
let params = [];
//变成这样[[page,1],[psize,20]]
for (const key in param) {
params.push([key, param[key]])
}
//[page=1,psize=20]
return params.map(value => value.join('=')).join('&');
//page=1&psize=20
}
export default (url, data, options) => {
url += (url.indexOf('?') < 0 ? '?' : '&') + parseParam(data);
return new Promise((resolve, reject) => {
jsonp(url, options, (err, data) => {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星