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 = {
/* 品牌列表页 */
brandList: (req, res) => {
let params = req.query;
brandModel.getBrandListData(params).then(result => {
res.render('brand/brand-list', {
module: 'channel',
page: 'brand-list',
result: result
});
res.render('brand/brand-list', {
module: 'channel',
page: 'brand-list'
});
},
getBrandList: (req, res) => {
brandModel.getBrandListData().then(result => {
res.json(result);
});
},
... ...
... ... @@ -42,29 +42,64 @@ const getBrandListData = params => {
Object.assign(finalResult, {
brandList: [
{
name: 'Yohji Yamamoto(eyes wear)',
href: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
index: 'A',
brands: [
{
name: 'Yohji Yamamoto(eyes wear)',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
},
{
name: 'TEEN TEAM',
link: '#',
logo: 'https://img12.static.yhbimg.com/brandLogo/2015/12/03/14/02d4dba71951e8e971dc85d2eab5fe7a7f.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
}
]
},
{
name: 'TEEN TEAM',
href: '#',
logo: 'https://img12.static.yhbimg.com/brandLogo/2015/12/03/14/02d4dba71951e8e971dc85d2eab5fe7a7f.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
href: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
href: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
href: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
index: 'B',
brands: [
{
name: 'Yohji Yamamoto(eyes wear)',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
},
{
name: 'TEEN TEAM',
link: '#',
logo: 'https://img12.static.yhbimg.com/brandLogo/2015/12/03/14/02d4dba71951e8e971dc85d2eab5fe7a7f.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
},
{
name: 'MYGESMART',
link: '#',
logo: 'https://img11.static.yhbimg.com/brandLogo/2014/01/27/11/01d9dbee4c83e9122bd1fc363ceb85e484.jpg?imageView2/2/w/140/h/140'
}
]
}
]
});
... ...
... ... @@ -19,7 +19,8 @@ router.get('/women', channel.index); // 首页
router.get('/lifestyle', channel.index); // 首页
router.get('/resources', channel.resources); // 资源位接口
router.get('/brand', brand.index); // 店铺首页
router.get('/brand-list', brand.brandList); // 店铺首页
router.get('/brand-list', brand.brandList); // 品牌列表页
router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据
router.get('/cate', brand.cate); // 全部分类
... ...
... ... @@ -5,6 +5,7 @@
<script>
const brandTopComponent = require('channel/brand-top.vue');
// TODO 确定分享页面后需要添加拼接分享链接的公共方法
let shareLink = 'http://www.yohobuy.com';
module.exports = {
... ...
<template>
<div>
<resources v-bind:content="'men'"></resources>
<resources v-bind:content="'111'"></resources>
<letter-list></letter-list>
<brand-list v-bind:channel="'boys'"></brand-list>
</div>
</template>
<style>
... ... @@ -9,13 +10,15 @@
<script>
const resources = require('channel/resources.vue');
const letterList = require('channel/letter-list.vue');
const brandList = require('channel/brand-list.vue');
require('common/vue-filter');
module.exports = {
components: {
resources,
letterList
letterList,
brandList
}
};
</script>
... ...
<template>
<div class="brand-list-box">
<div v-for="item in brandList" class="per-brand-box">
<div class="index"><a href="#{{item.index}}" name="{{item.index}}">{{item.index}}</a></div>
<div class="brand-big-box clearfix">
<div class="brand-box" v-for="brand in item.brands">
<a href="{{brand.link}}">
<div class="brand-logo">
<img src="{{brand.logo}}" alt="{{brand.name}}">
</div>
<span class="brand-name">{{brand.name}}</span>
</a>
</div>
</div>
</div>
</div>
</template>
<style>
.brand-list-box {
width: 100%;
height: 600px;
.brand-big-box {
width: 100%;
}
.brand-box {
width: 25%;
height: 175px;
float: left;
overflow: hidden;
.brand-logo {
height: 150px;
}
.brand-name {
white-space: nowrap;
color: #d0d0d0;
}
}
}
</style>
<script>
const $ = require('yoho-jquery');
const tip = require('common/tip');
module.exports = {
props: ['channel'],
data() {
return {
brandList: []
};
},
watch: {
channel() {
this.getBrandList();
}
},
methods: {
getBrandList() {
let data = {
channel: this.channel
};
let self = this;
$.ajax({
url: '/get-brand-list',
data: data
}).then(result => {
self.$set('brandList', result.brandList);
}).fail(() => {
tip('网络错误');
});
}
},
created() {
this.getBrandList();
}
};
</script>
... ...
... ... @@ -6,7 +6,7 @@
<style>
.list-box {
position: fixed;
height: 100%;
height: 500px;
width: 30px;
margin: 0;
padding: 6px;
... ... @@ -15,6 +15,7 @@
background: #fff;
opacity: 0.8;
top: 0;
overflow-y: auto;
li {
list-style: none;
... ...