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

no message

Browse Source
This commit is contained in:
A1300399510 2024-01-23 19:10:57 +08:00
parent d93de9dfe2
commit 809d1d317a
10 changed files with 202 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app.vue
View File

@ -1,5 +1,5 @@
<!--
讨论测试一下
首页搜索不行
我发起的投票不能修改 匿名状态
我发起的投票不确定能下拉加载
-->
@ -11,12 +11,12 @@
<script setup>
const route = useRoute()
// 是否是 生产环境
const isProduction = import.meta.env.NODE_ENV === "production"
const isProduction = process.env.NODE_ENV === "production"
// console.log(process.env.NODE_ENV, "NODE_ENV")
onMounted(() => {
isNeedLogin.value = false
// if (!isProduction) isNeedLogin.value = false
// else determineIsLogin()
// isNeedLogin.value = false
if (!isProduction) isNeedLogin.value = false
else determineIsLogin()
})
let isNeedLogin = ref(true) // 是否需要登录状态

85
components/DetailsArea.vue
View File

@ -1,29 +1,30 @@
<template>
<div class="floor-area flexacenter">
<div class="floor-area flexacenter" :class="{ 'show': isLoaded }">
<div class="floor-content flexacenter">
<!-- {{ isLoaded }} -->
<div class="floor-left flexacenter">
<!-- <div class="item flexacenter" v-if="isBrowser" style="cursor: auto;">
<img class="icon" src="@/assets/img/eye-icon-black.svg" />
<div class="item flexacenter" style="cursor: auto;">
<img class="icon" src="@/assets/img/eye-icon.svg" />
{{ info["views"] }}
</div> -->
</div>
<div class="item flexacenter" @click="handleLike">
<img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
<img class="icon" v-else src="@/assets/img/like-icon.png" />
{{ info["likes"] || "" }}
</div>
<div class="item flexacenter" @click="handleCollect()">
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
<img class="icon" v-else src="@/assets/img/collect-icon.png" />
{{ info["favs"] || "收藏" }}
</div>
<ClientOnly>
<div class="item flexacenter" @click="handleLike">
<img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
<img class="icon" v-else src="@/assets/img/like-icon.png" />
{{ info["likes"] || "" }}
</div>
<div class="item flexacenter" @click="handleCollect()">
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
<img class="icon" v-else src="@/assets/img/collect-icon.png" />
{{ info["favs"] || "收藏" }}
</div>
<el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
<template #reference>
<div class="item flexacenter" @click="handleShare"><img class="icon" src="@/assets/img/transmit-icon.png" />转发</div>
</template>
<div class="transmit-box flexflex">
<img class="cross-icon" @click="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
<img class="cross-icon" @click.stop="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
<div class="transmit-left transmit-web">
<div class="transmit-title">转发网页版</div>
<div class="transmit-content">
@ -86,6 +87,7 @@ let iscollection = inject("iscollection")
let qrcode = inject("qrcode")
let token = inject("token")
const topHeadRef = inject("topHeadRef")
const isLoaded = inject("isLoaded")
// 获取完整 url
const getFullUrl = () => {
@ -159,7 +161,7 @@ const handleLike = () => {
ElMessage.error("不可取消点赞")
return
}
operateLikeHttp({ token: token.value }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
@ -173,6 +175,9 @@ const handleLike = () => {
ElMessage.success(res.message)
})
}
// 底部转发弹窗显示 状态
let transmitBoxState = ref(false)
</script>
<style scoped lang="less">
@ -180,6 +185,7 @@ const handleLike = () => {
position: fixed;
left: 0;
bottom: 0;
// bottom: 50%;
width: 100vw;
min-width: 1200px;
height: 70px;
@ -188,6 +194,13 @@ const handleLike = () => {
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
display: none;
&.show {
display: flex;
animation: animafloor 1s forwards;
animation-timing-function: cubic-bezier(0.98, -0.2, 0.55, 0.97); /* 先快后慢的时间曲线 */
animation-fill-mode: both;
}
.floor-content {
width: 1200px;
height: 100%;
@ -204,8 +217,16 @@ const handleLike = () => {
.icon {
width: 16px;
margin-right: 5px;
// animation: anima 1s forwards;
}
// :nth-of-type(1) {
// animation-delay: 1s;
// }
// :nth-of-type(2) {
// animation-delay: 2s;
// }
&.operate-item {
position: relative;
display: flex;
@ -363,4 +384,36 @@ const handleLike = () => {
width: 113px;
height: 113px;
}
@keyframes anima {
0% {
width: 16px;
}
40% {
width: 20px;
}
100% {
width: 16px;
}
}
@keyframes animafloor {
0% {
// left: -100%;
// opacity: 0;
transform: translate3d(-100%, 0, 0);
}
90% {
left: 20px;
}
100% {
// left: 0;
// opacity: 1;
transform: translateZ(0);
}
}
</style>

43
components/DetailsComments.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="comment-title flexacenter">
讨论
讨论 {{ postCommentFocusState }}
<span class="comment-amount">{{ commentComments || "" }}</span>
</div>
<div class="post-comment flexacenter" @click="loginJudgment()">
<textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
<div class="post-comment flexacenter" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
<textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @focus="postCommentFocusState = true"></textarea>
<div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
</div>
@ -150,6 +150,8 @@ onMounted(() => window.addEventListener("scroll", handleScroll))
const sendMessage = inject("sendMessage")
const TAHomePage = inject("TAHomePage")
let postCommentFocusState = ref(false)
let commentCount = ref(0)
let commentComments = ref(0) // 所有的评论数
let commentPage = ref(1)
@ -221,6 +223,7 @@ const openAnswerCommentsChild = (index, i) => {
goLogin()
return
}
closeAnswerCommentsChild(false)
if (i == null) commentList.value[index]["childState"] = true
else commentList.value[index]["child"][i]["childState"] = true
@ -228,10 +231,7 @@ const openAnswerCommentsChild = (index, i) => {
}
// 关闭 回答-评论 的子评论 isempty 是否需要清空输入框 默认需要清空
const closeAnswerCommentsChild = (isempty = true) => {
console.log("isempty", isempty)
// if (isempty) commentInput.value = ""
commentInput.value = ""
const closeAnswerCommentsChild = () => {
commentList.value.forEach(ele => {
ele["childState"] = false
if (ele["child"] && ele["child"].length != 0) ele["child"].forEach(el => (el["childState"] = false))
@ -259,6 +259,11 @@ const submitAnswerComments = (index, i) => {
if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
else if (index != null) parentid = targetCommentList[index]["id"]
if (!content) {
ElMessage.error("请填写评论内容")
return
}
detailsSubmitommentListHttp({
content,
token: props.token,
@ -438,14 +443,29 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
}
.post-comment {
// width: 100%;
height: 60px;
min-height: 60px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(215, 215, 215, 1);
border-right: none;
border-right-width: 0;
border-radius: 6px;
margin-bottom: 30px;
margin-right: 30px;
transition: all 0.5s;
&.post-comment-focus {
border-right-width: 1px;
min-height: 200px;
flex-direction: column;
.post-input {
width: 100%;
}
.post-ok {
align-self: flex-end;
height: 32px;
margin-bottom: 10px;
margin-right: 10px;
}
}
.post-input {
height: 100%;
@ -455,6 +475,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
padding: 10px;
font-size: 14px;
resize: none;
transition: all 0.5s;
&::placeholder {
color: #aaaaaa;
@ -475,6 +496,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
font-size: 14px;
cursor: pointer;
border-radius: 6px;
transition: all 0.5s;
}
}
@ -665,6 +687,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
resize: none;
padding: 11px 16px;
border-radius: 7px 0 0 7px;
font-size: 14px;
}
.comments-btn {

1
components/MyPopup.vue
View File

@ -101,6 +101,7 @@ const getCollect = () => {
showList.value = collectList
// showList.value = showList.value.concat(data.data)
console.log(collectList.length, data["count"])
if (collectList.length < data["count"]) collectPage++
else collectPage = 0

4
components/top-head.vue
View File

@ -107,8 +107,8 @@ const setHistoricalSearchList = () => {
// 搜索点击事件
const searchClick = () => {
router.push(`/index.html?keyword=${keyword.value || ""}`)
// goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
// router.push(`/index.html?keyword=${keyword.value || ""}`)
goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
setHistoricalSearchList()
searchBlur()
}

2
composables/api.js
View File

@ -97,5 +97,5 @@ export const MyUserCollectHttp = query => {
// 评论相关 - 举报 Comment related
export const commentReportHttp = query => {
return Http.post("/api/operate/report", query)
return Http.post("/api/comment/report", query)
}

2
nuxt.config.ts
View File

@ -1,7 +1,7 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: true,
devtools: { enabled: true },
devtools: { enabled: false },
modules: ["@element-plus/nuxt"],
app: {
head: {

88
pages/details/[id].vue
View File

@ -8,12 +8,12 @@
<div class="content flexflex" :style="{ '--main-color': colourValue[uniqidIndex]['main'], '--bg-color': colourValue[uniqidIndex]['bg'], '--bc-color': colourValue[uniqidIndex]['bc'] }">
<div class="header flexacenter">
<span>{{ info.title }}</span>
<ClientOnly>
<!-- <ClientOnly>
<span class="views flexcenter">
<img class="eye-icon" src="@/assets/img/eye-icon.svg" />
{{ info.views }}
</span>
</ClientOnly>
</ClientOnly> -->
</div>
<div class="left">
<div class="info flexacenter">
@ -38,7 +38,7 @@
</div>
</el-popover>
<div class="post-time">{{ handleDate(info.releasetime) }}发布</div>
<div class="post-time" v-if="info.releasetime">{{ handleDate(info.releasetime) }}发布</div>
</div>
<div class="info-right flexacenter" v-if="info['status'] == 1">
<div class="cut-off">{{ handleDeadline(info.deadline) }}结束</div>
@ -74,10 +74,24 @@
</div>
</div>
<div class="right"><DetailsComments ref="commentsRef" :token="token"></DetailsComments></div>
</div>
<DetailsArea></DetailsArea>
<DetailsArea></DetailsArea>
<el-dialog class="options-popup" v-model="cancelPopoverState" width="488px" align-center>
<!-- 投票后自动评论 -->
<template v-if="false">
<el-dialog class="default-popup automatic-reviews-popup" v-model="reviewsPopoverState" width="720px" align-center autosize>
<div class="automatic-header">
<div class="automatic-title">说说您的投票理由</div>
<div class="automatic-have">已投：还是申点其他的保底吧</div>
</div>
<el-input class="automatic-input" placeholder="请输入…" v-model="aaaaa" type="textarea"></el-input>
<div class="automatic-bottom flexflex">
<div class="automatic-send flexcenter">发送</div>
</div>
</el-dialog>
</template>
</div>
<el-dialog class="default-popup options-popup" v-model="cancelPopoverState" width="488px" align-center>
<div class="options-popup-text">您要取消投票吗？</div>
<div class="options-popup-btn flexflex">
<div class="options-popup-item options-no flexcenter" @click="unvoteVote">取消投票</div>
@ -102,6 +116,10 @@ let id = route.params.id
const uniqidEnd = id.charAt(id.length - 1)
const uniqidIndex = base62ToDecimal(uniqidEnd) % 6
let aaaaa = ref("")
let reviewsPopoverState = ref(true)
onMounted(() => {
getDetails()
clearBottom()
@ -117,12 +135,14 @@ let isvote = ref(0) // 是否已经投票
let option = ref([])
let token = ref("")
let cancelPopoverState = ref(false) // 取消投票弹窗
let isLoaded = ref(false) // 是否加载了
provide("info", info)
provide("islike", islike)
provide("iscollection", iscollection)
provide("token", token)
provide("qrcode", qrcode)
provide("isLoaded", isLoaded)
const getDetails = () => {
detailsHttp({ uniqid: id }).then(res => {
@ -142,6 +162,7 @@ const getDetails = () => {
qrcode.value = data.share?.qrcode
token.value = data["token"]
seo.value = data.seo
isLoaded.value = true
})
}
@ -566,8 +587,7 @@ try {
</style>
<style lang="less">
.options-popup {
border-radius: 10px;
.default-popup {
.el-dialog__header {
padding: 0;
.el-dialog__headerbtn {
@ -575,10 +595,14 @@ try {
height: 36px;
}
}
padding: 44px 74px;
.el-dialog__body {
padding: 0;
}
}
.options-popup {
border-radius: 10px;
padding: 44px 74px;
.options-popup-text {
font-size: 14px;
@ -598,8 +622,8 @@ try {
cursor: pointer;
&.options-yes {
background-color: rgba(114, 219, 134, 1);
border-color: rgba(114, 219, 134, 1);
background-color: rgba(249, 93, 93, 1);
border-color: rgba(249, 93, 93, 1);
color: #fff;
}
&.options-no {
@ -610,4 +634,46 @@ try {
}
}
}
.automatic-reviews-popup {
border-radius: 10px;
.automatic-header {
padding: 20px;
border-bottom: 1px dotted #ebebeb;
.automatic-title {
font-weight: 650;
font-size: 18px;
color: #000000;
margin-bottom: 12px;
}
.automatic-have {
background-color: rgba(246, 246, 246, 1);
font-size: 12px;
color: #aaa;
width: fit-content;
}
}
.automatic-input {
.el-textarea__inner {
min-height: 256px !important;
box-shadow: none;
padding: 20px;
resize: none;
}
}
.automatic-bottom {
justify-content: flex-end;
padding: 10px;
.automatic-send {
background-color: var(--main-color);
color: #fff;
font-size: 16px;
width: 100px;
height: 40px;
border-radius: 6px;
cursor: pointer;
}
}
}
</style>

5
pages/index.html/index.vue
View File

@ -135,10 +135,7 @@ const handleLike = (token, index) => {
}
// 点击关闭搜索
const closeKeyword = () => {
// keyword.value = ""
router.push("./index.html")
}
const closeKeyword = () => router.push("./index.html")
watch(
() => route.query,

19
pages/publish/index.vue
View File

@ -87,7 +87,7 @@
</div>
</div>
<div class="flexcenter" style="padding-right: 26px;">
<div class="add-box flexcenter" @click="addOption()">
<div class="add-box flexcenter" @click="addOption()" v-if="optionList.length < 15">
<img class="add-icon" src="@/assets/img/add-green-icon.svg" />
添加选项
</div>
@ -251,7 +251,7 @@ onMounted(() => {
const getinit = () => {
publishInitHttp().then(res => {
if (res.code != 200) {
ElMessage.error(res.message || '报错了，刷新一下')
ElMessage.error(res.message || "报错了，刷新一下")
if (res.code == 401) goLogin()
return
}
@ -265,17 +265,20 @@ const getinit = () => {
optionList.value.push({ id: index, message: "" })
}
} else {
while (option.length < 2) {
option.push(null)
}
option.forEach((message, index) => {
optionList.value.push({ id: index, message })
if (message !== "不懂，围观学习") {
optionList.value.push({ id: index, message })
}
})
while (optionList.value.length < 2) {
optionList.value.push({ id: optionList.value.length, message: "" })
}
}
let deadline = data["info"]["deadline"] || 0
if (deadline) data["info"]["deadline"] = handleDate(deadline)
console.log("deadline", deadline)
if (deadline > 100000) data["info"]["deadline"] = handleDate(deadline)
else data["info"]["deadline"] = null
info.value = data.info
token = data.token