资讯详情

@@ -25,7 +25,7 @@ const component = {
         const id = req.params[0];
 
         let params = {
-            uid: req.user.uid || 0,
+            uid: req.user.uid || 8050378,
             article_id: id,
             client_type: 'h5'
         };
@@ -33,6 +33,51 @@ const component = {
         model.index(params).then(result => {
             res.json(result);
         }).catch(next);
+    },
+
+    /**
+     * 点赞
+     *
+     * @param req
+     * @param res
+     * @param next
+     */
+    like(req, res, next) {
+        const params = {
+            article_id: req.params[0],
+            udid: req.sessionID
+        };
+
+        model.like(params, Boolean.valueOf(params.flag)).then(result => {
+            res.json(result);
+        }).catch(next);
+    },
+
+    /**
+     * 收藏
+     *
+     * @param req
+     * @param res
+     * @param next
+     */
+    favorite(req, res, next) {
+        const params = {
+            article_id: req.params[0],
+            uid: req.user.uid || 8050378
+        };
+
+        /*
+        if (!req.user.id) {
+            res.json({
+                code: 403
+            });
+
+            return;
+        }
+        */
+        model.favorite(params, Boolean.valueOf(params.flag)).then(result => {
+            res.json(result);
+        }).catch(next);
     }
 };
 

@@ -27,9 +27,40 @@ const model = {
                 offset: 0,
                 limit: 3
             }, params));
+            const base = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticleBaseInfo', params);
 
-            return camelCase([article, content, brands, other]);
+            return camelCase([article, content, brands, other, base]);
         })();
+    },
+
+    /**
+     * 点赞
+     *
+     * @param params
+     * @param flag
+     * @returns {*}
+     */
+    like(params, flag) {
+        if (flag) {
+            return serviceAPI.get('guang/api/v2/praise/setPraise', params);
+        } else {
+            return serviceAPI.get('guang/api/v2/praise/cancel', params);
+        }
+    },
+
+    /**
+     * 收藏
+     *
+     * @param params
+     * @param flag
+     * @returns {*}
+     */
+    favorite(params, flag) {
+        if (flag) {
+            return serviceAPI.get('guang/api/v1/favorite/setFavorite', params);
+        } else {
+            return serviceAPI.get('guang/api/v1/favorite/cancelFavorite', params);
+        }
     }
 };
 

@@ -15,6 +15,8 @@ const detail = require(`${cRoot}/detail`);
 
 router.get(/\/([\d]+)(.*)/, detail.index); // 详情routers
 router.get(/news_(\d+)\.json/, detail.news);
+router.get(/like_(\d+)\.json/, detail.like);
+router.get(/favorite_(\d+)\.json/, detail.favorite);
 
 const news = require(`${cRoot}/index`);
 

 <template>
-    <top-nav></top-nav>
-    <div class="show-box no-padding first-box" :class="{'is-app': isApp}">
+    <top-nav :id="id" :article="article"></top-nav>
+    <div class="show-box no-padding first-box">
         <div class="news-box">
             <h1>{{article.articleTitle}}</h1>
             <div class="status-bar">
@@ -31,7 +31,7 @@
         </ul>
     </div>
 
-    <div class="show-box" v-if="other">
+    <div class="show-box" v-if="other && other.length > 0">
         <h2>相关文章</h2>
         <div class="other-box" v-for="item in other">
             <div>
@@ -58,11 +58,7 @@
 
     .show-box {
         &.first-box {
-            margin-top: 120px;
-        }
-
-        &.first-box.is-app {
-            margin-top: 180px;
+            margin-top: 80px;
         }
 
         background: $bgcolor;
@@ -206,8 +202,9 @@
                 recommendProducts: []
             };
         },
-        created() {
+        init() {
             const newsId = $('#app').data('newsId');
+
             let loadDeferred = null;
 
             $.get(`/news/news_${newsId}.json`).then(result => {
@@ -264,7 +261,6 @@
                     this.other = other.data;
                 }
 
-
                 // 延时读取商品价格、名称等信息
                 loadDeferred = () => {
                     $.get('/product/search_product.json', {

 <template>
     <div class="top-nav">
         <navbar>
-            <a slot="left" href="javascript:alert('TODO');">
-                <span class="icon icon-left"></span>
-            </a>
-
             <template slot="right">
-                <a class="right-button" href="javascript:alert('TODO');">
+                <a class="right-button" href="javascript:void(0);" @click="like()">
                     <span class="icon icon-check"></span>
                     {{likeCount}}
                 </a>
 
-                <a class="right-button" href="javascript:alert('TODO');">
-                    <span class="icon icon-love"></span>
+                <a class="right-button" href="javascript:void(0);" @click="favorite()">
+                    <span class="icon" :class="{ 'icon-love': !isFavorite, 'icon-love-solid': isFavorite}"></span>
                 </a>
 
-                <a class="right-button" href="javascript:alert('TODO');">
+                <a class="right-button" href="javascript:void(0);" @click="share()">
                     <span class="icon icon-share"></span>
                 </a>
             </template>
@@ -35,16 +31,56 @@
     require('common/vue-filter');
 
     module.exports = {
+        props: {
+            id: Number,
+            article: Object
+        },
         components: {
             navbar: require('component/header.vue')
         },
         data() {
             return {
                 isApp: yoho.isApp,
-                likeCount: 9,
+                likeCount: this.article.praise,
+                isFavorite: false
             };
         },
-        created() {
+        watch: {
+            article: function() {
+                this.likeCount = this.article.praise;
+            }
+        },
+        methods: {
+            like: function() {
+                $.get(`/news/like_${this.article.id}.json`, (result)=> {
+                    if (result.code === 200) {
+                        this.likeCount = result.data;
+                    }
+                });
+            },
+            favorite: function() {
+                $.get(`/news/favorite_${this.article.id}.json`, (result)=> {
+                    if (result.code === 200) {
+                        //this.
+                        // TODO:
+                    }
+                });
+            },
+            share: function() {
+                yoho.goShare({
+                    title: this.article.articleTitle,
+                    des: '优质精选,BLK潮流资讯为你呈现',
+                    img: this.article.coverImage.replace(/(\{width}|\{height}|\{mode})/g, function($0) {
+                        const dict = {
+                            '{width}': 300,
+                            '{height}': 300,
+                            '{mode}': 2
+                        };
+
+                        return dict[$0];
+                    })
+                });
+            }
         }
     };
 </script>