detail footer

 <template>
   <div class="article-footer-wrapper">
+    <slot name="before"></slot>
     <div class="tool-bar">
       <WidgetIconBtn class="item" type="fav" :pos-id="sceneId" :text="praiseCount" :articleId="articleId" :option="optionPraise"></WidgetIconBtn>
       <WidgetIconBtn class="item" type="star" :pos-id="sceneId" :text="favoriteCount" :articleId="articleId" :option="optionFav" ></WidgetIconBtn>
       <WidgetIconBtn class="item" type="msg" :text="commentCount" :option="optionComment" @click="onComment"></WidgetIconBtn>
     </div>
-    <div class="close ml20" @click="onClose">
-      <slot>收起</slot>
-    </div>
+    <slot name="after">
+      <div class="close ml20" @click="onClose">收起</div>
+    </slot>
   </div>
 </template>
 

@@ -23,7 +23,11 @@
       <ProductGroup :data="recomendProduct" model="2"></ProductGroup>
       <LayoutTitle class="rec-article-title">{{listTitle}}</LayoutTitle>
     </div>
-    <ArticleDetailFooter class="detail-fixed-footer" @on-comment-click="onComment">文中商品</ArticleDetailFooter>
+    <ArticleDetailFooter class="detail-fixed-footer" @on-comment-click="onComment">
+      <template v-slot:after>
+        <div class="article-goods">文中商品</div>
+      </template>
+    </ArticleDetailFooter>
   </div>
 </template>
 
@@ -296,5 +300,15 @@ export default {
   position: fixed;
   bottom: 0;
   z-index: 10;
+
+  .article-goods {
+    width: 200px;
+    color: white;
+    font-size: 32px;
+    line-height: 100px;
+    font-weight: 300;
+    background-color: #d0021b;
+    text-align: center;
+  }
 }
 </style>

@@ -15,10 +15,31 @@
       <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
       <ArticleItemTopics class="topics-wrap" :data="topicsData" :share="share"></ArticleItemTopics>
       <p class="publish-time">{{publishTime}}</p>
+      <ArticleDetailCommentList :dest-id="140838" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
+      <LayoutTitle class="rec-article-title">{{listTitle}}</LayoutTitle>
     </div>
 
-    <ArticleDetailCommentList :dest-id="140838" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
-    <LayoutTitle class="rec-article-title">{{listTitle}}</LayoutTitle>
+    <ArticleDetailFooter class="detail-fixed-footer" @on-comment-click="onComment">
+      <template v-slot:before>
+        <div class="footer-comment">
+          <CommentPlaceholder
+            ref="commentInput"
+            :share="share"
+            class="comment-input hover-opacity"
+            :dest-id="data.articleId"
+            :add-type="0"
+            :article-id="data.articleId"
+            :pos-id="0"
+            :column-type="1001"
+            @on-comment="onComment">
+            添加评论...
+          </CommentPlaceholder>
+        </div>
+      </template>
+      <template v-slot:after>
+        <div></div>
+      </template>
+    </ArticleDetailFooter>
   </div>
 </template>
 
@@ -29,6 +50,7 @@ import ArticleDetailCommentList from './comment-list';
 import ArticleItemHeader from '../article/article-item-header';
 import ArticleItemSlide from '../article/article-item-slide';
 import ArticleItemTopics from '../article/article-item-topics';
+import ArticleDetailFooter from './article-footer';
 import dayjs from 'utils/day';
 
 export default {
@@ -49,7 +71,6 @@ export default {
     return {
       showMoreOpt: false,
       slideIndex: 1,
-      commentColumnType: 1001,
       commentList: [],
       commentPage: 1,
       commentFetching: false,
@@ -110,6 +131,9 @@ export default {
     },
     onReply() {
 
+    },
+    onComment() {
+
     }
   },
   components: {
@@ -117,7 +141,8 @@ export default {
     ArticleItemHeader,
     ArticleItemSlide,
     ArticleItemTopics,
-    ArticleDetailCommentList
+    ArticleDetailCommentList,
+    ArticleDetailFooter
   }
 };
 </script>
@@ -166,4 +191,32 @@ export default {
   margin: 14px 0 4px;
   border-top: 1px solid #f0f0f0;
 }
+
+.detail-fixed-footer {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+
+  .footer-comment {
+    width: 312px;
+    margin-left: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .comment-input {
+      width: 100%;
+      height: 68px;
+      line-height: 68px;
+      font-size: 28px;
+      color: #b0b0b0;
+      background: #f0f0f0;
+      padding: 0 20px;
+      border-radius: 35px;
+      box-sizing: border-box;
+
+    }
+  }
+}
 </style>