1.点击菜单,跳转到菜谱详情页
1.根据menuld请求数据,渲染页面
注意
数据结构过多,在保存到组件中时,提前写好默认值。避免在异步请求返回数据之前找不到数据
<template>
<div class="menu-detail">
<detail-header :info="menuInfo"></detail-header>
<detail-content :info="menuInfo"></detail-content>
<Comment :info="menuInfo"></Comment>
</div>
</template>
<script>
import DetailHeader from './detail-header'
import DetailContent from './detail-content'
import Comment from './comment'
import {menuInfo} from '@/service/api';
export default {
components: {DetailHeader, DetailContent, Comment},
data(){
return {
menuInfo:{
userInfo:{},
raw_material:{
main_material:[],
accessories_material:[]
},
steps:[]
} //接收菜谱的详细信息
}
},
watch:{
$route:{
handler(){
let {menuId} = this.$route.query;
if(menuId){//发送请求
menuInfo({menuId}).then(({data}) =>{
console.log(data)
this.menuInfo = data.info;
})
}else{
this.$message({
message:"重进",
type:"warrning"
})
}
},
immediate:true
}
}
}
</script>
2.头部
1.根据数据,逐个渲染头部页面。用户信息,query传入用户id,跳转个人空间
2.收藏按钮,判断是不是本人登录再显示
3.收藏功能:判断是否登录在请求,否则弹出请登录
<template>
<section class="detail-header">
<img class="detail-img" :src="info.product_pic_url" />
<div class="detail-header-right">
<div class="detail-title clearfix">
<h1 class="title">{
{info.title}}</h1>
<!--
1. 不显示,这个菜谱是当前用户发布的
2. 显示,后端返回一个是否收藏的字段
-->
<div class="detail-collection" v-if="!isOnwer">
<!-- collection-at no-collection-at-->
<a
href="javascript:;"
class="collection-at"
:class="{ 'no-collection-at' :info.isCollection}"
@click="toggleCollection"
>
{
{
info.isCollection ? "已收藏" : "收藏"
}}
</a>
</div>
</div>
<ul class="detail-property clearfix">
<li v-for="item in info.properties_show" :key=