diff --git a/app.vue b/app.vue
index b66e18d..e32fe57 100644
--- a/app.vue
+++ b/app.vue
@@ -82,7 +82,7 @@
<div class="list" id="list" :style="[listStyle(), { height: listHeight + 'px' }]">
<template v-for="(item, index) in list" :key="item.uniqid">
<a v-if="item['isrecom'] && type != 'list'" class="item grid-item flexflex" :style="itemStyle(index, item['content'], item['type'])" :class="{ pitch: index === pitchIndex, upLevel: index === pitchIndex - 1 }" target="_blank" :href="item['url']">
- <!-- <a v-if="item['isrecom']" class="item grid-item flexflex" :style="itemStyle(index, item['content'], item['type'])" :class="{ pitch: index === pitchIndex, upLevel: index === pitchIndex - 1 }" target="_blank" :href="item['url']"> -->
+ <!-- <a v-if="item['isrecom']" class="item grid-item flexflex" :style="itemStyle(index, item['content'], item['type'])" :class="{ pitch: index === pitchIndex, upLevel: index === pitchIndex - 1 }" target="_blank" :href="item['url']"> -->
<img class="dot" src="./img/dot.svg" />
<div class="content" :style="{ width: type == 'list' ? '531px' : '430px' }">
<div class="issue-title flexcenter">
@@ -121,6 +121,8 @@
<div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
<div v-else></div>
<div class="flexacenter">
+ <div class="quantity">{{ handleDate(item.publicationdate, false) }}提问</div>
+ <div class="longString"></div>
<div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div>
<template v-if="type == 'list'">
<div class="longString"></div>
@@ -242,9 +244,6 @@
<!-- 回答-数据 -->
<div class="answer-box-item" v-for="(item, index) in answerList" :key="index">
- <!-- <div class="icon-circle-box">
- <div class="icon-box flexcenter">A</div>
- </div>-->
<img class="aa" src="@/img/A.png" />
<div class="answer-text" v-html="item['content']" @click="handleAnswerText"></div>
@@ -281,7 +280,8 @@
<img class="operate-icon operate-like-icon" v-else src="./img/like-icon.png" />
{{ item["likenum"] }}
</div>
- <div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }" @click="openCommentState(index)">
+ <!-- <div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }" @click="openCommentState(index)"> -->
+ <div class="operate-item flexacenter" :class="{ commentnum: item['commentState'] }">
<img class="operate-icon operate-comment-icon" src="./img/comment-icon.png" />
<!-- {{ item["commentnum"] }} -->
{{ item["commentnum"] }}
@@ -326,7 +326,7 @@
</div>
<!-- 评论 -->
- <div class="comments-box" v-if="item['commentList'] && item['commentList'].length != 0">
+ <div class="comments-box" :class="{ 'show-one-comment': item['showOneCommentState'] }" v-if="item['commentList'] && item['commentList'].length != 0">
<div class="comments-item" v-for="(it, ind) in item['commentList']" :key="ind">
<div class="comments-header flexacenter">
<div class="comments-header-left flexacenter">
@@ -428,15 +428,20 @@
</div>
<!-- {{ item["commentnum"] + ' ' + item["commentList"].length }} -->
<!-- <div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentnum'] != item['commentList'].length"> -->
- <div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentCount'] != item['commentList'].length">
+ <!-- <div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentCount'] != item['commentList'].length">
显示全部
<img class="arrow-circular" src="./img/arrow-circular-gray.png" />
+ </div> -->
+
+ <!-- <div class="more-comments flexcenter" @click="showComments(index)"> -->
+ <div class="more-comments flexcenter" @click="handleAllComment(index)">
+ 更多讨论
+ <img class="more-comments-icon" src="@/img/arrow-circular-gray.png" />
</div>
</div>
<!-- 评论为空时 -->
- <!-- <div class="comments-empty-box flexflex" v-if="item['commentnum'] == 0"> -->
- <div class="comments-empty-box flexflex" v-else>
+ <!-- <div class="comments-empty-box flexflex" v-else>
<div class="empty-box flexcenter">
<div class="dot-list flexacenter">
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3" :key="item" />
@@ -445,7 +450,7 @@
<img class="empty-icon" src="./img/empty-icon.svg" />
</div>
<div class="empty-hint">和我说说你的想法或疑问吧</div>
- </div>
+ </div> -->
</template>
</div>
@@ -766,7 +771,7 @@ export default {
emulateJSON: true,
withCredentials: true,
headers: {
- authorization: process.env.NODE_ENV !== "production" && "pa5o1v493ed5mahrcio66267e2", // 头部标记 ada
+ authorization: process.env.NODE_ENV !== "production" && "c7a0c3337a091b978f3d7215f633ff3c", // 头部标记 ada
// "7a89997c2ccd8cb5ed8cb20d843dafdd", // 头部标记 ada
},
})
@@ -801,7 +806,7 @@ export default {
emulateJSON: true,
withCredentials: true,
headers: {
- authorization: process.env.NODE_ENV !== "production" && "pa5o1v493ed5mahrcio66267e2", // 头部标记
+ authorization: process.env.NODE_ENV !== "production" && "c7a0c3337a091b978f3d7215f633ff3c", // 头部标记
// "7a89997c2ccd8cb5ed8cb20d843dafdd", // 头部标记
},
})
@@ -860,9 +865,8 @@ export default {
// }, 400);
// 判断一下是否登录
- // if (process.env.NODE_ENV !== "production") isNeedLogin.value = false;
- // else
- determineIsLogin()
+ if (process.env.NODE_ENV !== "production") isNeedLogin.value = false
+ else determineIsLogin()
getListClass()
window.addEventListener("scroll", handleScroll)
@@ -1284,10 +1288,19 @@ export default {
if (res.code != 200) return
let data = res.data
- data.data.forEach(element => {
+ data.data.forEach((element, index) => {
element["commentList"] = []
+ if (element["commentnum"] > 0) {
+ element["showOneCommentState"] = true
+
+ nextTick(() => {
+ openCommentState(index)
+ })
+ }
})
+ // console.log("data.data", data.data) showOneCommentState
+
answerList.value = answerList.value.concat(data.data)
if (answerList.value.length == data["count"]) answerPage.value = 0
@@ -1452,7 +1465,7 @@ export default {
let answerCommentLimit = 3
// 获取回答评论的数据
const getAnswerCommentList = index => {
- getAnswerCommentPublic(index, 3).then(res => {
+ getAnswerCommentPublic(index, 1).then(res => {
let data = res.data
answerList.value[index]["commentList"] = answerList.value[index]["commentList"].concat(data.data)
answerList.value[index]["commentCount"] = data["count"]
@@ -1465,10 +1478,11 @@ export default {
getAnswerCommentPublic(index, 1000).then(res => {
if (res.code != 200) return
let data = res.data
- let slice3 = data.data.slice(3)
+ let slice3 = data.data.slice(1)
let merged1 = [...answerList.value[index]["commentList"], ...slice3.filter(item2 => !answerList.value[index]["commentList"].find(item1 => item1.id == item2.id))]
answerList.value[index]["commentList"] = merged1
+ answerList.value[index]["showOneCommentState"] = false
})
}
@@ -2074,7 +2088,7 @@ export default {
}
// 处理时间
- const handleDate = (dateTimeStamp = new Date()) => {
+ const handleDate = (dateTimeStamp = new Date(), ishour = true) => {
dateTimeStamp = dateTimeStamp ? dateTimeStamp : null
var timestamp = new Date(dateTimeStamp)
timestamp = timestamp.getTime()
@@ -2096,7 +2110,8 @@ export default {
let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
- result = "" + Y + M + D + h + m
+ if (ishour) result = "" + Y + M + D + h + m
+ else result = "" + Y + M + D
} else if (dayC >= 1) result = "" + Math.round(dayC) + "天前"
else if (hourC >= 1) result = "" + Math.round(hourC) + "小时前"
else if (minC >= 1) result = "" + Math.round(minC) + "分钟前"
@@ -2810,137 +2825,12 @@ export default {
getList()
}
- return {
- 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,
- submitAnswerComments,
- operateAnswerCommentsLike,
- openAnswerCommentsChild,
- closeAnswerCommentsChild,
- alsoCommentsData,
- 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,
+ // 问答的评论 点击显示全部的第一页数据
+ const showComments = index => {
+ answerList.value[index]["showOneCommentState"] = false
}
+
+ return { 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, submitAnswerComments, operateAnswerCommentsLike, openAnswerCommentsChild, closeAnswerCommentsChild, alsoCommentsData, 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 }
},
}
</script>
diff --git a/index.css b/index.css
index 407b157..d80de9c 100644
--- a/index.css
+++ b/index.css
@@ -800,6 +800,18 @@ a {
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box {
padding: 17px 24px 29px;
}
+#answer-app .main .details-area-box .details-box .answer-box-item .comments-box.show-one-comment {
+ padding-bottom: 0;
+}
+#answer-app .main .details-area-box .details-box .answer-box-item .comments-box.show-one-comment .comments-item:not(:first-of-type) {
+ display: none;
+}
+#answer-app .main .details-area-box .details-box .answer-box-item .comments-box.show-one-comment .reverl-all {
+ display: none;
+}
+#answer-app .main .details-area-box .details-box .answer-box-item .comments-box.show-one-comment .more-comments {
+ display: flex;
+}
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item {
padding: 13px 0 0;
}
@@ -995,6 +1007,18 @@ a {
height: 10px;
margin-left: 10px;
}
+#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .more-comments {
+ height: 70px;
+ color: #7F7F7F;
+ line-height: 22px;
+ cursor: pointer;
+ display: none;
+}
+#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .more-comments .more-comments-icon {
+ width: 12px;
+ height: 12px;
+ margin-left: 10px;
+}
#answer-app .main .details-area-box .details-box .info-box {
justify-content: space-between;
padding: 0 24px;
@@ -1079,7 +1103,7 @@ a {
z-index: 10;
}
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box {
- width: 628px;
+ width: 635px;
border: 1px solid #ebebeb;
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.11764706);
diff --git a/index.less b/index.less
index 440a515..5e61dde 100644
--- a/index.less
+++ b/index.less
@@ -915,6 +915,7 @@ a {
padding-top: 24px;
margin-bottom: 21px;
position: relative;
+ // overflow: hidden;
.aa {
position: absolute;
@@ -1013,6 +1014,24 @@ a {
.comments-box {
padding: 17px 24px 29px;
+ &.show-one-comment {
+ padding-bottom: 0;
+
+ .comments-item {
+ &:not(:first-of-type) {
+ display: none;
+ }
+ }
+
+ .reverl-all {
+ display: none;
+ }
+
+ .more-comments {
+ display: flex;
+ }
+ }
+
.comments-item {
padding: 13px 0 0;
@@ -1258,6 +1277,20 @@ a {
margin-left: 10px;
}
}
+
+ .more-comments {
+ height: 70px;
+ color: #7F7F7F;
+ line-height: 22px;
+ cursor: pointer;
+ display: none;
+
+ .more-comments-icon {
+ width: 12px;
+ height: 12px;
+ margin-left: 10px;
+ }
+ }
}
}
@@ -1368,7 +1401,8 @@ a {
}
.transmit-box {
- width: 628px;
+ // width: 628px;
+ width: 635px;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);