通过三次的迭代,留言功能慢慢进化,从最开始的只能管理员留言到发标者可以回复,再到两种角色都可以删除自己的留言或者回复,随之功能逻辑也慢慢复杂起来。前两次迭代比较简单,第三次说需求的时候预想可能会有些麻烦,果不其然还是有些复杂的(因为我的逻辑思维比较慢)。然而,留言的存在时间并不长,在1.3的迭代中,就被砍掉了,还真是来也匆匆,去也匆匆,所以更要留下它的足迹了。
功能点有:
如果我是工程商:
1、我给客户留言了,并且未被标记已删除留言,那么我可以删除我的留言
如果我是发布招标者:
2、我可以回复工程商给我留的言,并且我可以删除我自己的回复(如果我已经回复过,则不能再回复第二次)(如果接口里返回的数据中)
删除和回复的功能比较好做,对于我来说有难点的地方是逻辑判断该在什么时候下显示回复和删除按钮
实现:
1、工程商给客户留言了之后,是否显示删除按钮
//判断留言后面是否应该显示删除按钮
json.comments[i].show_del = (that.userId == json.comments[i].authorId && json.comments[i].disabled == 0) ? "show" : "hide";
show_del是在mustache里面的删除按钮上加了一个变量,当变量的等于show时,那么用css控制按钮显示,hide则为隐藏;
that.userId == json.comments[i].authorId 是指当登录的用户id等于评论的用户id。
json.comments[i].disabled == 0 是指当前的留言并没有被删除过(已经删除过就不能再被删除)
2、发标者给工程商回复时,后面是否显示删除按钮
//判断回复后面是否应该显示删除按钮
if((that.userId == json.comments[i].children[j].authorId) && (json.comments[i].children[j].disabled == 0)) {
json.comments[i].children[j].show_del = "show";
}else {
json.comments[i].children[j].show_del = "hide";
}
原理同1
3、当工程商给发标者留言后,在发标者查看标书时,显示回复按钮
var can_reply = false;
if(json.comments[i].children){
// 先给true,如果后续遍历“回复”时发现已经有我回复过,那就再改为false
can_reply = true;
for(var j=0;j<json.comments[i].children.length;j++){
var child = json.comments[i].children[j];
// 如果是我的标,且我已回复过,那就不能再回复了
if(is_my_demand && that.userId == json.comments[i].children[j].authorId){
can_reply = false;
}
if(!is_my_demand){
can_reply = false;
}
}
}else{
// 当前登录用户就是发标的人,那就可以回复
if(is_my_demand){
can_reply = true;
} else {
can_reply = false;
}
}
json.comments[i].show_reply = (can_reply ? "show" : "hide");
开始我觉得回复按钮实现起来应该比删除容易,没想到恰恰回复这里比较不好处理。
a、can_reply 为了方便判断,便设置了一个变量。当符合回复出现的条件的时候那么can_reply为true,反之为false
b、if(json.comments[i].children) 判断当有回复的时候,因为没有回复那么接口返回的数据中是没有children数据的,会造成下面的循环找不到这个字段而报错。
c、当进入if判断时就给can_reply一个true。是要保持,true为显示回复按钮,false为隐藏回复按钮,以免逻辑反着理解起来更加费劲
d、is_my_demand 为封装了一个函数,返回true代表登录的用户id和发标者的id是一致的
e、that.userId == json.comments[i].children[j].authorId 是指登录的用户id和发布回复者的id相等
f、 而d && e就代表如果是我的标,但是我回复过了,那就不能再回复了;并且如果有回复,但回复是管理员回复的,那么我依然还可以回复
g、 if(!is_my_demand) 代表如果我查看的不是我发的标,那我肯定不能回复
h、如果一个回复都没有时,还要判断如果我查看的是我发的标那就能回复,否则不能回复。
4、回复时的几种角色判断
//判断回复时的四种角色,authorType 为 1:客户;100:工程商;150:客户代表;200:万屏汇官方(平台代表)
switch(parseInt(child.authorType))
{
case 1:
child.authorName = '客户回复';
break;
case 100:
child.authorName = '客户回复';
break;
case 150:
child.authorName = '客户代表回复';
break;
case 200:
child.authorName = '万屏汇官方回复';
break;
}
5、是否显示回复或删除的完整代码
CON.prototype.rebuildJson = function(json){
var that=this;
// 这个标是我发布的吗?(发标人和当前登录用户id相同,则是我的)
var is_my_demand = (this.userId == this.demanderId);
for(var i=0;i<json.comments.length;i++){
//给名片传值-user_id
json.comments[i].user_id = json.comments[i].authorId;
//判断留言后面是否应该显示删除按钮
json.comments[i].show_del = (that.userId == json.comments[i].authorId && json.comments[i].disabled == 0) ? "show" : "hide";
//设置被删除后的占位文字的颜色
json.comments[i].already_del = parseInt(json.comments[i].disabled) == 1 ? "aDel" : "";
var can_reply = false;
if(json.comments[i].children){
// 先给true,如果后续遍历“回复”时发现已经有我回复过,那就再改为false
can_reply = true;
for(var j=0;j<json.comments[i].children.length;j++){
var child = json.comments[i].children[j];
// 如果是我的标,且我已回复过,那就不能再回复了
if(is_my_demand && that.userId == json.comments[i].children[j].authorId){
can_reply = false;
}
if(!is_my_demand){
can_reply = false;
}
//判断回复后面是否应该显示删除按钮
if((that.userId == json.comments[i].children[j].authorId) && (json.comments[i].children[j].disabled == 0)) {
json.comments[i].children[j].show_del = "show";
}else {
json.comments[i].children[j].show_del = "hide";
}
//设置被删除后的回复占位文字的颜色
json.comments[i].children[j].already_del = parseInt(json.comments[i].children[j].disabled) == 1 ? "aDel" : "";
//判断回复时的四种角色,authorType 为 1:客户;100:工程商;150:客户代表;200:万屏汇官方(平台代表)
switch(parseInt(child.authorType))
{
case 1:
child.authorName = '客户回复';
break;
case 100:
child.authorName = '客户回复';
break;
case 150:
child.authorName = '客户代表回复';
break;
case 200:
child.authorName = '万屏汇官方回复';
break;
}
}
}else{
// 当前登录用户就是发标的人,那就可以回复
if(is_my_demand){
can_reply = true;
} else {
can_reply = false;
}
}
json.comments[i].show_reply = (can_reply ? "show" : "hide");
}
}
总结
一开始我的出发点是循环遍历json,再循环遍历html元素,以控制回复和删除按钮的隐藏或显示。其实并不需要这样,运用mustache就可以解决,不遍历html
回复的逻辑,总绕晕了,也是因为变量的true/false和隐藏/显示是反着,不利于理清