资讯详情

@@ -21,13 +21,14 @@ const model = {
         return co(function*() {
             const article = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticle', params);
             const content = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticleContent', params);
+            const brands = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getBrand', 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]);
+            return camelCase([article, content, brands, other]);
         });
     }
 };

@@ -21,6 +21,13 @@
     </div>
 </template>
 <script>
+    const Vue = require('yoho-vue');
+    const lazyload = require('yoho-vue-lazyload');
+    const infinitScroll = require('yoho-vue-infinite-scroll');
+
+    Vue.use(lazyload);
+    Vue.use(infinitScroll);
+
     let bus = require('common/vue-bus');
 
     module.exports = {
@@ -53,7 +60,7 @@
         margin: 0;
         padding: 0;
     }
-    
+
     .card-large {
         .card {
             float: left;
@@ -87,7 +94,7 @@
             font-weight: normal;
         }
     }
-    
+
     .good-price {
         color: #b0b0b0;
         margin-right: 10px;

 <template>
-    <div class="news-box">
-        <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 class="show-box no-padding no-top-border">
+        <div class="news-box">
+            <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>
 
-    <div class="content-box">
-        <div v-for="(index, block) in content">
-            <content-block :block="block"></content-block>
+        <div class="content-box">
+            <div v-for="(index, block) in content">
+                <content-block :block="block"></content-block>
+            </div>
         </div>
     </div>
 
-    <div v-for="block in other">
-        <div>
-            <img :src="block.thumb | resize 213 134" width="107"/>
-            <h2></h2>
+    <div class="show-box no-padding" v-if="recommendProducts">
+        <h2>相关推荐</h2>
+
+        <product-list :data="recommendProducts.goods"></product-list>
+    </div>
+
+    <div class="brand-list show-box" v-if="brands">
+        <h2>相关品牌</h2>
+        <ul>
+            <li v-for="item in brands">
+                <a :href="item.url"><img :src="item.thumb"></a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="show-box" v-if="other">
+        <h2>相关文章</h2>
+        <div class="other-box" v-for="item in other">
+            <div>
+                <div class="image-box">
+                    <a :href="item.url">
+                        <img :src="item.thumb | resize 213 134"/>
+                    </a>
+                </div>
+                <h3><a :href="item.url">{{item.title}}</a></h3>
+                <div class="sub-time">
+                    <span class="icon icon-love"></span><span class="label">{{article.publishTime | formatUnixTime 'MM.DD HH:mm'}}</span>
+                </div>
+                <div class="clearfix"></div>
+            </div>
         </div>
     </div>
 </template>
-<style>
+<style class="scss">
+    $bgcolor: #fff;
+
+    .news-page {
+        background: #f6f6f6;
+    }
+
+    .show-box {
+        background: $bgcolor;
+        margin-top: 30px;
+        border-bottom: 1px solid #eee;
+
+        &:not(.no-padding) {
+            padding: 30px;
+        }
+
+        &:not(.no-top-border) {
+            border-top: 1px solid #eee;
+        }
+    }
+
     h1 {
         font-size: 43px;
         font-weight: bold;
@@ -31,9 +79,11 @@
 
     .news-box {
         padding: 30px;
+        background: $bgcolor;
     }
 
     .content-box {
+        background: #fff;
 
         img {
             width: 100%;
@@ -50,6 +100,45 @@
 
     }
 
+    .other-box {
+        margin-top: 40px;
+
+        .image-box {
+            float: left;
+            max-width: 214px;
+            max-height: 134px;
+            overflow: hidden;
+
+            img {
+                width: 214px;
+            }
+        }
+
+        h3 {
+            margin-top: 16px;
+            margin-left: 30px;
+            float: left;
+            max-width: 420px;
+            min-height: 90px;
+            font-size: 32px;
+        }
+
+        .sub-time {
+            margin-left: 30px;
+            float: left;
+            color: #b3b3b3;
+
+            .icon {
+                margin-right: 12px;
+            }
+        }
+    }
+
+    h2 {
+        text-align: center;
+        line-height: 100px;
+    }
+
     .status-bar {
         color: #ccc;
         font-size: 24px;
@@ -62,7 +151,24 @@
         span.label {
             margin-right: 78px;
         }
+    }
+
+    .brand-list {
+        li {
+            display: inline-block;
+            width: 171px;
+            text-align: center;
+
+            img {
+                max-width: 140px;
+            }
+        }
 
+        ul {
+            :not(:last-child) {
+                border-right: 1px solid #eee;
+            }
+        }
     }
 
 </style>
@@ -71,20 +177,26 @@
 
     module.exports = {
         components: {
-            'content-block': require('./content-block.vue')
+            'content-block': require('./content-block.vue'),
+            'product-list': require('component/product/list.vue')
         },
         data() {
             return {
                 article: {},
                 content: {},
-                other: {}
+                brands: {},
+                other: {},
+                recommendProducts: []
             };
         },
         created() {
             const newsId = $('#app').data('newsId');
 
             $.get(`/news/news_${newsId}.json`).then(result => {
-                const article = result[0], content = result[1], other = result[2];
+                const article = result[0],
+                    content = result[1],
+                    brands = result[2],
+                    other = result[3];
 
                 if (article && article.code === 200 && article.data) {
                     this.article = article.data;
@@ -92,6 +204,14 @@
 
                 if (content && content.code === 200 && content.data) {
                     this.content = content.data;
+
+                    this.recommendProducts = this.content.filter((block)=> {
+                        return block && typeof block.goods === 'object';
+                    });
+                }
+
+                if (brands && brands.code === 200 && brands.data) {
+                    this.brands = brands.data;
                 }
 
                 if (other && other.code === 200 && content.data) {