前言：
本文给大家讲解，美食杰项目中 实现菜品信息页的效果，和具体代码。
具体实现思路：
- 跳转时传递菜品 id
- 根据菜品 id 进行（获取菜品详细信息，获取评论信息，发布评论，收藏/取消收藏）
- 点击收藏，判断是否收藏如果收藏则取消收藏，未收藏则收藏
- 给 input 框输入信息，点击提交发布评论信息
- 提交后的评论信息添加到开头
- 根据效果图进行渲染
步骤：
1. 展示美食杰菜谱大全效果
美食杰菜品信息页
2. 引入element-ui
点击跳转至 element-ui 中 input 输入框使用方法：https://element.eleme.cn/#/zh-CN/component/input
点击跳转至 element-ui 中 button 按钮使用方法：https://element.eleme.cn/#/zh-CN/component/button
3. 代码
菜品信息页中可以引入 element-ui 框架使用，本文引入了 input 输入框方法，button 则使用了原生 js。
当然静态页面其他地方你也可以使用 element-ui 框架或其他框架进行布局。
<template> <div class="box"> <!-- 个人信息 --> <div class="header"> <img :src="menuInfo.product_pic_url" class="head" /> <div class="right"> <div class="title"> {{ menuInfo.title }} <a href="#" @click="collect" :class="{ action: menuInfo.isCollection }" > <!-- 判断是否收藏，样式不同 --> {{ menuInfo.isCollection ? "已收藏" : "未收藏" }} </a> </div> <div class="introduce"> <span v-for="item in menuInfo.properties_show" :key="item.parent_type" > {{ item.parent_name }} <br /> <b>{{ item.name }}</b> </span> </div> <div class="message"> <img :src="menuInfo.userInfo.avatar" /> <div class="bottom"> <p class="name">{{ menuInfo.userInfo.name }}</p> <p> 菜谱：{{ menuInfo.userInfo.work_menus_len }} / 关注：{{ menuInfo.userInfo.following_len }} / 粉丝：{{ menuInfo.userInfo.follows_len }} </p> <p class="time">{{ menuInfo.createdAt }}</p> </div> </div> </div> </div> <!-- 用料 --> <div class="seasoning"> <p class="product_story">{{ menuInfo.product_story }}</p> <p class="title">用料</p> <div class="flavour"> <p>主料</p> <span v-for="item in menuInfo.raw_material.main_material" :key="item._id" > {{ item.name }} {{ item.specs }} </span> </div> <div class="flavour"> <p>辅料</p> <span v-for="item in menuInfo.raw_material.accessories_material" :key="item._id" > {{ item.name }} {{ item.specs }} </span> </div> </div> <!-- 步骤 --> <div class="practice"> <p class="title">{{ menuInfo.title }}的做法</p> <li v-for="(item, index) in menuInfo.steps" :key="index"> <i>{{ index + 1 }}.</i> <img :src="item.img_url" alt="" /> <span>{{ item.describe }}</span> </li> <p class="skill">烹饪技巧</p> <p class="skills">{{ menuInfo.skill }}</p> </div> <!-- 评论 --> <div class="comments"> <p class="title">{{ menuInfo.title }}的讨论</p> <div class="message"> <img :src="$store.state.userInfo.avatar" alt="" v-if="$store.getters.islogin" /> <!-- 判断是否登录，登录显示发布评论，未登录不显示 --> <p v-if="!$store.getters.islogin">请先登录后，在进行评论</p> <br /> <el-input type="textarea" :rows="5" :cols="500" placeholder="请输入内容" v-model="commentText" class="textarea" v-if="$store.getters.islogin" > </el-input> <br /> <button class="btn" v-if="$store.getters.islogin" @click="release"> 提交 </button> </div> <p class="xian"></p> <!-- 已发布评论 --> <ul class="information"> <li v-for="item in comments" :key="item.commentId"> <span class="name">{{ item.userInfo.name }}</span> <img :src="item.userInfo.avatar" alt="" /> <span class="mes"> <p class="text">{{ item.commentText }}</p> <p class="time">{{ item.updateAt }}</p> </span> </li> </ul> </div> </div> </template> <script> // 收藏，菜谱信息，获取评论信息，提交评论信息 import { toggleCollection, menuInfo, getComments, postComment, } from "@/connector/api"; export default { data() { return { // 菜谱信息 menuInfo: [], // 评论信息 comments: [], // 发布的内容 commentText: "", }; }, mounted() { // 获取进入菜品的 id const { menuId } = this.$route.query; // 根据菜品 id 获取菜品信息 menuInfo({ menuId: menuId }).then(({ data }) => { // console.log(data); this.menuInfo = data.info; }); // 根据菜品 id 获取评论信息 getComments({ menuId: menuId }).then(({ data }) => { // console.log(data.comments); this.comments = data.comments; }); }, methods: { // 收藏 async collect() { // 获取进入菜品的 id const { menuId } = this.$route.query; // 已收藏则取消收藏，未收藏则收藏 const { data } = await toggleCollection({ menuId: menuId }); // 给菜品信息进行更新 this.menuInfo.isCollection = data.isCollection; }, // 发布 async release() { // 获取进入菜品的 id const { menuId } = this.$route.query; // 根据菜品 id 发布评论 const data = await postComment({ menuId: menuId, // 发布的内容 commentText: this.commentText, }); // 添加到开头 this.comments.unshift(data.data.comments); // 发布成功后发布信息框为空 this.commentText = ""; }, }, }; </script> <style lang="scss" scoped> .box { width: 990px; margin: 20px auto 0; .header { background-color: #fff; display: flex; .head { width: 25%; height: 350px; } .right { width: 75%; .title { display: flex; justify-content: space-between; padding: 20px 30px; border-bottom: 1px solid gainsboro; font-size: 25px; a { font-size: 16px; padding: 10px 15px; background-color: red; border-radius: 10px; text-decoration: none; color: #fff; } .action { background-color: gainsboro; } } .introduce { width: 65%; display: flex; flex-wrap: wrap; span { width: 50%; padding: 15px 10px; display: inline-block; border-bottom: 1px solid gainsboro; border-right: 1px solid gainsboro; font-size: 15px; b { color: red; font-weight: 400; font-size: 25px; } } } .message { display: flex; img { width: 50px; height: 50px; margin: 25px 0 0 25px; border-radius: 50%; } .bottom { margin: 25px 0 0 20px; font-size: 12px; color: gainsboro; p { margin: 0; padding: 1px 0; } .name { color: red; } } } } } .seasoning { background-color: #fff; .product_story { padding: 10px 20px; } .title { font-size: 20px; padding: 0 20px 10px; border-bottom: 1px solid gainsboro; } .flavour { p { width: 40px; text-align: center; padding: 2px 0; margin-left: 20px; font-size: 12px; background-color: rgb(241, 241, 241); border: 1px solid gray; } span { display: inline-block; padding: 5px; font-size: 14px; margin: 0 0 20px 5px; border: 1px solid gray; } } } .practice { background-color: #fff; .title { font-size: 20px; padding: 20px; border-bottom: 1px solid gainsboro; } li { list-style: none; padding: 10px 20px; i { color: red; font-size: 40px; } img { padding: 0 10px; } } .skill { padding: 10px 20px 20px; border-bottom: 1px solid gainsboro; font-size: 20px; } .skills { padding: 10px 0 20px 50px; } } .comments { background-color: #fff; padding: 0 20px; .title { padding: 20px 0; font-size: 20px; border-bottom: 1px solid gainsboro; } .message { width: 70%; img { width: 50px; height: 50px; } p { text-align: center; margin: 0; } .btn { padding: 10px 20px; border: none; background-color: red; color: #fff; margin-left: 89.9%; } } .xian { height: 1px; background-color: gainsboro; } .information { padding: 0; li { margin: 10px 0; display: flex; list-style: none; align-items: center; color: #333; img { width: 70px; height: 70px; margin: 0 20px; } .mes { .text { font-size: 18px; } .time { color: gainsboro; } } } } } } </style>
总结：
总结：
以上就是 美食杰项目 中 菜品信息的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
