美食节------菜谱详情

看效果：

detail.vue:

<template><div class="menu-detail"><detail-header :info='info'></detail-header><detail-content :cai='info'></detail-content><Comment :title='info.title'></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 {info:{userInfo:{},raw_material:{main_material:[], //accessories_material:[]},steps:[]}}},watch:{$route:{handler(value) {console.log(value.query.menuId);if(value.query.menuId){menuInfo({menuId:value.query.menuId}).then(data=>{console.log(data.data.info);this.info = data.data.info})}else{this.$message({type:'warning',showClose:true,message: '请重新进入'})}},immediate:true}}}</script>

组件DetailHeader:

<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><div class='detail-collection' v-if='!isOnwer'><ahref="javascript:;"class='collection-at':class='{"no-collection-at":info.isCollection}'@click='bbb()'>{{info.isCollection? '已收藏' :'收藏'}}</a></div></div><ul class="detail-property clearfix"><liv-for='item in info.properties_show':key='item.parent_type'><strong>{{item.parent_name}}</strong><span>{{item.name}}</span></li></ul><div class="user"><router-link id="tongji_author_img" class="img" :to="{name:'space',query:{userId:info.userInfo.userId}}"><img :src="info.userInfo.avatar"></router-link><div class="info"><h4><router-link id="tongji_author" :to="{name:'space',query:{userId:info.userInfo.userId}}">{{info.userInfo.name}}</router-link></h4><span>菜谱：{{info.userInfo.work_menus_len}}/关注：{{info.userInfo.following_len}}/粉丝：{{info.userInfo.follows_len}}</span><strong>{{info.userInfo.createdAt}}</strong></div></div></div></section></template><script>import {toggleCollection} from '@/service/api'export default {data(){return {}},props:{info: {type: Object,default: () => ({})}},computed: {isOnwer(){return this.info.userInfo.userId == this.$store.state.userInfo.userId}},methods:{bbb(){if(this.$store.getters.isLogin){toggleCollection({menuId:this.$route.query.menuId}).then(data=>{// console.log(data.data.isCollection);this.info.isCollection = data.data.isCollectionif(this.info.isCollection){this.$message({type:'success',showClose:true,message: '收藏成功,快去试试看吧'})}else{this.$message({type:'error',showClose:true,message: '取消收藏,你吃屎吧'})}})}else{this.$message({type:'warning',showClose:true,message: '给老子先登录'})}}},}</script><style lang="stylus">.detail-headermargin-top 40pxdisplay flexbackground-color #fff.detail-imgwidth 328px.detail-header-rightwidth 662px.detail-titlebox-sizing border-boxwidth 100%padding-left: 25px;border-bottom: 1px solid #eee;.titlemax-width: 288px;height: 44px;padding: 28px 0px;line-height: 44px;font-size: 36px;color: #333;float left.collectedbackground: #999;.collectebackground: #ff3232;.detail-collectionfloat rightdisplay blockheight: 50px;line-height: 44px;color #fffpadding: 0px 14px;text-align centermargin-top 25pxcursor pointeradisplay: inline-block;padding: 3px 0;width: 50px;color: #fff;text-align: center;line-height 20px.collection-atbackground-color: #ff3232;.no-collection-atbackground-color: #999 !important;.detail-propertymargin-left 2pxoverflow hiddendisplay:flexflex-shrink :1flex-wrap :wrapjustify-content :centergap:20%;liwidth 199pxfloat leftheight 48pxborder-right 1px solid #eeepadding 18px 0px 18px 20pxborder-bottom 1px solid #eeestrongcolor #999line-height 18pxdisplay blockheight 18pxspandisplay blockfont-size 24pxcolor #ff3232line-height 30pxwidth 100px.userheight 70pxpadding 20px 0px 20px 20pxoverflow hiddenfont-size 12pxa.imgdisplay blockheight 70pxwidth 70pxfloat leftposition relativeborder-radius 35pxoverflow hiddenimgdisplay blockheight 70pxwidth 70px.infofloat leftpadding-left 10pxheight 70pxh4height 22pxline-height 22pxfont-size 14pxcolor #ff3232position relativeacolor #ff3232display inline-blockvertical-align toppadding-right 0pxheight 22pxspanline-height 24pxdisplay blockcolor #666padding-top 4pxstrongline-height 22pxcolor #999</style>

组件DetailContent:

<template><section class="detail-content"><div class="detail-materials"><p class=""><strong>“</strong>{{cai.product_story}}<strong>”</strong></p><h2>用料</h2><div class="detail-materials-box clearfix" v-if='cai.raw_material.main_material.length'><h3>主料</h3><ul><li class=""v-for='item in cai.raw_material.main_material'>{{item.name}}<span>{{item.specs}}</span></li></ul></div><div class="detail-materials-box clearfix" v-if='cai.raw_material.accessories_material.length'><h3>辅料</h3><ul><li class=""v-for='item in cai.raw_material.accessories_material':key='item._id'>{{item.name}}<span>适量</span></li></ul></div></div><div class="detail-explain"><h2>{{cai.title}}的做法</h2><section class="detail-section clearfix"v-for='item,keys in cai.steps':key='item._id'><em class="detail-number">{{keys+1}}.</em><div class="detail-explain-desc"><p>{{item.describe}}</p><img class="conimg" :src="item.img_url" alt=""></div></section><div class="skill"><h2>烹饪技巧</h2><p>{{cai.skill}}</p></div></div></section></template><script>export default {name: 'DetailContent',data(){return{}},props:{cai:{type:Object,default:()=>({})}}}</script><style lang="stylus">.detail-contentmargin-top 20pxh2font-size 24pxcolor #333height 66pxline-height 66pxborder-bottom 1px solid #eeetext-indent 24pxfont-family Microsoft Yaheidisplay block.detail-materialsbackground-color #fff> pline-height 24pxfont-size 14pxpadding 20px 24px 10pxcolor #666.detail-materials-boxmargin-bottom 20pxh3width 48pxheight 22pxcolor #999background #f5f5f5border 1px solid #dddtext-align centerline-height 24pxmargin 14px 5px 14px 25pxfloat leftulfloat leftwidth 910pxlifloat leftbox-sizing border-boxheight 54pxline-height 54pxmargin 0 5px 5px 5pxpadding 0 10pxborder 1px solid #eee.detail-explainbackground-color #fffpadding-bottom 20px.detail-section.detail-numberfont-size 50pxcolor #ff3232font-style italictext-align centerfont-family arialheight 50pxwidth 100pxdisplay blockfloat leftline-height 50px.detail-explain-descfloat leftwidth 650pxoverflow hiddenpline-height 24pxcolor #666padding 10px 20px 10px 0pxposition relativefont-size 14pximgmax-width 550px.skillpfont-size 12pxpadding-left 100pxpadding-top 10px</style>

组件comment:

<template><div class="comment-box"><h2>{{title}}的讨论</h2><div class="comment-text"><router-link to='/space' class="useravatar" v-if='$store.state.userInfo.avatar'><img :src="$store.state.userInfo.avatar" alt=""></router-link><div v-if="!isLogin">请先登录后，再评论<router-link to="/login" style='color:#ff3232'>登录</router-link></div><div class="comment-right"v-if='this.$store.getters.isLogin'><el-inputtype="textarea":rows="5":cols="50"placeholder="请输入内容"v-model='commentRight'></el-input><div class="comment-button" ><el-buttonclass="send-comment"type="primary"size="medium"@click='sub()'>提交</el-button></div></div></div><div class="comment-list-box"><ul class="comment-list"><li v-for='item in comments'><router-link :to="{name:'space',query:{userId:item.userId}}" class="avatar"><img :src="item.userInfo.avatar"><h5>{{item.userInfo.name}}</h5></router-link><div class="comment-detail"><p class="p1">{{mentText}}</p><div class="info clearfix"><span style="float: left;">{{item.updateAt}}</span></div></div></li></ul></div></div></template><script>import {getComments,postComment} from '@/service/api';export default {name: 'Comment',props:{title:String},data(){return {isLogin:this.$store.getters.isLogin,comments:[],commentRight:''}},computed: {},methods:{sub(){if(mentRight != '' && mentRight.trim() != ''){console.log(mentRight);postComment({menuId:this.$route.query.menuId,commentText:mentRight}).then(data=>{console.log(data);})getComments({menuId:this.$route.query.menuId}).then(res=>{// console.log(ments);ments = ments})}else{this.$message({message: '发个空评论给谁看呢??',type: 'error'});}mentRight = '';}},mounted(){if(this.$route.query.menuId){getComments({menuId:this.$route.query.menuId}).then(res=>{console.log(ments);ments = ments})}}}</script><style lang="stylus">.comment-boxbackground-color #ffffffmargin-top 20pxpadding 0 20pxh2font-size 24pxcolor #333height 66pxline-height 66pxborder-bottom 1px solid #ment-textmargin-top 20px.useravatarmargin-right 20pximgvertical-align topwidth 36pxheight ment-rightdisplay inline-blockwidth 80%.comment-buttontext-align rightmargin-top 10px.send-commentbackground #ff3232border ment-list-boxborder-top 1px solid #eeemargin-top 20pxpadding-top 30pxul liborder-bottom 1px solid #eeemargin-bottom 20px.avatarheight 82pxwidth 50pxoverflow hiddendisplay inline-blockh5white-space nowrapimgheight 50pxwidth ment-detaildisplay inline-blockvertical-align topmargin-left 20pxwidth 80%pmargin 0font-size 14px.infomargin-top 10pxcolor #999.thumbscursor pointerfont-size 18px.thumbs-actvecolor red</style>