fe / yohoblk-wap · Commits

Go to a project

Authored by 郭成尧
Commit 27b772e724bae057ab412b0775065b94af5d02bd 1 parent 878a02cb

店铺介绍头部VUE化

Inline Side-by-side
Showing 9 changed files with 124 additions and 76 deletions
@@ -18,15 +18,20 @@ module.exports = { @@ -18,15 +18,20 @@ module.exports = {
18 18
19 /* 品牌店铺页面 */ 19 /* 品牌店铺页面 */
20 index: (req, res) => { 20 index: (req, res) => {
  21 + res.render('brand/index', {
  22 + module: 'channel',
  23 + page: 'brand'
  24 + });
  25 + },
  26 +
  27 + /* 获取品牌介绍 */
  28 + getBrandIntro: (req, res) => {
21 let params = req.query; 29 let params = req.query;
22 30
23 brandModel.getBrandData(params).then(result => { 31 brandModel.getBrandData(params).then(result => {
24 - res.render('brand/index', {  
25 - module: 'channel',  
26 - page: 'brand',  
27 - result: result  
28 - }); 32 + res.json(result);
29 }); 33 });
  34 +
30 }, 35 },
31 36
32 /* 品牌列表页 */ 37 /* 品牌列表页 */
@@ -55,5 +60,5 @@ module.exports = { @@ -55,5 +60,5 @@ module.exports = {
55 result: result 60 result: result
56 }); 61 });
57 }); 62 });
58 - }, 63 + }
59 }; 64 };
@@ -21,7 +21,8 @@ const getBrandData = params => { @@ -21,7 +21,8 @@ const getBrandData = params => {
21 // 待处理，拼接输出模拟数据 21 // 待处理，拼接输出模拟数据
22 Object.assign(finalResult, { 22 Object.assign(finalResult, {
23 brandBg: 'http://7xwj52.com1.z0.glb.clouddn.com/brandbg.jpg', 23 brandBg: 'http://7xwj52.com1.z0.glb.clouddn.com/brandbg.jpg',
24 - brandLogo: '', 24 + showBrandLogo: false,
  25 + brandLogo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140',
25 brandName: 'A.Dorad', 26 brandName: 'A.Dorad',
26 brandIntro: 'Dora毕业于中国美术学院的珠宝设计专业。毕业之后，Dora便开始游走于各国，吸收各地首饰设计的精髓，之后又在首尔修学了3年，A.Dorad饰品系列诞生于首尔， 设计师Dora将首尔设为起点并逐步推向国际。2013年，A.Dorad将旗下主力设计师带领进军广州，并以此为基地，以国际化的标准，设计出全新概念饰品。A.Dorad给人们提供高品质的服务，并且拥有独有的工艺。多样的珠宝首饰产品造型更衬托出其前卫、高雅的设计理念。珍贵的矿石搭配流行的创意理念，启迪了人类艺术。A.Dorad饰品符合现代年轻人对珠宝的追求与热爱，充满个性与时尚.它可以满足不同人的需求独家定制专属于自己的水晶饰品。A.Dorad将继续发挥无与伦比的创造力并开启通往浪漫梦幻的大门。', 27 brandIntro: 'Dora毕业于中国美术学院的珠宝设计专业。毕业之后，Dora便开始游走于各国，吸收各地首饰设计的精髓，之后又在首尔修学了3年，A.Dorad饰品系列诞生于首尔， 设计师Dora将首尔设为起点并逐步推向国际。2013年，A.Dorad将旗下主力设计师带领进军广州，并以此为基地，以国际化的标准，设计出全新概念饰品。A.Dorad给人们提供高品质的服务，并且拥有独有的工艺。多样的珠宝首饰产品造型更衬托出其前卫、高雅的设计理念。珍贵的矿石搭配流行的创意理念，启迪了人类艺术。A.Dorad饰品符合现代年轻人对珠宝的追求与热爱，充满个性与时尚.它可以满足不同人的需求独家定制专属于自己的水晶饰品。A.Dorad将继续发挥无与伦比的创造力并开启通往浪漫梦幻的大门。',
27 showMore: false 28 showMore: false
@@ -16,6 +16,7 @@ const router = expressRouter(); @@ -16,6 +16,7 @@ const router = expressRouter();
16 router.get('/', channel.index); // 首页 16 router.get('/', channel.index); // 首页
17 router.get('/resources', channel.resources); // 资源位接口 17 router.get('/resources', channel.resources); // 资源位接口
18 router.get('/brand', brand.index); // 店铺首页 18 router.get('/brand', brand.index); // 店铺首页
  19 +router.get('/get-brand-intro', brand.getBrandIntro); // 店铺介绍
19 router.get('/brand-list', brand.brandList); // 品牌列表页 20 router.get('/brand-list', brand.brandList); // 品牌列表页
20 router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据 21 router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据
21 router.get('/cate', brand.cate); // 全部分类 22 router.get('/cate', brand.cate); // 全部分类
1 <div id="brand"> 1 <div id="brand">
2 <brand-box></brand-box> 2 <brand-box></brand-box>
3 - {{# result}}  
4 - <div class="brand-top-box" style="background: url({{brandBg}})">  
5 - <div class="brand-bottom">  
6 - {{#if brandLogo}}  
7 - <img src="{{brandLogo}}" alt="{{brandName}}">  
8 - {{^}}  
9 - <div class="brand-title">{{brandName}}</div>  
10 - {{/if}}  
11 - <hr>  
12 - <div class="brand-intro line-clamp">{{brandIntro}}</div>  
13 - </div>  
14 - <div class="expand"></div>  
15 - <div class="collapse"></div>  
16 - </div>  
17 - {{/ result}}  
18 </div> 3 </div>
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 */ 6 */
7 const $ = require('yoho-jquery'); 7 const $ = require('yoho-jquery');
8 const Vue = require('yoho-vue'); 8 const Vue = require('yoho-vue');
  9 +const lazyload = require('yoho-vue-lazyload');
9 10
10 const brandBox = require('channel/brand-box.vue'); 11 const brandBox = require('channel/brand-box.vue');
11 12
@@ -16,10 +17,12 @@ new Vue({ @@ -16,10 +17,12 @@ new Vue({
16 } 17 }
17 }); 18 });
18 19
  20 +Vue.use(lazyload);
  21 +
19 const $expand = $('.expand'), 22 const $expand = $('.expand'),
20 $collapse = $('.collapse'), 23 $collapse = $('.collapse'),
21 $brandIntro = $('.brand-intro'), 24 $brandIntro = $('.brand-intro'),
22 - exCoTm = 6; // 展开隐藏的倍数 25 + exCoTm = 5; // 展开隐藏的倍数
23 26
24 $expand.on('click', function() { 27 $expand.on('click', function() {
25 $brandIntro.removeClass('line-clamp').animate({height: $brandIntro.height() * exCoTm}); 28 $brandIntro.removeClass('line-clamp').animate({height: $brandIntro.height() * exCoTm});
1 -@import "brand";  
2 -@import "brand-list";  
3 @import "cate"; 1 @import "cate";
1 <template> 1 <template>
2 - <brand-top-component v-bind:share-Link="shareLink"></brand-top-component> 2 + <brand-top-cmpnt v-bind:share-Link="shareLink"></brand-top-cmpnt>
  3 + <brand-shop-top-cmpnt v-bind:domain="'nike'"></brand-shop-top-cmpnt>
3 </template> 4 </template>
4 5
5 <script> 6 <script>
6 - const brandTopComponent = require('channel/brand-top.vue'); 7 + const brandTopCmpnt = require('channel/brand-top.vue');
  8 + const brandShopTopCmpnt = require('channel/brand-shop-top.vue');
7 9
8 // TODO 确定分享页面后需要添加拼接分享链接的公共方法 10 // TODO 确定分享页面后需要添加拼接分享链接的公共方法
9 let shareLink = 'http://www.yohobuy.com'; 11 let shareLink = 'http://www.yohobuy.com';
@@ -15,7 +17,8 @@ @@ -15,7 +17,8 @@
15 }; 17 };
16 }, 18 },
17 components: { 19 components: {
18 - brandTopComponent 20 + brandTopCmpnt,
  21 + brandShopTopCmpnt
19 } 22 }
20 }; 23 };
21 </script> 24 </script>
1 -.brand-top-box {  
2 - width: 100%;  
3 - height: 468px;  
4 - color: $white;  
5 - background-color: $black;  
6 - position: relative;  
7 -  
8 - .brand-bottom { 1 +<template>
  2 + <div class="brand-top-box" v-bind:style="{ 'background-image': `url(${brandIntro.brandBg})` }">
  3 + <div class="brand-bottom">
  4 + <img v-if="brandIntro.showBrandLogo" v-lazy="brandIntro.brandLogo" alt="{{ brandIntro.brandName }}">
  5 + <div v-else class="brand-title">{{ brandIntro.brandName }}</div>
  6 + <hr>
  7 + <div class="brand-intro line-clamp">{{ brandIntro.brandIntro }}</div>
  8 + </div>
  9 + <div class="expand"></div>
  10 + <div class="collapse"></div>
  11 + </div>
  12 +</template>
  13 +<style>
  14 + .brand-top-box {
9 width: 100%; 15 width: 100%;
10 - position: absolute;  
11 - bottom: 20px; 16 + height: 468px;
  17 + color: #fff;
  18 + background-color: #000;
  19 + position: relative;
12 20
13 - .brand-title {  
14 - margin-left: 5%;  
15 - font-size: 32px;  
16 - } 21 + .brand-bottom {
  22 + width: 100%;
  23 + position: absolute;
  24 + bottom: 20px;
  25 +
  26 + .brand-title {
  27 + margin-left: 5%;
  28 + font-size: 32px;
  29 + }
  30 +
  31 + hr {
  32 + width: 90%;
  33 + border: #fff solid 1px;
  34 + border-top: none;
  35 + }
17 36
18 - hr {  
19 - width: 90%;  
20 - border: $white solid 1px;  
21 - border-top: none; 37 + .brand-intro {
  38 + margin-left: 5%;
  39 + width: 90%;
  40 + height: 60px;
  41 + font-size: 16px;
  42 + line-height: 32px;
  43 + overflow: hidden;
  44 + text-overflow: ellipsis;
  45 + }
  46 +
  47 + .line-clamp {
  48 + width: 82%;
  49 + display: -webkit-box;
  50 + -webkit-line-clamp: 2;
  51 + -webkit-box-orient: vertical;
  52 + }
22 } 53 }
23 54
24 - .brand-intro {  
25 - margin-left: 5%;  
26 - width: 90%; 55 + .expand {
  56 + width: 60px;
27 height: 60px; 57 height: 60px;
28 - font-size: 16px;  
29 - line-height: 32px;  
30 - overflow: hidden;  
31 - text-overflow: ellipsis; 58 + background: url("/channel/expand.png") no-repeat;
  59 + position: absolute;
  60 + bottom: 20px;
  61 + right: 5%;
32 } 62 }
33 63
34 - .line-clamp {  
35 - width: 82%;  
36 - display: -webkit-box;  
37 - -webkit-line-clamp: 2;  
38 - -webkit-box-orient: vertical; 64 + .collapse {
  65 + width: 60px;
  66 + height: 60px;
  67 + background: url("/channel/collapse.png") no-repeat;
  68 + position: absolute;
  69 + bottom: 20px;
  70 + right: 5%;
  71 + display: none;
39 } 72 }
40 } 73 }
41 74
42 - .expand {  
43 - width: 60px;  
44 - height: 60px;  
45 - background: url("/channel/expand.png") no-repeat;  
46 - position: absolute;  
47 - bottom: 20px;  
48 - right: 5%;  
49 - } 75 +</style>
  76 +<script>
  77 + const $ = require('yoho-jquery');
  78 + const tip = require('common/tip');
50 79
51 - .collapse {  
52 - width: 60px;  
53 - height: 60px;  
54 - background: url("/channel/collapse.png") no-repeat;  
55 - position: absolute;  
56 - bottom: 20px;  
57 - right: 5%;  
58 - display: none;  
59 - }  
60 -} 80 + module.exports = {
  81 + props: ['domain'],
  82 + data() {
  83 + return {
  84 + brandIntro: {}
  85 + };
  86 + },
  87 + watch: {
  88 + domain() {
  89 + this.getShopIntro();
  90 + }
  91 + },
  92 + methods: {
  93 + getShopIntro() {
  94 + let data = {
  95 + domain: this.domain
  96 + };
  97 +
  98 + $.ajax({
  99 + url: '/get-brand-intro',
  100 + data: data
  101 + }).then(result => {
  102 + this.brandIntro = result;
  103 + }).fail(() => {
  104 + tip('网络错误');
  105 + });
  106 + }
  107 + },
  108 + created() {
  109 + this.getShopIntro();
  110 + }
  111 + };
  112 +</script>