首页暂时写好了，下面需要书写的就是点击购买按钮，跳转到领券页面中。
这里主要是优化点击购买按钮就行跳转，当没有优惠券如何处理以及样式的优化，代码主要修改与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 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">
<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-original-price" v-text="item.coupon_click_url===null?'晚了，无优惠券了':'原价：'+item.zk_final_price"></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{
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-original-price{
margin-left: 10px;
color: #ebb563;
font-weight: 600;
}
.recommend-item-info{
margin-top: 10px;
}
.recommend-item-title a{
text-decoration: none;
color: #47494e;
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>
页面保存，运行结果如下图： 
