add article detail

@@ -2,7 +2,9 @@
   <div class="article">
     <ArticleBar class="header"></ArticleBar>
     <ArticleBody class="body"></ArticleBody>
-    <ArticleFooter class="footer"></ArticleFooter>
+    <ArticleFooter class="footer" @on-comment-click="onCommentClick"></ArticleFooter>
+
+    <CommentActionSheet ref="actionSheet"></CommentActionSheet>
   </div>
 </template>
 
@@ -11,16 +13,41 @@
 import ArticleBar from './components2/article-bar';
 import ArticleFooter from './components2/article-footer';
 import ArticleBody from './components2/article-body';
+import CommentActionSheet from './components/comment-action-sheet';
+
+import { createNamespacedHelpers } from 'vuex';
+
+const { mapActions } = createNamespacedHelpers('article');
 
 export default {
   name: 'ArticleDetail',
   components: {
     ArticleBar,
     ArticleBody,
-    ArticleFooter
+    ArticleFooter,
+    CommentActionSheet
+  },
+  props: {
+    articleId: {
+      type: [Number, String],
+      default() {
+        return 68671;
+      }
+    }
   },
   data() {
-    return {};
+    return {
+
+    };
+  },
+  mounted() {
+    this.getDetail({ article_id: this.articleId });
+  },
+  methods: {
+    ...mapActions(['getDetail']),
+    onCommentClick() {
+      this.$refs.actionSheet.click();
+    }
   }
 };
 </script>

@@ -5,7 +5,7 @@
         <!--<Loading class="loading" :size="50"></Loading>-->
       <!--</template>-->
 
-      <CommentScrollView ref="commentList"></CommentScrollView>
+      <CommentScrollView ref="commentList" @on-back="onBackClick"></CommentScrollView>
     </div>
   </YohoActionSheet>
 </template>
@@ -29,6 +29,9 @@ export default {
     click() {
       this.$refs.actionSheet.show();
       this.$refs.commentList.click();
+    },
+    onBackClick() {
+      this.$refs.actionSheet.hide();
     }
   }
 };
@@ -37,7 +40,7 @@ export default {
 <style>
   .content {
     width: 100%;
-    height: 80vh;
+    height: 100vh;
     background-color: white;
   }
 

 <template>
   <div class="comment-scroll-view">
-    <div class="header">{{ count }}评论
+    <div class="header">
+      <div class="back" @click="handleBack">
+        <i class="iconfont icon-left"></i>
+      </div>
+      {{ count }}评论
     </div>
     <Scroll class="scroll-wrapper" ref="scroll" :options="scrollOptions">
       <div v-for="i in list" class="item">huangtao {{i}}</div>
@@ -48,6 +52,9 @@ export default {
       for (let i = 0; i < 100; i++) {
         this.list.push(i);
       }
+    },
+    handleBack() {
+      this.$emit('on-back');
     }
   }
 };
@@ -64,6 +71,7 @@ export default {
 }
 
 .header {
+  position: relative;
   width: 100%;
   height: 88px;
   border-bottom: 2px solid #e0e0e0;
@@ -72,6 +80,22 @@ export default {
   font-size: 32px;
 }
 
+.iconfont {
+  height: 100%;
+  font-size: 20PX;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 10PX;
+  padding-right: 10PX;
+}
+
+.back {
+  position: absolute;
+  width: 100px;
+  padding-left: 5PX;
+}
+
 .scroll-wrapper {
   flex: 1;
 }

 <template>
   <div class="article-footer-wrapper">
     <div class="tool-bar">
-      <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onClick"></WidgetIconBtn>
-      <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onClick"></WidgetIconBtn>
-      <WidgetIconBtn class="item" type="star" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onComment"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onZanClick"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="star" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
     </div>
     <div class="close ml20">收起</div>
   </div>
@@ -15,13 +15,19 @@ export default {
   data() {
     return {
       option: {
-        eventName: 'click'
+        emitName: 'click'
       }
     };
   },
   methods: {
-    onClick() {
+    onZanClick() {
 
+    },
+    onFavClick() {
+
+    },
+    onComment() {
+      this.$emit('on-comment-click');
     }
   },
 };

+import * as Types from './types';
+
+export default {
+  async getDetail({ commit }, { article_id }) {
+    const result = await this.$api.get('/api/guang/article/detail', {
+      article_id
+    });
+
+    console.log(result);
+
+    commit(Types.FETCH_GUANG_SUCCESS, result);
+  }
+};

+import actions from './actions';
+import mutations from './mutations';
+
 export default function() {
   return {
+    namespaced: true,
     state: {
-      articleList: []
+      articleList: [],
+      articleDetail: null,
+    },
+    actions,
+    mutations,
+    getters: {
+
     }
   };
 }

+import * as Types from "./types";
+
+export default {
+  [Types.FETCH_GUANG_REQUEST](state, data) {
+    state.articleDetail = data;
+  }
+};

+export const FETCH_GUANG_REQUEST = 'FETCH_GUANG_REQUEST';
+export const FETCH_GUANG_FAILED = 'FETCH_GUANG_FAILED';
+export const FETCH_GUANG_SUCCESS = 'FETCH_GUANG_SUCCESS';

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import {createApi} from 'create-api';
 import storeYoho from './yoho';
+import storeArticle from './article';
 import plugin from './plugin';
 
 Vue.use(Vuex);
@@ -11,6 +12,7 @@ export function createStore(context) {
     namespaced: true,
     modules: {
       yoho: storeYoho(),
+      article: storeArticle()
     },
     strict: process.env.NODE_ENV !== 'production',
     plugins: [plugin]

+const URI_PACKAGE_ARTICLE = 'guang/service/v2/article/';
+const URI_PACKAGE_AUTHOR = 'guang/service/v1/author/';
+
 module.exports = {
   '/api/product/data': {
     api: 'app.product.data',
@@ -91,4 +94,36 @@ module.exports = {
     params: {
     }
   },
+  '/api/guang/article/detail': {
+    service: true,
+    api: URI_PACKAGE_ARTICLE,
+    path: 'getArticle',
+    params: {
+      article_id: {type: String}
+    }
+  },
+  '/api/guang/article/author': {
+    service: true,
+    api: URI_PACKAGE_AUTHOR,
+    path: 'getAuthor',
+    params: {
+      author_id: {type: String}
+    }
+  },
+  '/api/guang/article/content': {
+    service: true,
+    api: URI_PACKAGE_ARTICLE,
+    path: 'getArticleContent',
+    params: {
+      article_id: {type: String}
+    }
+  },
+  '/api/guang/article/brand': {
+    service: true,
+    api: URI_PACKAGE_ARTICLE,
+    path: 'getBrand',
+    params: {
+      article_id: {type: String}
+    }
+  }
 };

@@ -43,7 +43,7 @@ module.exports = async(req, res, next) => {
     if (apiInfo.service) {
       result = await apiCtx.get({
         api: serviceApi,
-        url: apiInfo.api,
+        url: `${apiInfo.api || ''}${apiInfo.path || ''}`,
         data: params,
         param: {
           cache: cache,