A1300399510/PC-questions-answers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2023-12-01 15:33:30 +08:00
parent c27e4a5420
commit b91bbd90fc
5 changed files with 796 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
css/index.css
View File

@ -1,9 +1,17 @@
.index-footer {
margin-top: 0 !important;
}
header.page-header .box .tab-list .item.pitch {
color: #FDDF6D !important;
}
header.page-header .box .tab-list .item.pitch::after {
background-color: #fddf6d !important;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-style: normal;
} }
/* Webkit浏览器（Chrome、Safari等） */ /* Webkit浏览器（Chrome、Safari等） */
*::-webkit-scrollbar { *::-webkit-scrollbar {
@ -59,6 +67,7 @@
#answer-app { #answer-app {
min-width: 1200px; min-width: 1200px;
overflow-x: hidden; overflow-x: hidden;
word-break: break-all;
} }
#answer-app header { #answer-app header {
background: #f6f6f6; background: #f6f6f6;
@ -102,6 +111,17 @@
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
} }
#answer-app header .top .right .searchInput .clear-search .cross-circle-black {
width: 14px;
height: 14px;
cursor: pointer;
}
#answer-app header .top .right .searchInput .clear-search .halving-line {
width: 1px;
height: 13px;
background-color: #ebebeb;
margin: 0 17px;
}
#answer-app header .top .right .searchInput .history-box { #answer-app header .top .right .searchInput .history-box {
position: absolute; position: absolute;
top: 36px; top: 36px;
@ -168,6 +188,7 @@
} }
#answer-app header .tab-box { #answer-app header .tab-box {
width: 100%; width: 100%;
min-width: 1200px;
z-index: 1; z-index: 1;
background-color: #f6f6f6; background-color: #f6f6f6;
padding: 5px 0; padding: 5px 0;
@ -243,7 +264,7 @@
font-size: 14px; font-size: 14px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
width: 400px; max-width: 400px;
padding-right: 20px; padding-right: 20px;
margin-right: 20px; margin-right: 20px;
border-right: 1px solid #ebebeb; border-right: 1px solid #ebebeb;
@ -343,6 +364,9 @@
color: #000000; color: #000000;
line-height: 22px; line-height: 22px;
} }
#answer-app .main .list-box .list .item .content .issue-title .issue em {
color: #ff0000;
}
#answer-app .main .list-box .list .item .content .answer { #answer-app .main .list-box .list .item .content .answer {
color: #555; color: #555;
height: 22px; height: 22px;
@ -350,6 +374,9 @@
font-size: 13px; font-size: 13px;
margin-bottom: 18px; margin-bottom: 18px;
} }
#answer-app .main .list-box .list .item .content .answer em {
color: #ff0000;
}
#answer-app .main .list-box .list .item .content .bottom { #answer-app .main .list-box .list .item .content .bottom {
font-size: 12px; font-size: 12px;
justify-content: flex-end; justify-content: flex-end;
@ -401,6 +428,28 @@
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
}
#answer-app .main .details-area-box .loading-bj {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
}
#answer-app .main .details-area-box .loading-bj svg {
width: 100px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
#answer-app .main .details-area-box .details-box { #answer-app .main .details-area-box .details-box {
width: 688px; width: 688px;
@ -443,6 +492,7 @@
padding-top: 24px; padding-top: 24px;
margin-bottom: 28px; margin-bottom: 28px;
position: relative; position: relative;
word-break: break-all;
} }
#answer-app .main .details-area-box .details-box .details-issue .icon { #answer-app .main .details-area-box .details-box .details-issue .icon {
background-color: #72db86; background-color: #72db86;
@ -555,6 +605,7 @@
line-height: 26px; line-height: 26px;
padding: 0 24px; padding: 0 24px;
margin-bottom: 20px; margin-bottom: 20px;
word-break: break-all;
} }
#answer-app .main .details-area-box .details-box .answer-box-item .answer-text img { #answer-app .main .details-area-box .details-box .answer-box-item .answer-text img {
max-width: 100%; max-width: 100%;
@ -642,12 +693,16 @@
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box { #answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box {
position: relative; position: relative;
} }
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .report-box {
display: flex;
}
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon { #answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon {
width: 14px; width: 14px;
height: 14px; height: 14px;
cursor: pointer; cursor: pointer;
} }
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box { #answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box {
display: none;
position: absolute; position: absolute;
top: 24px; top: 24px;
right: 0; right: 0;
@ -658,6 +713,15 @@
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
color: #7F7F7F; color: #7F7F7F;
cursor: pointer;
}
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after {
content: "";
width: 58px;
height: 36px;
position: absolute;
top: -14px;
right: 0;
} }
#answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .comment-icon { #answer-app .main .details-area-box .details-box .answer-box-item .comments-box .comments-item .comments-header .comments-header-right .comment-icon {
width: 14px; width: 14px;
@ -844,6 +908,14 @@
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit { #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit {
position: relative; position: relative;
} }
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 20px;
z-index: 10;
}
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box { #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box {
width: 628px; width: 628px;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
@ -857,7 +929,7 @@
background: #fff; background: #fff;
justify-content: space-between; justify-content: space-between;
padding: 40px 35px 42px; padding: 40px 35px 42px;
z-index: 1; z-index: 3;
} }
#answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box .transmit-title { #answer-app .main .details-area-box .details-box .operate-box .operate-list .operate-item.operate-transmit .transmit-box .transmit-title {
font-weight: 650; font-weight: 650;
@ -1464,6 +1536,7 @@
margin-right: 12px; margin-right: 12px;
} }
#answer-app .i-answer-box .question-middle .question-textarea { #answer-app .i-answer-box .question-middle .question-textarea {
height: 412px;
width: 100%; width: 100%;
border: none; border: none;
outline: none; outline: none;
@ -1555,3 +1628,166 @@
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
} }
.alert-form {
display: block;
position: fixed;
z-index: 2100;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
}
.alert-form * {
box-sizing: border-box;
}
.alert-form .reports {
height: 440px;
}
.alert-form .reports .radio-area {
margin-bottom: 40px;
}
.alert-form .reports .radio-area .radio-area-item {
color: #606266;
font-size: 14px;
margin-right: 10px;
cursor: pointer;
}
.alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame {
background-color: #50E3C2;
border-color: #50E3C2;
}
.alert-form .reports .radio-area .radio-area-item.pitch .radio-area-frame::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1);
}
.alert-form .reports .radio-area .radio-area-item .radio-area-frame {
border: 1px solid #DCDFE6;
border-radius: 2px;
width: 14px;
height: 14px;
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
position: relative;
margin-right: 10px;
}
.alert-form .reports .radio-area .radio-area-item .radio-area-frame::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: "";
border: 1px solid #FFF;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 3px;
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
transition: -webkit-transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s;
transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
-webkit-transform-origin: center;
transform-origin: center;
}
.alert-form .el-checkbox-group {
font-size: 0;
}
.alert-form .comments {
display: block;
position: fixed;
z-index: 11;
left: 50%;
top: 50%;
width: 740px;
height: 440px;
max-width: 90vw;
max-height: 90vh;
transform: translate(-50%, -50%);
background-color: #ffffff;
border: none;
border-radius: 8px 8px 6px 6px;
}
.alert-form .comments .text-box {
position: relative;
}
.alert-form .comments .text-num {
position: absolute;
right: 10px;
bottom: 10px;
color: #999;
font-size: 12px;
}
.alert-form .comments .form {
display: block;
width: 100%;
padding: 34px 30px 40px;
}
.alert-form .comments .form textarea {
height: 172px;
margin-bottom: 30px;
display: block;
width: 100%;
background: #f7f7f7;
padding: 18px;
font-size: 14px;
border: 1px solid #F7F7F7;
border-radius: 5px;
outline: none;
resize: none;
line-height: 22px;
}
.alert-form .head {
padding: 0 18px 0 30px;
display: flex;
height: 56px;
align-items: center;
justify-content: space-between;
background: #333333;
color: #fff;
font-size: 17px;
border-radius: 6px 6px 0 0;
}
.alert-form .head .close {
color: #b3b3b3;
font-size: 14px;
cursor: pointer;
}
.alert-form .footer {
display: flex;
justify-content: center;
align-items: center;
}
.alert-form .footer button[type=button] {
margin-right: 20px;
}
.alert-form .footer button {
border: 1px #999999 solid;
border-radius: 5px;
background-color: #ffffff;
width: 128px;
height: 38px;
color: #333;
font-size: 14px;
outline: none;
cursor: pointer;
}
.alert-form .footer button[type=submit] {
background-color: #50E3C2;
border-color: #50E3C2;
color: #fff;
}
.alert-form .el-checkbox__input.is-checked .el-checkbox__inner,
.alert-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #50E3C2;
border-color: #50E3C2;
}
.alert-form .el-checkbox__input.is-focus .el-checkbox__inner,
.alert-form .el-checkbox__inner:hover {
border-color: #50E3C2;
}
.alert-form .el-checkbox__input.is-checked + .el-checkbox__label {
color: #50E3C2;
}

302
css/index.less
View File

@ -1,9 +1,21 @@
.index-footer {
margin-top: 0 !important;
}
header.page-header .box .tab-list .item.pitch {
color: #FDDF6D !important;
}
header.page-header .box .tab-list .item.pitch::after {
background-color: rgba(253, 223, 109, 1) !important;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-style: normal; // font-style: normal;
} }
/* Webkit浏览器（Chrome、Safari等） */ /* Webkit浏览器（Chrome、Safari等） */
@ -72,6 +84,7 @@
#answer-app { #answer-app {
min-width: 1200px; min-width: 1200px;
overflow-x: hidden; overflow-x: hidden;
word-break: break-all;
header { header {
background: rgba(246, 246, 246, 1); background: rgba(246, 246, 246, 1);
@ -121,6 +134,21 @@
cursor: pointer; cursor: pointer;
} }
.clear-search {
.cross-circle-black {
width: 14px;
height: 14px;
cursor: pointer;
}
.halving-line {
width: 1px;
height: 13px;
background-color: #ebebeb;
margin: 0 17px;
}
}
.history-box { .history-box {
position: absolute; position: absolute;
top: 36px; top: 36px;
@ -201,6 +229,7 @@
.tab-box { .tab-box {
width: 100%; width: 100%;
min-width: 1200px;
z-index: 1; z-index: 1;
background-color: #f6f6f6; background-color: #f6f6f6;
padding: 5px 0; padding: 5px 0;
@ -295,7 +324,7 @@
font-size: 14px; font-size: 14px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
width: 400px; max-width: 400px;
.search-keyword-cross { .search-keyword-cross {
width: 14px; width: 14px;
@ -440,6 +469,10 @@
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
line-height: 22px; line-height: 22px;
em {
color: #ff0000;
}
} }
} }
@ -449,6 +482,10 @@
line-height: 22px; line-height: 22px;
font-size: 13px; font-size: 13px;
margin-bottom: 18px; margin-bottom: 18px;
em {
color: #ff0000;
}
} }
.bottom { .bottom {
@ -520,6 +557,32 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.loading-bj {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
svg {
width: 100px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.details-box { .details-box {
width: 688px; width: 688px;
@ -567,6 +630,7 @@
padding-top: 24px; padding-top: 24px;
margin-bottom: 28px; margin-bottom: 28px;
position: relative; position: relative;
word-break: break-all;
// .icon-boxb { // .icon-boxb {
// border: 4px solid #fbfbfb; // border: 4px solid #fbfbfb;
@ -714,6 +778,7 @@
line-height: 26px; line-height: 26px;
padding: 0 24px; padding: 0 24px;
margin-bottom: 20px; margin-bottom: 20px;
word-break: break-all;
img { img {
max-width: 100%; max-width: 100%;
@ -819,15 +884,22 @@
.comments-header-right { .comments-header-right {
.menu-box { .menu-box {
position: relative;
&:hover .report-box {
display: flex;
}
.menu-icon { .menu-icon {
width: 14px; width: 14px;
height: 14px; height: 14px;
cursor: pointer; cursor: pointer;
} }
position: relative;
.report-box { .report-box {
display: none;
position: absolute; position: absolute;
top: 24px; top: 24px;
right: 0; right: 0;
@ -838,6 +910,16 @@
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
color: #7F7F7F; color: #7F7F7F;
cursor: pointer;
&::after {
content: "";
width: 58px;
height: 36px;
position: absolute;
top: -14px;
right: 0;
}
} }
} }
@ -1074,8 +1156,24 @@
&.operate-transmit { &.operate-transmit {
position: relative; position: relative;
// z-index: 1; // z-index: 1;
// &:hover {
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 20px;
z-index: 10;
}
// .transmit-box {
// display: flex;
// }
// }
.transmit-box { .transmit-box {
// display: none;
width: 628px; width: 628px;
// height: 300px; // height: 300px;
border: 1px solid rgba(235, 235, 235, 1); border: 1px solid rgba(235, 235, 235, 1);
@ -1090,7 +1188,7 @@
background: #fff; background: #fff;
justify-content: space-between; justify-content: space-between;
padding: 40px 35px 42px; padding: 40px 35px 42px;
z-index: 1; z-index: 3;
.transmit-title { .transmit-title {
font-weight: 650; font-weight: 650;
@ -1870,7 +1968,7 @@
} }
.question-textarea { .question-textarea {
// height: 412px; height: 412px;
width: 100%; width: 100%;
border: none; border: none;
outline: none; outline: none;
@ -1984,3 +2082,197 @@
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
} }
.alert-form {
display: block;
position: fixed;
z-index: 2100;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
}
.alert-form * {
box-sizing: border-box;
}
.alert-form .reports {
height: 440px;
}
.alert-form .reports .radio-area {
margin-bottom: 40px;
.radio-area-item {
color: #606266;
font-size: 14px;
margin-right: 10px;
cursor: pointer;
&.pitch {
.radio-area-frame {
background-color: #50E3C2;
border-color: #50E3C2;
&::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1);
}
}
}
.radio-area-frame {
border: 1px solid #DCDFE6;
border-radius: 2px;
width: 14px;
height: 14px;
-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
position: relative;
margin-right: 10px;
&::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: "";
border: 1px solid #FFF;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
width: 3px;
-webkit-transition: -webkit-transform .15s ease-in .05s;
transition: -webkit-transform .15s ease-in .05s;
transition: transform .15s ease-in .05s;
transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
-webkit-transform-origin: center;
transform-origin: center;
}
// }
}
}
}
.alert-form .el-checkbox-group {
font-size: 0;
}
.alert-form .comments {
display: block;
position: fixed;
z-index: 11;
left: 50%;
top: 50%;
width: 740px;
height: 440px;
max-width: 90vw;
max-height: 90vh;
transform: translate(-50%, -50%);
background-color: #ffffff;
border: none;
border-radius: 8px 8px 6px 6px;
}
.alert-form .comments .text-box {
position: relative;
}
.alert-form .comments .text-num {
position: absolute;
right: 10px;
bottom: 10px;
color: #999;
font-size: 12px;
}
.alert-form .comments .form {
display: block;
width: 100%;
padding: 34px 30px 40px;
}
.alert-form .comments .form textarea {
height: 172px;
margin-bottom: 30px;
display: block;
width: 100%;
background: #f7f7f7;
padding: 18px;
font-size: 14px;
border: 1px solid #F7F7F7;
border-radius: 5px;
outline: none;
resize: none;
line-height: 22px;
}
.alert-form .head {
padding: 0 18px 0 30px;
display: flex;
height: 56px;
align-items: center;
justify-content: space-between;
background: #333333;
color: #fff;
font-size: 17px;
border-radius: 6px 6px 0 0;
}
.alert-form .head .close {
color: #b3b3b3;
font-size: 14px;
cursor: pointer;
}
.alert-form .footer {
display: flex;
justify-content: center;
align-items: center;
}
.alert-form .footer button[type=button] {
margin-right: 20px;
}
.alert-form .footer button {
border: 1px #999999 solid;
border-radius: 5px;
background-color: #ffffff;
width: 128px;
height: 38px;
color: #333;
font-size: 14px;
outline: none;
cursor: pointer;
}
.alert-form .footer button[type=submit] {
background-color: #50E3C2;
border-color: #50E3C2;
color: #fff;
}
.alert-form .el-checkbox__input.is-checked .el-checkbox__inner,
.alert-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #50E3C2;
border-color: #50E3C2;
}
.alert-form .el-checkbox__input.is-focus .el-checkbox__inner,
.alert-form .el-checkbox__inner:hover {
border-color: #50E3C2;
}
.alert-form .el-checkbox__input.is-checked+.el-checkbox__label {
color: #50E3C2;
}

BIN
img/cross-circle-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

102
index.html
View File

@ -9,8 +9,6 @@
<link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/index.css">
<script src="./js/vue@3.2.36.js"></script> <script src="./js/vue@3.2.36.js"></script>
<script src="https://app.gter.net/bottom?tpl=header&menukey=ask"></script> <script src="https://app.gter.net/bottom?tpl=header&menukey=ask"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head> </head>
<body> <body>
@ -21,6 +19,10 @@
<div class="right flexacenter flex1"> <div class="right flexacenter flex1">
<div class="searchInput flexacenter"> <div class="searchInput flexacenter">
<input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" /> <input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
<div class="clear-search flexacenter" v-if="isSearchMode">
<img class="cross-circle-black" @click="handleClickClear()" src="./img/cross-circle-black.png">
<div class="halving-line"></div>
</div>
<img class="input-icon" src="./img/input-icon.png" @click="searchClick()"> <img class="input-icon" src="./img/input-icon.png" @click="searchClick()">
<div class="history-box" v-if="historicalSearchState" @click.stop=""> <div class="history-box" v-if="historicalSearchState" @click.stop="">
<div class="history-title">历史搜索</div> <div class="history-title">历史搜索</div>
@ -42,37 +44,38 @@
</div> </div>
<div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}"> <div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
<div class="tab-list flexacenter"> <div class="tab-list flexacenter">
<div class="item flexcenter" :class="{'pitch': typePitch === null }" @click="cutType(null)">All</div> <div class="item flexcenter" :class="{'pitch': typePitch === null }" @click="cutType(null)">All</div>
<template v-for="(item,index) in typeList" :key="index"> <template v-for="(item,index) in typeList" :key="index">
<div class="halving-line">|</div> <div class="halving-line">|</div>
<div class="item flexcenter" :class="{'pitch': typePitch === it['id'] }" v-for="(it,i) in item" :key="it" @click="cutType(it.id)">{{ it['name'] }}</div> <div class="item flexcenter" :class="{'pitch': typePitch == it['id'] }" v-for="(it,i) in item" :key="it" @click="cutType(it.id)">{{ it['name'] }}</div>
</template> </template>
</div> </div>
</div> </div>
</header> </header>
<div class="main flexflex" :class="{'mode-list': type == 'list'}"> <div class="main flexflex" :class="{'mode-list': type == 'list'}">
<div class="list-box" @scroll="handleListScroll"> <div class="list-box" @scroll="handleListScroll">
<div class="main-header " :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}"> <div class="main-header " :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}">
<div class="search-keyword flexacenter" v-if="isSearchMode" @click="handleClickClear()"> <div class="search-keyword flexacenter" v-if="isSearchMode" @click="handleClickClear()">
<div class="flex1 ellipsis">{{ keywordText }}</div> <div class="ellipsis">{{ keywordText }}</div>
<img class="search-keyword-cross" src="./img/cross-circle-icon.png"> <img class="search-keyword-cross" src="./img/cross-circle-icon.png">
</div> </div>
<div class="total grid-item" @click="cut">共 {{ total }} 条问答</div> <div class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
</div> </div>
<div class="list" id="list" :style="listStyle()"> <div class="list" id="list" :style="listStyle()">{{ list.lenght }}
<div class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index,item['content'])" :class="{'pitch': index === pitchIndex,'upLevel': index === pitchIndex - 1}" @click.stop="getDetails(item['uniqid'],index)"> <div class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index,item['content'])" :class="{'pitch': index === pitchIndex,'upLevel': index === pitchIndex - 1}" @click.stop="getDetails(item['uniqid'],index)">
<img class="dot" src="./img/dot.svg"> <img class="dot" src="./img/dot.svg">
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}"> <div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
<div class="issue-title flexcenter"> <div class="issue-title flexcenter">
<img class="hot-icon" src="./img/hot-icon.png"> <img class="hot-icon" v-if="item['ishot']" src="./img/hot-icon.png">
<div class="issue ellipsis flex1" v-html="item['title']"></div> <div class="issue ellipsis flex1" v-html="item['title']"></div>
</div> </div>
<div class="answer ellipsis" v-html="item['content']"></div> <div class="answer ellipsis" v-html="item['content']"></div>
<div class="bottom flexacenter"> <div class="bottom flexacenter">
<div class="quantity">{{ item['answers'] == 0 ? '暂无回答' : `共${ item['answers'] }个回答` }}</div> <div class="quantity">{{ item['answers'] == 0 ? '暂无回答' : `共${ item['answers'] }个回答` }}</div>
<div class="longString"></div> <template v-if="type=='list'">
<div class="answer-btn" @click.stop="getDetails(item['uniqid'],index,true)">我来回答</div> <div class="longString"></div>
<div class="answer-btn" @click.stop="getDetails(item['uniqid'],index,true)">我来回答</div>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -85,8 +88,16 @@
</div> </div>
<div class="details-area-box flexflex" v-if="type == 'details'" @scroll="handleDetailsScroll"> <div class="details-area-box flexflex" v-if="type == 'details'" @scroll="handleDetailsScroll">
<!-- 加载 -->
<div class="loading-bj flexcenter" v-if="detailLoading">
<svg t="1642133548066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2597" width="200" height="200">
<path d="M512 249.5c-22.5 0-37.5-15-37.5-37.5V99.5c0-22.5 15-37.5 37.5-37.5s37.5 15 37.5 37.5V212c0 22.5-15 37.5-37.5 37.5z m0 712.5c-22.5 0-37.5-15-37.5-37.5V812c0-22.5 15-37.5 37.5-37.5s37.5 15 37.5 37.5v112.5c0 22.5-15 37.5-37.5 37.5zM212 549.5H99.5C77 549.5 62 534.5 62 512s15-37.5 37.5-37.5H212c22.5 0 37.5 15 37.5 37.5s-15 37.5-37.5 37.5z m712.5 0H812c-22.5 0-37.5-15-37.5-37.5s15-37.5 37.5-37.5h112.5c22.5 0 37.5 15 37.5 37.5s-15 37.5-37.5 37.5z m-153.75-150c-11.25 0-26.25-7.5-33.75-18.75-11.25-18.75-3.75-41.25 15-52.5L849.5 272c18.75-11.25 41.25-3.75 52.5 15s3.75 41.25-15 52.5l-97.5 56.25c-3.75 3.75-11.25 3.75-18.75 3.75z m-615 356.25c-11.25 0-26.25-7.5-33.75-18.75-11.25-18.75-3.75-41.25 15-52.5l97.5-56.25c18.75-11.25 41.25-3.75 52.5 15s3.75 41.25-15 52.5L174.5 752c-7.5 3.75-15 3.75-18.75 3.75z m506.25-465c-7.5 0-11.25 0-18.75-3.75-18.75-11.25-22.5-33.75-15-52.5L684.5 137c11.25-18.75 33.75-22.5 52.5-15 18.75 11.25 22.5 33.75 15 52.5L695.75 272c-7.5 11.25-22.5 18.75-33.75 18.75z m-356.25 615c-7.5 0-11.25 0-18.75-3.75-18.75-11.25-22.5-33.75-15-52.5l56.25-97.5c11.25-15 33.75-22.5 52.5-11.25s22.5 33.75 15 52.5L339.5 887c-7.5 11.25-22.5 18.75-33.75 18.75z m-52.5-506.25c-7.5 0-15 0-18.75-3.75L137 339.5c-18.75-11.25-26.25-33.75-15-52.5s33.75-22.5 52.5-15l97.5 56.25c18.75 11.25 22.5 33.75 11.25 52.5-3.75 11.25-18.75 18.75-30 18.75z m615 356.25c-7.5 0-11.25 0-18.75-3.75L752 695.75c-18.75-11.25-22.5-33.75-15-52.5 11.25-18.75 33.75-22.5 52.5-15L887 684.5c18.75 11.25 22.5 33.75 15 52.5-7.5 11.25-18.75 18.75-33.75 18.75zM362 290.75c-11.25 0-26.25-7.5-33.75-18.75L272 174.5c-7.5-18.75-3.75-41.25 15-52.5s41.25-3.75 52.5 15l56.25 97.5c7.5 18.75 3.75 41.25-15 48.75-7.5 3.75-11.25 7.5-18.75 7.5z m356.25 615c-11.25 0-26.25-7.5-33.75-18.75l-56.25-97.5c-11.25-18.75-3.75-41.25 15-52.5s41.25-3.75 52.5 15L752 849.5c11.25 18.75 3.75 41.25-15 52.5-7.5 3.75-11.25 3.75-18.75 3.75z" p-id="2598" fill="#26d79f"></path>
</svg>
</div>
<div class="details-box flexflex"> <div class="details-box flexflex">
<div class="transmit-mask" v-if="questionsTransmitMaskState" @click="closeAllTransmitState()"></div> <!-- 转发的蒙版 -->
<!-- <div class="transmit-mask" v-if="questionsTransmitMaskState" @click="closeAllTransmitState()"></div> -->
<div class="close-box"> <div class="close-box">
<div class="close-circle flexcenter" @click="closeDetailMode()"> <div class="close-circle flexcenter" @click="closeDetailMode()">
@ -102,7 +113,7 @@
<div class="hint" @click="handleAnswerText" v-html="detailsInfo['content']"></div> <div class="hint" @click="handleAnswerText" v-html="detailsInfo['content']"></div>
<div class="info-box flexacenter"> <div class="info-box flexacenter">
<div class="user-info flexacenter"> <div class="user-info flexacenter">
<img class="avatar" :src="detailsInfo['avatar']"> <img class="avatar" v-if="detailsInfo['avatar']" :src="detailsInfo['avatar']">
<div class="user-name">{{ detailsInfo['nickname'] }}</div> <div class="user-name">{{ detailsInfo['nickname'] }}</div>
</div> </div>
<div class="time">{{ handleDate(detailsInfo['publicationdate']) }}</div> <div class="time">{{ handleDate(detailsInfo['publicationdate']) }}</div>
@ -118,10 +129,10 @@
<img class="operate-icon operate-collect-icon" :src="detailsIscollection == 0 ? './img/collect-icon.png' : './img/collect-icon-colours.svg'"> <img class="operate-icon operate-collect-icon" :src="detailsIscollection == 0 ? './img/collect-icon.png' : './img/collect-icon-colours.svg'">
收藏 收藏
</div> </div>
<div class="operate-item flexacenter operate-transmit" @click="closeTransmitState()"> <div class="operate-item flexacenter operate-transmit" @mouseenter.stop="closeTransmitState()" @mouseleave.stop="closeAllTransmitState()">
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png"> <img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
转发 转发
<div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="" style="z-index: 1;"> <div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="" style="z-index: 10;">
<div class="transmit-left transmit-web"> <div class="transmit-left transmit-web">
<div class="transmit-title">转发网页版</div> <div class="transmit-title">转发网页版</div>
<div class="transmit-content"> <div class="transmit-content">
@ -196,7 +207,7 @@
<img class="operate-icon operate-collect-icon" :src="item['iscollection'] == 1 ? './img/collect-icon-colours.svg' : './img/collect-icon.png'"> <img class="operate-icon operate-collect-icon" :src="item['iscollection'] == 1 ? './img/collect-icon-colours.svg' : './img/collect-icon.png'">
{{ item['collectionnum'] == 0 ? '收藏' : item['collectionnum'] }} {{ item['collectionnum'] == 0 ? '收藏' : item['collectionnum'] }}
</div> </div>
<div class="operate-item operate-transmit flexacenter" @click="handleAnswerTransmitList(index)"> <div class="operate-item operate-transmit flexacenter" @click="handleAnswerTransmitList(index)" @mouseenter.stop="handleAnswerTransmitList(index)" @mouseleave.stop="closeAllTransmitState()">
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png"> <img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
转发 转发
<div class="transmit-box flexflex" v-if="item['transmitState']" @click.stop=""> <div class="transmit-box flexflex" v-if="item['transmitState']" @click.stop="">
@ -238,13 +249,13 @@
<img class="comments-avatar" :src="it['avatar']"> <img class="comments-avatar" :src="it['avatar']">
<div class="comments-username">{{ it['nickname'] }}</div> <div class="comments-username">{{ it['nickname'] }}</div>
<div class="comments-time">{{ handleDate(it['timestamp']) }}</div> <div class="comments-time">{{ handleDate(it['timestamp']) }}</div>
<!-- <div class="comments-identity">提问者</div> --> <div class="comments-identity" v-if="it['questioner'] == 1">提问者</div>
<div class="comments-identity" v-if="item['isauthor']">提问者</div> <div class="comments-identity" v-else-if="it['isauthor'] == 1">回答者</div>
</div> </div>
<div class="comments-header-right flexacenter"> <div class="comments-header-right flexacenter">
<div class="menu-box flexacenter"> <div class="menu-box flexacenter" @click="handleMenuState(index,ind)">
<img class="menu-icon" src="./img/menu-icon-gray.svg"> <img class="menu-icon" src="./img/menu-icon-gray.svg">
<div class="report-box flexcenter" v-if="false">举报</div> <div class="report-box flexcenter">举报</div>
</div> </div>
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind)" src="./img/comment-icon-gray.svg"> <img class="comment-icon" @click="openAnswerCommentsChild(index,ind)" src="./img/comment-icon-gray.svg">
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(it['token'],index,ind)"> <div class="flexacenter like-box" @click="operateAnswerCommentsLike(it['token'],index,ind)">
@ -271,11 +282,13 @@
<div class="comments-username">{{ ite['nickname'] }}</div> <div class="comments-username">{{ ite['nickname'] }}</div>
<div class="comments-time">{{ handleDate(ite['timestamp']) }}</div> <div class="comments-time">{{ handleDate(ite['timestamp']) }}</div>
<!-- <div class="comments-identity">提问者</div> --> <!-- <div class="comments-identity">提问者</div> -->
<div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div>
<div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div>
</div> </div>
<div class="comments-header-right flexacenter"> <div class="comments-header-right flexacenter">
<div class="menu-box flexacenter"> <div class="menu-box flexacenter" @click="handleMenuState(index,ind,i)">
<img class="menu-icon" src="./img/menu-icon-gray.svg"> <img class="menu-icon" src="./img/menu-icon-gray.svg">
<div class="report-box flexcenter" v-if="false">举报</div> <div class="report-box flexcenter">举报</div>
</div> </div>
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind,i)" src="./img/comment-icon-gray.svg"> <img class="comment-icon" @click="openAnswerCommentsChild(index,ind,i)" src="./img/comment-icon-gray.svg">
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite['token'],index,ind,i)"> <div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite['token'],index,ind,i)">
@ -298,7 +311,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="comments-also flexacenter" v-if="it['childnum'] >= 3 && it['childnum'] != it['child'].length" @click="alsoCommentsData(index,ind)"> <div class="comments-also flexacenter" v-if="it['childnum'] >= 3 && it['childnum'] > it['child'].length" @click="alsoCommentsData(index,ind)">
<div class="">还有{{ it['childnum'] - 1 }}条回复</div> <div class="">还有{{ it['childnum'] - 1 }}条回复</div>
<img class="also-icon" src="./img/arrow-circular-gray.png" /> <img class="also-icon" src="./img/arrow-circular-gray.png" />
</div> </div>
@ -336,7 +349,7 @@
手机查看该问答 手机查看该问答
<div class="QRCode-pop flexcenter"> <div class="QRCode-pop flexcenter">
<img class="offer-mini-QRcode" src="./img/offer-mini-QRcode.png"> <img class="offer-mini-QRcode" :src="detailShare['qrcode']">
<div class="QRCode-hint flexacenter"> <div class="QRCode-hint flexacenter">
<img class="QRCode-img" src="./img/give-sweep.png" /> <img class="QRCode-img" src="./img/give-sweep.png" />
微信扫一扫 微信扫一扫
@ -344,7 +357,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -406,7 +418,7 @@
<div class="centre flexflex flex1"> <div class="centre flexflex flex1">
<div class="info flexacenter"> <div class="info flexacenter">
<div class="name">{{ item['nickname'] }}</div> <div class="name">{{ item['nickname'] }}</div>
<div class="time">{{ item['publicationdate'] }}</div> <div class="time">{{ handleDate(item['publicationdate']) }}</div>
</div> </div>
<div class="title ellipsis" v-html="item['content']"></div> <div class="title ellipsis" v-html="item['content']"></div>
<div class="text ellipsis">提问：{{ item['title'] }}</div> <div class="text ellipsis">提问：{{ item['title'] }}</div>
@ -469,16 +481,9 @@
</div> </div>
<!-- 我要提问 --> <!-- 我要提问 -->
<div class="popover-mask flexcenter issue-box" v-if="questionsSetp"> <div class="popover-mask flexcenter issue-box" v-if="questionsSetp" @click="cutQuestionsSetp(0)">
<!-- 第一步 --> <!-- 第一步 -->
<!-- <div class="choosing-theme" v-if="questionsSetp == 1"> <div class="choosing-theme" v-if="questionsSetp == 1" @click.stop="">
<div class="title">选择提问所属主题</div>
<div class="theme-list flexflex">
<div class="theme-item flexcenter" v-for="item in questionsTypeList" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
</div>
</div> -->
<div class="choosing-theme" v-if="questionsSetp == 1">
<div class="title">选择提问所属主题</div> <div class="title">选择提问所属主题</div>
<div class="theme-list flexflex"> <div class="theme-list flexflex">
<div class="theme-stair-box flexflex" v-for="(item,index) in questionsTypeList"> <div class="theme-stair-box flexflex" v-for="(item,index) in questionsTypeList">
@ -489,7 +494,7 @@
</div> </div>
<!-- 第二步 --> <!-- 第二步 -->
<div class="issue-form" v-else> <div class="issue-form" v-else @click.stop="">
<!-- <img class="issue-bj" src="./img/issue-bj.png"> --> <!-- <img class="issue-bj" src="./img/issue-bj.png"> -->
<img class="issue-bj" src="./img/issue-bj.svg"> <img class="issue-bj" src="./img/issue-bj.svg">
<div class="flexcenter q">Q</div> <div class="flexcenter q">Q</div>
@ -538,7 +543,7 @@
<div class="question-icon flexcenter">Q</div> <div class="question-icon flexcenter">Q</div>
<div class="flex1">{{ IAnswerInfo['title'] }}</div> <div class="flex1">{{ IAnswerInfo['title'] }}</div>
</div> </div>
<div class="question-replenish" v-html="IAnswerInfo['content']"></div> <div class="question-replenish" v-if="IAnswerInfo['content']" v-html="IAnswerInfo['content']"></div>
</div> </div>
<div class="question-middle flexflex"> <div class="question-middle flexflex">
<div class="question-icon flexcenter">A</div> <div class="question-icon flexcenter">A</div>
@ -576,6 +581,31 @@
</div> </div>
</div> </div>
<!-- 举报 -->
<div class="alert-form" v-show="alertShow">
<div class="comments reports">
<div class="head">
<span style="display: flex;align-items: center;"><img style="width:25px;margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png?v=4.2.08_331040000">举报投诉</span>
<div class="close icon-close iconfont" @click="alertShow=false"></div>
</div>
<div class="form">
<div class="radio-area flexacenter">
<div class="radio-area-item flexacenter" :class="{'pitch': checkList.includes(s)}" v-for="s in reasonList" @click="selectRadio(s)">
<div class="radio-area-frame"></div>{{ s }}
</div>
</div>
<div class="text-box">
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
<div class="text-num">{{ 200 - alertText.length}}</div>
</div>
<div class="footer">
<button type="button" @click="alertShow=false">取消</button>
<button type="submit" :disabled="checkList.length==0" @click="alertSubmit">提交</button>
</div>
</div>
</div>
</div>
</div> </div>

294
js/index.js
View File

@ -1,7 +1,5 @@
// 提交问题 // 评论的回答者 提问者
// 切换头部分类 // 列表 hot标签
// 转发的链接和title
// 图片上传有一些错误
Object.assign(window, Vue) Object.assign(window, Vue)
const forumApp = Vue.createApp({ const forumApp = Vue.createApp({
@ -13,16 +11,16 @@ const forumApp = Vue.createApp({
onMounted(() => { onMounted(() => {
getUrlParams() getUrlParams()
getUserData() getUserData()
getList()
getListClass() getListClass()
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
getHistoricalSearchList() getHistoricalSearchList()
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('keydown', handleKeydown)
window.removeEventListener('scroll', handleScroll); window.removeEventListener('scroll', handleScroll);
}); });
@ -40,7 +38,10 @@ const forumApp = Vue.createApp({
initParams = params initParams = params
if (params['uniqid']) getDetails(params['uniqid']) if (params['uniqid']) getDetails(params['uniqid'])
if (params['keyword']) keyword.value = params['keyword']
if (params['tid']) typePitch.value = params['tid']
getList()
} }
// 获取当前url // 获取当前url
@ -122,7 +123,7 @@ const forumApp = Vue.createApp({
getList() getList()
replaceState() deleteState(['keyword'])
} }
let historicalSearchState = ref(false) // 历史记录弹窗状态 let historicalSearchState = ref(false) // 历史记录弹窗状态
@ -136,7 +137,8 @@ const forumApp = Vue.createApp({
const clientHeight = document.documentElement.clientHeight; const clientHeight = document.documentElement.clientHeight;
// 列表下 滑动到底部 获取新数据 // 列表下 滑动到底部 获取新数据
if (scrollTop + clientHeight >= scrollHeight) getList() // console.log("type.value == 'list'", type.value == 'list', scrollTop + clientHeight, scrollHeight);
// if (scrollTop + clientHeight >= scrollHeight - 40 && type.value == 'list') getList()
// 列表下 滚动到顶部 触发类型的固定状态 // 列表下 滚动到顶部 触发类型的固定状态
if (scrollTop > 115 && type.value == 'list') tabListFixeState.value = true if (scrollTop > 115 && type.value == 'list') tabListFixeState.value = true
@ -213,10 +215,19 @@ const forumApp = Vue.createApp({
let detailsIsmyself = ref(0) // 详情信息 let detailsIsmyself = ref(0) // 详情信息
let detailsToken = '' // 详情信息 let detailsToken = '' // 详情信息
let detailShare = ref({}) // 详情信息 let detailShare = ref({}) // 详情信息
let detailLoading = ref(false) // 详情加载
// 获取详情 // 获取详情
const getDetails = (uniqid, index, isOpenAnswer) => { const getDetails = (uniqid, index, isOpenAnswer) => {
// uniqid = "fubm5CnD05qj" // 标记一下 if (detailLoading.value) return
detailLoading.value = true
// uniqid = "fubm5CnD05qj" // 标记一下 8yr1m1fOH5CS
detailsInfo.value = {}
answerList.value = []
answerPage.value = 0
$ajax("/api/details", { uniqid }).then(res => { $ajax("/api/details", { uniqid }).then(res => {
if (res.code != 200) return if (res.code != 200) return
let data = res.data let data = res.data
@ -231,29 +242,7 @@ const forumApp = Vue.createApp({
type.value = 'details' type.value = 'details'
if (index !== null && index !== undefined) cut(index) if (index !== null && index !== undefined) cut(index)
else { else calculateListIndex(data.info, uniqid)
let targetList = [...list.value]
let valve = false
targetList.forEach((element, index) => {
if (element['uniqid'] == uniqid) {
cut(index)
valve = true
}
})
if (!valve) {
list.value.unshift({
answers: data.info['answers'],
content: data.info['content'],
publicationdate: data.info['publicationdate'],
title: data.info['title'],
uniqid,
})
cut(0)
}
}
answerList.value = [] answerList.value = []
answerPage.value = 1 answerPage.value = 1
@ -264,9 +253,41 @@ const forumApp = Vue.createApp({
if (isOpenAnswer) openIAnswer() if (isOpenAnswer) openIAnswer()
replaceState({ uniqid }) replaceState({ uniqid })
}).finally(() => {
detailLoading.value = false
}) })
} }
//
const calculateListIndex = (info, uniqid) => {
let targetList = [...list.value]
if (targetList.length == 0 && isSearchMode.value == false) {
setTimeout(() => calculateListIndex(info, uniqid), 200)
return
}
let valve = false
targetList.forEach((element, index) => {
if (element['uniqid'] == uniqid) {
cut(index)
valve = true
}
})
if (!valve) {
let content = ""
if (info['content'].indexOf('<img') == -1) content = info['content']
list.value.unshift({
answers: info['answers'],
content,
publicationdate: info['publicationdate'],
title: info['title'],
uniqid,
})
cut(0)
}
}
let answerList = ref([]) // 回答列表数据 let answerList = ref([]) // 回答列表数据
let answerPage = ref(1) // 回答列表页数 let answerPage = ref(1) // 回答列表页数
let answerLoading = false // 回答列表加载 let answerLoading = false // 回答列表加载
@ -406,14 +427,14 @@ const forumApp = Vue.createApp({
content: IAnswerInfo.value['text'], content: IAnswerInfo.value['text'],
}).then(res => { }).then(res => {
if (res.code == 200) { if (res.code == 200) {
answerList.value = []
answerPage.value = 1
getAnswerList() getAnswerList()
closeIAnswer() closeIAnswer()
isNeedNewAnswersData = true isNeedNewAnswersData = true
handleMsg('success', res['message'] || '操作成功') handleMsg('success', res['message'] || '操作成功')
if (!IAnswerInfo.value['token']) myCount.value['answer']++ if (!IAnswerInfo.value['token']) myCount.value['answer']++
} else {
} }
}) })
@ -449,7 +470,11 @@ const forumApp = Vue.createApp({
getAnswerCommentPublic(index).then(res => { getAnswerCommentPublic(index).then(res => {
if (res.code != 200) return if (res.code != 200) return
let data = res.data let data = res.data
let slice3 = data.data.slice(3)
console.log(answerList.value[index]['commentList'], "commentList");
answerList.value[index]['commentList'] = answerList.value[index]['commentList'].concat(data.data.slice(3)) answerList.value[index]['commentList'] = answerList.value[index]['commentList'].concat(data.data.slice(3))
answerList.value[index]['commentList'] = merged
handleMsg('success', res['message'] || '操作成功') handleMsg('success', res['message'] || '操作成功')
}) })
} }
@ -496,6 +521,7 @@ const forumApp = Vue.createApp({
if (i != null) { if (i != null) {
let targetData = { let targetData = {
id: data['commentid'],
content, content,
isauthor: 1, isauthor: 1,
islike: 0, islike: 0,
@ -507,9 +533,10 @@ const forumApp = Vue.createApp({
} }
targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData) targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData)
targetAnswerList[index]['commentList'][ind]['childnum']++
} else if (ind != null) { } else if (ind != null) {
let targetData = { let targetData = {
id: data['commentid'],
content, content,
isauthor: 1, isauthor: 1,
islike: 0, islike: 0,
@ -518,6 +545,7 @@ const forumApp = Vue.createApp({
...data, ...data,
} }
targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData) targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData)
targetAnswerList[index]['commentList'][ind]['childnum']++
} else { } else {
let targetData = { let targetData = {
@ -529,12 +557,10 @@ const forumApp = Vue.createApp({
child: [] child: []
} }
targetAnswerList[index]['commentList'].unshift(targetData) targetAnswerList[index]['commentList'].unshift(targetData)
} }
closeAnswerCommentsChild() closeAnswerCommentsChild()
console.log("targetAnswerList", targetAnswerList);
handleMsg('success', res['message'] || '操作成功') handleMsg('success', res['message'] || '操作成功')
}) })
} }
@ -601,7 +627,7 @@ const forumApp = Vue.createApp({
const alsoCommentsData = (index, ind) => { const alsoCommentsData = (index, ind) => {
const targetAnswerList = [...answerList.value] const targetAnswerList = [...answerList.value]
const parentid = targetAnswerList[index]['commentList'][ind]['id'] const parentid = targetAnswerList[index]['commentList'][ind]['id']
const token = targetAnswerList[index]['commentList'][ind]['token'] const token = targetAnswerList[index]['token']
$ajax("/api/comment/childrenList", { $ajax("/api/comment/childrenList", {
token, token,
@ -610,12 +636,12 @@ const forumApp = Vue.createApp({
page: 1, page: 1,
childlimit: 1, childlimit: 1,
}).then(res => { }).then(res => {
console.log("res", res);
if (res.code != 200) return if (res.code != 200) return
let data = res.data let data = res.data
targetAnswerList[index]['commentList'][ind]['child'] = targetAnswerList[index]['commentList'][ind]['child'].concat(data.data) let merged = [...targetAnswerList[index]['commentList'][ind]['child'], ...data.data.filter(item2 => !targetAnswerList[index]['commentList'][ind]['child'].find(item1 => item1.id == item2.id))];
targetAnswerList[index]['commentList'][ind]['child'] = merged
answerList.value = targetAnswerList answerList.value = targetAnswerList
}) })
} }
@ -646,9 +672,13 @@ const forumApp = Vue.createApp({
let myCollectionList = ref([]) // 我的收藏列表 let myCollectionList = ref([]) // 我的收藏列表
let myCollectionCount = ref(0) // 我的收藏数量 let myCollectionCount = ref(0) // 我的收藏数量
let myCollectionPage = 1 // 我的收藏页数 let myCollectionPage = 1 // 我的收藏页数
let myCollectionLading = false // 我的收藏加载中
// 获取我的收藏 // 获取我的收藏
const getMyCollection = () => { const getMyCollection = () => {
if (myCollectionPage == 0) return if (myCollectionPage == 0 || myCollectionLading) return
myCollectionLading = true
$ajax("/api/user/collect", { $ajax("/api/user/collect", {
limit: 20, limit: 20,
page: myCollectionPage, page: myCollectionPage,
@ -663,7 +693,7 @@ const forumApp = Vue.createApp({
if (myCollectionList.value.length != data['count']) myCollectionPage++ if (myCollectionList.value.length != data['count']) myCollectionPage++
else myCollectionPage = 0 else myCollectionPage = 0
}) }).finally(() => myCollectionLading = false)
} }
// 取消收藏 // 取消收藏
@ -681,19 +711,18 @@ const forumApp = Vue.createApp({
// 监听 我的收藏滚动到底部 // 监听 我的收藏滚动到底部
const handleCollectionScroll = (e) => { const handleCollectionScroll = (e) => {
const el = e.target; const el = e.target;
// 判断滚动到底部 if (el.scrollHeight - el.scrollTop >= el.clientHeight + 10) return
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
getMyCollection() getMyCollection()
} }
let myAnswerList = ref([]) // 我的回答数据 let myAnswerList = ref([]) // 我的回答数据
let myAnswerCount = ref(0) // 我的回答数量 let myAnswerCount = ref(0) // 我的回答数量
let myAnswerPage = 1 let myAnswerPage = 1
let myAnswerloadimg = false
// 获取我的回答 // 获取我的回答
const getMyAnswer = () => { const getMyAnswer = () => {
if (myAnswerPage == 0) return if (myAnswerPage == 0 || myAnswerloadimg) return
myAnswerloadimg = true
$ajax("/api/user/answer", { $ajax("/api/user/answer", {
limit: 20, limit: 20,
page: myAnswerPage, page: myAnswerPage,
@ -713,14 +742,14 @@ const forumApp = Vue.createApp({
myType.value = 'answers' myType.value = 'answers'
isNeedNewAnswersData = false isNeedNewAnswersData = false
}) }).finally(() => myAnswerloadimg = false)
} }
// 我的回答 的滚动到底部事件 // 我的回答 的滚动到底部事件
const handleAnswersScroll = e => { const handleAnswersScroll = e => {
const el = e.target; const el = e.target;
// 判断滚动到底部 // 判断滚动到底部
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return if (el.scrollHeight - el.scrollTop >= el.clientHeight + 10) return
getMyAnswer() getMyAnswer()
} }
@ -753,9 +782,11 @@ const forumApp = Vue.createApp({
let myQuestionsList = ref([]) // 我的提问数据 let myQuestionsList = ref([]) // 我的提问数据
let myQuestionsCount = ref(0) // 我的提问数量 let myQuestionsCount = ref(0) // 我的提问数量
let myQuestionsPage = 0 // 我的提问页数 let myQuestionsPage = 0 // 我的提问页数
let myQuestionsloading = false // 我的提问页数
// 获取我的提问 // 获取我的提问
const getMyQuestions = () => { const getMyQuestions = () => {
if (myQuestionsPage == 0) return if (myQuestionsPage == 0 || myQuestionsloading) return
myQuestionsloading = true
$ajax("/api/user/questions", { $ajax("/api/user/questions", {
limit: 20, limit: 20,
page: myQuestionsPage, page: myQuestionsPage,
@ -769,14 +800,15 @@ const forumApp = Vue.createApp({
if (myQuestionsList.value.length != data['count']) myQuestionsPage++ if (myQuestionsList.value.length != data['count']) myQuestionsPage++
else myQuestionsPage = 0 else myQuestionsPage = 0
}) }).finally(() => myQuestionsloading = false)
} }
// 我的提问 的滚动到底部 事件 // 我的提问 的滚动到底部 事件
const handleQuestionsScroll = e => { const handleQuestionsScroll = e => {
const el = e.target; const el = e.target;
// 判断滚动到底部 // 判断滚动到底部
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return console.log(el.scrollHeight - el.scrollTop >= el.clientHeight + 10);
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 10) return
getMyQuestions() getMyQuestions()
} }
@ -850,15 +882,23 @@ const forumApp = Vue.createApp({
// 发布问题 // 发布问题
const postingIssue = () => { const postingIssue = () => {
// 还没有分类
console.log("发布问题", questionsObj.value);
$ajax("/api/publish/questionsSubmit", questionsObj.value).then(res => { $ajax("/api/publish/questionsSubmit", questionsObj.value).then(res => {
console.log("res", res);
myCount.value['questions']++
if (res.code == 200) { if (res.code == 200) {
myCount.value['questions']++
questionsSetp.value = 0
questionsObj.value = {
token: "",
title: "",
content: "",
tags: "",
tid: "",
anonymous: 0,
}
handleMsg('success', res['message'] || '操作成功') handleMsg('success', res['message'] || '操作成功')
let data = res.data
// calculateListIndex(res)
getDetails(data['uniqid'])
return
} }
handleMsg('error', res['message'] || '刷新重试！！！') handleMsg('error', res['message'] || '刷新重试！！！')
}) })
@ -942,20 +982,37 @@ const forumApp = Vue.createApp({
const $ajax = (url, data) => { const $ajax = (url, data) => {
url = url.indexOf('//') > -1 ? url : baseURL + url; url = url.indexOf('//') > -1 ? url : baseURL + url;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
// var xhr = new XMLHttpRequest()
// xhr.responseType = "json"
// xhr.withCredentials = true
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// if (xhr.status === 200) {
// if (xhr.response.code != 200) handleMsg('error', xhr.response['message'] || '报错了，请重试！！！')
// resolve(xhr.response)
// } else {
// if (xhr.response.status == 401) window.location.href = 'https://passport.gter.net';
// }
// }
// }
// xhr.open("POST", url, true)
// xhr.setRequestHeader("Content-Type", "application/json")
// xhr.setRequestHeader("authorization", "63c9bef150557f9c90e93f98d2e2497e")
// xhr.send(JSON.stringify(data))
axios.post(url, data, { axios.post(url, data, {
emulateJSON: true, emulateJSON: true,
withCredentials: true, withCredentials: true,
headers: { headers: {
// authorization: "9l3vfdx6h5xhu2hbw4fv5ygbog1dhtly" authorization: "efd8239b3f9ab533ac59311096738096"
// authorization: "194cdc367ed40c938f2eaaf1c6dfa5ff"
authorization: "63c9bef150557f9c90e93f98d2e2497e"
} }
}).then(function (res) { }).then(function (res) {
var data = null var data = null
try { try {
data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data; data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data;
if (data['code'] != 200) handleMsg('error', data['message'] || '报错了，请重试！！！') if (data['code'] != 200) handleMsg('error', data['message'] || '报错了，请重试！！！')
if (data['code'] == 401) window.location.href = 'https://passport.gter.net';
} catch (error) { } } catch (error) { }
resolve(data) resolve(data)
}).catch(err => { }).catch(err => {
@ -965,7 +1022,7 @@ const forumApp = Vue.createApp({
} }
// 处理时间 // 处理时间
const handleDate = (dateTimeStamp) => { const handleDate = (dateTimeStamp = new Date()) => {
dateTimeStamp = dateTimeStamp ? dateTimeStamp : null; dateTimeStamp = dateTimeStamp ? dateTimeStamp : null;
var timestamp = new Date(dateTimeStamp) var timestamp = new Date(dateTimeStamp)
timestamp = timestamp.getTime() timestamp = timestamp.getTime()
@ -1024,12 +1081,7 @@ const forumApp = Vue.createApp({
// 统计转发次数 // 统计转发次数
const countForwardingTimes = (token) => { const countForwardingTimes = (token) => {
console.log("token", token); $ajax("/api/operate/share", { token }).then()
// return
$ajax("/api/operate/share", { token }).then(res => {
console.log("res", res);
})
} }
// 关闭详情模式 // 关闭详情模式
@ -1042,9 +1094,7 @@ const forumApp = Vue.createApp({
// 全部的启动到底部 // 全部的启动到底部
const handleListScroll = (e) => { const handleListScroll = (e) => {
const el = e.target; const el = e.target;
// 判断滚动到底部 if (el.scrollHeight - el.scrollTop >= el.clientHeight + 40) return
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
getList() getList()
} }
@ -1052,31 +1102,23 @@ const forumApp = Vue.createApp({
const handlePaste = (event) => { const handlePaste = (event) => {
const items = (event.clipboardData || event.originalEvent.clipboardData).items; const items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (const item of items) { for (const item of items) {
console.log(item);
if (item.type.indexOf('image') === 0) { if (item.type.indexOf('image') === 0) {
// 如果包含图片，阻止默认行为
event.preventDefault();
handleMsg('warning', '上传图片中')
const file = item.getAsFile(); const file = item.getAsFile();
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const base64 = e.target.result const base64 = e.target.result
// console.log("base64", base64);
uploadImg(base64).then(res => { uploadImg(base64).then(res => {
const questionTextarea = document.querySelector(".question-textarea") const questionTextarea = document.querySelector(".question-textarea")
const imgElements = questionTextarea.querySelectorAll("img"); let imgNode = document.createElement('img');
// console.log("imgElements1111", imgElements); imgNode.setAttribute('src', res.url);
if (imgElements.length == 0) { imgNode.setAttribute('data-aid', res.aid);
questionTextarea.innerHTML += `<img 1 src="${res.url}" data-aid="${res.aid}" />` questionTextarea.appendChild(imgNode);
handleInput() handleInput()
} else { handleMsg('warning', '上传成功')
imgElements.forEach(img => {
// console.log("src", img.getAttribute("src"));
// if (img.getAttribute("src") == base64) {
if (img.getAttribute("data-aid") == null && img.getAttribute('data-custom') == null) {
img.setAttribute("src", res.url);
img.setAttribute("data-aid", res.aid);
}
});
}
}) })
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
@ -1157,13 +1199,6 @@ const forumApp = Vue.createApp({
const replaceState = (obj = {}) => { const replaceState = (obj = {}) => {
// 获取当前URL参数 // 获取当前URL参数
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
// 循环删除所有参数
for (let key of params.keys()) {
params.delete(key);
}
// 修改URL参数
// params.set('paramName', 'paramValue');
for (const key in obj) { for (const key in obj) {
params.set(key, obj[key]); params.set(key, obj[key]);
} }
@ -1171,21 +1206,27 @@ const forumApp = Vue.createApp({
// 替换当前URL，但不刷新页面 // 替换当前URL，但不刷新页面
window.history.replaceState({}, '', `${window.location.pathname}?${params}`); window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
} }
// 删除 url 参数的key
const deleteState = (keys = []) => {
let params = new URLSearchParams(window.location.search);
keys.forEach(key => {
params.delete(key);
})
window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
}
// 我的打开 详情 // 我的打开 详情
const myOpenDetails = (value) => { const myOpenDetails = (value) => {
getDetails(value['uniqid']) getDetails(value.data['uniqid'])
myType.value = "" myType.value = ""
} }
// 详情页滚动事件 // 详情页滚动事件
const handleDetailsScroll = e => { const handleDetailsScroll = e => {
// console.log("e", e);
const el = e.target; const el = e.target;
// 判断滚动到底部 // 判断滚动到底部
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
// console.log("底部");
getAnswerList() getAnswerList()
} }
@ -1196,9 +1237,17 @@ const forumApp = Vue.createApp({
if (e.target.tagName === 'IMG') { if (e.target.tagName === 'IMG') {
var src = e.target.getAttribute('src'); var src = e.target.getAttribute('src');
dialogSrc.value = src dialogSrc.value = src
window.addEventListener('keydown', handleKeydown)
} }
} }
// 大图的监听 esc 键盘按钮
const handleKeydown = event => {
if (event.key !== 'Escape') return
dialogSrc.value = ""
window.removeEventListener('keydown', handleKeydown) // 取消监听
}
// 切换顶部的 type // 切换顶部的 type
const cutType = (id) => { const cutType = (id) => {
@ -1206,12 +1255,56 @@ const forumApp = Vue.createApp({
page = 1 page = 1
list.value = [] list.value = []
type.value = 'list' type.value = 'list'
pitchIndex.value = null
if (id != null) {
replaceState({ tid: id })
deleteState(['uniqid'])
} else deleteState(['tid', 'uniqid'])
getList() getList()
} }
// 打开举报
const handleMenuState = (index, ind, i) => {
if (i === undefined) reportToken = answerList.value[index].commentList[ind]['token']
else reportToken = answerList.value[index].commentList[ind]['child'][i]['token']
alertShow.value = true
}
// 举报 token
let reportToken = ""
const reasonList = ['广告', '辱骂', '重复发送', '不良信息', '其他']
let checkList = ref([])
let alertShow = ref(false)
let alertText = ref("")
const selectRadio = value => {
const index = checkList.value.indexOf(value);
if (index === -1) checkList.value.push(value);
else checkList.value.splice(index, 1);
}
// 举报提交
const alertSubmit = () => {
checkList.value.push(alertText.value)
$ajax("/api/operate/report", {
message: checkList.value,
token: reportToken,
}).then(res => {
checkList.value = []
reportToken = ""
alertShow.value = false
handleMsg('success', '举报成功')
})
}
return { return {
handleMenuState,
reasonList,
checkList,
alertShow,
alertText,
selectRadio,
alertSubmit,
cutType, cutType,
dialogSrc, dialogSrc,
answerPage, answerPage,
@ -1242,6 +1335,7 @@ const forumApp = Vue.createApp({
detailsIscollection, detailsIscollection,
detailsIsmyself, detailsIsmyself,
detailShare, detailShare,
detailLoading,
answerList, answerList,
operateLike, operateLike,
operateCollect, operateCollect,