28c890cf94
- 调整评论图片容器样式，支持横向滚动 - 为评论图片添加圆角和点击效果 - 实现用户主页跳转和私信功能 - 修复section变量名错误并优化初始化逻辑 - 添加评论点赞和子评论展开功能
453 lines
16 KiB
JavaScript
453 lines
16 KiB
JavaScript
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
|
import { itemForum } from "../component/item-forum/item-forum.js";
|
|
import { itemOffer } from "../component/item-offer/item-offer.js";
|
|
import { itemSummary } from "../component/item-summary/item-summary.js";
|
|
import { itemVote } from "../component/item-vote/item-vote.js";
|
|
import { itemMj } from "../component/item-mj/item-mj.js";
|
|
import { itemTenement } from "../component/item-tenement/item-tenement.js";
|
|
import { latestList } from "../component/latest-list/latest-list.js";
|
|
import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
|
|
import { like } from "../component/like/like.js";
|
|
|
|
const appSectionIndex = createApp({
|
|
setup() {
|
|
let signInAlreadyState = ref(false);
|
|
|
|
let permissions = ref([]);
|
|
|
|
onMounted(() => {
|
|
getUserInfoWin();
|
|
|
|
setTimeout(() => (permissions.value = window["permissions"] || []), 1000);
|
|
});
|
|
|
|
let isLogin = ref(true);
|
|
let realname = ref(1); // 是否已经实名
|
|
let userInfoWin = ref({
|
|
authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
|
|
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
|
|
groupid: 3,
|
|
nickname: "肖荣豪",
|
|
realname: 1,
|
|
token: "01346a38444d71aaadb3adad52b52c39",
|
|
uid: 500144,
|
|
uin: 4238049,
|
|
});
|
|
|
|
const getUserInfoWin = () => {
|
|
const checkUser = () => {
|
|
const user = window.userInfoWin;
|
|
if (!user) return;
|
|
document.removeEventListener("getUser", checkUser);
|
|
realname.value = user.realname;
|
|
userInfoWin.value = user;
|
|
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
|
};
|
|
document.addEventListener("getUser", checkUser);
|
|
};
|
|
|
|
const openAttest = () => {
|
|
const handleAttestClose = () => {
|
|
document.removeEventListener("closeAttest", handleAttestClose);
|
|
realname.value = window.userInfoWin?.realname || 0;
|
|
};
|
|
// 启动认证流程时添加监听
|
|
document.addEventListener("closeAttest", handleAttestClose);
|
|
loadAttest(2);
|
|
};
|
|
|
|
// 跳转登录
|
|
const goLogin = () => {
|
|
if (typeof window === "undefined") return;
|
|
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
|
if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
|
|
else ajax_login();
|
|
} else ajax_login();
|
|
};
|
|
|
|
provide("isLogin", isLogin);
|
|
provide("userInfoWin", userInfoWin);
|
|
provide("realname", realname);
|
|
provide("openAttest", openAttest);
|
|
provide("goLogin", goLogin);
|
|
|
|
let authorInfo = ref({});
|
|
let info = ref({});
|
|
let ismyself = ref(false);
|
|
|
|
let timestamp = ref("");
|
|
let updatedTime = ref("");
|
|
let token = "";
|
|
let uniqid = "";
|
|
|
|
let sectionn = ref([]);
|
|
let tags = ref([]);
|
|
|
|
onMounted(() => {
|
|
const params = getUrlParams();
|
|
uniqid = params.uniqid || "";
|
|
|
|
init();
|
|
});
|
|
|
|
const init = () => {
|
|
ajaxget(`/v2/api/forum/getTopicDetails?uniqid=${uniqid}`).then((res) => {
|
|
if (res.code != 200) {
|
|
creationAlertBox("error", res.message || "主题不存在");
|
|
return;
|
|
}
|
|
const data = res.data;
|
|
|
|
console.log(data, "data");
|
|
let targetInfo = data.info;
|
|
|
|
if (!targetInfo.hidden) targetInfo.hidden = 0;
|
|
|
|
// 替换换行
|
|
targetInfo.content = targetInfo.content?.replace(/\n/g, "<br>") || "";
|
|
|
|
if (!targetInfo.content) {
|
|
targetInfo.content = targetInfo.title;
|
|
targetInfo.title = "";
|
|
}
|
|
|
|
authorInfo.value = Array.isArray(data.authorInfo) ? null : data.authorInfo;
|
|
ismyself.value = data.ismyself || false;
|
|
|
|
sectionn.value = targetInfo.sectionn;
|
|
tags.value = targetInfo.tags;
|
|
|
|
timestamp.value = strtimeago(targetInfo.release_at, 4);
|
|
updatedTime.value = targetInfo.updated_at ? strtimeago(targetInfo.updated_at, 4) : null;
|
|
info.value = targetInfo;
|
|
|
|
token = data.token;
|
|
|
|
getAuthorInfo();
|
|
getTopicOperation();
|
|
|
|
getCoinConfig();
|
|
|
|
getRelatedTopics();
|
|
|
|
getComment();
|
|
});
|
|
};
|
|
|
|
let count = ref(0);
|
|
let medal = ref([]);
|
|
const getAuthorInfo = () => {
|
|
ajaxget(`/v2/api/forum/getSpaceDetail?uid=${authorInfo.value.uid || 0}&uin=${authorInfo.value.uin || 0}`).then((res) => {
|
|
const data = res.data;
|
|
const countList = data.count || [];
|
|
count.value = countList.reduce((sum, item) => {
|
|
const currentCount = Number(item.count) || 0;
|
|
return sum + currentCount;
|
|
}, 0);
|
|
|
|
medal.value = data.medal || [];
|
|
authorInfo.value = data.info;
|
|
getCreationList(data.token);
|
|
});
|
|
};
|
|
|
|
let recentlyList = ref([]);
|
|
const getCreationList = (token) => {
|
|
ajaxget(`/v2/api/forum/getSpaceTopicList?token=${token}&simple=1`).then((res) => {
|
|
const data = res.data;
|
|
recentlyList.value = data.data || [];
|
|
recentlyList.value = recentlyList.value.slice(0, 8);
|
|
});
|
|
};
|
|
|
|
let islike = ref(0);
|
|
let iscollect = ref(0);
|
|
|
|
const getTopicOperation = () => {
|
|
ajax(`/v2/api/forum/getTopicOperation`, {
|
|
token,
|
|
actions: ["like", "collection"],
|
|
}).then((res) => {
|
|
const data = res.data;
|
|
const like = data.like;
|
|
const collection = data.collection;
|
|
|
|
islike.value = like.status;
|
|
iscollect.value = collection.status;
|
|
});
|
|
};
|
|
|
|
let isLikeGif = ref(false);
|
|
|
|
const likeClick = () => {
|
|
ajax(`/v2/api/forum/postTopicLike`, {
|
|
token,
|
|
}).then((res) => {
|
|
if (res.code != 200) {
|
|
creationAlertBox("error", res.message);
|
|
return;
|
|
}
|
|
const data = res.data;
|
|
islike.value = data.status;
|
|
info.value.likes = data.likes;
|
|
|
|
if (data.status) {
|
|
isLikeGif.value = true;
|
|
setTimeout(() => (isLikeGif.value = false), 2000);
|
|
}
|
|
});
|
|
};
|
|
|
|
const collectClick = () => {
|
|
ajax(`/v2/api/forum/postTopicCollect`, {
|
|
token,
|
|
}).then((res) => {
|
|
if (res.code != 200) {
|
|
creationAlertBox("error", res.message);
|
|
return;
|
|
}
|
|
const data = res.data;
|
|
iscollect.value = data.status;
|
|
info.value.collections = data.collections;
|
|
});
|
|
};
|
|
|
|
let strategy = ref("");
|
|
let mybalance = ref(0);
|
|
let defaultcoinnum = 0;
|
|
|
|
const getCoinConfig = () => {
|
|
ajaxget(`/v2/api/forum/getCoinConfig`).then((res) => {
|
|
const data = res.data;
|
|
strategy.value = data.config.strategy.url || 0;
|
|
mybalance.value = data.mybalance || 0;
|
|
defaultcoinnum = data.defaultcoinnum || 0;
|
|
});
|
|
};
|
|
|
|
let coinsState = ref(false);
|
|
const openCoinBox = () => {
|
|
coinsState.value = true;
|
|
document.body.style.overflow = "hidden";
|
|
if (!coinListRequest) getCoinRankList();
|
|
};
|
|
|
|
const closeCoinBox = () => {
|
|
coinsState.value = false;
|
|
document.body.style.overflow = "auto";
|
|
};
|
|
|
|
let coinAmount = ref("");
|
|
|
|
const coinSubmit = () => {
|
|
const num = Number(coinAmount.value || defaultcoinnum) || 0;
|
|
ajax(`/v2/api/forum/postTopicCoin`, {
|
|
token,
|
|
num,
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) creationAlertBox("success", res.message);
|
|
else creationAlertBox("error", res.message);
|
|
|
|
if (res.code != 200) return;
|
|
|
|
let data = res.data;
|
|
|
|
mybalance.value = mybalance.value - num || 0;
|
|
coinAmount.value = "";
|
|
info.value.coins = data.coins || 0;
|
|
|
|
coinNubmer.value = 0;
|
|
coinList.value = [];
|
|
getCoinRankList();
|
|
})
|
|
.finally(() => {
|
|
// wx.hideLoading();
|
|
});
|
|
};
|
|
|
|
let coinNubmer = ref(0);
|
|
let coinList = ref([]);
|
|
let coinListRequest = false; // 控制请求次数
|
|
const getCoinRankList = () => {
|
|
ajaxget(`/v2/api/forum/getCoinRankList?token=${token}&limit=1000`).then((res) => {
|
|
const data = res.data;
|
|
coinNubmer.value = data.nubmer;
|
|
coinList.value = data.data;
|
|
coinListRequest = true;
|
|
});
|
|
};
|
|
|
|
let relatedList = ref([]);
|
|
let relatedTime = ref("");
|
|
const getRelatedTopics = () => {
|
|
ajaxget(`/v2/api/forum/getRelatedTopics?uniqid=${uniqid}&limit=8`).then((res) => {
|
|
const data = res.data;
|
|
relatedTime.value = data.updated_at || "";
|
|
relatedList.value = data.list || [];
|
|
});
|
|
};
|
|
|
|
let alreadyCommentIdList = [];
|
|
let commentPage = ref(1);
|
|
let isgetCommentSate = false;
|
|
let commentList = ref([]);
|
|
let commentTotalCount = ref(0);
|
|
|
|
const getComment = () => {
|
|
if (commentPage.value == 0 || isgetCommentSate) return;
|
|
isgetCommentSate = true;
|
|
ajaxget(`/v2/api/forum/getCommentList?token=${token}&page=${commentPage.value}&limit=1500`)
|
|
.then((res) => {
|
|
if (res.code != 200) {
|
|
creationAlertBox("error", res.message || "");
|
|
return;
|
|
}
|
|
let data = res.data;
|
|
|
|
data.data.forEach((element, index) => {
|
|
element.timestamp = strtimeago(element.created_at, 4);
|
|
|
|
element["isReplyBoxShow"] = 0;
|
|
if (element.child.length > 0) {
|
|
element.child.forEach((el) => {
|
|
el.timestamp = strtimeago(element.created_at, 4);
|
|
el["isReplyBoxShow"] = 0;
|
|
});
|
|
}
|
|
});
|
|
|
|
if (commentPage.value > 1) {
|
|
for (let index = 0; index < data.data.length; index++) {
|
|
if (alreadyCommentIdList.includes(data.data[index].id)) {
|
|
data.data.splice(index, 1);
|
|
index--;
|
|
}
|
|
}
|
|
}
|
|
|
|
commentList.value = commentList.value.concat(data.data);
|
|
commentTotalCount.value = data.count;
|
|
|
|
console.log("commentTotalCount.value", commentTotalCount.value);
|
|
|
|
commentPage.value = data.count > commentList.value.length ? commentPage.value + 1 : 0;
|
|
})
|
|
.finally(() => {
|
|
isgetCommentSate = false;
|
|
});
|
|
};
|
|
|
|
let picture = ref({});
|
|
|
|
const openUserInfo = (index, i) => {
|
|
if (i != undefined && commentList.value[index].child[i].user["uin"] > 0) commentList.value[index].child[i]["avatarState"] = true;
|
|
if (i == undefined && index != undefined && commentList.value[index].user["uin"] > 0) commentList.value[index]["avatarState"] = true;
|
|
};
|
|
|
|
const closeUserInfo = (index, i) => {
|
|
if (i != undefined) commentList.value[index].child[i]["avatarState"] = false;
|
|
else if (index != undefined) commentList.value[index]["avatarState"] = false;
|
|
};
|
|
|
|
// 打开 回答-评论 的子评论
|
|
const openAnswerCommentsChild = (index, i) => {
|
|
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
|
|
openAttest();
|
|
return;
|
|
}
|
|
|
|
if (!isLogin.value) {
|
|
goLogin();
|
|
return;
|
|
}
|
|
|
|
closeAnswerCommentsChild();
|
|
|
|
if (i == null) commentList.value[index]["childState"] = true;
|
|
else commentList.value[index].child[i]["childState"] = true;
|
|
};
|
|
|
|
// 关闭 回答-评论 的子评论
|
|
const closeAnswerCommentsChild = () => {
|
|
commentList.value.forEach((ele) => {
|
|
ele["childState"] = false;
|
|
ele["commentInput"] = ""; // 删除原本输入值
|
|
if (ele["child"] && ele["child"].length != 0) {
|
|
ele["child"].forEach((el) => {
|
|
el["childState"] = false;
|
|
el["commentInput"] = "";
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
let dialogSrc = ref("");
|
|
const handleAnswerText = (e) => {
|
|
if (e.target.tagName === "IMG") {
|
|
var src = e.target.getAttribute("src");
|
|
dialogSrc.value = src;
|
|
window.addEventListener("keydown", handleKeydown);
|
|
}
|
|
};
|
|
|
|
const handleKeydown = (event) => {
|
|
if (event.key !== "Escape") return;
|
|
dialogSrc.value = "";
|
|
window.removeEventListener("keydown", handleKeydown); // 取消监听
|
|
};
|
|
|
|
// 回答-评论 点赞
|
|
const operateAnswerCommentsLike = (token, index, i) => {
|
|
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
|
|
openAttest();
|
|
return;
|
|
}
|
|
|
|
if (!isLogin.value) {
|
|
goLogin();
|
|
return;
|
|
}
|
|
|
|
ajax("https://api.gter.net/v2/api/forum/likeComment", {
|
|
token,
|
|
}).then((res) => {
|
|
if (res.code != 200) {
|
|
creationAlertBox("error", res.message || "操作成功");
|
|
return;
|
|
}
|
|
let data = res.data;
|
|
|
|
if (i != undefined) {
|
|
commentList.value[index].child[i]["islike"] = data["status"];
|
|
commentList.value[index].child[i]["likenum"] = data["count"];
|
|
} else {
|
|
commentList.value[index]["islike"] = data["status"];
|
|
commentList.value[index]["likenum"] = data["count"];
|
|
}
|
|
|
|
creationAlertBox("success", res.message || "操作成功");
|
|
|
|
// if (status) this.$parent.openLikeGif();
|
|
});
|
|
};
|
|
|
|
const TAHomePage = (uin) => goHomePage(uin);
|
|
const sendMessage = (uin) => goSendMessage(uin);
|
|
|
|
return { closeAnswerCommentsChild, openAnswerCommentsChild, dialogSrc, handleAnswerText, sendMessage, TAHomePage, operateAnswerCommentsLike, closeUserInfo, openUserInfo, permissions, commentList, commentPage, commentTotalCount, picture, userInfoWin, relatedList, relatedTime, coinNubmer, coinList, coinAmount, coinSubmit, strategy, mybalance, coinsState, openCoinBox, closeCoinBox, isLikeGif, likeClick, collectClick, islike, iscollect, recentlyList, medal, count, sectionn, tags, signInAlreadyState, authorInfo, info, timestamp, updatedTime };
|
|
},
|
|
});
|
|
|
|
appSectionIndex.component("itemForum", itemForum);
|
|
appSectionIndex.component("itemOffer", itemOffer);
|
|
appSectionIndex.component("itemSummary", itemSummary);
|
|
appSectionIndex.component("itemVote", itemVote);
|
|
appSectionIndex.component("itemMj", itemMj);
|
|
appSectionIndex.component("itemTenement", itemTenement);
|
|
appSectionIndex.component("latestList", latestList);
|
|
appSectionIndex.component("slideshowBox", slideshowBox);
|
|
appSectionIndex.component("like", like);
|
|
|
|
appSectionIndex.mount("#details");
|