fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit 6af1638f0b28d7923f3ee37925e6b3b8279d2b1c 2 parents d82075c4 9e07d707

资讯

Inline Side-by-side
Showing 9 changed files with 187 additions and 16 deletions
... ... @@ -36,21 +36,25 @@ const index = (req, res) => {
{
typeId: '0',
isActive: true,
href: '#',
type: '最新'
},
{
typeId: '1',
isActive: false,
href: '#',
type: '话题'
},
{
typeId: '2',
isActive: false,
href: '#',
type: '搭配'
},
{
typeId: '3',
isActive: false,
href: '#',
type: '潮人'
},
{
... ... @@ -61,6 +65,7 @@ const index = (req, res) => {
],
msg: [
{
id: '1',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
... ... @@ -70,6 +75,7 @@ const index = (req, res) => {
like: '8'
},
{
id: '2',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
... ... @@ -93,6 +99,70 @@ const index = (req, res) => {
});
};
const list = (req, res) => {
var pageNum = req.query.page || 1;
res.display('list', {
module: 'editorial',
page: 'list',
title: '资讯列表',
editorialList: {
nav: [
{
link: '//guang.yohobuy.com/index/index?type=0',
pathTitle: '首页',
name: 'MEN首页'
},
{
link: '/',
pathTitle: '资讯',
name: '咨询'
},
{
link: '/',
pathTitle: '资讯',
name: '咨询'
}
],
pathTitle: '户外',
msg: [
{
id: '1',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
},
{
id: '2',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
}
],
paginationOpts: {
page: pageNum, // current page: http://host/?page=2
limit: 10, // per_page records' number
totalRows: 100 // total page number
}
},
helpers: {
// import component, path depends on your project
pagination: require('../../../doraemon/components/pagination/pagination').createPagination
}
});
};
module.exports = {
index // 组件demo页
index, // 组件demo页
list
};
... ...
... ... @@ -11,6 +11,6 @@ const cRoot = './controllers';
const editorial = require(cRoot + '/editorial');
router.get('/', editorial.index); // 咨询首页
// router.get('/list', editorial.list); // 咨询列表页
router.get('/list', editorial.list); // 咨询列表页
module.exports = router;
... ...
<div class="editorial-index-page">
<div class="editorial-index-page center-content">
{{# editorial}}
{{> path-nav}}
... ... @@ -6,7 +6,7 @@
<ul class="msg-nav">
{{# msgTypes}}
<li data-type="{{typeId}}" {{#if isActive}}class="active"{{/if}}>
<a class="pjax-link" href="{{navUrl}}">{{type}}</a>
<a class="pjax-link" href="{{href}}">{{type}}</a>
</li>
{{/ msgTypes}}
</ul>
... ...
<div class="editorial-list-page center-content">
{{# editorialList}}
{{> path-nav}}
<div class="list-content">
<span class="nav-title inline-block"><b>{{pathTitle}}</b>关联的文章</span>
<div id="msg-list" class="msg-list">
{{# msg}}
{{> msg}}
{{/ msg}}
</div>
<div class="paging">
{{{ pagination paginationOpts }}}
</div>
</div>
{{/ editorialList}}
</div>
\ No newline at end of file
... ...
<div class="content-msg clearfix" data-id="{{id}}">
<div class="msg-left">{{msgLeft}}</div>
<div class="msg-right">
<a class="msg-title">{{msgTitle}}</a>
<img class="lazy" data-original="{{img}}">
<a class="msg-title" href="{{url}}" target="_blank">{{msgTitle}}</a>
<a href="{{url}}" target="_blank">
<img class="lazy" data-original="{{img}}">
</a>
<div class="content">{{msgContent}}</div>
<div class="msg-app">
<span class="time">
... ...
... ... @@ -4,7 +4,63 @@
* @date: 2016/07/05
*/
// var $ = require('yoho-jquery'),
// lazyLoad = require('yoho-jquery-lazyload');
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
// lazyLoad($('#msg-list img.lazy'));
var prising;
lazyLoad($('#msg-list img.lazy'));
$('.msg-nav li').on('click', function() {
var activeTab = $(this).attr('data-type'),
href = $(this).find('a').attr('href');
$('.msg-nav li').removeClass('active');
$(this).addClass('active');
console.log(activeTab);
console.log(href);
});
$('.editorial-index-page').on('click', '.like-icon', function() {
var $this = $(this),
msgId = $this.closest('.content-msg').data().id;
// url;
// 同一资讯多次点击归一处理
if (prising === msgId) {
return;
}
prising = msgId;
$this.toggleClass('liked');
// 点赞或取消点赞
// if ($this.hasClass('liked')) {
// url = '/guang/info/praise';
// } else {
// url = '/guang/info/cancelPraise';
// }
// $.ajax({
// type: 'GET',
// url: url,
// data: {
// id: msgId,
// time: new Date().getTime()
// }
// }).then(function(data) {
// if (data.code === 200) {
// if (data.data * 1 === 0) {
// $this.next('b').addClass('num-0').children('.num').html('0'); //隐藏数字显示
// } else {
// $this.next('b').removeClass('num-0').children('.num').html(data.data);
// }
// }
// prising = false;
// });
});
... ...
.editorial-index-page {
width: 1150px;
margin: 0 auto;
.index-content {
width: 1150px;
margin: 0 auto;
}
.msg-nav {
height: 40px;
... ... @@ -48,3 +41,4 @@
}
@import "msg";
@import "list";
... ...
.editorial-list-page {
.list-content {
margin-top: 30px;
}
.nav-title {
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #eee;
width: 100%;
height: 30px;
b {
font-size: 18px;
margin-right: 5px;
}
}
.paging {
margin: 20px auto;
width: 300px;
height: 40px;
}
}
... ...
... ... @@ -21,6 +21,7 @@
padding-bottom: 5px;
}
.msg-title {
font-size: 20px;
color: #333;
... ... @@ -34,6 +35,10 @@
-webkit-box-orient: vertical;
}
.msg-title:hover {
color: #ff1414;
}
.lazy {
width: 640px;
height: 430px;
... ...