diff --git a/app.vue b/app.vue index c55d236..dcab98c 100644 --- a/app.vue +++ b/app.vue @@ -35,7 +35,7 @@
我的收藏
我的提问
-
我的回答
+
@@ -59,7 +59,7 @@
@@ -73,11 +73,11 @@
共 {{ total }} 条问答
-
+
@@ -889,20 +522,13 @@ export default { var data = null try { data = typeof res.data == "string" ? JSON.parse(res.data) : res.data - if (data["code"] == 401) { - goLogin() - // isNeedLogin.value = true; - } - + if (data["code"] == 401) goLogin() if (data["code"] != 200) handleMsg("error", data["message"] || "报错了，请重试！！！") } catch (error) {} resolve(data) }) .catch(err => { - if (err.response.status == 401) { - goLogin() - // isNeedLogin.value = true; - } + if (err.response.status == 401) goLogin() resolve(err.response.data) }) }) @@ -1030,7 +656,6 @@ export default { type.value = "details" answerList.value = [] answerPage.value = 1 - getAnswerList() closeAllTransmitState() @@ -1059,12 +684,15 @@ export default { }) } + let user = ref({}) + provide("user", user) // 判断是否登录状态 const determineIsLogin = () => { let count = 0 let timer = setInterval(() => { if (Object.keys(window["userInfoWin"]).length !== 0) { clearInterval(timer) + user.value = window["userInfoWin"] if (window["userInfoWin"]["uid"] || window["userInfoWin"]["uin"]) isNeedLogin.value = false } count++ @@ -1331,7 +959,6 @@ export default { answerList.value = [] answerPage.value = 1 - getAnswerList() closeAllTransmitState() @@ -1410,52 +1037,6 @@ export default { let answerList = ref([]) // 回答列表数据 let answerPage = ref(1) // 回答列表页数 - let answerLoading = false // 回答列表加载 - - // 获取详情的回答数据 - const getAnswerList = () => { - return - if (answerLoading || answerPage.value == 0) return - answerLoading = true - - $ajax("/api/details/answerList", { - token: detailsToken, - limit: 20, - page: answerPage.value, - }) - .then(res => { - if (res.code != 200) return - let data = res.data - - data.data.forEach((element, index) => { - // console.log("element", element) - - element.coinnum = element.reward - element["commentList"] = [] - // if (element["commentnum"] > 0) { - // element["showOneCommentState"] = true - // nextTick(() => { - // openCommentState(index) - // }) - // } else element["commentState"] = true - - element["tab"] = "riposte" - - nextTick(() => { - getRiposte(index) - }) - }) - - answerList.value = answerList.value.concat(data.data) - - if (answerList.value.length == data["count"]) answerPage.value = 0 - else answerPage.value++ - - detailsInfo.value["answers"] = data["count"] - if (pitchIndex.value !== null) list.value[pitchIndex.value]["answers"] = data["count"] - }) - .finally(() => (answerLoading = false)) - } // 操作 - 点赞 const operateLike = () => { @@ -1509,96 +1090,12 @@ export default { let IAnswerEditState = ref(false) // 编辑回答-弹窗的状态 let IAnswerInfo = ref({}) // 我来回答-弹窗的信息 - // 开启我来回答 type: my 表示 - const openIAnswer = (index, type) => { - if (isNeedLogin.value) { - goLogin() - return - } - - if (index == null) { - IAnswerInfo.value = { - title: detailsInfo.value["title"], - content: detailsInfo.value["content"], - anonymous: 0, - } - IAnswerState.value = true - - nextTick(() => handleInput()) - } else { - if (type == "my") { - IAnswerInfo.value = { - title: detailsInfo.value["title"], - ...myAnswerList.value[index], - text: myAnswerList.value[index]["content"], - content: detailsInfo.value["content"], - } - myType.value = "" - } else { - IAnswerInfo.value = { - title: detailsInfo.value["title"], - ...answerList.value[index], - text: answerList.value[index]["content"], - content: detailsInfo.value["content"], - } - } - - IAnswerEditState.value = true - - nextTick(() => handleInput()) - } - } - - // 关闭我来回答 - const closeIAnswer = () => { - IAnswerState.value = false - IAnswerEditState.value = false - isDirectlyListIAnswer = false - } // 修改我来回答的匿名状态 const amendIAnswer = () => { IAnswerInfo.value["anonymous"] = IAnswerInfo.value["anonymous"] == 0 ? 1 : 0 } - // 提交回答 - const submitAnswer = type => { - if (isNeedLogin.value) { - goLogin() - return - } - - let questionTextarea = null - - if (type == "you") questionTextarea = document.querySelector(".your-answer-textarea") - else questionTextarea = document.querySelector(".question-textarea") - - if (questionTextarea) IAnswerInfo.value["text"] = questionTextarea.innerHTML - - $ajax("/api/publish/answerSubmit", { - token: IAnswerInfo.value["token"] || detailsToken, - anonymous: IAnswerInfo.value["anonymous"] || 0, - content: IAnswerInfo.value["text"], - }).then(res => { - if (res.code != 200) return - - if (isDirectlyListIAnswer) { - getDetails(IAnswerInfo.value["uniqid"], IAnswerInfo.value["index"]) - IAnswerState.value = false - } else { - answerList.value = [] - answerPage.value = 1 - getAnswerList() - closeIAnswer() - - if (!IAnswerInfo.value["token"]) myCount.value["answer"]++ - - if (type == "you") questionTextarea.innerHTML = "" - } - handleMsg("success", res["message"] || "操作成功") - }) - } - // 打开回答的评论 const openCommentState = index => { if (answerList.value[index]["commentState"]) answerList.value[index]["commentState"] = false @@ -1607,7 +1104,6 @@ export default { if (answerList.value[index]["commentList"].length == 0 && answerList.value[index]["commentnum"] != 0) getAnswerCommentList(index) } - let answerCommentLimit = 3 // 获取回答评论的数据 const getAnswerCommentList = index => { getAnswerCommentPublic(index, 2).then(res => { @@ -2002,13 +1498,8 @@ export default { itemHeightRight = 0 } const newtype = type.value - // let itemHeight = content == "" ? 107 : 128 let obj = {} if (newtype == "list") { - // let top = Math.floor(index / 2) * 128 + "px" - // obj["top"] = Math.floor(index / 2) * 128 + "px" - // obj["top"] = Math.floor(index / 2) * 128 + "px" - if (itemHeightLeft <= itemHeightRight) { obj["top"] = itemHeightLeft + "px" itemHeightLeft += content == "" ? 107 : 137 @@ -2019,10 +1510,8 @@ export default { obj["left"] = 649 + "px" } } else { - // obj["top"] = itemHeightLeft + "px"; obj["position"] = "relative" - // position: static; if (!typetype) { itemHeightLeft += content == "" ? 107 : 137 obj["height"] = content == "" ? 107 + "px" : 137 + "px" @@ -2031,7 +1520,6 @@ export default { obj["height"] = typetype == "vote" ? 170 + "px" : 137 + "px" } - // obj["left"] = 0; obj["width"] = "100%" obj["paddingLeft"] = "calc((100vw - 1200px) / 2)" } @@ -2050,10 +1538,8 @@ export default { obj["height"] = `calc(100vh - ${list.value.length * 128}px - 268px)` obj["paddingLeft"] = "calc((100vw - 1200px) / 2)" obj["borderRight"] = "1px solid #ebebeb" - obj["borderRight"] = "1px solid #ebebeb" obj["background"] = "#fff" } - return obj } @@ -2195,7 +1681,10 @@ export default { $ajax("/api/common/upload", { data: base64, }).then(res => { - if (res.code != 200) return + if (res.code != 200) { + handleMsg("error", res.message || "上传失败") + return + } let data = res.data resolve(data) }) @@ -2362,7 +1851,6 @@ export default { const el = e.target // 判断滚动到底部 if (el.scrollHeight - el.scrollTop !== el.clientHeight) return - getAnswerList() } let dialogSrc = ref("") // 大图的src @@ -2519,23 +2007,15 @@ export default { }) } - const replaceNumberObj = { - 0: "①", - 1: "②", - 2: "③", - } + const replaceNumberObj = ["①","②","③"] let seo = ref({}) let initState = ref(0) - let arrr = [] let islike = ref(0) // 是否点赞 try { - // 这是一个 等待的方法 如果复制后 会 多次等待 - // await new Promise(resolve => setTimeout(resolve, 2000)) - const params = route.query if (params["keyword"]) keyword.value = params["keyword"] if (params["tid"]) typePitch.value = params["tid"] @@ -2611,8 +2091,6 @@ export default { nextTick(() => { if (list.value.length == 0) type.value = "list" }) - - // if (!process.server && params["uniqid"]) handleInsertRelatedlist() }) await $ajax("/api/details/relatedlist", { page: 1, limit: 20 }).then(res => { @@ -2689,22 +2167,6 @@ export default { yourAnswer.value["anonymous"] = yourAnswer.value["anonymous"] ? 0 : 1 } - // 处理 您的答案的点击提交 - const handleYourAnswer = () => { - if (isNeedLogin.value) { - goLogin() - return - } - - IAnswerInfo.value = { ...yourAnswer.value } - submitAnswer("you") - - yourAnswer.value = { - text: "", - anonymous: 0, - } - } - let isDirectlyListIAnswer = false // 是否是直接打开列表的我来回答 // 专门处理列表状态的 我来回答 const openListIAnswer = index => { @@ -2730,16 +2192,8 @@ export default { // 头像框的状态 let avatarState = ref(false) // 开启头像框 - const openUserInfo = (index, ind, i) => { - if (i != null) { - if (answerList.value[index].commentList[ind]["child"][i]["uin"] > 0) answerList.value[index].commentList[ind]["child"][i]["avatarState"] = !answerList.value[index].commentList[ind]["child"][i]["avatarState"] - } else if (ind != null) { - if (answerList.value[index].commentList[ind]["uin"] > 0) answerList.value[index].commentList[ind]["avatarState"] = !answerList.value[index].commentList[ind]["avatarState"] - } else if (index != null) { - if (answerList.value[index]["uin"] > 0) answerList.value[index]["avatarState"] = !answerList.value[index]["avatarState"] - } else { - if (detailsInfo.value["uin"] > 0) avatarState.value = !avatarState.value - } + const openUserInfo = () => { + if (detailsInfo.value["uin"] > 0) avatarState.value = !avatarState.value } // 点击发送信息 @@ -2751,9 +2205,7 @@ export default { } // 点击ta的主页 - const TAHomePage = uin => { - redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&uid=${uin}`) - } + const TAHomePage = uin => redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&uid=${uin}`) // 跳转 url const redirectToExternalWebsite = url => { @@ -2788,321 +2240,15 @@ export default { getList() } - // 问答的评论 点击显示全部的第一页数据 - const showComments = index => { - answerList.value[index]["showOneCommentState"] = false - } - - // 拼接 回应需要的 字符 - const jointriposte = item => { - return `&#x${item};` - } - - const cutOperate = (index, key) => { - let target = answerList.value[index] - - target["tab"] = key - - if (key == "coin" && !answerList.value[index].config) { - getCoinConfig(index) - } - - if (key == "comment" && target["commentnum"] > 0) { - target["showOneCommentState"] = true - target["commentList"] = [] - nextTick(() => { - openCommentState(index) - }) - } - } - - const getRiposte = index => { - let target = answerList.value[index] - - $ajax("/api/riposte/riposteGet", { token: target.token }).then(res => { - // console.log("res", res) - if (res.code != 200) return - let data = res.data - target.ripostecount = data.count || {} - target.ripostelist = data.list || [] - target.riposteoptions = data.options || [] - - answerList.value[index] = target - if (target.ripostelist.length <= 3) randomEmoji(index) - }) - } - - let randomEmojis = ref(["c150", "c167", "c002", "c162", "c157", "c133", "c011", "c004"]) // 随机 五个 emoji - - // 随机 7 个Emoji - const randomEmoji = index => { - let emojiList = answerList.value[index].ripostelist - let riposteoptions = answerList.value[index].riposteoptions || [] - // 需要排除的 Emoji - let exclude = [] - emojiList.forEach(element => { - exclude.push(element.item) - }) - - let selectedList = [] // 待选择 Emoji To be selected - // 默认是有点赞的 - for (const key in riposteoptions[0].data) { - if (key != "c150") selectedList.push(key) - } - - const random = [] - if (!exclude.includes("c150")) random.push("c150") // 添加第一个点赞 emoji - selectedList = selectedList.filter(itemB => !exclude.includes(itemB)) - - // 生成随机索引，确保不重复 - let indexes = [] - while (indexes.length < 7) { - let randomIndex = Math.floor(Math.random() * selectedList.length) - if (indexes.indexOf(randomIndex) === -1) { - indexes.push(randomIndex) - random.push(selectedList[randomIndex]) - } - } - - answerList.value[index]["randomEmojis"] = random - } - - let riposteSubmitState = false - - const selectEomji = (code, index, ispop = false, islist = false) => { - if (isNeedLogin.value) { - goLogin() - return - } - - if (riposteSubmitState) return - riposteSubmitState = true - - let target = answerList.value[index] - let ispitch = false - let isindex = target.ripostelist.findIndex(element => element.item === code) - - if (isindex >= 0) ispitch = target.ripostelist[isindex].selected - - if (ispitch && ispop) { - riposteSubmitState = false - return - } - riposteSubmit(code, target.token) - .then(res => { - const data = res.data - target.ripostecount = data.count - - if (isindex >= 0) { - target.ripostelist[isindex].num += ispitch ? -1 : 1 - target.ripostelist[isindex].selected = !ispitch && target.ripostelist[isindex].num !== 0 - - if (target.ripostelist[isindex].num === 0) { - target.ripostelist.splice(isindex, 1) - } - } else { - target.ripostelist.push({ - item: code, - num: 1, - selected: true, - }) - } - - if (target.ripostelist.length <= 3) randomEmoji(index) - - if (islist) handleRiposteListData(code, data) - }) - .finally(() => { - riposteSubmitState = false - }) - } - - // 处理回应列表 数据 - const handleRiposteListData = (code, data) => { - let target = respondDetail.value - if (target[code].selected) { - target[code].user = target[code].user.filter(item => item.uin != data.uin) - - if (target[code].user.length == 0) delete target[code] - } else { - target[code].user.push({ - avatar: data.avatar, - nickname: data.username, - uid: data.uid, - uin: data.uin, - }) - } - // console.log(target[code].selected); - if (target.hasOwnProperty(code)) { - target[code].selected = !target[code].selected - } - // target[code].selected = !target[code].selected - } - - const riposteSubmit = (item, token) => { - return new Promise((resolve, reject) => { - $ajax("/api/riposte/riposteSubmit", { token, item }).then(res => { - if (res.code != 200) { - handleMsg("error", res["message"] || "报错了，请重试！！！") - reject(res) - } else { - // handleMsg("success", res["message"] || "回应成功") - resolve(res) - } - }) - }) - } - - let respondDetail = ref({}) - let respondPopState = ref(false) - let respondPopObj = ref({}) - - // 打开回应详情 - const openRespondDetails = index => { - if (isNeedLogin.value) { - goLogin() - return - } - let target = answerList.value[index] - respondPopObj.value.index = index - respondPopObj.value.user = target.ripostecount?.user - $ajax("/api/riposte/riposteDetail", { token: target.token }).then(res => { - if (res.code != 200) return - respondDetail.value = res.data - respondPopState.value = true - }) - } - - const closePopList = () => { - respondPopState.value = false - } - - // 获取币配置 - const getCoinConfig = index => { - let target = answerList.value[index] - $ajax("/api/operate/coin", { - token: target.token, - }).then(res => { - if (res.code != 200) return - - if (res.data.coinnumpeople > 3) { - getCoinranking(answerList.value[index].token).then(data => { - target["ranklist"] = data - }) - } - - answerList.value[index] = Object.assign({}, target, res.data) - }) - } - - // 打开投币 - const openInsert = index => { - let target = answerList.value[index] - insert.value = { - index, - token: target.token, - coinConfig: target.config, - coinMybalance: target.mybalance, - ranklist: target.ranklist, - } - - // 判断 币 是否足够 - if (target.mybalance == 0) insertcoinsNoState.value = true - else insertcoinsState.value = true - } - - // 关闭投币 - const closeInsert = () => { - coinAmount.value = "" - coinMessage.value = "" - insertcoinsState.value = false - insertcoinsNoState.value = false - insert.value = {} - } - - let coinAmount = ref("") // 投币数量 - let coinMessage = ref("") // 投币 说点什么 - let insertcoinsState = ref(false) // 投币弹窗状态 - let insertcoinsNoState = ref(false) // 币不够弹窗状态 - let insert = ref({}) // 投币弹窗数据 - - // 处理投币的选择选项 - const coinSelectAmountDispose = amount => { - coinAmount.value = amount - } - - let postCoinSbmitState = false - - // 提交投币 - const postCoinSbmit = () => { - if (isNeedLogin.value) { - goLogin() - return - } - if (postCoinSbmitState) return - postCoinSbmitState = true - - let targetInsert = insert.value - $ajax("/api/operate/coinsubmit", { - token: targetInsert.token, - coinnum: coinAmount.value, - message: coinMessage.value, - }) - .then(res => { - if (res.code != 200) { - handleMsg("error", res?.message || "投币失败") - return - } - - const data = res.data - - answerList.value.forEach(element => { - element.mybalance = data.mybalance - }) - - let target = answerList.value[targetInsert.index || 0] || {} - target.coinnum += data.coinnum - - // 重新获取 投币列表 - getCoinranking(targetInsert.token).then(data => { - target["ranklist"] = data - }) - - // 如果 带有 message 那个 评论数量加等于一 - if (coinMessage.value) target["commentnum"] += 1 - - closeInsert() - handleMsg("success", res?.message || "操作成功") - }) - .finally(() => { - postCoinSbmitState = false - }) - } - - // 获取全部的投币 排行榜 - const getCoinranking = token => { - return new Promise((resolve, reject) => { - $ajax("/api/operate/coinranking", { token }).then(res => { - // console.log(res) - if (res.code != 200) { - handleMsg("error", res?.message || "请求失败") - return - } - resolve(res.data) - }) - }) - } - const commentList = ref([]) 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 } + return { commentListRef, closeEmojiMask, emojiMaskState, isCommentList, commentList, islike, handleLookOnly, zeroreply, replaceNumberObj, closeMyModel, myModelList, myModelState, listHeight, bottomTpsStyle, TAHomePage, sendMessage, avatarState, openUserInfo, isNeedLogin, handleInputYou, openListIAnswer, isListEmptyState, cutYourAnswerAnonymous, 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, 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 } }, } diff --git a/components/commentList.vue b/components/commentList.vue index 9c45be1..e28554a 100644 --- a/components/commentList.vue +++ b/components/commentList.vue @@ -2,12 +2,12 @@
回答&讨论 - {{ commentCount || '' }} + {{ commentTotalCount || "" }}
- -
+ +
@@ -38,11 +38,9 @@
- -
{{ item["nickname"] }}
+ +
{{ item["nickname"] }}
{{ handleDate(item["timestamp"]) }}
-
提问者
@@ -53,7 +51,7 @@ TA的主页 -
+
@@ -75,7 +73,7 @@
-
+
@@ -105,12 +103,12 @@
- -
{{ ite["nickname"] }}
+ +
{{ ite["nickname"] }}
{{ handleDate(ite["timestamp"]) }}
-
提问者
-
回答者
- + + +
提问者
@@ -120,7 +118,7 @@ TA的主页 -
+
@@ -146,8 +144,7 @@
-
回复“{{ ite["nickname"] }}”：
-
+
@@ -202,7 +199,7 @@ const handleMsg = inject("handleMsg") const uploadImg = inject("uploadImg") const handleAnswerText = inject("handleAnswerText") const emojiMaskState = inject("emojiMaskState") - +const user = inject("user") const commentList = ref([]) let commentCount = ref(0) @@ -225,14 +222,11 @@ const getComment = () => { data.data.forEach((element, index) => { element["isReplyBoxShow"] = 0 - element["isPlaceholderVisible"] = true - // element.timestamp = util.timeformat(element.timestamp, 2) if (element.child.length > 0) { element.child.forEach(el => { // el.timestamp = util.timeformat(el.timestamp, 2) el["isReplyBoxShow"] = 0 - el["isPlaceholderVisible"] = true }) } }) @@ -282,30 +276,36 @@ watch( let picture = ref({}) +const maxSize = 20 * 1024 * 1024 // 20MB + const handleFileUpload = (event, index, i) => { closeEmoji() const file = event.target.files[0] // 获取选择的文件 - if (file) { - const reader = new FileReader() - reader.onload = e => { - const base64 = e.target.result - uploadImg(base64).then(res => { - console.log("base64", base64) - const obj = { - base64, - ...res, - } + if (!file) return - if (i != undefined) commentList.value[index].child[i]["picture"] = obj - else if (index != undefined) commentList.value[index]["picture"] = obj - else picture.value = obj - - handleMsg("success", "上传成功") - }) - } - reader.readAsDataURL(file) + if (file.size > maxSize) { + handleMsg("error", "文件大小不能超过 20MB") + return } + + const reader = new FileReader() + reader.onload = e => { + const base64 = e.target.result + uploadImg(base64).then(res => { + const obj = { + base64, + ...res, + } + + if (i != undefined) commentList.value[index].child[i]["picture"] = obj + else if (index != undefined) commentList.value[index]["picture"] = obj + else picture.value = obj + + handleMsg("success", "上传成功") + }) + } + reader.readAsDataURL(file) } // 删除上传的图片 @@ -326,8 +326,6 @@ const openEmoji = (index, i) => { else if (index != undefined) commentList.value[index]["emojiState"] = true else emojiState.value = true - console.log("emojiMaskState", emojiMaskState) - emojiMaskState.value = true } @@ -353,56 +351,49 @@ defineExpose({ // 选择 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 + // const commentInput = document.querySelector(".comments-box .input-textarea") + if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = "" + commentList.value[index]["child"][i]["commentInput"] += key } else if (index != undefined) { - const commentInput = document.querySelector(".comments-box .input-textarea") - commentInput.innerText += key - commentList.value[index]["isPlaceholderVisible"] = false + // const commentInput = document.querySelector(".comments-box .input-textarea") + if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = "" + commentList.value[index]["commentInput"] += key } else { - inputTextareaRef.value.innerHTML += key - isPlaceholderVisible.value = false + inputTextarea.value += key } } -let isPlaceholderVisible = ref(true) - -const clearPlaceholder = (index, i) => { - if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = false - else if (index != undefined) commentList.value[index]["isPlaceholderVisible"] = false - else isPlaceholderVisible.value = false -} - -const setPlaceholder = (event, index, i) => { - if (event.target.innerHTML == "
") event.target.innerHTML = "" - const html = event.target.innerHTML - if (!html) { - if (i != undefined) commentList.value[index].child[i]["isPlaceholderVisible"] = true - else if (index != undefined) commentList.value[index]["isPlaceholderVisible"] = true - else isPlaceholderVisible.value = true - } +// 自动输入框增高 +const autoResize = e => { + e.target.style.height = "auto" // 重置高度 + e.target.style.height = `${e.target.scrollHeight}px` // 设置为内容高度 } const handleInputPaste = (event, index, ii) => { const items = event.clipboardData.items // 获取粘贴的内容 + for (let i = 0; i < items.length; i++) { const item = items[i] if (item.type.startsWith("image/")) { - // 检查是否为图片 event.preventDefault() const file = item.getAsFile() // 获取文件 + + if (file.size > maxSize) { + handleMsg("error", "文件大小不能超过 20MB") + return + } + const reader = new FileReader() reader.onload = e => { const base64 = e.target.result + uploadImg(base64).then(res => { const obj = { base64, ...res, } - if (i != undefined) commentList.value[index].child[ii]["picture"] = obj + if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj else if (index != undefined) commentList.value[index]["picture"] = obj else picture.value = obj handleMsg("success", "上传成功") @@ -413,7 +404,7 @@ const handleInputPaste = (event, index, ii) => { } } -let inputTextareaRef = ref(null) +let inputTextarea = ref("") // 提交回答-评论 const submitAnswerComments = (index, i) => { @@ -428,25 +419,25 @@ const submitAnswerComments = (index, i) => { let image = {} if (i != null) { - const commentInput = document.querySelector(".comments-box .input-textarea") - content = commentInput.innerText + content = commentList.value[index]["child"][i]["commentInput"] 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 + content = commentList.value[index]["commentInput"] parentid = commentList.value[index]["id"] image = commentList.value[index]["picture"] } else { - content = inputTextareaRef.value.innerText + content = inputTextarea.value image = picture.value } + console.log("content", content, "1111", commentList.value[index]) + $ajax("/api/comment/submit", { content, token, parentid, - image, + image: image ? { aid: image.aid, url: image.url } : null, }).then(res => { if (res.code != 200) return let data = res.data @@ -462,7 +453,6 @@ const submitAnswerComments = (index, i) => { nickname: commentList.value[index]["child"][i]["nickname"], }, ...data, - isPlaceholderVisible: true, image, } @@ -477,7 +467,6 @@ const submitAnswerComments = (index, i) => { likenum: 0, reply: [], ...data, - isPlaceholderVisible: true, image, } commentList.value[index]["child"].unshift(targetData) @@ -491,15 +480,16 @@ const submitAnswerComments = (index, i) => { likenum: 0, ...data, child: [], - isPlaceholderVisible: true, image, } commentList.value.unshift(targetData) - commentCount.value++ - inputTextareaRef.value.innerHTML = "" + // commentCount.value++ + inputTextarea.value = "" picture.value = {} } + commentTotalCount.value = data.count || 0 + // targetAnswerList[index]["commentnum"] = data["count"] closeAnswerCommentsChild() @@ -519,11 +509,8 @@ const operateAnswerCommentsLike = (token, index, i) => { token, }).then(res => { if (res.code != 200) return - let data = res.data - console.log("i", i) - if (i != undefined) { commentList.value[index].child[i]["islike"] = data["status"] commentList.value[index].child[i]["likenum"] = data["likenum"] @@ -572,21 +559,15 @@ const alsoCommentsData = (index, i) => { $ajax("/api/comment/childrenList", { token, parentid, - limit: 20, + limit: 2000, page: 1, - childlimit: 1, + childlimit: 3, }).then(res => { if (res.code != 200) return let data = res.data let merged = [...commentList.value[index]["child"], ...data.data.filter(item2 => !commentList.value[index]["child"].find(item1 => item1.id == item2.id))] - console.log("merged1", merged) - - merged.forEach(element => { - element["isPlaceholderVisible"] = true - }) - commentList.value[index]["child"] = merged // answerList.value = targetAnswerList }) @@ -604,5 +585,15 @@ const openMenuState = (index, i) => { else reportToken = commentList.value[index]["child"][i]["token"] handleMenuState(reportToken) } + +const openUserInfo = (index, i) => { + if (i != undefined && commentList.value[index].child[i]["uin"] > 0) commentList.value[index].child[i]["avatarState"] = true + else if (index != undefined && commentList.value[index]["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 +} diff --git a/css/index.css b/css/index.css index 1ea8191..74363d1 100644 --- a/css/index.css +++ b/css/index.css @@ -373,7 +373,7 @@ a { right: -5px; top: 50%; transform: translateY(-50%); - background-image: url("img/triangle-icon.svg"); + background-image: url("/img/triangle-icon.svg"); } #answer-app .main .list-box .list .item.pitch .content { border: none; @@ -401,6 +401,7 @@ a { font-size: 14px; color: #000000; line-height: 22px; + font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; } #answer-app .main .list-box .list .item .content .issue-title .issue em { color: #ff0000; @@ -422,6 +423,7 @@ a { font-size: 13px; text-decoration: none; margin-top: 8px; + font-weight: 400; } #answer-app .main .list-box .list .item .content .answer * { white-space: nowrap; @@ -540,6 +542,7 @@ a { flex-direction: column; flex: 1; position: relative; + padding-bottom: 200px; } #answer-app .main .details-area-box .details-box .emoji-box-mask { position: absolute; @@ -721,10 +724,20 @@ a { min-height: 80px; padding-bottom: 11px; } -#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea.placeholder::after { - content: "说说你的看法…"; - color: #7f7f7f; - pointer-events: none; +#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea * { + background: transparent !important; + color: #000 !important; + border: none !important; + outline: none !important; + font-size: 14px !important; + padding: 0 !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + border-radius: 0 !important; +} +#answer-app .main .details-area-box .details-box .answer-discuss .input-box .top .input-textarea img { + display: none !important; } #answer-app .main .details-area-box .details-box .answer-discuss .input-box .picture-box { padding-bottom: 10px; @@ -1504,6 +1517,7 @@ a { color: #7f7f7f; cursor: pointer; height: 53px; + line-height: 54px; } #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item:not(:first-of-type) { margin-left: 36px; diff --git a/css/index.less b/css/index.less index c8187db..ccdbdce 100644 --- a/css/index.less +++ b/css/index.less @@ -461,7 +461,7 @@ a { right: -5px; top: 50%; transform: translateY(-50%); - background-image: url("./img/triangle-icon.svg"); + background-image: url("/img/triangle-icon.svg"); } .content { @@ -512,6 +512,7 @@ a { font-size: 14px; color: #000000; line-height: 22px; + font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; em { color: #ff0000; @@ -538,6 +539,7 @@ a { font-size: 13px; text-decoration: none; margin-top: 8px; + font-weight: 400; & * { white-space: nowrap; @@ -688,6 +690,7 @@ a { flex-direction: column; flex: 1; position: relative; + padding-bottom: 200px; .emoji-box-mask { position: absolute; @@ -891,10 +894,27 @@ a { background-color: transparent; min-height: 80px; padding-bottom: 11px; - &.placeholder::after { - content: "说说你的看法…"; - color: #7f7f7f; - pointer-events: none; + // &.placeholder::after { + // content: "说说你的看法…"; + // color: #7f7f7f; + // pointer-events: none; + // } + + * { + background: transparent !important; + color: #000 !important; + border: none !important; + outline: none !important; + font-size: 14px !important; + padding: 0 !important; + margin: 0 !important; + width: auto !important; + height: auto !important; + border-radius: 0 !important; + } + + img { + display: none !important; } } } @@ -1816,6 +1836,7 @@ a { color: #7f7f7f; cursor: pointer; height: 53px; + line-height: 54px; &:not(:first-of-type) { margin-left: 36px; }