美食杰----详情页（续写）

今天要讲的是美食杰详情页面，这个页面主要讲述的是菜品制作的详细步骤，其中分为三部分：

头部，内容和评价。

思路：

      根据menuId 请求数据(查看数据结构),渲染页面(如果没有menuld，提示框请登录)

      注意:数据结构过多，在保存到组件中时，提前写好默认值。避免在异步请求返回数据之前找不到属性。

      头部:

      1.根据数据，逐个渲染头部页面。用户信息中，query传入用户id，跳转个人空间。

      2收藏按钮:判断是否本人登录再显示。

      3.收藏功能:判断是否登录，再请求，否则提示框，请先登录。

      内容:

      1.逐个渲染数据中，菜品的步骤:编号使用数组下标+1即可(index) 。

      评论：

       1.在输入框里绑定v-model，实现双向数据绑定。

        2.在提交框里写一个点击事件，在评论完之后提交数据。

下面展示效果图：

头部：

 内容：

 评论：

 展示代码：

detail.vue:

<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: {
      async handler() {
        //来判断路由是否有信息
        let { menuId } = this.$route.query;
        if (menuId) {
          menuInfo({ menuId }).then(({ data }) => {
            this.menuInfo = data.info;
          });
        } else {
          this.$message({
            showClose: true,
            message: "请重新进入",
            type: "warning",
          });
        }
      },
      immediate: true,
    },
  },
};
</script>

detail-header.vue:

<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="!isOn