引子
前文已经请求到分类了，下面可想而知就是要展示这些数据了。
1.封装获取类别下内容函数
在utils/api.js中添加如下代码有：
// 获取首页菜单类内容方法
getRecommendContent(categoryId){
return request.requestGet(baseUrl + "recommend/" + categoryId);
}
2.测试封装的函数获取效果
然后在pages/index.vue中修改代码如下：
<template>
<div class="container">
<div class="center-box">
<div class="recommend-category-box">
<ul class="clear-fix" >
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item, index) in categories" :key="index">
{{item.favorites_title}}
</li>
</ul>
</div>
<div class="recommend-content-list-box">
<div class="recommend-content-title">
<span>热/门/推/荐</span>
</div>
<div class="recommend-content-list">
<div class="recommend-content-item" v-for="(item, index) in content" :key="index">
<span v-text="item.title"></span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import api from "../utils/api";
export default {
// vue生命周期函数
async asyncData(){
console.log("test load data..");
let categoryResult = await api.getRecommendCategories();
// 数据返回状态码为10000表示获取数据成功
if (categoryResult.code === 10000){
// 获取分类商品列表
let contentResult = await api.getRecommendContent(categoryResult.data[0].favorites_id);
if (contentResult.code === 10000){
return {categories: categoryResult.data,
content: contentResult.data.tbk_dg_optimus_material_response.result_list.map_data};
}
}else{
// TODO:错误处理
}
}
}
</script>
<style>
.recommend-menu-active{
border-bottom: #c9302c 2px solid;
color: #c9302c!important;
}
.recommend-category-box li{
font-size: 16px;
margin-left: 20px;
margin-right: 20px;
color: #8c8c8c;
cursor: pointer;
}
.recommend-category-box{
height: 60px;
line-height: 58px;
margin-top: 30px;
background: white;
box-shadow: 0 5px 10px #d4d4d4;
margin-bottom: 20px;
}
.recommend-category-box ul{
list-style: none;
}
</style>
需要注意大锯视频中的api是失效了的，原文:阳光沙滩商城的API文档 评论中也有提及。
保存，运行，刷新浏览器得到如下结果：
3.完善内容显示
代码如下：
<template>
<div class="container">
<div class="center-box">
<div class="recommend-category-box">
<ul class="clear-fix" >
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item, index) in categories" :key="index">
{{item.favorites_title}}
</li>
</ul>
</div>
<div class="recommend-content-list-box">
<div class="recommend-content-title">
<span>热/门/推/荐</span>
</div>
<div class="recommend-content-list clear-fix">
<div class="recommend-content-item float-left" v-for="(item, index) in content" :key="index">
<div class="recommend-item-cover">
<img :src="item.pict_url" alt="">
</div>
<div class="recommend-item-title" v-text="item.title"></div>
<div class="recommend-item-info">
<a class="buy_btn">领券购买</a>
<span class="recommend-original-price">原价：34.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import api from "../utils/api";
export default {
// vue生命周期函数
async asyncData(){
console.log("test load data..");
let categoryResult = await api.getRecommendCategories();
// 数据返回状态码为10000表示获取数据成功
if (categoryResult.code === 10000){
// 获取分类商品列表
let contentResult = await api.getRecommendContent(categoryResult.data[0].favorites_id);
if (contentResult.code === 10000){
return {categories: categoryResult.data,
content: contentResult.data.tbk_dg_optimus_material_response.result_list.map_data};
}
}else{
// TODO:错误处理
}
}
}
</script>
<style>
.buy_btn{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
color: #FFF;
background-color: #F56C6C;
border-color: #F56C6C;
}
.recommend-original-price{
margin-left: 10px;
color: #ebb563;
font-weight: 600;
}
.recommend-item-info{
margin-top: 10px;
}
.recommend-item-title{
margin-top: 10px;
margin-bottom: 10px;
/*控制显示行数，超出两行用省略号显示*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;
}
.recommend-content-item{
width: 265px;
height: 370px;
box-shadow: 0 5px 10px #d4d4d4;
padding: 10px 10px;
margin: 10px;
border-radius: 5px;
}
.recommend-item-cover img{
width: 243px;
height: 243px;
}
.recommend-menu-active{
border-bottom: #c9302c 2px solid;
color: #c9302c!important;
}
.recommend-category-box li{
font-size: 16px;
margin-left: 20px;
margin-right: 20px;
color: #8c8c8c;
cursor: pointer;
}
.recommend-category-box{
height: 60px;
line-height: 58px;
margin-top: 30px;
background: white;
box-shadow: 0 5px 10px #d4d4d4;
margin-bottom: 20px;
}
.recommend-category-box ul{
list-style: none;
}
</style>
效果如下图：
