Vue美食节项目-----------菜谱详情页

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="item.type">
          <strong>{
  {item.parent_name}}</strong>
          <span>{
  {item.name}}</span>
        </li>
      </ul>