美食杰项目---商品详情

详情头部

<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">菜品名称</h1>
          <!--
            1. 不显示，这个菜谱是当前用户发布的
            2. 显示，后端返回一个是否收藏的字段
          -->
          <div class="detail-collection" v-if="!isOnwer">
            <!-- collection-at  no-collection-at-->
            <a 
              href="javascript:;"  
              class="collection-at"
              @click="toggleCollection"
            > 
                收藏
            </a>
          </div>
      </div>
      
      <ul class="detail-property clearfix">
        <li v-for="(item,index) 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="/space">
          <img :src="info.userInfo.avatar">
        </router-link>
        <div class="info">
          <h4>
            <router-link id="tongji_author"  to="/space">
              {{info.name}}
            </router-link>
          </h4>
          <span>菜谱：{{info.userInfo.work_menus_len}}　关注：{{info.userInfo.follows_len}}　粉丝:{{info.userInfo.follows_len}}</span>
          <strong>{{info.createdAt}}</strong>
        </div>
      </div>

    </div>
  </section>
</template>
<script>
import {toggleCollection} from '@/service/api'
export default {
  props:{
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {

  },
  methods:{
    toggleCollection(){
      
    }
  }
}
</script>

<style lang="stylus">
.detail-header
  margin-top 40px
  display flex
  background-color #fff
  .detail-img
    width 328px
  .detail-header-right
    width 662px
    
    .detail-title
      box-sizing border-box
      width 100%
      padding-left: 25px;
      border-bottom: 1px solid #eee;
      .title
        max-width: 288px;
        height: 44px;
        padding: 28px 0px;
        line-height: 44px;
        font-size: 36px;
        color: #333;
        float left
      .collected
        background: #999;
      .collecte
        background: #ff3232;
      .detail-collection
        float right
        display block
        height: 50px;
        line-height: 44px;
        color #fff
        padding: 0px 14px;
        text-align center
        
        margin-top 25px
        cursor pointer
        a 
          display: inline-block;
          padding: 3px 0;
          width: 50px;
          color: #fff;
          text-align: center;
          line-height 20px
        .collection-at
          background-color: #ff3232;
        .no-collection-at
          background-color: #999;
    
    .detail-property
      margin-left 2px
      overflow hidden
      li 
        width 199px
        float left
        height 48px
        border-right 1px solid #eee
        padding 18px 0px 18px 20px
        border-bottom 1px solid #eee
        strong 
          color #999
          line-height 18px
          display block
          height 18px
        span 
          display block
          font-size 24px
          color #ff3232
          line-height 30px
          width 100px
        
    .user
      height 70px
      padding 20px 0px 20px 20px
      overflow hidden
      font-size 12px
      a.img
        display block
        height 70px
        width 70px
        float left
        position relative
        border-radius 35px
        overflow hidden
        img
          display block
          height 70px
          width 70px
      .info
        float left
        padding-left 10px
        height 70px
      h4
        height 22px
        line-height 22px
        font-size 14px
        color #ff3232
        position relative
        a
          color #ff3232
          display inline-block
          vertical-align top
          padding-right 0px
          height 22px
      span 
        line-height 24px
        display block
        color #666
        padding-top 4px
      strong 
        line-height 22px
        color #999


</style>

详情中间

<template>
  <section class="detail-content">
    <div class="detail-materials">
      <p class=""><strong>“</strong>这道菜的描述<strong>”</strong></p>
      <h2>用料</h2>
      <div class="detail-materials-box clearfix">
        <h3>主料</h3>
        <ul>
          <li class=""  v-for="(item,index) in info.raw_material.main_material" :key="item._id">
          {{item.name}}
            <span>{{item.specs}}</span>
          </li>
        </ul>
      </div>
      <div class="detail-materials-box clearfix">
        <h3>辅料</h3>
        <ul>
          <li class=""  v-for="(item,index) in info.raw_material.accessories_material" :key="item._id">
            {{item.name}}

            <span></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="detail-explain">
      <h2>菜的做法</h2>
      <section class="detail-section clearfix" v-for="(item,index) in info.steps" :key="item._id">
        <em class="detail-number">{{index+1}}.</em>
        <div class="detail-explain-desc" >
          <p >  
          <img class="conimg" :src="item.img_url" alt="">
          {{item.describe}}
          </p>
        
        </div>
      </section>
      <div class="skill">
        <h2>烹饪技巧</h2>
        <p>{{info.skill}}</p>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: 'DetailContent',
  props:{
    info:{
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang="stylus">
.detail-content
  margin-top 20px
  h2 
    font-size 24px
    color #333
    height 66px
    line-height 66px
    border-bottom 1px solid #eee
    text-indent 24px
    font-family Microsoft Yahei
    display block
  .detail-materials
    background-color #fff
    > p 
      line-height 24px
      font-size 14px
      padding 20px 24px 10px
      color #666
    .detail-materials-box
      margin-bottom 20px
      h3 
        width 48px
        height 22px
        color #999
        background #f5f5f5
        border 1px solid #ddd
        text-align center
        line-height 24px
        margin 14px 5px 14px 25px
        float left
      ul 
        float left
        width 910px
        li 
          float left
          box-sizing border-box
          height 54px
          line-height 54px
          margin 0 5px 5px 5px
          padding 0 10px
          border 1px solid #eee
  .detail-explain
    background-color #fff
    padding-bottom 20px
    .detail-section
      .detail-number
        font-size 50px
        color #ff3232
        font-style italic
        text-align center
        font-family arial
        height 50px
        width 100px
        display block
        float left
        line-height 50px
      .detail-explain-desc
        float left
        width 650px
        overflow hidden
        p 
          line-height 24px
          color #666
          padding 10px 20px 10px 0px
          position relative
          font-size 14px
        img 
          max-width 550px
    .skill
      p 
        font-size 12px
        padding-left 100px
        padding-top 10px
    .conimg{
      width:50px;
      height:50px;
    }
</style>

详情尾部

<template>
  <div class="comment-box">
    <h2>吃货们的讨论</h2>
    <div class="comment-text">
      <a href="javascript:;" class="useravatar">
        <img :src="info.userInfo.avatar">
      </a>
      <!-- v-if="!isLogin" -->
      <div v-if="!isLogin">请先登录后，再评论<router-link :to="{ path: '/login' }" style="float: right;">登录
        </router-link>
      </div>
      <div @click="ji">dsd</div>
      <div class="comment-right">
        <el-input type="textarea" :rows="5" :cols="50" placeholder="请输入内容" v-model="commentText">
        </el-input>
        <div class="comment-button">
          <el-button class="send-comment" type="primary" size="medium" @click="send">提交</el-button>
        </div>
      </div>
    </div>
    <div class="comment-list-box">
      <ul class="comment-list">
        <li v-for="item in comments">
          <a target="_blank" href="https://i.meishi.cc/cook.php?id=14026963" class="avatar">


          </a>
          <router-link to="" class="avatar">
            <img :src="item.userInfo.avatar">
            <h5>{{ item.userInfo.name }}</h5>
          </router-link>
          <div class=" comment-detail">
            <p class="p1">{{ item.commentText }}</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: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      text: '',
      commentText: '',
      comments: []
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin
    }
  },
  mounted() {
    // getComments({ menuId: this.info.menuId }).then(res => {
    //   console.log(res)
    //   // this.text = res
    //   // return res
    // })
  },
  methods: {
    ji() {
      // console.log(this.getComments.data)
      console.log(getComments(this.info.menuId))
      console.log(this.text)
    },
    async send() {
      // 发送数据 （两种方式）
      // 1.query中获取    2.父组件传入的info
      let data = await postComment({ menuId: this.info.menuId, commentText: this.commentText });
      console.log(data)
      this.comments.unshift(data.data.comments);//向前添加数据
      this.commentText = '';//清除上次里面的评论
    },
    inName(inName){
      this.$store.commit('inName', inName)
    }
  },
  watch: {
    info(v) {
      console.log(v)
      getComments({ menuId: v.menuId }).then((data) => {
        console.log(data)
        // this.text = data.data
        this.comments = data.data.comments


      })
    }
  }
}
</script>
<style lang="stylus">
.comment-box
  background-color #ffffff
  margin-top 20px
  padding 0 20px
  h2
    font-size 24px
    color #333
    height 66px
    line-height 66px
    border-bottom 1px solid #eee
  .comment-text
    margin-top 20px
    .useravatar
      margin-right 20px
      img 
        vertical-align top
        width 36px
        height 36px
    .comment-right 
      display inline-block
      width 80%
      .comment-button
        text-align right 
        margin-top 10px
        .send-comment
          background #ff3232
          border none
  .comment-list-box
    border-top 1px solid #eee
    margin-top 20px
    padding-top 30px


    ul li 
      border-bottom 1px solid #eee
      margin-bottom 20px
      .avatar
        height 82px
        width 50px
        overflow hidden
        display inline-block
        h5
          white-space nowrap
        img 
          height 50px
          width 50px
      .comment-detail
        display inline-block
        vertical-align top
        margin-left 20px
        width 80%
        p 
          margin 0
          font-size 14px
        .info
          margin-top 10px
          color #999
          .thumbs
            cursor pointer
            
            font-size 18px
          .thumbs-actve
            color red
      


</style>