获取对应分类的商品
前面我们获取到了分类的内容,也整出来了,对吧。
接下来,我们要根据分类的内容,去获取到对应的商品列表
接口请看前面的接口文档
主要代码
获取分类数据,再获取对应分类的内容,目前我们获取的第一个数据。
async asyncData() {
console.log("test load data....");
let categoryResult = await api.getRecommendCategories();
if (categoryResult.code === 10000) {
//请求分类成功
//去获取分类商品列表
let contentResult = await api.getRecommendContent(categoryResult.data[0].favorites_id);
//console.log(contentResult.data.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item);
let titleArray = categoryResult.data[0].favorites_title.split('');
if (contentResult.code === 10000) {
return {
categories: categoryResult.data,
content: contentResult.data,
currentCategory: titleArray.join("<em>/</em>")
};
}
} else {
//TODO:请求分类失败
}
}
获取到内容以后,我们就可以去渲染了。
<template>
<section 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" v-text="item.favorites_title">
</li>
</ul>
</div>
<div class="recommend-content-list-box">
<div class="recommend-content-title">
<span v-html="currentCategory"></span>
</div>
<div class="recommend-content-list clear-fix">
<div class="recommend-content-item float-left"
v-for="(item,index) in content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item" :key="index">
<div class="recommend-item-cover">
<img :src="item.pict_url">
</div>
<div class="recommend-item-title">
<a v-text="item.title" :href="item.coupon_click_url!==null?item.coupon_click_url:item.click_url"
target="_blank"></a>
</div>
<div class="recommend-item-info">
<a v-if="item.coupon_click_url!==null" class="buy-btn" :href="item.coupon_click_url"
target="_blank">领券购买</a>
<span class="recommend-prise" v-text="item.coupon_click_url===null?'晚了,无优惠券':'原价:'+item.zk_final_price">原价:34.00</span>
</div>
<span class="recommend-coupon-info" v-if="item.coupon_info!==null" v-text="item.coupon_info">
</span>
</div>
</div>
</div>
</div>
</section>
</template>
样式如下:
<style>
.recommend-content-title span {
font-size: 20px;
font-weight: 600;
color: #4D555D;
font-style: normal;
margin: 0 3px;
}
.recommend-content-title em {
margin-left: 5px;
margin-right: 5px;
font-weight: 400;
font-size: 16px;
}
.recommend-content-title {
text-align: center;
}
.recommend-coupon-info {
position: absolute;
right: 12px;
top: 20px;
padding: 5px 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: #c9302c;
color: #fff;
}
.buy-btn {
text-decoration: none;
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-prise {
margin-left: 10px;
font-weight: 600;
color: #ebb563;
}
.recommend-item-info {
margin-top: 10px;
}
.recommend-item-title a {
margin-top: 10px;
margin-top: 10px;
text-decoration: none;
color: #47494e;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.recommend-content-item {
width: 265px;
position: relative;
box-shadow: 0 5px 10px #d4d4d4;
background: #fff;
padding: 10px 10px;
margin: 10px;
height: 370px;
}
.recommend-item-cover img {
border-radius: 5px;
width: 243px;
height: 243px;
}
.recommend-menu-active {
border-bottom: #c9302c 2px solid;
color: #c9302c !important;
}
.recommend-category-box li {
font-size: 16px;
cursor: pointer;
margin-left: 20px;
color: #8c8c8c;
margin-right: 20px;
}
.recommend-category-box {
height: 60px;
margin-top: 30px;
margin-bottom: 30px;
background: #fff;
line-height: 58px;
box-shadow: 0 5px 10px #d4d4d4;
}
.recommend-category-box ul {
list-style: none;
}
</style>
本页面代码
<template>
<section 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" v-text="item.favorites_title">
</li>
</ul>
</div>
<div class="recommend-content-list-box">
<div class="recommend-content-title">
<span v-html="currentCategory"></span>
</div>
<div class="recommend-content-list clear-fix">
<div class="recommend-content-item float-left"
v-for="(item,index) in content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item" :key="index">
<div class="recommend-item-cover">
<img :src="item.pict_url">
</div>
<div class="recommend-item-title">
<a v-text="item.title" :href="item.coupon_click_url!==null?item.coupon_click_url:item.click_url"
target="_blank"></a>
</div>
<div class="recommend-item-info">
<a v-if="item.coupon_click_url!==null" class="buy-btn" :href="item.coupon_click_url"
target="_blank">领券购买</a>
<span class="recommend-prise" v-text="item.coupon_click_url===null?'晚了,无优惠券':'原价:'+item.zk_final_price">原价:34.00</span>
</div>
<span class="recommend-coupon-info" v-if="item.coupon_info!==null" v-text="item.coupon_info">
</span>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import api from '../utils/api';
export default {
components: {
AppLogo
},
async asyncData() {
console.log("test load data....");
let categoryResult = await api.getRecommendCategories();
if (categoryResult.code === 10000) {
//请求分类成功
//去获取分类商品列表
let contentResult = await api.getRecommendContent(categoryResult.data[0].favorites_id);
//console.log(contentResult.data.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item);
let titleArray = categoryResult.data[0].favorites_title.split('');
if (contentResult.code === 10000) {
return {
categories: categoryResult.data,
content: contentResult.data,
currentCategory: titleArray.join("<em>/</em>")
};
}
} else {
//TODO:请求分类失败
}
}
}
</script>
<style>
.recommend-content-title span {
font-size: 20px;
font-weight: 600;
color: #4D555D;
font-style: normal;
margin: 0 3px;
}
.recommend-content-title em {
margin-left: 5px;
margin-right: 5px;
font-weight: 400;
font-size: 16px;
}
.recommend-content-title {
text-align: center;
}
.recommend-coupon-info {
position: absolute;
right: 12px;
top: 20px;
padding: 5px 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: #c9302c;
color: #fff;
}
.buy-btn {
text-decoration: none;
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-prise {
margin-left: 10px;
font-weight: 600;
color: #ebb563;
}
.recommend-item-info {
margin-top: 10px;
}
.recommend-item-title a {
margin-top: 10px;
margin-top: 10px;
text-decoration: none;
color: #47494e;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.recommend-content-item {
width: 265px;
position: relative;
box-shadow: 0 5px 10px #d4d4d4;
background: #fff;
padding: 10px 10px;
margin: 10px;
height: 370px;
}
.recommend-item-cover img {
border-radius: 5px;
width: 243px;
height: 243px;
}
.recommend-menu-active {
border-bottom: #c9302c 2px solid;
color: #c9302c !important;
}
.recommend-category-box li {
font-size: 16px;
cursor: pointer;
margin-left: 20px;
color: #8c8c8c;
margin-right: 20px;
}
.recommend-category-box {
height: 60px;
margin-top: 30px;
margin-bottom: 30px;
background: #fff;
line-height: 58px;
box-shadow: 0 5px 10px #d4d4d4;
}
.recommend-category-box ul {
list-style: none;
}
</style>
运行效果
详情请同学们去学习视频啦!