fe / yohoblk-wap · Commits

Go to a project

Authored by 郭成尧
Commit 21049d5a86297330ca6a53c2c87da3e1a4511a3b 1 parent 8093e5ed

brandList

Inline Side-by-side
Showing 7 changed files with 157 additions and 32 deletions
@@ -31,14 +31,16 @@ module.exports = { @@ -31,14 +31,16 @@ module.exports = {
31 31
32 /* 品牌列表页 */ 32 /* 品牌列表页 */
33 brandList: (req, res) => { 33 brandList: (req, res) => {
34 - let params = req.query;  
35 34
36 - brandModel.getBrandListData(params).then(result => {  
37 - res.render('brand/brand-list', {  
38 - module: 'channel',  
39 - page: 'brand-list',  
40 - result: result  
41 - }); 35 + res.render('brand/brand-list', {
  36 + module: 'channel',
  37 + page: 'brand-list'
  38 + });
  39 + },
  40 +
  41 + getBrandList: (req, res) => {
  42 + brandModel.getBrandListData().then(result => {
  43 + res.json(result);
42 }); 44 });
43 }, 45 },
44 46
@@ -42,29 +42,64 @@ const getBrandListData = params => { @@ -42,29 +42,64 @@ const getBrandListData = params => {
42 Object.assign(finalResult, { 42 Object.assign(finalResult, {
43 brandList: [ 43 brandList: [
44 { 44 {
45 - name: 'Yohji Yamamoto(eyes wear)',  
46 - href: '#',  
47 - logo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140' 45 + index: 'A',
  46 + brands: [
  47 + {
  48 + name: 'Yohji Yamamoto(eyes wear)',
  49 + link: '#',
  50 + logo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
  51 + },
  52 + {
  53 + name: 'TEEN TEAM',
  54 + link: '#',
  55 + logo: 'https://img12.static.yhbimg.com/brandLogo/2015/12/03/14/02d4dba71951e8e971dc85d2eab5fe7a7f.jpg?imageView2/2/w/140/h/140'
  56 + },
  57 + {
  58 + name: 'MYGESMART',
  59 + link: '#',
  60 + logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
  61 + },
  62 + {
  63 + name: 'MYGESMART',
  64 + link: '#',
  65 + logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
  66 + },
  67 + {
  68 + name: 'MYGESMART',
  69 + link: '#',
  70 + logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
  71 + }
  72 + ]
48 }, 73 },
49 { 74 {
50 - name: 'TEEN TEAM',  
51 - href: '#',  
52 - logo: 'https://img12.static.yhbimg.com/brandLogo/2015/12/03/14/02d4dba71951e8e971dc85d2eab5fe7a7f.jpg?imageView2/2/w/140/h/140'  
53 - },  
54 - {  
55 - name: 'MYGESMART',  
56 - href: '#',  
57 - logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'  
58 - },  
59 - {  
60 - name: 'MYGESMART',  
61 - href: '#',  
62 - logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'  
63 - },  
64 - {  
65 - name: 'MYGESMART',  
66 - href: '#',  
67 - logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140' 75 + index: 'B',
  76 + brands: [
  77 + {
  78 + name: 'Yohji Yamamoto(eyes wear)',
  79 + link: '#',
  80 + logo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
  81 + },
  82 + {
  83 + name: 'TEEN TEAM',
  84 + link: '#',
  85 + logo: 'https://img12.static.yhbimg.com/brandLogo/2015/12/03/14/02d4dba71951e8e971dc85d2eab5fe7a7f.jpg?imageView2/2/w/140/h/140'
  86 + },
  87 + {
  88 + name: 'MYGESMART',
  89 + link: '#',
  90 + logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
  91 + },
  92 + {
  93 + name: 'MYGESMART',
  94 + link: '#',
  95 + logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
  96 + },
  97 + {
  98 + name: 'MYGESMART',
  99 + link: '#',
  100 + logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
  101 + }
  102 + ]
68 } 103 }
69 ] 104 ]
70 }); 105 });
@@ -19,7 +19,8 @@ router.get('/women', channel.index); // 首页 @@ -19,7 +19,8 @@ router.get('/women', channel.index); // 首页
19 router.get('/lifestyle', channel.index); // 首页 19 router.get('/lifestyle', channel.index); // 首页
20 router.get('/resources', channel.resources); // 资源位接口 20 router.get('/resources', channel.resources); // 资源位接口
21 router.get('/brand', brand.index); // 店铺首页 21 router.get('/brand', brand.index); // 店铺首页
22 -router.get('/brand-list', brand.brandList); // 店铺首页 22 +router.get('/brand-list', brand.brandList); // 品牌列表页
  23 +router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据
23 router.get('/cate', brand.cate); // 全部分类 24 router.get('/cate', brand.cate); // 全部分类
24 25
25 26
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 <script> 5 <script>
6 const brandTopComponent = require('channel/brand-top.vue'); 6 const brandTopComponent = require('channel/brand-top.vue');
7 7
  8 + // TODO 确定分享页面后需要添加拼接分享链接的公共方法
8 let shareLink = 'http://www.yohobuy.com'; 9 let shareLink = 'http://www.yohobuy.com';
9 10
10 module.exports = { 11 module.exports = {
1 <template> 1 <template>
2 <div> 2 <div>
3 - <resources v-bind:content="'men'"></resources> 3 + <resources v-bind:content="'111'"></resources>
4 <letter-list></letter-list> 4 <letter-list></letter-list>
  5 + <brand-list v-bind:channel="'boys'"></brand-list>
5 </div> 6 </div>
6 </template> 7 </template>
7 <style> 8 <style>
@@ -9,13 +10,15 @@ @@ -9,13 +10,15 @@
9 <script> 10 <script>
10 const resources = require('channel/resources.vue'); 11 const resources = require('channel/resources.vue');
11 const letterList = require('channel/letter-list.vue'); 12 const letterList = require('channel/letter-list.vue');
  13 + const brandList = require('channel/brand-list.vue');
12 14
13 require('common/vue-filter'); 15 require('common/vue-filter');
14 16
15 module.exports = { 17 module.exports = {
16 components: { 18 components: {
17 resources, 19 resources,
18 - letterList 20 + letterList,
  21 + brandList
19 } 22 }
20 }; 23 };
21 </script> 24 </script>
  1 +<template>
  2 + <div class="brand-list-box">
  3 + <div v-for="item in brandList" class="per-brand-box">
  4 + <div class="index"><a href="#{{item.index}}" name="{{item.index}}">{{item.index}}</a></div>
  5 + <div class="brand-big-box clearfix">
  6 + <div class="brand-box" v-for="brand in item.brands">
  7 + <a href="{{brand.link}}">
  8 + <div class="brand-logo">
  9 + <img src="{{brand.logo}}" alt="{{brand.name}}">
  10 + </div>
  11 +
  12 + <span class="brand-name">{{brand.name}}</span>
  13 + </a>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + </div>
  18 +</template>
  19 +<style>
  20 + .brand-list-box {
  21 + width: 100%;
  22 + height: 600px;
  23 +
  24 + .brand-big-box {
  25 + width: 100%;
  26 + }
  27 +
  28 + .brand-box {
  29 + width: 25%;
  30 + height: 175px;
  31 + float: left;
  32 + overflow: hidden;
  33 +
  34 + .brand-logo {
  35 + height: 150px;
  36 + }
  37 +
  38 + .brand-name {
  39 + white-space: nowrap;
  40 + color: #d0d0d0;
  41 + }
  42 + }
  43 + }
  44 +</style>
  45 +<script>
  46 + const $ = require('yoho-jquery');
  47 + const tip = require('common/tip');
  48 +
  49 + module.exports = {
  50 + props: ['channel'],
  51 + data() {
  52 + return {
  53 + brandList: []
  54 + };
  55 + },
  56 + watch: {
  57 + channel() {
  58 + this.getBrandList();
  59 + }
  60 + },
  61 + methods: {
  62 + getBrandList() {
  63 + let data = {
  64 + channel: this.channel
  65 + };
  66 + let self = this;
  67 +
  68 + $.ajax({
  69 + url: '/get-brand-list',
  70 + data: data
  71 + }).then(result => {
  72 + self.$set('brandList', result.brandList);
  73 + }).fail(() => {
  74 + tip('网络错误');
  75 + });
  76 + }
  77 + },
  78 + created() {
  79 + this.getBrandList();
  80 + }
  81 + };
  82 +</script>
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <style> 6 <style>
7 .list-box { 7 .list-box {
8 position: fixed; 8 position: fixed;
9 - height: 100%; 9 + height: 500px;
10 width: 30px; 10 width: 30px;
11 margin: 0; 11 margin: 0;
12 padding: 6px; 12 padding: 6px;
@@ -15,6 +15,7 @@ @@ -15,6 +15,7 @@
15 background: #fff; 15 background: #fff;
16 opacity: 0.8; 16 opacity: 0.8;
17 top: 0; 17 top: 0;
  18 + overflow-y: auto;
18 19
19 li { 20 li {
20 list-style: none; 21 list-style: none;