店铺分享和收藏

郭成尧
Commit 57a5ff711551ed4723d6b25d8d7cde372d56c9cf 1 parent 1ff592d4
Showing 6 changed files with 77 additions and 78 deletions
apps/channel/controllers/brand.js
apps/channel/models/brand.js
apps/channel/router.js
public/vue/channel/brand-box.vue
public/vue/channel/brand-shop-top.vue
public/vue/channel/brand-top.vue → public/vue/channel/brand-top-bar.vue
--- a/apps/channel/controllers/brand.js
View file @57a5ff7
+++ b/apps/channel/controllers/brand.js
View file @57a5ff7
@@ -25,8 +25,8 @@ module.exports = {
         });
     },
-    /* 获取品牌介绍 */
-    getBrandIntro: (req, res) => {
+    /* 获取品牌店铺介绍 */
+    getShopInfo: (req, res) => {
         brandModel.getBrandData({
             domain: req.query.domain,
             uid: req.user.uid
@@ -86,8 +86,8 @@ module.exports = {
     /* 收藏店铺 */
     collectShop: (req, res) => {
         brandModel.collectShopData({
-            shopId: req.query.shopId,
-            favId: req.query.favId,
+            shopId: req.body.shopId,
+            favId: req.body.favId,
             uid: req.user.uid,
             type: 'shop'
         }).then(result => {
--- a/apps/channel/models/brand.js
View file @57a5ff7
+++ b/apps/channel/models/brand.js
View file @57a5ff7
@@ -84,8 +84,7 @@ const getBrandData = params => {
                                 showBrandLogo: false,
                                 brandLogo: subResult[0].data.shop_logo,
                                 brandName: subResult[0].data.shop_name,
-                                brandIntro: subResult[0].data.shop_intro,
-                                showMore: false
+                                brandIntro: subResult[0].data.shop_intro
                             });
                             return finalResult;
                         } else {
@@ -114,7 +113,11 @@ const getBrandShopGoodsData = params => {
     /* TODO 获取店铺商品暂时没有接口 */
     return api.all([brandApi.getBrandShopGoodsOriginData(params)]).then(result => {
-
+        if (result[0].code === 200) {
+            return finalResult;
+        } else {
+            logger.error('getBrandShopGoodsOriginData api code no 200');
+        }
     });
 };
@@ -124,15 +127,10 @@ const getBrandShopGoodsData = params => {
  * @returns {*|Promise.<TResult>}
  */
 const collectShopData = params => {
-    let finalResult = {};
-    /* TODO　收藏店铺接口返回状态处理*/
+    /* TODO 收藏店铺接口返回状态处理 */
     return api.all([brandApi.collectShopOriginData(params)]).then(result => {
-        if (result[0].code === 200) {
-
-        } else {
-            logger.error('collectShopOriginData api code no 200');
-        }
+        return result[0];
     });
 };
@@ -248,5 +246,6 @@ module.exports = {
     getBrandShopGoodsData,
     getBrandListData,
     getCateListData,
-    getCateResource
+    getCateResource,
+    collectShopData
 };
--- a/apps/channel/router.js
View file @57a5ff7
+++ b/apps/channel/router.js
View file @57a5ff7
@@ -16,14 +16,14 @@ const router = expressRouter();
 router.get('/', channel.index); // 首页
 router.get('/resources', channel.resources); // 资源位接口
 router.get('/brand', brand.index); // 店铺首页
-router.get('/get-brand-intro', brand.getBrandIntro); // 店铺介绍
+router.get('/get-shop-info', brand.getShopInfo); // 店铺介绍
 router.post('/get-brand-shop-goods', brand.getBrandShopGoods); // 店铺介绍
 router.get('/brand-list', brand.brandList); // 品牌列表页
 router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据
 router.get('/brand-share', brand.brandShare); // 获取品牌列表数据
 router.get('/cate-resource', brand.cateResource); // 品类资源位页面
-router.get('/collect-shop', brand.collectShop); // 收藏品牌店铺
+router.post('/collect-shop', brand.collectShop); // 收藏品牌店铺
 router.get('/cate', brand.cate); // 全部分类
 router.get('/get-cate-list', brand.getCateList); // 全部分类数据列表
--- a/public/vue/channel/brand-box.vue
View file @57a5ff7
+++ b/public/vue/channel/brand-box.vue
View file @57a5ff7
 <template>
-    <brand-top v-bind:share-data="shareData"></brand-top>
-    <brand-shop-top></brand-shop-top>
+    <brand-top-bar v-bind:share-data="shareData"></brand-top-bar>
+    <brand-shop-top v-bind:shop-info="shopInfo"></brand-shop-top>
     <goods-list v-bind:data="productList"></goods-list>
     <drawer v-ref:drawer>
         <filter :config.once="filterConfig"></filter>
@@ -9,10 +9,11 @@
 <script>
     const $ = require('yoho-jquery');
+    const qs = require('yoho-qs');
     const bus = require('common/vue-bus');
     const tip = require('common/tip');
-    const brandTop = require('channel/brand-top.vue');
-    const brandShopTop = require('channel/brand-shop-top.vue');
+    const brandTopBar = require('channel/brand-top-bar.vue'); // 顶部栏，包括返回、收藏店铺、分享，打开筛选页面
+    const brandShopTop = require('channel/brand-shop-top.vue'); // 店铺头部信息
     const goodsList = require('product/list.vue');
     const drawer = require('product/drawer.vue');
     const filter = require('product/filter.vue');
@@ -22,11 +23,10 @@
     module.exports = {
         data() {
             return {
-                shareData: {
-                    title: 'BLK',
-                    link: 'm.blk.com',
-                    img: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
-                },
+                domain: qs.domain,
+                shareData: {}, // 分享相关数据
+                shopInfo: {}, // 店铺介绍相关数据
+
                 sortConfig: global.sortConfig,
                 filterConfig: global.filterConfig,
@@ -45,6 +45,10 @@
             };
         },
         watch: {
+            domain: function() {
+                this.getShopInfo();
+            },
+
             /* sort 和 filter 改变 都会触发 重新搜索 (想象成清空所有分页) */
             sort: function() {
                 this.research();
@@ -54,6 +58,28 @@
             }
         },
         methods: {
+
+            /* 获取店铺简介相关数据 */
+            getShopInfo() {
+                $.get({
+                    url: '/get-shop-info',
+                    data: { domain: this.domain }
+                }).done(result => {
+                    if (result) {
+                        this.shopInfo = result;
+                        this.shopInfo.showBrandInfo = true;
+                        this.shareData = {
+                            title: result.brandName,
+                            link: '/brand-share?domain=' + this.domain,
+                            img: result.brandBg
+                        };
+                    } else {
+                        this.shopInfo.showBrandInfo = false;
+                    }
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            },
             getProductList() {
                 let data = {};
@@ -106,14 +132,16 @@
             }
         },
         components: {
-            brandTop,
+            brandTopBar,
             brandShopTop,
             goodsList,
             drawer,
             filter
         },
         created() {
-            this.search();
+            this.getShopInfo();
+
+//            this.search();
             bus.$on('list.paging', function() {
                 this.search();
             });
--- a/public/vue/channel/brand-shop-top.vue
View file @57a5ff7
+++ b/public/vue/channel/brand-shop-top.vue
View file @57a5ff7
 <template>
-    <div v-if="showBrandInfo" class="brand-top-box" v-bind:style="{ 'background-image': `url(${brandIntro.brandBg})` }">
+    <div v-if="shopInfo.showBrandInfo" class="brand-top-box" v-bind:style="{ 'background-image': `url(${shopInfo.brandBg})` }">
         <div class="brand-bottom">
-            <img v-if="brandIntro.showBrandLogo" v-lazy="brandIntro.brandLogo" alt="{{ brandIntro.brandName }}">
-            <div v-else class="brand-title">{{ brandIntro.brandName }}</div>
+            <img v-if="shopInfo.showBrandLogo" v-lazy="brandIntro.brandLogo" alt="{{ shopInfo.brandName }}">
+            <div v-else class="brand-title">{{ shopInfo.brandName }}</div>
             <hr>
-            <div v-show="showMore" transition="brand-intro" v-bind:class="{ 'brand-short': !showMore }">{{ brandIntro.brandIntro }}</div>
+            <div v-show="showMore" transition="brand-intro" v-bind:class="{ 'brand-short': !showMore }">{{ shopInfo.brandIntro }}</div>
         </div>
         <div v-if="!showMore" class="showmore expand" @click="introTrans()"><span class="icon">&#xe602;</span></div>
         <div v-else class="showmore collapse" @click="introTrans()"><span class="icon">&#xe617;</span></div>
@@ -42,7 +42,7 @@
                 transition: all 0.3s ease;
                 font-size: 16px;
                 line-height: 32px;
-                width: 82%;
+                width: 90%;
                 height: 220px;
                 overflow-y: auto;
             }
@@ -57,7 +57,7 @@
                 display: -webkit-box !important;
                 font-size: 16px;
                 line-height: 32px;
-                width: 82%;
+                width: 90%;
                 text-overflow: ellipsis;
                 overflow-y: hidden;
                 display: -webkit-box;
@@ -77,47 +77,21 @@
     }
 </style>
 <script>
-    const $ = require('yoho-jquery');
-    const tip = require('common/tip');
-    const qs = require('yoho-qs');
-
     module.exports = {
+        props: {
+            shopInfo: {
+                type: Object
+            }
+        },
         data() {
             return {
-                brandIntro: {},
-                showMore: false,
-                showBrandInfo: false
+                showMore: false
             };
         },
-        watch: {
-            domain() {
-                this.getShopIntro();
-            }
-        },
         methods: {
-            getShopIntro() {
-                let data = {
-                    domain: qs.domain
-                };
-
-                $.ajax({
-                    url: '/get-brand-intro',
-                    data: data
-                }).then(result => {
-                    if (result) {
-                        this.showBrandInfo = true;
-                        this.brandIntro = result;
-                    }
-                }).fail(() => {
-                    tip('网络错误');
-                });
-            },
             introTrans() {
                 this.showMore = this.showMore !== true;
             }
-        },
-        created() {
-            this.getShopIntro();
         }
     };
 </script>
--- a/public/vue/channel/brand-top.vue → public/vue/channel/brand-top-bar.vue
View file @57a5ff7
+++ b/public/vue/channel/brand-top.vue → public/vue/channel/brand-top-bar.vue
View file @57a5ff7
@@ -2,7 +2,7 @@
     <div class="top-box clearfix">
         <span class="icon back" @click="goBack()">&#xe606;</span>
         <div class="right">
-            <span class="icon" v-bind:class="{'favorite': isFav}" @click="collectShop()">&#xe609;</span>
+            <span class="icon" v-bind:class="{'favorite': shareData.isFav}" @click="collectShop()">&#xe609;</span>
             <span class="icon share" @click="goShare()">&#xe60e;</span>
             <span class="icon filter" @click="showFilter()">&#xe60b;</span>
         </div>
@@ -59,32 +59,30 @@
         },
         methods: {
             goShare() {
-
-                // TODO 这边应该需要一个分享后的页面链接，需要与 APP 确定分享要传的参数
-                let link = this.shareData.title +
-                        this.shareData.link +
-                        this.shareData.img;
-
-                yoho.goShare({link: link}, function() {}, function() {});
+                yoho.goShare(this.shareData, function() {}, function() {});
             },
             goBack() {
                 yoho.goBack({}, function() {}, function() {});
             },
+
+            /* 收藏或者取消收藏店铺 */
             collectShop() {
                 /* TODO 获取数据策略待确定 */
                 let data = {
                     shopId: this.shareData.shopId,
-                    favId: this.shareData.shopId,
                     isFav: this.shareData.isFav
                 };
-                $.ajax({
+                $.post({
                     url: '/collect-shop',
                     data: data
                 }).done(result => {
-
-                    /* TODO 处理收藏状态 */
+                    if (result.code === 200) {
+                        this.shareData.isFav = this.shareData.isFav !== true;
+                    } else {
+                        tip('网络错误');
+                    }
                 }).fail(() => {
                     tip('网络错误');
                 });