fe / yohobuywap-node · Commits

Go to a project

Authored by baoss
Commit aca1f5e05ec055c55ec2ab1a99ac65815d2ac13c 1 parent 1c36c395

首页增加拼团筛选列表

Inline Side-by-side
Showing 12 changed files with 400 additions and 12 deletions
... ... @@ -4,18 +4,23 @@ const {
} = require('../models/group-service');
function index(req, res, next) {
req.ctx(GroupService).index()
.then(result => {
return res.render('group/index', {
title: '有货福利团',
page: 'group',
localCss: true,
nodownload: true,
width750: true,
wechatShare: true,
floors: result
});
}).catch(next);
Promise.all([req.ctx(GroupService).index(),
req.ctx(GroupService).tabData(),
req.ctx(GroupService).filterGroupList()
]).then(result => {
console.log(result[2]);
return res.render('group/index', {
title: '有货福利团',
page: 'group',
localCss: true,
nodownload: true,
width750: true,
wechatShare: true,
floors: result[0],
tabs: result[1],
filterList: result[2]
});
}).catch(next);
}
... ...
... ... @@ -36,7 +36,42 @@ class GroupApi extends global.yoho.BaseModel {
return activityData;
}));
}
_getPromoteCount() {
let option = {
data: {
method: 'app.collage.promoteCount'
},
param: {
code: 200
}
};
return this.get(option).then((result => {
let promoteCount = result.data;
return promoteCount;
}));
}
_getPromoteList(params) {
let option = {
data: {
method: 'app.collage.promoteList',
page: params.page || 1,
limit: params.limit || 20,
...params
},
param: {
code: 200
}
};
return this.get(option).then((result => {
let promoteList = result.data;
return promoteList;
}));
}
}
... ...
... ... @@ -18,6 +18,42 @@ class GroupService extends global.yoho.BaseModel {
throw new Error('Group index fail to load resources.');
}
}
async tabData() {
const result = await this.api._getPromoteCount();
let tabsData = {};
let {
newGroup = 0, normalGroup = 0
} = result;
if (+newGroup && +normalGroup) {
tabsData.showTab = true;
}
return tabsData;
}
async filterGroupList(params) {
const initParams = {
page: 1,
limit: 20,
joinLimit: 1
};
let newParams = {
...initParams,
...params
};
const result = await this.api._getPromoteList(newParams);
let finalResult = {};
if (_.get(result, 'list')) {
finalResult = result.list;
_.forEach(finalResult, (val) => {
val.sales_price = val.sales_price ? val.sales_price.toFixed(2) : '';
val.market_price = val.market_price ? val.market_price.toFixed(2) : '';
val.collagePrice = val.collagePrice ? val.collagePrice.toFixed(2) : '';
});
}
return finalResult;
}
async groupList(params) {
const initParams = {
page: 1,
... ...
... ... @@ -20,6 +20,37 @@
{{> group/resources/collage-buy-prd-list}}
{{/ifcond}}
{{/each}}
<div id='fixedTab' class="tab-filter">
{{!-- {{#if floatTab}} float{{/if}}{{#if !tabs.showTab}} only-filter{{/if}} --}}
{{#if tabs.showTab}}
<div class="tab">
<div class="tabItem">
<div class="tiptext active" data-channel="newGroup">邀新团</div>
{{!-- {{#if isNewGroup}} --}}
<div class="tab-line"></div>
{{!-- {{/if}} --}}
</div>
<div class="tabItem">
<div class="tiptext" data-channel="normalGroup">普通团</div>
{{!-- {{#if !isNewGroup}} --}}
{{!-- <div class="tab-line"></div> --}}
{{!-- {{/if}} --}}
</div>
</div>
{{/if}}
{{> group/resources/filter-tab}}
</div>
{{#if filterList.length}}
<div class="group-list">
{{#each filterList}}
{{> group/resources/filter-list-item}}
{{/each}}
</div>
{{/if}}
</div>
<a class="bottom" href="/activity/group/progress">我的拼团</a>
</div>
\ No newline at end of file
... ...
<div class="group-product-cell-bg" data-group-product="{{group_product}}" data-item-idx="{{itemIdx}}">
<div class="group-product-header">
<div class="group-product-left-icon">
<span class="group-product-left-icon-number">{{people_num}}人团</span>
</div>
<img class="group-product-image" src="{{image2 default_images w=400 h=390 q=60 mode=3}}"></img>
</div>
<div class="group-product-name">{{product_name}}</div>
<div class="group-price">
<div class="group-prict-bg">
<span class="group-price-market">{{market_price_str}}</span>
<span class="group-price-collage">{{collage_price_str}}</span>
</div>
<div class="group-free-post"></div>
</div>
</div>
\ No newline at end of file
... ...
<ul id="list-nav" class="list-nav filter-nav clearfix">
{{!-- <li class="default active first-li-more">
<a href="javascript:void(0);">
<span class="span-test">默认</span>
<span class="iconfont drop">&#xe613;</span>
</a>
</li> --}}
<li class="new active" data-order="s_t_desc">
<a href="javascript:void(0);">
<span class="span-test">新品</span>
</a>
</li>
<li class="popularity" data-order="h_v_desc">
<a href="javascript:void(0);">
<span class="span-test">人气</span>
</a>
</li>
<li class="price">
<a href="javascript:void(0);">
<span class="span-test">价格</span>
<span class="icon">
<i class="iconfont up cur" data-order="s_p_asc">&#xe615;</i>
<i class="iconfont down" data-order="s_p_desc">&#xe616;</i>
</span>
</a>
</li>
<li class="filter">
<a href="javascript:void(0);">
<span class="span-test">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
\ No newline at end of file
... ...
... ... @@ -16,6 +16,7 @@ class ProductListLoader {
this.defaultOpt = Object.assign({}, this.params); // 默认参数
this.isScrollLoad = false; // 是否是滚动加载
this.page = params.page || 1;
this.isLoadMore = true; // 是否继续请求数据
let self = this;
/**
... ... @@ -69,6 +70,7 @@ class ProductListLoader {
} else {
this.view.container.html('<div>未查询到数据！</div>');
}
this.isLoadMore = false;
return false;
}
... ... @@ -99,6 +101,9 @@ class ProductListLoader {
}
let catchKey = this.url + '?' + $.param(this.defaultOpt);
if (!this.isLoadMore) {
return false;
}
$.ajax({
type: 'GET',
url: this.url,
... ...
.group-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
.group-product-image {
width: 322px;
height: 430px;
}
.group-product-cell-bg {
margin-top: 20px;
}
.group-product-header {
position: relative;
}
.group-product-left-icon {
position: absolute;
top: 10px;
width: 88px;
height: 40px;
left: -12px;
font-size: 22px;
background: url("img/activity/group/group/tab@3x.png") no-repeat;
background-size: contain;
}
.group-product-left-icon-number {
display: inline-block;
color: #fff;
font-size: 22px;
margin-left: 12px;
margin-top: 10px;
}
.group-product-name {
width: 322px;
height: 56px;
line-height: 28px;
font-size: 20px;
color: #444;
margin-top: 24px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.group-price {
display: flex;
flex-direction: row;
align-items: center;
}
.group-price-market {
text-decoration: line-through;
padding-right: 15px;
}
.group-price-collage {
font-size: 32px;
color: #d0021b;
font-weight: bold;
}
.group-prict-bg {
font-size: 22px;
color: #444;
}
.group-free-post {
width: 60px;
height: 40px;
margin-left: 20px;
background: url("img/activity/group/group/free-post@3x.png") no-repeat;
background-size: contain;
}
... ...
... ... @@ -5,6 +5,8 @@
@import "floor/two-image";
@import "floor/split-image";
@import "floor/collage-buy-list";
@import "tabs";
@import "filter-list";
.group {
.resources {
... ... @@ -24,4 +26,69 @@
background-color: #fff;
border-top: 1px solid #e0e0e0;
}
.tab {
width: 100%;
height: wrap;
display: flex;
flex-direction: row;
align-items: center;
background-color: white;
z-index: 1000;
border-bottom: 1px solid #e0e0e0;
border-top: 10px solid #f0f0f0;
.tab-item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 80px;
justify-content: center;
}
}
.tiptext {
font-size: 32px;
color: #b0b0b0;
flex: 1;
width: wrap;
text-align: center;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: center;
flex-direction: row;
align-items: center;
font-weight: 500;
}
.tiptext.active {
color: #444;
}
.tab-line {
position: absolute;
bottom: -2px;
left: 50%;
background-color: black;
width: 180px;
height: 4px;
transform: translateX(-50%);
}
.tab-filter.float {
position: fixed;
top: -22px;
left: 0;
right: 0;
border-top: none;
z-index: 998;
background-color: #fff;
}
.tab-filter.float.only-filter {
top: -1px;
}
}
... ...
.list-nav {
border-top: 2px solid #fff;
border-bottom: 1px solid #e6e6e6;
> li {
float: left;
width: 25%;
height: 33PX;
line-height: 33PX;
text-align: center;
font-size: 14PX;
}
a {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
color: #999;
}
.nav-txt {
display: inline-block;
height: 100%;
box-sizing: border-box;
}
.active > a {
color: #000;
.iconfont {
color: #999;
&.cur {
color: #000;
}
}
}
.new .iconfont {
transform: scale(0.8);
font-weight: bold;
font-size: 12PX;
}
.filter .iconfont {
font-size: 12PX;
transition: transform 0.1 ease-in;
}
.filter.active .iconfont {
transform: rotate(-180deg);
}
.icon {
position: relative;
i {
position: absolute;
transform: scale(0.8);
font-weight: bold;
}
.up {
top: -11PX;
}
.down {
top: -4PX;
}
}
}
... ...