Authored by baoss

首页增加tab资源位、切换获取资源位 review by bevishuang

... ... @@ -31,7 +31,15 @@ function goodsTab(req, res, next) {
return res.json({filterList: result.filterGroupList});
}).catch(next);
}
function getResources(req, res, next) {
let query = req.query || {};
req.ctx(GroupService).newIndex(query.code).then(result => {
return res.json({
floors: result
});
}).catch(next);
}
function newIndex(req, res, next) {
req.ctx(GroupService).newGroupIndex().then(result => {
return res.render('group/newIndex', {
... ... @@ -41,7 +49,8 @@ function newIndex(req, res, next) {
nodownload: true,
width750: true,
wechatShare: true,
floors: result.index,
tabfloors: result.index,
floors: result.floors,
tabs: result.tabData,
filterList: result.filterGroupList,
shareInfo: result.shareInfo,
... ... @@ -435,5 +444,6 @@ module.exports = {
searchList,
delOrder,
cancelOrder,
goodsTab
goodsTab,
getResources
};
... ...
... ... @@ -20,12 +20,14 @@ const contentCodes = {
const newContentCodes = {
test: {
homeTab: 'cbdd29c609017c2803d46d99bd17a33a',
home: '7744d415ea1a9da42398b27a1376a879',
ready: '89141506b9926010f28915a82b3db61d',
result: '3c3a94fd6c6e19508b6921acd7f6cbad',
detail: 'cea0efae77f4e04c935beb1e87181247'
},
production: {
homeTab: 'cbdd29c609017c2803d46d99bd17a33a',
home: '7744d415ea1a9da42398b27a1376a879',
ready: '89141506b9926010f28915a82b3db61d',
result: '3c3a94fd6c6e19508b6921acd7f6cbad',
... ... @@ -39,10 +41,10 @@ class GroupService extends global.yoho.BaseModel {
this.api = new GroupApi(ctx);
}
async newIndex() {
async newIndex(content_code) {
try {
const result = await this.api._getResourceCode({
contentCode: newContentCodes.home
contentCode: content_code || newContentCodes.homeTab
});
return result;
... ... @@ -199,6 +201,9 @@ class GroupService extends global.yoho.BaseModel {
let tabCurrentIndex = tabIndex || 0;
result.index = await this.newIndex() || [];
result.shareInfo = await this.getShareInfo({
share_id: 6737
});
let filters = [];
result.index.forEach(item => {
... ... @@ -217,7 +222,7 @@ class GroupService extends global.yoho.BaseModel {
indexFilter.query.forEach(item => {
query = Object.assign(query, item);
});
result.floors = query.code && await this.newIndex(query.code);
result.filterGroupList = await this.filterGroupList({
...query
});
... ...
... ... @@ -389,6 +389,7 @@ router.post('/yoluck/detail/mylist.html', swtichYoLuck(yoluck.getActivityCodeLis
router.get('/group', group.newIndex); // 拼团首页
router.get('/group/list', group.groupListIndex); // 拼团列表页
router.get('/group/goods-list', group.groupList); // 拼团列表
router.get('/group/resources', group.getResources); // tab切换获取资源位
router.get('/group/goods-tab', group.goodsTab);
router.get('/group/filter', group.filter); // 首页筛选结果页
router.get('/group/search', group.searchList); // 首页筛选列表
... ...
<div class="group" data-share-img="{{shareInfo.bigImage}}" data-share-title="{{shareInfo.title}}" data-share-content="{{shareInfo.content}}" data-is-App="{{isApp}}">
<div class="resources good-info" id="resources">
{{#each tabfloors}}
{{#ifcond template_name "==" 'guessLike'}}
{{> group/resources/guess-like}}
{{/ifcond}}
{{/each}}
<div class="resources good-info tab-content" id="resources">
<div class="floors">
{{#each floors}}
{{#ifcond template_name "==" 'focus'}}
{{> group/resources/focus}}
{{/ifcond}}
{{#ifcond template_name "==" 'newSingleImage'}}
{{> group/resources/new-single-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'twoPicture'}}
{{> group/resources/two-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'image_list'}}
{{> group/resources/four-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'splitJointImg'}}
{{> group/resources/split-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'collageBuyPrdList'}}
{{> group/resources/collage-buy-prd-list}}
{{/ifcond}}
{{#ifcond template_name "==" 'guessLike'}}
{{> group/resources/guess-like}}
{{/ifcond}}
{{/each}}
{{> group/resources/resources}}
</div>
{{!-- <div id='fixedTab' class="tab-filter" data-group="{{#if tabs.joinLimit}}{{tabs.joinLimit}}{{/if}}">
{{#if tabs.showTab}}
... ...
<div id='fixedTab' class="guess-like templates" data-template-name="{{template_name}}" data-template-id="{{template_id}}" data-id="{{@index}}">
<div id='fixedTab' class="guess-like templates float" data-template-name="{{template_name}}" data-template-id="{{template_id}}" data-id="{{@index}}">
<div class="wapper">
<div class="guess-scroll">
{{#each data}}
{{#ifcond @index '==' 0}}
<div id="tab-{{@index}}" data-template-name="{{../template_name}}" data-tab-name="{{tab_name}}" data-template-id="{{../template_id}}" data-index="{{@index}}" data-index-idx="{{@../index}}" data-item-idx="{{@index}}" class="guess-tab first" data-query="{{queryString}}">
{{#if src}}
<img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
<div class=""></div>
{{else}}
<span class="guess-like-tab">{{tab_name}}</span>
{{/if}}
</div>
{{^}}
<div id="tab-{{@index}}" data-template-name="{{../template_name}}" data-tab-name="{{tab_name}}" data-template-id="{{../template_id}}" data-index="{{@index}}" data-index-idx="{{@../index}}" data-item-idx="{{@index}}" class="guess-tab" data-query="{{queryString}}">
{{#if src}}
<img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
<div></div>
{{else}}
<span class="guess-like-tab">{{tab_name}}</span>
{{/if}}
</div>
{{/ifcond}}
{{/each}}
... ...
{{#each floors}}
{{#ifcond template_name "==" 'focus'}}
{{> group/resources/focus}}
{{/ifcond}}
{{#ifcond template_name "==" 'newSingleImage'}}
{{> group/resources/new-single-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'twoPicture'}}
{{> group/resources/two-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'image_list'}}
{{> group/resources/four-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'splitJointImg'}}
{{> group/resources/split-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'collageBuyPrdList'}}
{{> group/resources/collage-buy-prd-list}}
{{/ifcond}}
{{#ifcond template_name "==" 'guessLike'}}
{{> group/resources/guess-like}}
{{/ifcond}}
{{/each}}
... ...
{{#each floors}}
{{#ifcond template_name "==" 'focus'}}
{{> ../../../../apps/activity/views/partial/group/resources/focus}}
{{/ifcond}}
{{#ifcond template_name "==" 'newSingleImage'}}
{{> ../../../../apps/activity/views/partial/group/resources/new-single-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'twoPicture'}}
{{> ../../../../apps/activity/views/partial/group/resources/two-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'image_list'}}
{{> ../../../../apps/activity/views/partial/group/resources/four-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'splitJointImg'}}
{{> ../../../../apps/activity/views/partial/group/resources/split-image}}
{{/ifcond}}
{{#ifcond template_name "==" 'collageBuyPrdList'}}
{{> ../../../../apps/activity/views/partial/group/resources/collage-buy-prd-list}}
{{/ifcond}}
{{#ifcond template_name "==" 'guessLike'}}
{{> ../../../../apps/activity/views/partial/group/resources/guess-like}}
{{/ifcond}}
{{/each}}
... ...
... ... @@ -9,6 +9,7 @@ import innerScroll from 'js/plugin/inner-scroll';
import sharePlugin from 'js/common/share';
const querystring = require('querystring');
let groupListItem = require('hbs/activity/group/group-list-product.hbs');
let resources = require('hbs/activity/group/resources.hbs');
const yoho = require('js/yoho-app');
class Group extends Page {
... ... @@ -106,7 +107,7 @@ class Group extends Page {
$(window).scroll(() => {
window.requestAnimationFrame(() => {
self.scrollHandler();
// self.scrollHandler();
});
setTimeout(() => {
let afterScroll = window.scrollY;
... ... @@ -261,7 +262,8 @@ class Group extends Page {
}
}
guessLikeTabChange(e) {
async guessLikeTabChange(e) {
let that = this;
let $this = $(e.currentTarget);
let query = $this.data('query');
let index = $this.data('index');
... ... @@ -298,26 +300,32 @@ class Group extends Page {
let lastDom = document.getElementById(`tab-${index - 2}`);
$('.wapper').animate({scrollLeft: lastDom && lastDom.offsetLeft || 0});
if (document.getElementById('fixedTab').offsetTop) {
this.scrollSmoothTo(document.getElementById('fixedTab').offsetTop);
this.scrollSmoothTo(document.getElementById('resources').offsetTop);
// if (document.getElementById('fixedTab').offsetTop) {
// this.scrollSmoothTo(document.getElementById('fixedTab').offsetTop);
// } else {
// this.scrollSmoothTo(document.getElementById('goodsContainer').offsetTop);
// }
$('.guess-tab').children('div').removeClass('guess-tab-active');
$this.children('div').addClass('guess-tab-active');
$('.guess-tab').children('.guess-like-tab').removeClass('guess-like-tab-active');
$this.children('.guess-like-tab').addClass('guess-like-tab-active');
if (queryObject.code) {
this.fetchResources({
code: queryObject.code
}).then(res => {
that.renderFloor(res);
});
} else {
this.scrollSmoothTo(document.getElementById('goodsContainer').offsetTop);
$('.floors').html('');
}
$.ajax({
type: 'GET',
url: '/activity/group/goods-tab',
data: queryObject,
success: (data) => {
// $('.filter-mask').remove();
// $('.group').append(data);
// $('.guess-scroll').find('')
$('.guess-tab').children('div').removeClass('guess-tab-active');
$this.children('div').addClass('guess-tab-active');
this.renderMoreData(data.filterList || []);
}
this.fetchGoodsList(queryObject).then(data => {
that.renderMoreData(data.filterList || []);
});
}
scrollSmoothTo(position) {
... ... @@ -376,6 +384,7 @@ class Group extends Page {
}
loadMoreData() {
let that = this;
let newNavType = this.judgeNavType(this.newFilterTab);
let newNav = this.newNavInfo[newNavType];
... ... @@ -388,17 +397,41 @@ class Group extends Page {
newNav.end = true;
$.ajax({
type: 'GET',
url: '/activity/group/goods-tab',
data: newQueryObject,
success: (data) => {
this.renderMoreData(data.filterList || [], true);
newNav.end = false;
},
error: () => {
newNav.end = false;
}
this.fetchGoodsList(newQueryObject).then(data => {
that.renderMoreData(data.filterList || [], true);
newNav.end = false;
}).catch(() => {
newNav.end = false;
});
}
fetchResources(query) {
return new Promise((resolve, reject) => {
$.ajax({
type: 'GET',
url: '/activity/group/resources',
data: query,
success: (data) => {
resolve(data);
},
error: () => {
reject();
}
});
});
}
fetchGoodsList(query) {
return new Promise((resolve, reject) => {
$.ajax({
type: 'GET',
url: '/activity/group/goods-tab',
data: query,
success: (data) => {
resolve(data);
},
error: () => {
reject();
}
});
});
}
... ... @@ -692,7 +725,11 @@ class Group extends Page {
lazyLoad(groupListContent.find('img.lazy'));
}
}
renderFloor(data) {
let resourceHtml = resources(data);
$('.floors').html(resourceHtml);
}
renderMoreData(list, isLoad) {
let appendHtml = '';
... ... @@ -709,6 +746,7 @@ class Group extends Page {
// 筛选初始化
filterInit() {
$('.guess-scroll').find('div:first-child').children('div').addClass('guess-tab-active');
$('.guess-scroll').find('div:first-child').children('.guess-like-tab').addClass('guess-like-tab-active');
let first = $('.guess-scroll').find('div:first-child');
this.tabName = first.data('tab-name');
... ...
.guess-like {
overflow: hidden;
height: 80px;
height: 88px;
box-sizing: initial;
.wapper {
... ... @@ -42,6 +42,19 @@
background-color: #444;
}
.guess-like-tab {
width: 160px;
line-height: 88px;
text-align: center;
font-size: 28px;
color: #999;
}
.guess-like-tab-active {
font-size: 32px;
color: #333;
}
.wapper::-webkit-scrollbar {
width: 0 !important;
display: none;
... ... @@ -54,5 +67,5 @@
left: 0;
right: 0;
z-index: 998;
background-color: #f0f0f0;
background-color: #fff;
}
... ...
... ... @@ -17,6 +17,10 @@
margin-bottom: 90px;
}
.tab-content {
padding-top: 80px;
}
.bottom {
position: fixed;
right: 0;
... ...
... ... @@ -6,6 +6,7 @@
display: flex;
flex-direction: column;
margin: 0 20px;
padding: 10px 0;
}
.new-index-filter-list-item:first-child {
... ...