资讯详情

@@ -17,15 +17,21 @@ const component = {
     index(req, res) {
         res.render('detail', {
             module: 'news',
-            page: 'detail'
+            page: 'detail',
+            newsId: req.params[0]
         });
     },
     news(req, res, next) {
+        const id = req.params[0];
+
         let params = {
-            uid: req.user.uid || 8050378 // TODO: fix this hard coded uid
+            // uid: req.user.uid || 8050378 // TODO: fix this hard coded uid
+            article_id: id,
+            client_type: 'h5'
         };
 
-        model.product(params).then(result => {
+
+        model.index(params).then(result => {
             res.json(result);
         }).catch(next);
     }

@@ -8,16 +8,27 @@
 // const _ = require('lodash');
 
 // const helpers = global.yoho.helpers;
-const api = global.yoho.API;
+const serviceAPI = global.yoho.ServiceAPI;
+const URI_PACKAGE_ARTICLE = 'guang/service/v2/article/';
+const co = require('co');
+const camelCase = global.yoho.camelCase;
 
 /**
  * 资讯详情
  */
 const model = {
-    product(params) {
-        return api.get('', Object.assign({
-            method: 'h5.product.data'
+    index(params) {
+        return co(function*() {
+            const article = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticle', params);
+            const content = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticleContent', params);
+            const other = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getOtherArticle', Object.assign({
+                tags: article.data.tag,
+                offset: 0,
+                limit: 3
             }, params));
+
+            return camelCase([article, content, other]);
+        });
     }
 };
 

@@ -14,4 +14,5 @@ const router = expressRouter();
 const detail = require(`${cRoot}/detail`);
 
 router.get(/\/([\d]+)(.*)/, detail.index); // 详情routers
+router.get(/news_(\d+)\.json/, detail.news);
 module.exports = router;

-<div id="app" class="news-page">
-  Damn news!
+<div id="app" class="news-page" data-news-id="{{newsId}}">
   <app/>
 </div>

@@ -21,6 +21,7 @@
   "dependencies": {
     "bluebird": "^3.4.1",
     "body-parser": "^1.15.2",
+    "co": "^4.6.0",
     "connect-memcached": "^0.2.0",
     "connect-multiparty": "^2.0.0",
     "cookie-parser": "^1.4.3",

 let Vue = require('yoho-vue');
-
+const moment = require('moment');
 
 /**
  * 替换参数
@@ -113,3 +113,11 @@ Vue.filter('convertTime', (value) => {
 
     return Y + M + D + h + m + s;
 });
+
+
+/**
+ * 格式化时间
+ */
+Vue.filter('formatUnixTime', (value, format) => {
+    return moment.unix(value).format(format || 'YYYY-MM-DD HH:mm:ss');
+});

+<template>
+    <div v-if="block.text" class="text-block">
+        {{{block.text.data.text}}}
+    </div>
+
+    <div v-if="block.singleImage">
+        <div v-for="(index, item) in block.singleImage.data">
+            <a :href="item.url">
+                <img :title="item.title"
+                     :alt="item.alt"
+                     :src="item.src | resize 750 469" width="375"/>
+            </a>
+        </div>
+    </div>
+</template>
+<style></style>
+<script>
+    module.exports = {
+        props: {
+            block: Object
+        }
+    };
+</script>

-h1 {
-    font-size: 43px;
-    font-weight: bold;
-    overflow: hidden;
-    margin-top: 36px;
-    margin-bottom: 0;
-}
-
-.news-box {
-    padding: 30px;
-}

 <template>
     <div class="news-box">
-        <h1>日韩风日韩风日韩风日韩风日韩风日韩风日韩风</h1>
-        <span class="icon icon-love"></span>
-        <span class="icon icon-love"></span>
+        <h1>{{article.articleTitle}}</h1>
+        <div class="status-bar">
+            <span class="icon icon-love"></span><span class="label">{{article.publishTime | formatUnixTime 'MM.DD HH:mm'}}</span>
+            <span class="icon icon-love"></span><span class="label">{{article.pageViews}}</span>
+        </div>
+    </div>
+
+    <div class="content-box">
+        <div v-for="(index, block) in content">
+            <content-block :block="block"></content-block>
+        </div>
+    </div>
+
+    <div v-for="block in other">
+        <div>
+            <img :src="block.thumb | resize 213 134" width="107"/>
+            <h2></h2>
+        </div>
     </div>
 </template>
-<style src="./css/detail.css"></style>
-<script src="./js/detail.js"></script>
+<style>
+    h1 {
+        font-size: 43px;
+        font-weight: bold;
+        overflow: hidden;
+        margin-top: 36px;
+        margin-bottom: 0;
+    }
+
+    .news-box {
+        padding: 30px;
+    }
+
+    .content-box {
+
+        img {
+            width: 100%;
+            display: block;
+        }
+
+        p {
+            font-size: 28px;
+        }
+
+        .text-block {
+            padding: 30px;
+        }
+
+    }
+
+    .status-bar {
+        color: #ccc;
+        font-size: 24px;
+        margin-top: 30px;
+
+        span.icon {
+            margin-right: 12px;
+        }
+
+        span.label {
+            margin-right: 78px;
+        }
+
+    }
+
+</style>
+<script>
+    require('common/vue-filter');
+
+    module.exports = {
+        components: {
+            'content-block': require('./content-block.vue')
+        },
+        data() {
+            return {
+                article: {},
+                content: {},
+                other: {}
+            };
+        },
+        created() {
+            const newsId = $('#app').data('newsId');
+
+            $.get(`/news/news_${newsId}.json`).then(result => {
+                const article = result[0], content = result[1], other = result[2];
+
+                if (article && article.code === 200 && article.data) {
+                    this.article = article.data;
+                }
+
+                if (content && content.code === 200 && content.data) {
+                    this.content = content.data;
+                }
+
+                if (other && other.code === 200 && content.data) {
+                    this.other = other.data;
+                }
+            });
+        }
+    };
+</script>

-module.exports = {
-    components: {
-
-    }
-};