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-15 19:02:10 +08:00
parent 6a7d5f221e
commit e01ac5326b
12 changed files with 479 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app.vue
View File

@ -1,8 +1,5 @@
<template>
<div>
<RouterView></RouterView>
<!-- <NuxtWelcome /> -->
</div>
<RouterView></RouterView>
</template>
<script setup>
const route = useRoute()

14
components/DetailsArea.vue
View File

@ -6,19 +6,17 @@
<img class="icon" src="@/assets/img/eye-icon-black.svg" />
{{ info["views"] }}
</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>
<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>
</ClientOnly>
<ClientOnly>
<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>
@ -32,7 +30,7 @@
<div class="transmit-headline">{{ info["title"] }}</div>
<div class="transmit-url">{{ getFullUrl() }}</div>
</div>
<div class="transmit-web-btn flexcenter" @click="copyText(`${info['subject']} + ${getFullUrl()}`)">复制链接</div>
<div class="transmit-web-btn flexcenter" @click="copyText(`${info['title']} + ${getFullUrl()}`)">复制链接</div>
</div>
<div class="transmit-right transmit-mini">
<div class="transmit-title">转发小程序版</div>

40
components/DetailsComments.vue
View File

@ -52,7 +52,7 @@
</div>
</div>
<div class="comment-text" @click="openAnswerCommentsChild(index)">{{ item["content"] }}</div>
<!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> -->
<div class="alreadyVoted" v-if="item.voteoption">已投：{{ item.voteoption }}</div>
<div class="comments-input-box flexacenter" v-if="item['childState']">
<div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
@ -105,6 +105,7 @@
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
{{ ite["content"] }}
</div>
<div class="alreadyVoted" v-if="ite.voteoption">已投：{{ ite.voteoption }}</div>
<div class="comments-input-box flexacenter" v-if="ite['childState']">
<div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
@ -139,17 +140,11 @@ const props = defineProps({
watch(
() => props.token,
newV => {
console.log(newV)
getCommentList()
},
{
immediate: false,
}
() => getCommentList(),
{ immediate: false }
)
onMounted(() => {
window.addEventListener("scroll", handleScroll)
})
onMounted(() => window.addEventListener("scroll", handleScroll))
const sendMessage = inject("sendMessage")
const TAHomePage = inject("TAHomePage")
@ -159,7 +154,6 @@ let commentComments = ref(0) // 所有的评论数
let commentPage = ref(1)
let commentList = ref([])
let commentLoading = false
let token = "4ZKbui89pS81jKgWpT41kLgcglLOJa8UQCmuucFl-cyzQKdjr0iEMTl4grDC04TSnq1vC90fZ2pVdeP6IUYPN2Y4Ng~~"
let isEmptyState = ref(false) // 评论是否为空
// 获取详情评论数据
@ -255,7 +249,7 @@ const submitAnswerComments = (index, i) => {
detailsSubmitommentListHttp({
content,
token,
token: props.token,
parentid,
}).then(res => {
if (res.code != 200) {
@ -297,6 +291,7 @@ const submitAnswerComments = (index, i) => {
commentCount.value++
}
}
commentComments.value++
commentList.value = targetCommentList
@ -323,7 +318,7 @@ const alsoCommentsData = (index, ind) => {
limit: 10,
page,
parentid,
token,
token: props.token,
}).then(res => {
if (res.code != 200) return
let data = res.data
@ -398,6 +393,7 @@ provide("reportAlertShow", reportAlertShow)
height: 60px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(215, 215, 215, 1);
border-right: none;
border-radius: 6px;
margin-bottom: 30px;
margin-right: 30px;
@ -459,7 +455,7 @@ provide("reportAlertShow", reportAlertShow)
.comment-header {
display: flex;
justify-content: space-between;
padding-right: 30px;
// padding-right: 30px;
margin-bottom: 10px;
.comment-header-left {
@ -576,6 +572,16 @@ provide("reportAlertShow", reportAlertShow)
}
}
.alreadyVoted {
font-size: 12px;
color: #aaaaaa;
background-color: rgba(246, 246, 246, 1);
line-height: 17px;
width: fit-content;
margin-bottom: 15px;
word-break: break-word;
}
.comments-input-box {
margin-top: 13px;
margin-bottom: 10px;
@ -585,6 +591,7 @@ provide("reportAlertShow", reportAlertShow)
flex: 1;
height: 60px;
border: 1px solid rgba(215, 215, 215, 1);
border-right: none;
border-radius: 8px;
margin-right: 16px;
position: relative;
@ -614,7 +621,8 @@ provide("reportAlertShow", reportAlertShow)
.comments-btn {
width: 58px;
height: 58px;
background-color: #31d72e;
// background-color: #31d72e;
background-color: var(--main-color);
border-radius: 0 7px 7px 0;
font-size: 14px;
color: #ffffff;

22
components/Empty.vue
View File

@ -9,14 +9,28 @@
<img class="item" src="@/assets/img/dot-gray.svg" />
</div>
<img class="empty-icon" src="@/assets/img/empty-icon.svg" />
<div class="empty-hint">{{ hint || "暂无内容" }}</div>
<template v-if="isNeedIssue">
<div class="empty-hint" style="margin-bottom: 7px;">没有找到相关结果，请更换搜索关键词</div>
<div class="empty-hint flexacenter">
或者
<div class="sponsor" @click="goIssue">发起一个新投票</div>
</div>
</template>
<div v-else class="empty-hint">{{ hint || "暂无内容" }}</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router"
const router = useRouter()
let props = defineProps({
hint: String,
isNeedIssue: Boolean,
})
const goIssue = () => router.push("/publish")
</script>
<style lang="less" scoped>
@ -48,6 +62,12 @@ let props = defineProps({
font-size: 13px;
color: #7f7f7f;
line-height: 22px;
.sponsor {
text-decoration: underline;
color: #72db86;
margin-left: 5px;
cursor: pointer;
}
}
}
</style>

171
components/MyPopup.vue
View File

@ -9,67 +9,75 @@
</div>
</div>
<div class="empty-box flexcenter" v-loading="true" v-if="(MyPopupState == 'collect' && collectLoading) || (MyPopupState == 'mj' && publisloading)"></div>
<div class="empty-box flexcenter" v-else-if="showList.length == 0">
<!-- <div class="empty-box flexcenter" v-loading="true" v-if="(MyPopupState == 'collect' && collectLoading) || (MyPopupState == 'mj' && publisloading)"></div> -->
<div class="empty-box flexcenter" v-if="showList.length == 0">
<Empty></Empty>
</div>
<el-scrollbar v-else height="479px">
<div class="content" @scroll="handleListScroll">
<div class="item flexflex" v-for="(item, index) in showList" :key="index" @click="goDetails(item['uniqid'] || item?.data?.uniqid)">
<div class="item flexflex" v-for="(item, index) in showList" :key="item.uniqid" @click="goDetails(item['uniqid'] || item?.data?.uniqid)">
<div class="left flexflex">
<div class="name">{{ item.title }}</div>
<div class="message">{{ item.message }}</div>
<div class="name ellipsis">{{ item.title || item.data?.title }}</div>
<div class="message ellipsis">{{ item.message || item.data?.message }}</div>
<div class="data">
30人参与 <i>|</i> 投票已结束
<span><i>|</i> 我已投：不懂，围观学习</span>
{{ item.votes || item.data?.votes || 0 }}人参与 <i>|</i> {{ handleDeadline(item.deadline || item?.data?.deadline) }}结束
<span v-if="item.optionvalue || item?.data?.optionvalue"><i>|</i> 我已投：{{ item.optionvalue || item?.data?.optionvalue }}</span>
</div>
</div>
<div class="operate-area flexacenter">
<img class="delete-icon" v-if="MyPopupState == 'collect'" @click.stop="cancelCollection(item['token'], index)" src="@/assets/img/delete-icon.svg" />
<div class="anonymous-box flexacenter" v-else @click.stop="openAnonymousState(index)">
<div class="text">{{ item["anonymous"] == 1 ? "匿名" : "公开" }}</div>
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
<div class="state-popup flexflex" v-if="item['anonymousState']" @click.stop="">
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index, 0)">
<div class>公开发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index, 1)">
<div class>匿名发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
<!-- <div class="anonymous-box flexacenter" v-if="MyPopupState == 'publish'" @click.stop="openAnonymousState(index)"> -->
<template v-if="MyPopupState == 'publish'">
<div class="anonymous-box flexacenter" @click.stop="openAnonymousState(index)">
<div class="text">{{ item["anonymous"] == 1 ? "匿名" : "公开" }}</div>
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
<div class="state-popup flexflex" v-if="item['anonymousState']" @click.stop="">
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index, 0)">
<div class>公开发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index, 1)">
<div class>匿名发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
</div>
</div>
</div>
<div class="halving-line"></div>
<img class="delete-icon" @click.stop="openDeleteVote(item['token'], index, item.uniqid || item?.data?.uniqid)" src="@/assets/img/delete-icon.svg" />
</template>
<img class="delete-icon" v-if="MyPopupState == 'collect'" @click.stop="cancelCollection(item['token'], index, item.uniqid || item?.data?.uniqid)" src="@/assets/img/delete-icon.svg" />
</div>
</div>
</div>
</el-scrollbar>
</div>
</el-dialog>
<el-dialog class="options-popup" v-model="deleteState" 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="deleteVote">删除投票</div>
<div class="options-popup-item options-yes flexcenter" @click="deleteState = false">不删除</div>
</div>
</el-dialog>
<!-- </div> -->
</template>
<script setup>
let props = defineProps({
// MyPopupState: String, // collect mj
count: Object,
tabList: Array,
})
let deleteState = ref(false) // 确认删除弹窗
let count = inject("count")
let show = ref(false)
const router = useRouter()
const route = useRoute()
let MyPopupState = ref("") // collect participation sponsor
let MyPopupState = ref("") // collect takevote publish
onMounted(() => {
// if (MyPopupState.value == "collect") getCollect();
// else if (MyPopupState.value == "mj") getPublish();
})
const tabList = [
{ name: "我的收藏", type: "collect" },
{ name: "我参与的投票", type: "participation" },
{ name: "我发起的投票", type: "sponsor" },
]
onMounted(() => {})
// 展示的 列表数据
let showList = ref([])
@ -82,20 +90,20 @@ let collectCount = ref(0)
const getCollect = () => {
if (collectPage == 0 || collectLoading.value) return
collectLoading.value = true
// if (collectPage == 2) return
MyUserCollectHttp({ page: collectPage })
.then(res => {
if (res.code != 200) return
let data = res.data
collectList = collectList.concat(data.data)
showList.value = collectList
// showList.value = showList.value.concat(data.data)
if (collectList.length < data["count"]) collectPage++
else collectPage = 0
collectCount.value = data["count"]
// MyPopupState.value = "collect"
// show.value = true
})
.finally(() => (collectLoading.value = false))
}
@ -104,11 +112,10 @@ let publishList = []
let publisPage = 1
let publisloading = ref(false)
const getPublish = () => {
return
if (publisPage == 0 && !publisloading.value) return
publisloading.value = true
MyUserPublishHttp({ limit: 4, page: publisPage })
MyUserPublishHttp({ page: publisPage })
.then(res => {
if (res.code != 200) return
let data = res.data
@ -116,13 +123,28 @@ const getPublish = () => {
if (publishList.length < data["count"]) publisPage++
else publisPage = 0
showList.value = publishList
// MyPopupState.value = "mj"
// show.value = true
})
.finally(() => (publisloading.value = false))
}
let takevoteList = []
let takevotePage = 1
let takevoteloading = ref(false)
const getTakevote = () => {
if (takevotePage == 0 && !takevoteloading.value) return
takevoteloading.value = true
MyUserTakevoteHttp({ page: takevotePage })
.then(res => {
if (res.code != 200) return
let data = res.data
takevoteList = takevoteList.concat(data.data)
if (takevoteList.length < data["count"]) takevotePage++
else takevotePage = 0
showList.value = takevoteList
})
.finally(() => (takevoteloading.value = false))
}
// 切换 isEmpty 是否清空收藏数据， 因为不确定用户是否有新收藏
const cutMy = (key, isEmpty) => {
if (isEmpty) {
@ -132,10 +154,12 @@ const cutMy = (key, isEmpty) => {
}
if (key == "collect" && collectList.length == 0) getCollect()
else if (key == "mj" && publishList.length == 0) getPublish()
else if (key == "takevote" && takevoteList.length == 0) getTakevote()
else if (key == "publish" && publishList.length == 0) getPublish()
if (key == "collect") showList.value = collectList
else if (key == "mj") showList.value = publishList
else if (key == "takevote") showList.value = takevoteList
else if (key == "publish") showList.value = publishList
MyPopupState.value = key
@ -161,7 +185,10 @@ const closeAllAnonymousState = () => {
// 修改匿名状态
const handleAnonymousState = (token, index, anonymous) => {
changeAnonymousHttp({ token, anonymous }).then(res => {
if (res.code != 200) return
if (res.code != 200) {
ElMessage.error(res.message)
return
}
publishList[index]["anonymous"] = anonymous
showList.value = [...publishList]
@ -177,7 +204,8 @@ const handleListScroll = e => {
// 判断滚动到底部
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
if (MyPopupState.value == "collect") getCollect()
if (MyPopupState.value == "mj") getPublish()
if (MyPopupState.value == "takevote") getTakevote()
if (MyPopupState.value == "publish") getPublish()
}
let clearAllData = inject("clearAllData") || null
@ -185,7 +213,7 @@ let getDetails = inject("getDetails") || null
// 打开详情页
const goDetails = uniqid => {
return
// return
let path = route["path"] || ""
if (path.indexOf("/details/") != -1) {
clearAllData()
@ -209,9 +237,12 @@ const closeDialog = () => {
}
// const emit = defineEmits(["cutMy"]);
const unbookmarkSamePage = inject("unbookmarkSamePage")
// 处理取消收藏
const cancelCollection = (token, index) => {
const cancelCollection = (token, index, uniqid) => {
const id = route.params["id"]
MyUserDeleteCollectHttp({ token }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
@ -219,8 +250,42 @@ const cancelCollection = (token, index) => {
}
collectList.splice(index, 1)
count.value.collect--
collectCount.value--
showList.value = [...collectList]
if (id == uniqid) unbookmarkSamePage()
})
}
let deleteobj = {}
const openDeleteVote = (token, index, uniqid) => {
deleteobj["token"] = token
deleteobj["index"] = index
deleteobj["uniqid"] = uniqid
deleteState.value = true
}
// 点删除投票
const deleteVote = () => {
const id = route.params["id"]
deleteHttp({ token: deleteobj["token"] }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
count.value.publish--
publishList.splice(deleteobj["index"], 1)
showList.value = [...publishList]
if (id == deleteobj["uniqid"]) unbookmarkSamePage()
ElMessage.success(res.message)
deleteobj = {}
deleteState.value = false
})
}
</script>
@ -302,7 +367,8 @@ const cancelCollection = (token, index) => {
.content {
width: 100%;
height: 100%;
height: 479px;
// height: 100%;
// background: #000000;
overflow: auto;
// padding-right: 13px;
@ -337,12 +403,14 @@ const cancelCollection = (token, index) => {
line-height: 20px;
font-size: 14px;
margin-bottom: 10px;
width: 550px;
}
.message {
color: #7f7f7f;
line-height: 22px;
font-size: 13px;
margin-bottom: 6px;
width: 550px;
}
.data {
@ -363,6 +431,13 @@ const cancelCollection = (token, index) => {
cursor: pointer;
}
.halving-line {
margin: 0 20px;
width: 1px;
height: 13px;
border-right: 1px solid #d7d7d7;
}
.anonymous-box {
.text {
font-size: 13px;

5
components/Report.vue
View File

@ -56,10 +56,7 @@ const alertSubmit = () => {
}).then(res => {
checkList.value = []
reportAlertShow.value = false
ElMessage({
message: res.message || "举报成功",
type: "success",
})
ElMessage.success(res.message || "举报成功")
})
}

19
components/top-head.vue
View File

@ -17,20 +17,18 @@
<div class="my-btn-item flexcenter" @click="handleUser('collect')">我的收藏</div>
</div> -->
<div class="my-btn-list flexacenter">
<div class="my-btn-item flexcenter" @click="handleUser('collect')">我的收藏</div>
<div class="my-btn-item flexcenter" @click="handleUser('participation')">我参与的投票</div>
<div class="my-btn-item flexcenter" @click="handleUser('sponsor')">我发起的投票</div>
<div class="my-btn-item flexcenter" v-for="item in tabList" :key="item.type" @click="handleUser(item.type)">{{ item.name }}</div>
</div>
<div class="sponsor-btn flexcenter" @click="goPublish">
<img class="add-bj" src="@/assets/img/add-bj.svg" />
<img class="add-icon" src="@/assets/img/add-icon.svg" />
发布面经
发布投票
</div>
</div>
</div>
</section>
<MyPopup ref="MyPopupRef" :count="count"></MyPopup>
<MyPopup ref="MyPopupRef" :tabList="tabList"></MyPopup>
</template>
<script setup>
@ -42,14 +40,23 @@ const route = useRoute()
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
const tabList = [
{ name: "我的收藏", type: "collect" },
{ name: "我参与的投票", type: "takevote" },
{ name: "我发起的投票", type: "publish" },
]
let keyword = ref("")
onMounted(() => {
getHistoricalSearchList()
keyword.value = route.query["keyword"]
})
let count = ref({})
provide("count", count)
const getUser = () => {
return new Promise((resolve, reject) => {
MyUserInfoHttp().then(res => {
@ -134,6 +141,8 @@ const handleUser = async key => {
return
}
console.log("key", key)
if (Object.keys(count.value).length === 0) {
await getUser()
MyPopupRef.value.cutMy(key, true)

52
composables/api.js
View File

@ -39,6 +39,15 @@ export const publishSubmitHttp = query => {
return Http.post("/api/publish/submit", query)
}
// 发布相关 - 更改匿名状态
export const changeAnonymousHttp = query => {
return Http.post("/api/publish/changeAnonymous", query)
}
// 发布相关 - 删除投票
export const deleteHttp = query => {
return Http.post("/api/publish/delete", query)
}
// 操作-点赞
export const operateLikeHttp = query => {
@ -48,4 +57,45 @@ export const operateLikeHttp = query => {
// 数据操作 - 收藏
export const operateCollectHttp = query => {
return Http.post("/api/operate/collect", query)
}
}
// 数据操作 - 投票操作
export const operationCollectHttp = query => {
return Http.post("/api/operate/operation", query)
}
// 数据操作 - 取消投票操作
export const unvoteCollectHttp = query => {
return Http.post("/api/operate/unvote", query)
}
// 我的 - 用户信息
export const MyUserInfoHttp = query => {
return Http.post("/api/user", query)
}
// 我的 - 我的发布的面经
export const MyUserPublishHttp = query => {
return Http.post("/api/user/publish", query)
}
// 我的 - 用户相关 - 我参与
export const MyUserTakevoteHttp = query => {
return Http.post("/api/user/takevote", query)
}
// 我的 - 删除收藏
export const MyUserDeleteCollectHttp = query => {
return Http.post("/api/user/deleteCollect", query)
}
// 数据操作 - 收藏
export const MyUserCollectHttp = query => {
return Http.post("/api/user/collect", query)
}
// 评论相关 - 举报 Comment related
export const commentReportHttp = query => {
return Http.post("/api/operate/report", query)
}

3
composables/utils.js
View File

@ -32,7 +32,8 @@ export const handleDate = (dateTimeStamp = new Date()) => {
// 处理 截止时间
export const handleDeadline = (dateTimeStamp = new Date()) => {
// dateTimeStamp = dateTimeStamp ? dateTimeStamp * 1000 : null
if (typeof dateTimeStamp == "number") dateTimeStamp = dateTimeStamp ? dateTimeStamp * 1000 : null
var timestamp = new Date(dateTimeStamp)
timestamp = timestamp.getTime()
var minute = 1000 * 60

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

@ -1,4 +1,9 @@
<template>
<Head>
<Title>{{ `${seo["title"] || "投票"} - 寄托天下出国留学网` }}</Title>
<Meta name="keyword" :content="seo['keyword']" />
<Meta name="description" :content="seo['description']" />
</Head>
<TopHead></TopHead>
<div class="content flexflex" :style="{ '--main-color': colourValue[uniqidIndex]['main'], '--bg-color': colourValue[uniqidIndex]['bg'], '--bc-color': colourValue[uniqidIndex]['bc'] }">
<div class="header flexacenter">
@ -43,18 +48,17 @@
</div>
</div>
<div class="message">{{ info.message }}</div>
<!-- 共有 58 人参与，你已投票 -->
<div class="hint">{{ info.status == 1 && isvote == 0 ? `已有 ${info.votes} 人参与，` : `共有 ${info.votes} 人参与` }} {{ `${isvote == 1 ? "你已投票" : info.status == 1 ? "参与投票即可查看实时结果" : ""}` }}</div>
<div class="hint">{{ info.status == 1 && isvote == 0 ? `已有 ${info.votes || ""} 人参与，` : `共有 ${info.votes || 0} 人参与` }} {{ `${isvote == 1 ? "你已投票" : info.status == 1 ? "参与投票即可查看实时结果" : ""}` }}</div>
<div class="option-list flexflex" v-if="info['status'] == 1">
<div class="option-item flexflex" v-for="(item, index) in option" :key="item.id">
<div class="option-list flexflex" v-if="info['status'] == 1 && isvote == 0">
<div class="option-item flexflex" v-for="(item, index) in option" :key="item.id" @click="handleVote(item.id, index)">
<div class="serial flexcenter">{{ index + 1 }}</div>
<span class="flex1">{{ item.value }} </span>
</div>
</div>
<div class="option-area" v-else>
<div class="option-item flexflex" :class="{ 'pitch': item.selected }" v-for="(item, index) in option" :key="item.id">
<div class="option-item flexflex" :class="{ 'pitch': item.selected }" v-for="(item, index) in option" :key="item.id" @click="handleUnvoteVote(index, item.selected)">
<div class="flexflex" style="padding: 2px 0px;">
<div class="option-number flexcenter">{{ index + 1 }}</div>
<img class="tick-icon" src="@/assets/img/tick-black.svg" />
@ -70,13 +74,25 @@
<div class="right"><DetailsComments :token="token"></DetailsComments></div>
</div>
<DetailsArea></DetailsArea>
<el-dialog class="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>
<div class="options-popup-item options-yes flexcenter" @click="cancelPopoverState = false">不取消</div>
</div>
</el-dialog>
</template>
<script setup>
import { useRoute } from "vue-router"
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus"
const route = useRoute()
// console.log(route, "route")
const router = useRouter()
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
@ -84,7 +100,10 @@ let id = route.params.id
const uniqidEnd = id.charAt(id.length - 1)
const uniqidIndex = base62ToDecimal(uniqidEnd) % 6
onMounted(() => getinit())
onMounted(() => {
getDetails()
clearBottom()
})
let info = ref({})
let qrcode = ref("") // 分享二维码
@ -95,17 +114,19 @@ let detailsLoading = ref(false) // 详情加载中
let isvote = ref(0) // 是否已经投票
let option = ref([])
let token = ref("")
let cancelPopoverState = ref(false) // 取消投票弹窗
provide("info", info)
provide("islike", islike)
provide("iscollection", iscollection)
provide("token", token)
provide("qrcode", qrcode)
const getinit = () => {
const getDetails = () => {
detailsHttp({ uniqid: id }).then(res => {
console.log(res)
if (res.code != 200) {
ElMessage.error(res.message)
router.push("/index.html")
return
}
@ -118,11 +139,12 @@ const getinit = () => {
option.value = data["option"]
qrcode.value = data.share?.qrcode
token.value = data["token"]
console.log(data.share?.qrcode, "data.share?.qrcode")
seo.value = data.seo
})
}
provide("getDetails", getDetails)
// 点击发送信息
const sendMessage = uin => {
redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&showmsg=1&uid=${uin}`)
@ -143,6 +165,91 @@ const redirectToExternalWebsite = url => {
provide("sendMessage", sendMessage)
provide("TAHomePage", TAHomePage)
// 处理点进投票
const handleVote = (token, index) => {
operationCollectHttp({ token }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
let optionList = data["optionList"] || []
optionList[index]["selected"] = 1
option.value = optionList
isvote.value = 1
info.value.votes = data["votes"]
ElMessage.success(res.message)
})
}
let unvoteVoteIndex = null // 选项下标
// 点击 取消投票
const handleUnvoteVote = (index, selected) => {
if (selected == 0) return
cancelPopoverState.value = true
unvoteVoteIndex = index
}
const unvoteVote = () => {
const token = option.value[unvoteVoteIndex].id
unvoteCollectHttp({ token }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
let optionList = data["optionList"] || []
optionList[unvoteVoteIndex]["selected"] = 0
option.value = optionList
isvote.value = 0
info.value.votes = data["votes"]
cancelPopoverState.value = false
})
}
const clearAllData = () => {
info.value = {}
qrcode.value = ""
iscollection.value = 0
islike.value = 0
ismyself.value = 0
isvote.value = 0
option.value = []
}
provide("clearAllData", clearAllData)
// 取消了同页面的收藏
const unbookmarkSamePage = () => {
iscollection.value = 0
info.value.favs--
}
provide("unbookmarkSamePage", unbookmarkSamePage)
// 删除同页面的投票需要跳转到 首页
const unbookmark = () => router.push("/index.html")
provide("unbookmark", unbookmark)
let seo = ref({})
// 清除底部的次数
let clearBottomCount = 0
// 清除 底部
const clearBottom = () => {
const indexFooter = document.querySelector("section.index-footer")
if (!indexFooter) {
clearBottomCount++
setTimeout(() => clearBottom(), 200)
return
}
if (clearBottomCount == 5) return
indexFooter.style.display = "none"
}
</script>
<style scoped lang="less">
@ -153,6 +260,7 @@ provide("TAHomePage", TAHomePage)
border-radius: 16px;
background: #fff;
flex-wrap: wrap;
// min-height: 100vh;
--main-color: rgba(44, 186, 230, 1);
--bg-color: rgba(234, 245, 248, 1);
@ -234,6 +342,7 @@ provide("TAHomePage", TAHomePage)
line-height: 24px;
color: #333;
margin-bottom: 30px;
word-wrap: break-word;
}
.hint {
@ -326,10 +435,12 @@ provide("TAHomePage", TAHomePage)
padding: 7px 15px 10px;
flex-direction: column;
word-break: break-all;
cursor: no-drop;
&:not(:last-of-type) {
border-bottom: 1px solid var(--bc-color);
}
&.pitch {
cursor: pointer;
.option-number {
display: none;
}
@ -395,3 +506,50 @@ provide("TAHomePage", TAHomePage)
}
}
</style>
<style lang="less">
.options-popup {
border-radius: 10px;
.el-dialog__header {
padding: 0;
.el-dialog__headerbtn {
width: 36px;
height: 36px;
}
}
padding: 44px 74px;
.el-dialog__body {
padding: 0;
}
.options-popup-text {
font-size: 14px;
color: #333333;
text-align: center;
margin-bottom: 71px;
}
.options-popup-btn {
justify-content: space-between;
.options-popup-item {
font-size: 13px;
width: 160px;
height: 40px;
border-radius: 150px;
border: 1px solid;
cursor: pointer;
&.options-yes {
background-color: rgba(114, 219, 134, 1);
border-color: rgba(114, 219, 134, 1);
color: #fff;
}
&.options-no {
background-color: #fff;
border-color: rgba(170, 170, 170, 1);
color: #333;
}
}
}
}
</style>

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

@ -8,6 +8,7 @@
<div class="halving-line"></div>
<div class="search-result">共 {{ count }} 条搜索数据</div>
</div>
<div class="vote-list-box" ref="gridContainer">
<a class="vote-item" target="_blank" :href="`/details/${item['uniqid']}`" v-for="(item, index) in list" :key="index" :class="{ 'isvote': item['isvote'] == 1 || item['status'] == 0 }" :style="{ '--main-color': colourValue[item.uniqidIndex]['main'], '--bg-color': colourValue[item.uniqidIndex]['bg'], '--bc-color': colourValue[item.uniqidIndex]['bc'] }">
<div class="vote-title">
@ -17,7 +18,7 @@
</div>
<div class="vote-explain">{{ item["message"] }}</div>
<div class="vote-option-list flexflex">
<div class="vote-option-item flexflex" :class="{ 'pitch': index == 1 }" v-for="(item, index) in item?.option" :key="index">
<div class="vote-option-item flexflex" :class="{ 'pitch': item.selected == 1 }" v-for="(item, index) in item?.option" :key="index">
<div class="flexflex" style="padding: 2px 0;">
<div class="vote-option-number flexcenter">{{ index + 1 }}</div>
<img class="tick-icon" src="@/assets/img/tick-black.svg" />
@ -31,11 +32,11 @@
</div>
<div class="vote-data flexacenter">
<div class="vote-data-left flexacenter">
18人参与 <template v-if="item['deadline']">| {{ handleDeadline(item["deadline"]) }}结束</template>
{{ item.votes }}人参与 <template v-if="item['deadline']">| {{ handleDeadline(item["deadline"]) }}结束</template>
</div>
<div class="vote-data-right flexacenter">
<div class="vote-data-item flexacenter"><img class="vote-data-icon" src="@/assets/img/eye-icon.svg" />&nbsp; {{ 96 }}</div>
<div class="vote-data-item flexacenter" @click="handleLike(item['token'])">
<div class="vote-data-item flexacenter"><img class="vote-data-icon" src="@/assets/img/eye-icon.svg" />&nbsp; {{ item.views }}</div>
<div class="vote-data-item flexacenter" @click.stop.prevent="handleLike(item['token'], index)">
<img v-if="item['islike'] == 0" class="vote-data-icon" src="@/assets/img/like-no.svg" />
<img v-else class="vote-data-icon" src="@/assets/img/like-yes.png" />&nbsp; {{ item["likes"] }}
</div>
@ -43,9 +44,14 @@
</div>
</div>
</a>
<div class="empty-box flexcenter" v-if="keyword && list.length == 0">
<Empty :isNeedIssue="true"></Empty>
</div>
</div>
</template>
<script setup>
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=vote" }, { src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
import { useRoute } from "vue-router"
const route = useRoute()
const router = useRouter()
@ -109,8 +115,18 @@ const handleScroll = () => {
}
// 处理点赞
const handleLike = token => {
console.log("handleLike", token)
const handleLike = (token, index) => {
operateLikeHttp({ token }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
list.value[index].likes = data["count"]
list.value[index].islike = data["status"]
ElMessage.success(res.message)
})
}
// 点击关闭搜索
@ -129,6 +145,24 @@ watch(
getList()
}
)
try {
if (process.server) {
await getListHttp({ page, keyword: keyword.value }).then(res => {
let data = res.data
data.data.forEach(element => {
let uniqidEnd = element["uniqid"].charAt(element["uniqid"].length - 1)
element["uniqidIndex"] = base62ToDecimal(uniqidEnd) % 6
})
list.value = list.value.concat(data.data)
count.value = data.count
if (data.count > list.value.length) page++
else page = 0
console.log("keyword", keyword.value)
})
}
} catch (error) {}
</script>
<style lang="less" scoped>
.vote-item {
@ -323,4 +357,12 @@ watch(
}
}
}
.empty-box {
width: 1200px;
height: 540px;
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
margin: 0 auto;
}
</style>

31
pages/publish/index.vue
View File

@ -21,7 +21,7 @@
标题
<div class="asterisk">*</div>
</div>
<el-input class="item-input headline-textarea" type="textarea" placeholder="请输入" maxlength="24" show-word-limit v-model="info.title" autosize></el-input>
<el-input class="item-input headline-textarea" type="textarea" placeholder="请输入" maxlength="60" show-word-limit v-model="info.title" autosize></el-input>
</div>
<div class="item">
@ -55,7 +55,7 @@
<div class="option-item flexacenter" v-for="(item, index) in 2" :key="index">
<div class="option-content flexacenter">
<div class="option-text flexcenter">{{ index + 1 }}</div>
<input class="option-input flex1" placeholder="请输入" />
<el-input class="option-input flex1" placeholder="请输入" />
</div>
<div class="option-drag flexcenter">
<img class="option-icon" src="@/assets/img/option-icon.svg" />
@ -66,7 +66,8 @@
<div class="option-item flexacenter" v-for="(item, index) in optionList" :key="item.id">
<div class="option-content flexacenter">
<div class="option-text flexcenter">{{ index + 1 }}</div>
<input class="option-input flex1" placeholder="请输入" v-model="optionList[index]['message']" />
<!-- <input class="option-input flex1" placeholder="请输入" v-model="optionList[index]['message']" /> -->
<el-input class="option-input flex1" placeholder="请输入" maxlength="100" show-word-limit v-model="optionList[index]['message']" />
<img class="option-cross" v-if="optionList[index]['message']" @click="clearMessage(index)" src="@/assets/img/cross-undertint-icon.svg" />
</div>
<div class="option-drag flexcenter">
@ -111,6 +112,7 @@
</template>
<script setup>
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
@ -184,6 +186,7 @@ const submit = (status = 1) => {
if (status == 1) {
if (option.length < 2) {
ElMessage.error("请设置至少2个选项~")
loading = false
return
}
@ -326,15 +329,14 @@ const clearMessage = index => {
justify-content: center;
padding: 0 122px;
}
@media (max-width: 920px) {
.content-box {
display: block;
padding: 0 10px;
// padding: 0 122px;
}
}
.contentcontent {
// width: 1200px;
max-width: 1200px;
min-width: 900px;
min-height: calc(100vh - 120px);
@ -364,11 +366,8 @@ const clearMessage = index => {
.box-left {
border-right: 16px solid #f6f6f6;
width: 48.176%;
// .area-box {
padding: 30px;
padding-right: 50px;
border-bottom: 1px solid #ebebeb;
.item {
&:not(:last-of-type) {
@ -378,9 +377,7 @@ const clearMessage = index => {
.item-input {
border-radius: 5px;
outline: none;
// width: 482px;
width: 100%;
// padding: 13px 14px;
font-size: 14px;
/deep/ .el-textarea__inner {
@ -500,12 +497,19 @@ const clearMessage = index => {
outline: none;
border-radius: 5px;
color: #333;
/deep/ .el-input__wrapper {
outline: none;
border: none;
box-shadow: none;
padding-right: 10px;
}
}
.option-cross {
width: 12px;
height: 12px;
cursor: pointer;
margin: 0 10px;
margin-right: 10px;
}
}
@ -555,7 +559,7 @@ const clearMessage = index => {
.floor-box {
width: 100vw;
min-width: 1200px;
min-width: 900px;
height: 90px;
background-color: rgba(255, 255, 255, 1);
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
@ -564,7 +568,8 @@ const clearMessage = index => {
position: fixed;
bottom: 0;
.box {
width: 1200px;
max-width: 1200px;
min-width: 900px;
height: 100%;
margin: 0 auto;
justify-content: space-between;