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=
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值