// TODO: 用户名称需修改为自己的名称
var userName = 'pppig';
// 朋友圈页面的数据
var data = [{
user: {
name: '阳和',
avatar: './img/avatar2.png'
},
content: {
type: 0, // 多图片消息
text: '华仔真棒,新的一年继续努力!',
pics: ['./img/reward1.png', './img/reward2.png', './img/reward3.png', './img/reward4.png'],
share: {},
timeString: '3分钟前'
},
reply: {
hasLiked: true,
likes: ['pppig','Guo封面', '源小神'],
comments: [{
author: 'Guo封面',
text: '你也喜欢华仔哈!!!'
},{
author: '喵仔zsy',
text: '华仔实至名归哈'
}]
}
}, {
user: {
name: '伟科大人',
avatar: './img/avatar3.png'
},
content: {
type: 1, // 分享消息
text: '全面读书日',
pics: [],
share: {
pic: 'http://coding.imweb.io/img/p3/transition-hover.jpg',
text: '飘洋过海来看你'
},
timeString: '50分钟前'
},
reply: {
hasLiked: false,
likes: ['阳和'],
comments: []
}
}, {
user: {
name: '深圳周润发',
avatar: './img/avatar4.png'
},
content: {
type: 2, // 单图片消息
text: '很好的色彩',
pics: ['http://coding.imweb.io/img/default/k-2.jpg'],
share: {},
timeString: '一小时前'
},
reply: {
hasLiked: false,
likes:[],
comments: []
}
}, {
user: {
name: '喵仔zsy',
avatar: './img/avatar5.png'
},
content: {
type: 3, // 无图片消息
text: '以后咖啡豆不敢浪费了',
pics: [],
share: {},
timeString: '2个小时前'
},
reply: {
hasLiked: false,
likes:[],
comments: []
}
}];
// 相关 DOM
var $page = $('.page-moments');
var $momentsList = $('.moments-list');
var $body = $(document.body);
var $window = $(window);
var $button = $('button');
var $userName1 = $('.user-name');
var $show = $('.show');
/**
* 点赞内容 HTML 模板
* @param {Array} likes 点赞人列表
* @return {String} 返回html字符串
*/
function likesHtmlTpl(likes) {
if (!likes.length) {
return '';
}
var htmlText = ['<div class="reply-like"><i class="icon-like-blue"></i>'];
// 点赞人的html列表
var likesHtmlArr = [];
// 遍历生成
for(var i = 0, len = likes.length; i < len; i++) {
likesHtmlArr.push('<a class="reply-who" href="#">' + likes[i] + '</a>');
}
// 每个点赞人以逗号加一个空格来相隔
var likesHtmlText = likesHtmlArr.join(', ');
htmlText.push(likesHtmlText);
htmlText.push('</div>');
return htmlText.join('');
}
/**
* 评论内容 HTML 模板
* @param {Array} likes 点赞人列表
* @return {String} 返回html字符串
*/
function commentsHtmlTpl(comments) {
if (!comments.length) {
return '';
}
var htmlText = ['<div class="reply-comment">'];
for(var i = 0, len = comments.length; i < len; i++) {
var comment = comments[i];
htmlText.push('<div class="comment-item"><a class="reply-who" href="#">' + comment.author + '</a>:' + comment.text + '</div>');
}
htmlText.push('</div>');
return htmlText.join('');
}
/**
* 评论点赞总体内容 HTML 模板
* @param {Object} replyData 消息的评论点赞数据
* @return {String} 返回html字符串
*/
function replyTpl(replyData) {
var htmlText = [];
htmlText.push('<div class="reply-zone">');
htmlText.push(likesHtmlTpl(replyData.likes));
htmlText.push(commentsHtmlTpl(replyData.comments));
htmlText.push('</div>');
return htmlText.join('');
}
/**
* 多张图片消息模版 (可参考message.html)
* @param {Object} pics 多图片消息的图片列表
* @return {String} 返回html字符串
*/
function multiplePicTpl(pics) {
var htmlText = [];
htmlText.push('<ul class="item-pic">');
for (var i = 0, len = pics.length; i < len; i++) {
htmlText.push('<img class="pic-item" src="' + pics[i] + '">')
}
htmlText.push('</ul>');
return htmlText.join('');
}
// 分享消息模板
function multipleshare(share){
var htmlText = [];
htmlText.push('<div class="item-share">');
htmlText.push('<img class="share-img" src="' + share.pic + '">');
htmlText.push('<span class="share-tt">' + share.text + '</span>');
htmlText.push('</div>');
return htmlText.join('');
}
// 单图模板
function multiplePic(pics){
var htmlText = [];
htmlText.push('<img class="item-only-img" src="' + pics[0] + '">')
return htmlText.join('');
}
/**
* 循环:消息体
* @param {Object} messageData 对象
*/
function messageTpl(messageData) {
var user = messageData.user;
var content = messageData.content;
var htmlText = [];
htmlText.push('<div class="moments-item" data-index="0">');
// 消息用户头像
htmlText.push('<a class="item-left" href="#">');
htmlText.push('<img src="' + user.avatar + '" width="42" height="42" alt=""/>');
htmlText.push('</a>');
// 消息右边内容
htmlText.push('<div class="item-right">');
// 消息内容-用户名称
htmlText.push('<a href="#" class="item-name">' + user.name + '</a>');
// 消息内容-文本信息
htmlText.push('<p class="item-msg">' + content.text + '</p>');
// 消息内容-图片列表
var contentHtml = '';
// 目前只支持多图片消息,需要补充完成其余三种消息展示
switch(content.type) {
// 多图片消息
case 0:
contentHtml = multiplePicTpl(content.pics);
break;
case 1:
// TODO: 实现分享消息
contentHtml = multipleshare(content.share);
break;
case 2:
// TODO: 实现单张图片消息
contentHtml = multiplePic(content.pics);
break;
case 3:
// TODO: 实现无图片消息
}
htmlText.push(contentHtml);
// 消息时间和回复按钮
htmlText.push('<div class="item-ft">');
htmlText.push('<span class="item-time">' + content.timeString + '</span>');
htmlText.push('<div class="item-reply-btn">');
htmlText.push('<span class="item-reply"></span>');
htmlText.push('</div></div>');
// 消息回复模块(点赞和评论)
htmlText.push(replyTpl(messageData.reply));
htmlText.push('</div></div>');
return htmlText.join('');
}
//显示点赞评论
function reply(rex){
var htmlText = [];
htmlText.push('<div class="like">');
if(rex.reply.hasLiked){
htmlText.push('<span class="like">取消</span>');
}else{
htmlText.push('<span class="like">点赞</span>');
}
htmlText.push('</div>');
htmlText.push('<div class="comment">');
htmlText.push('<span class="comment">评论</span>');
htmlText.push('</div>');
return htmlText.join('');
}
//点赞事件
function autoComplete(intvalue) {
if(intvalue){
$('.coment-int button').removeAttr('disabled');
$('.coment-int button').css('background-color','#54dd50')
}else {
$('.coment-int button').attr('disabled','disabled');
$('.coment-int button').css('background-color','#b9b9b9')
}
}
/**
* 页面渲染函数:render
*/
function render() {
// TODO: 目前只渲染了一个消息(多图片信息),需要展示data数组中的所有消息数据。
var messageHtml=[];
for(let i=0;i<data.length;i++){
messageHtml.push(messageTpl(data[i]));
}
$momentsList.html(messageHtml.join(''));
$userName1.html(userName);
}
/**
* 页面绑定事件函数:bindEvent
*/
function bindEvent() {
// TODO: 完成页面交互功能事件绑定
var $autocomplete = $('.autocomplete');
var $reply = $('.item-reply');
var $input = $('.coment-int');
$body.on('click','.item-reply', function(){
ind = $(this).parents('.moments-item').index();
var position = $(this).offset();
$autocomplete.css({
'left': position.left - 170,
'top': position.top - 12,
});
$autocomplete.html(reply(data[ind]));
});
//隐藏点赞评论面板
$window.on('click', function(event) {
var target = event.target;
if (target.className == 'item-reply') {
$autocomplete.fadeIn();
}else
$autocomplete.fadeOut();
});
//点赞事件
$body.on('click','div.like',function(){
if(data[ind].reply.hasLiked){
var dex = data[ind].reply.likes.indexOf(userName);
data[ind].reply.likes.splice(dex,1);
data[ind].reply.hasLiked = false;
}else{
data[ind].reply.likes.push(userName);
data[ind].reply.hasLiked = true;
}
render();
});
//评论事件
$body.on('click','div.comment',function(){
$input.show();
});
$button.click(function(){
value = $('input').val();
data[ind].reply.comments.push({
author: userName,
text: value
});
$input.hide();
render();
});
//捕获评论输入
$body.on('keyup', 'input', function() {
var value = $(this).val();
autoComplete(value);
});
//放大图片
$("img").click(function(){
console.log($(this).attr("src"))
$show.html('<img src="'+$(this).attr("src")+'">');
$show.show();
});
$show.click(function(){
$show.hide();
});
}
/**
* 页面入口函数:init
* 1、根据数据页面内容
* 2、绑定事件
*/
function init() {
// 渲染页面
render();
bindEvent();
}
init();
03-18