店铺介绍头部VUE化

@@ -18,15 +18,20 @@ module.exports = {
 
     /* 品牌店铺页面 */
     index: (req, res) => {
-        let params = req.query;
-
-        brandModel.getBrandData(params).then(result => {
         res.render('brand/index', {
             module: 'channel',
-                page: 'brand',
-                result: result
+            page: 'brand'
         });
+    },
+
+    /* 获取品牌介绍 */
+    getBrandIntro: (req, res) => {
+        let params = req.query;
+
+        brandModel.getBrandData(params).then(result => {
+            res.json(result);
         });
+
     },
 
     /* 品牌列表页 */
@@ -55,5 +60,5 @@ module.exports = {
                 result: result
             });
         });
-    },
+    }
 };

@@ -21,7 +21,8 @@ const getBrandData = params => {
         // 待处理，拼接输出模拟数据
         Object.assign(finalResult, {
             brandBg: 'http://7xwj52.com1.z0.glb.clouddn.com/brandbg.jpg',
-            brandLogo: '',
+            showBrandLogo: false,
+            brandLogo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140',
             brandName: 'A.Dorad',
             brandIntro: 'Dora毕业于中国美术学院的珠宝设计专业。毕业之后，Dora便开始游走于各国，吸收各地首饰设计的精髓，之后又在首尔修学了3年，A.Dorad饰品系列诞生于首尔， 设计师Dora将首尔设为起点并逐步推向国际。2013年，A.Dorad将旗下主力设计师带领进军广州，并以此为基地，以国际化的标准，设计出全新概念饰品。A.Dorad给人们提供高品质的服务，并且拥有独有的工艺。多样的珠宝首饰产品造型更衬托出其前卫、高雅的设计理念。珍贵的矿石搭配流行的创意理念，启迪了人类艺术。A.Dorad饰品符合现代年轻人对珠宝的追求与热爱，充满个性与时尚.它可以满足不同人的需求独家定制专属于自己的水晶饰品。A.Dorad将继续发挥无与伦比的创造力并开启通往浪漫梦幻的大门。',
             showMore: false

@@ -16,6 +16,7 @@ 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('/brand-list', brand.brandList); // 品牌列表页
 router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据
 router.get('/cate', brand.cate); // 全部分类

 <div id="brand">
     <brand-box></brand-box>
-    {{# result}}
-        <div class="brand-top-box" style="background: url({{brandBg}})">
-            <div class="brand-bottom">
-                {{#if brandLogo}}
-                    <img src="{{brandLogo}}" alt="{{brandName}}">
-                {{^}}
-                    <div class="brand-title">{{brandName}}</div>
-                {{/if}}
-                <hr>
-                <div class="brand-intro line-clamp">{{brandIntro}}</div>
-            </div>
-            <div class="expand"></div>
-            <div class="collapse"></div>
-        </div>
-    {{/ result}}
 </div>
\ No newline at end of file

@@ -6,6 +6,7 @@
  */
 const $ = require('yoho-jquery');
 const Vue = require('yoho-vue');
+const lazyload = require('yoho-vue-lazyload');
 
 const brandBox = require('channel/brand-box.vue');
 
@@ -16,10 +17,12 @@ new Vue({
     }
 });
 
+Vue.use(lazyload);
+
 const $expand = $('.expand'),
     $collapse = $('.collapse'),
     $brandIntro = $('.brand-intro'),
-    exCoTm = 6; // 展开隐藏的倍数
+    exCoTm = 5; // 展开隐藏的倍数
 
 $expand.on('click', function() {
     $brandIntro.removeClass('line-clamp').animate({height: $brandIntro.height() * exCoTm});

-@import "brand";
-@import "brand-list";
 @import "cate";

 <template>
-    <brand-top-component v-bind:share-Link="shareLink"></brand-top-component>
+    <brand-top-cmpnt v-bind:share-Link="shareLink"></brand-top-cmpnt>
+    <brand-shop-top-cmpnt v-bind:domain="'nike'"></brand-shop-top-cmpnt>
 </template>
 
 <script>
-    const brandTopComponent = require('channel/brand-top.vue');
+    const brandTopCmpnt = require('channel/brand-top.vue');
+    const brandShopTopCmpnt = require('channel/brand-shop-top.vue');
 
     // TODO 确定分享页面后需要添加拼接分享链接的公共方法
     let shareLink = 'http://www.yohobuy.com';
@@ -15,7 +17,8 @@
             };
         },
         components: {
-            brandTopComponent
+            brandTopCmpnt,
+            brandShopTopCmpnt
         }
     };
 </script>

-.brand-top-box {
+<template>
+    <div class="brand-top-box" v-bind:style="{ 'background-image': `url(${brandIntro.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>
+            <hr>
+            <div class="brand-intro line-clamp">{{ brandIntro.brandIntro }}</div>
+        </div>
+        <div class="expand"></div>
+        <div class="collapse"></div>
+    </div>
+</template>
+<style>
+    .brand-top-box {
         width: 100%;
         height: 468px;
-    color: $white;
-    background-color: $black;
+        color: #fff;
+        background-color: #000;
         position: relative;
 
         .brand-bottom {
@@ -17,7 +30,7 @@
 
             hr {
                 width: 90%;
-            border: $white solid 1px;
+                border: #fff solid 1px;
                 border-top: none;
             }
 
@@ -57,4 +70,43 @@
             right: 5%;
             display: none;
         }
-}
+    }
+
+</style>
+<script>
+    const $ = require('yoho-jquery');
+    const tip = require('common/tip');
+
+    module.exports = {
+        props: ['domain'],
+        data() {
+            return {
+                brandIntro: {}
+            };
+        },
+        watch: {
+            domain() {
+                this.getShopIntro();
+            }
+        },
+        methods: {
+            getShopIntro() {
+                let data = {
+                    domain: this.domain
+                };
+
+                $.ajax({
+                    url: '/get-brand-intro',
+                    data: data
+                }).then(result => {
+                    this.brandIntro = result;
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            }
+        },
+        created() {
+            this.getShopIntro();
+        }
+    };
+</script>