diff --git a/app.vue b/app.vue index a4f3e9d..c55d236 100644 --- a/app.vue +++ b/app.vue @@ -162,7 +162,7 @@
-
+
@@ -194,19 +194,24 @@
+
{{ handleDate(detailsInfo["publicationdate"]) }}
+
+
+ + {{ detailsInfo["viewnum"] || 0 }}
-
{{ handleDate(detailsInfo["publicationdate"]) }}
-
+
-
- - {{ detailsInfo["viewnum"] || 0 }} +
+ + + {{ detailsInfo.likenum || "赞" }}
@@ -244,7 +249,7 @@
- + @@ -943,6 +948,10 @@ export default { let isNeedLogin = ref(true) // 是否需要有登录 provide("isNeedLogin", isNeedLogin) + let emojiMaskState = ref(false) + + provide("emojiMaskState", emojiMaskState) + // 跳转登录 const goLogin = () => { if (typeof window === "undefined") return @@ -1300,7 +1309,7 @@ export default { return } let data = res.data - console.log("data", data) + // console.log("data", data) data["info"]["uniqid"] = uniqid detailsInfo.value = data["info"] || {} @@ -1375,6 +1384,8 @@ export default { } }) + // console.log("valve", valve) + if (!valve) { let content = "" if (info?.["content"]?.indexOf(" { + const operateLike = () => { if (isNeedLogin.value) { goLogin() return } - $ajax("/api/operate/like", { token }).then(res => { + $ajax("/api/operate/like", { token: detailsToken }).then(res => { if (res.code != 200) return let data = res.data - answerList.value[index]["islike"] = data["status"] - answerList.value[index]["likenum"] = data["count"] + islike.value = data.status || 0 + detailsInfo.value["likenum"] = data.count || 0 handleMsg("success", res["message"] || "操作成功") }) } @@ -2365,6 +2376,8 @@ export default { } } + provide("handleAnswerText", handleAnswerText) + // 大图的监听 esc 键盘按钮 const handleKeydown = event => { if (event.key !== "Escape") return @@ -2397,7 +2410,7 @@ export default { } // 打开举报 - const handleMenuState = (token) => { + const handleMenuState = token => { reportToken = token alertShow.value = true } @@ -2647,7 +2660,7 @@ export default { watch(initState, (newValue, oldValue) => { if (newValue === 2) { const params = route.query - calculateListIndex(detailsInfo.value, params["uniqid"]) + // calculateListIndex(detailsInfo.value, params["uniqid"]) } }) @@ -3082,7 +3095,14 @@ export default { const commentList = ref([]) - return { isCommentList, commentList, islike, handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, handleYourAnswer, yourAnswer, handleLogo, inTheEndState, setItemUrl, seo, originUrl, handleMenuState, reasonList, checkList, alertShow, alertText, selectRadio, alertSubmit, cutType, dialogSrc, answerPage, handleDetailsScroll, replaceState, copyText, boxClass, questionPlaceholderState, yourAnswerPlaceholderState, handleInput, handlePaste, itemStyle, listStyle, listBoxStyle, myType, type, pitchIndex, cut, list, keyword, keywordText, getList, total, typeList, typePitch, getDetails, detailsInfo, detailsIsanswered, detailsIscollection, detailsIsmyself, detailShare, detailLoading, answerList, operateLike, operateCollect, IAnswerState, IAnswerEditState, IAnswerInfo, amendIAnswer, openIAnswer, closeIAnswer, submitAnswer, openCommentState, handleAllComment, myCollectionList, myCollectionCount, myQuestionsList, myQuestionsCount, myAnswerList, myAnswerCount, cutAnswerPopupState, handleDate, handleCollectionScroll, handleAnswersScroll, handleQuestionsScroll, cancelCollection, getMyCollection, questionsSetp, questionsObj, cutAnonymous, cutQuestionsSetp, cutQuestionsPopupState, questionsTypeList, postingIssue, choosingTheme, handleMy, changeAnonymous, changeAnonymousQuestions, pageHeaderHeight, pageListHeight, questionsTransmitState, questionsTransmitMaskState, closeAllTransmitState, closeTransmitState, handleAnswerTransmitList, closeDetailMode, tabListFixeState, handleListScroll, historicalSearchState, historicalSearchList, searchFocus, searchBlur, searchClick, handleClickHistoricalItem, handleClickClear, isSearchMode, questionsInit, myCount, msg, myOpenDetails, handleAnswerText, getCurrentUrl, loading, showComments, jointriposte, randomEmojis, selectEomji, openRespondDetails, respondPopState, respondDetail, respondPopObj, closePopList, coinAmount, openInsert, insertcoinsState, insert, coinMessage, coinSelectAmountDispose, closeInsert, postCoinSbmit, cutOperate, insertcoinsNoState } + const commentListRef = ref(null) + + const closeEmojiMask = () => { + + if (commentListRef.value) commentListRef.value.closeEmoji() + } + + return { commentListRef, closeEmojiMask, emojiMaskState, isCommentList, commentList, islike, handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, handleYourAnswer, yourAnswer, handleLogo, inTheEndState, setItemUrl, seo, originUrl, handleMenuState, reasonList, checkList, alertShow, alertText, selectRadio, alertSubmit, cutType, dialogSrc, answerPage, handleDetailsScroll, replaceState, copyText, boxClass, questionPlaceholderState, yourAnswerPlaceholderState, handleInput, handlePaste, itemStyle, listStyle, listBoxStyle, myType, type, pitchIndex, cut, list, keyword, keywordText, getList, total, typeList, typePitch, getDetails, detailsInfo, detailsIsanswered, detailsIscollection, detailsIsmyself, detailShare, detailLoading, answerList, operateLike, operateCollect, IAnswerState, IAnswerEditState, IAnswerInfo, amendIAnswer, openIAnswer, closeIAnswer, submitAnswer, openCommentState, handleAllComment, myCollectionList, myCollectionCount, myQuestionsList, myQuestionsCount, myAnswerList, myAnswerCount, cutAnswerPopupState, handleDate, handleCollectionScroll, handleAnswersScroll, handleQuestionsScroll, cancelCollection, getMyCollection, questionsSetp, questionsObj, cutAnonymous, cutQuestionsSetp, cutQuestionsPopupState, questionsTypeList, postingIssue, choosingTheme, handleMy, changeAnonymous, changeAnonymousQuestions, pageHeaderHeight, pageListHeight, questionsTransmitState, questionsTransmitMaskState, closeAllTransmitState, closeTransmitState, handleAnswerTransmitList, closeDetailMode, tabListFixeState, handleListScroll, historicalSearchState, historicalSearchList, searchFocus, searchBlur, searchClick, handleClickHistoricalItem, handleClickClear, isSearchMode, questionsInit, myCount, msg, myOpenDetails, handleAnswerText, getCurrentUrl, loading, showComments, jointriposte, randomEmojis, selectEomji, openRespondDetails, respondPopState, respondDetail, respondPopObj, closePopList, coinAmount, openInsert, insertcoinsState, insert, coinMessage, coinSelectAmountDispose, closeInsert, postCoinSbmit, cutOperate, insertcoinsNoState } }, } diff --git a/components/commentList.vue b/components/commentList.vue index 80d7f80..9c45be1 100644 --- a/components/commentList.vue +++ b/components/commentList.vue @@ -2,7 +2,7 @@
回答&讨论 - {{ 17 }} + {{ commentCount || '' }}
@@ -12,7 +12,7 @@
- +
@@ -71,7 +71,7 @@
{{ item["content"] }}
- +
@@ -80,7 +80,7 @@
- +
@@ -138,21 +138,45 @@
-
@{{ ite["reply"]["nickname"] }}
+ +
@{{ ite["reply"]["nickname"] }}
{{ ite["content"] }}
-
-
- -
发送
+ +
+ +
+
回复“{{ ite["nickname"] }}”:
+
+
+
+
+ + +
+
+
+
+
+ +
+
{{ item }}
+
+
+
+ + + 最多可上传1张图片,支持在输入框中直接粘贴图片。 +
+
+
发送
-
-
-
还有{{ item["childnum"] - 1 }}条回复
+
+
还有{{ item["childnum"] - item.child.length }}条回复
@@ -166,7 +190,7 @@ const props = defineProps({ }) onMounted(() => { - getComment() + // getComment() }) const $ajax = inject("$ajax") @@ -176,6 +200,9 @@ const handleDate = inject("handleDate") const isNeedLogin = inject("isNeedLogin") const handleMsg = inject("handleMsg") const uploadImg = inject("uploadImg") +const handleAnswerText = inject("handleAnswerText") +const emojiMaskState = inject("emojiMaskState") + const commentList = ref([]) let commentCount = ref(0) @@ -190,7 +217,7 @@ const getComment = () => { $ajax("/api/comment/lists", { token: detailsToken.value, page: commentPage.value, - limit: 1000, + limit: 1500, }) .then(res => { if (res.code != 200) return @@ -221,7 +248,7 @@ const getComment = () => { } commentList.value = commentList.value.concat(data.data) - console.log("commentList", commentList.value) + // console.log("commentList", commentList.value) commentCount.value = data.count commentTotalCount.value = data.comments @@ -240,6 +267,19 @@ const getComment = () => { }) } +// 监听 detailsToken 的变化 +watch( + detailsToken, + (newValue, oldValue) => { + if (newValue !== oldValue) { + commentPage.value = 1 + commentList.value = [] + getComment() + } + }, + { immediate: true } +) + let picture = ref({}) const handleFileUpload = (event, index, i) => { @@ -277,7 +317,6 @@ const closeFileUpload = (index, i) => { // let emojiState = ref(false) -let emojiMaskState = ref(false) const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"] @@ -287,6 +326,8 @@ const openEmoji = (index, i) => { else if (index != undefined) commentList.value[index]["emojiState"] = true else emojiState.value = true + console.log("emojiMaskState", emojiMaskState) + emojiMaskState.value = true } @@ -305,13 +346,21 @@ const closeEmoji = (index, i) => { emojiMaskState.value = false } +defineExpose({ + closeEmoji, +}) + // 选择 Emoji const selectEmoji = (key, index, i) => { closeEmoji() console.log("key", key) if (i != undefined) { + const commentInput = document.querySelector(".comments-box .input-textarea") + commentInput.innerText += key commentList.value[index].child[i]["isPlaceholderVisible"] = false } else if (index != undefined) { + const commentInput = document.querySelector(".comments-box .input-textarea") + commentInput.innerText += key commentList.value[index]["isPlaceholderVisible"] = false } else { inputTextareaRef.value.innerHTML += key @@ -337,7 +386,7 @@ const setPlaceholder = (event, index, i) => { } } -const handleInputPaste = (event, index, i) => { +const handleInputPaste = (event, index, ii) => { const items = event.clipboardData.items // 获取粘贴的内容 for (let i = 0; i < items.length; i++) { const item = items[i] @@ -349,16 +398,13 @@ const handleInputPaste = (event, index, i) => { reader.onload = e => { const base64 = e.target.result uploadImg(base64).then(res => { - console.log(index) const obj = { base64, ...res, } - - if (i != undefined) commentList.value[index].child[i]["picture"] = {} - else if (index != undefined) commentList.value[index]["picture"] = {} + if (i != undefined) commentList.value[index].child[ii]["picture"] = obj + else if (index != undefined) commentList.value[index]["picture"] = obj else picture.value = obj - handleMsg("success", "上传成功") }) } @@ -379,23 +425,23 @@ const submitAnswerComments = (index, i) => { let content = "" let parentid = null let token = detailsToken.value - let image = [] + let image = {} if (i != null) { const commentInput = document.querySelector(".comments-box .input-textarea") content = commentInput.innerText parentid = commentList.value[index]["child"][i]["id"] + image = commentList.value[index]["child"][i]["picture"] } else if (index != null) { const commentInput = document.querySelector(".comments-box .input-textarea") content = commentInput.innerText parentid = commentList.value[index]["id"] + image = commentList.value[index]["picture"] } else { content = inputTextareaRef.value.innerText image = picture.value } - console.log("content", content) - $ajax("/api/comment/submit", { content, token, @@ -420,7 +466,7 @@ const submitAnswerComments = (index, i) => { image, } - commentList.value[index]["child"].unshift(targetData) + commentList.value[index]["child"].push(targetData) commentList.value[index]["childnum"]++ } else if (index != null) { let targetData = { @@ -476,7 +522,7 @@ const operateAnswerCommentsLike = (token, index, i) => { let data = res.data - console.log("i",i) + console.log("i", i) if (i != undefined) { commentList.value[index].child[i]["islike"] = data["status"] @@ -492,7 +538,7 @@ const operateAnswerCommentsLike = (token, index, i) => { // 打开 回答-评论 的子评论 const openAnswerCommentsChild = (index, i) => { - console.log("isNeedLogin", isNeedLogin) + // console.log("isNeedLogin", isNeedLogin) if (isNeedLogin.value) { goLogin() @@ -518,11 +564,10 @@ const closeAnswerCommentsChild = () => { } // 获取剩下的子评论 -const alsoCommentsData = (index, ind) => { - return - const targetAnswerList = [...answerList.value] - const parentid = targetAnswerList[index]["commentList"][ind]["id"] - const token = targetAnswerList[index]["token"] +const alsoCommentsData = (index, i) => { + // const targetAnswerList = [...answerList.value] + const parentid = commentList.value[index]["id"] + const token = detailsToken.value $ajax("/api/comment/childrenList", { token, @@ -534,10 +579,16 @@ const alsoCommentsData = (index, ind) => { if (res.code != 200) return let data = res.data - let merged1 = [...targetAnswerList[index]["commentList"][ind]["child"], ...data.data.filter(item2 => !targetAnswerList[index]["commentList"][ind]["child"].find(item1 => item1.id == item2.id))] + let merged = [...commentList.value[index]["child"], ...data.data.filter(item2 => !commentList.value[index]["child"].find(item1 => item1.id == item2.id))] - targetAnswerList[index]["commentList"][ind]["child"] = merged1 - answerList.value = targetAnswerList + console.log("merged1", merged) + + merged.forEach(element => { + element["isPlaceholderVisible"] = true + }) + + commentList.value[index]["child"] = merged + // answerList.value = targetAnswerList }) } diff --git a/css/index.css b/css/index.css index 94d3021..1ea8191 100644 --- a/css/index.css +++ b/css/index.css @@ -696,6 +696,15 @@ a { } #answer-app .main .details-area-box .details-box .answer-discuss .input-box .top { padding: 0 14px; + position: relative; +} +#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; } #answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .avatar { width: 24px; @@ -1465,7 +1474,7 @@ a { #answer-app .main .details-area-box .details-box .info-box .user-info .user-name { color: #7f7f7f; font-size: 13px; - margin-right: 20px; + margin-right: 10px; } #answer-app .main .details-area-box .details-box .info-box .user-info .homeShare { height: 14px; @@ -1474,20 +1483,33 @@ a { font-size: 12px; color: #aaaaaa; } +#answer-app .main .details-area-box .details-box .info-box .operate-item { + font-size: 12px; + color: #7f7f7f; + margin-right: 7px; +} +#answer-app .main .details-area-box .details-box .info-box .operate-item .operate-icon { + margin-right: 7px; +} #answer-app .main .details-area-box .details-box .operate-box { justify-content: space-between; height: 54px; border-top: 1px dotted #ebebeb; padding: 0 24px; flex: 1; + position: relative; } #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item { font-size: 13px; color: #7f7f7f; - margin-left: 49px; cursor: pointer; height: 53px; - position: relative; +} +#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item:not(:first-of-type) { + margin-left: 36px; +} +#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item .operate-icon { + margin-right: 5px; } #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.commentnum { z-index: 1; @@ -1505,9 +1527,8 @@ a { transform: translateX(-50%); } #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item .operate-icon { - margin-right: 7px; + margin-right: 5px; } -#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item .operate-icon.operate-like-icon, #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item .operate-icon.operate-transmit-icon { width: 14px; height: 14px; @@ -1520,8 +1541,9 @@ a { width: 16px; height: 16px; } -#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit { - position: relative; +#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item .operate-icon.operate-like-icon { + width: 16px; + height: 16px; } #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit:hover::after { content: ""; @@ -1540,7 +1562,7 @@ a { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.11764706); position: absolute; top: 64px; - right: -24px; + left: 0; background: #fff; justify-content: space-between; padding: 40px 35px 42px; diff --git a/css/index.less b/css/index.less index af1234a..c8187db 100644 --- a/css/index.less +++ b/css/index.less @@ -865,6 +865,17 @@ a { flex-direction: column; .top { padding: 0 14px; + position: relative; + + .input-placeholder { + color: #7f7f7f; + pointer-events: none; + font-size: 14px; + position: absolute; + top: 0; + left: 14px; + } + .avatar { width: 24px; height: 24px; @@ -1768,7 +1779,7 @@ a { .user-name { color: #7f7f7f; font-size: 13px; - margin-right: 20px; + margin-right: 10px; } .homeShare { @@ -1780,6 +1791,15 @@ a { font-size: 12px; color: #aaaaaa; } + + .operate-item { + font-size: 12px; + color: #7f7f7f; + margin-right: 7px; + .operate-icon { + margin-right: 7px; + } + } } .operate-box { @@ -1788,17 +1808,22 @@ a { border-top: 1px dotted #ebebeb; padding: 0 24px; flex: 1; + position: relative; .operate-list { .operate-item { font-size: 13px; color: #7f7f7f; - margin-left: 49px; cursor: pointer; height: 53px; + &:not(:first-of-type) { + margin-left: 36px; + } // background-color: #333333; - - position: relative; + .operate-icon { + margin-right: 5px; + } + // position: relative; // z-index: 1; &.commentnum { @@ -1819,9 +1844,8 @@ a { } .operate-icon { - margin-right: 7px; + margin-right: 5px; - &.operate-like-icon, &.operate-transmit-icon { width: 14px; height: 14px; @@ -1836,10 +1860,15 @@ a { width: 16px; height: 16px; } + + &.operate-like-icon { + width: 16px; + height: 16px; + } } &.operate-transmit { - position: relative; + // position: relative; // z-index: 1; // &:hover { @@ -1863,7 +1892,7 @@ a { position: absolute; top: 64px; - right: -24px; + left: 0; background: #fff; justify-content: space-between; padding: 40px 35px 42px;