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

PC投票加入互动

Browse Source
This commit is contained in:
A1300399510
2024-07-10 18:52:39 +08:00
parent f860b38ee9
commit b8d2b04a4e
5 changed files with 350 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,12 +8,6 @@
<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>
<span class="views flexcenter">
<img class="eye-icon" src="@/assets/img/eye-icon.svg" />
{{ info.views }}
</span>
</ClientOnly> -->
</div>
<div class="left">
<div class="info flexacenter">
@@ -74,7 +68,34 @@
</div>
</ClientOnly>
</div>
<div class="right"><DetailsComments ref="commentsRef" :token="token"></DetailsComments></div>
<div class="right">
<div class="respond">
<div class="respond-title flexacenter">
回应
<div class="respond-amount">21</div>
</div>
<div class="respond-no flexflex">
<div class="respond-no-box flex1 flexflex">
<div class="item" v-for="item in 8" :key="item">&#xc150;</div>
</div>
<RespondAdd></RespondAdd>
</div>
<div class="respond-box">
<div class="item flexacenter pitch" v-for="item in 18" :key="item">
<div class="code flexacenter">&#xc150;</div>
14
</div>
<RespondAdd></RespondAdd>
<div class="respond-select flexflex">
<div class="respond-select-box flex1 flexflex">
<div class="respond-select-item" v-for="item in 5" :key="item">&#xc150;</div>
</div>
<RespondAdd></RespondAdd>
</div>
</div>
</div>
<DetailsComments ref="commentsRef" :token="token"></DetailsComments>
</div>
<DetailsArea @closeDiscussInputFields="closeDiscussInputFields"></DetailsArea>
</div>
@@ -101,9 +122,6 @@ let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
let id = route.params.id
// const uniqidEnd = id.charAt(id.length - 1)
// const uniqidIndex = base62ToDecimal(uniqidEnd) % 6
// console.log("route", route)
let uniqidIndex = ref(0)
if (route.query.colorI) uniqidIndex.value = route.query.colorI
@@ -137,48 +155,6 @@ provide("isLoaded", isLoaded)
provide("haveVotedValue", haveVotedValue)
const getDetails = async () => {
// const { data1, pending1, error1, refresh1 } = await useAsyncData("mountains", () =>
// $fetch("https://vote.gter.net/api/details", {
// params: {
// uniqid: id,
// },
// })
// )
// const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
// key: "details",
// body: {
// uniqid: id,
// },
// method: "post",
// })
// const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
// method: "post",
// body: {
// uniqid: id,
// },
// })
// let datadata = data.value.data
// info.value = datadata["info"]
// isvote.value = datadata["isvote"]
// iscollection.value = datadata["iscollection"]
// islike.value = datadata["islike"]
// ismyself.value = datadata["ismyself"]
// option.value = datadata["option"]
// qrcode.value = datadata.share?.qrcode
// token.value = datadata["token"]
// seo.value = datadata.seo
// isLoaded.value = true
// datadata["option"].forEach(element => {
// if (element.selected) haveVotedValue.value = element.value
// })
// return
detailsHttp({ uniqid: id }).then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
@@ -188,9 +164,6 @@ const getDetails = async () => {
let data = res.data
// uniqidIndex.value = data.info?.id % 6
// console.log(uniqidIndex.value)
info.value = data["info"]
isvote.value = data["isvote"]
iscollection.value = data["iscollection"]
@@ -209,29 +182,10 @@ const getDetails = async () => {
})
}
// watch(
// () => route.path,
// (newValue, oldValue) => {
// // 在这里处理route.path的变化
// if (typeof window !== "undefined" && route.path) {
// if (window._hmt) window._hmt.push(["_trackPageview", route.fullPath])
// if (window._czc) {
// let location = window.location
// let contentUrl = location.pathname + location.hash
// let refererUrl = "/"
// window._czc.push(["_trackPageview", contentUrl, refererUrl])
// window._czc.push(["_setAutoPageview", false])
// }
// }
// }
// )
provide("getDetails", getDetails)
// 点击发送信息
const sendMessage = uin => {
// redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&showmsg=1&uid=${uin}`)
if (uin && typeof messagePrivateItem == "function") {
messagePrivateItem({ uin: uin })
return
@@ -334,7 +288,6 @@ const unvoteVote = () => {
}
let data = res.data
let optionList = data["optionList"] || []
// optionList[unvoteVoteIndex]["selected"] = 0
optionList.forEach(element => {
element["selected"] = 0
})
@@ -419,29 +372,7 @@ const closeDiscussInputFields = () => {
try {
if (process.server) {
// // const { data, pending, error, refresh } = await useFetch("https://vote.gter.net/api/details", {
// // query: { uniqid: id },
// // method: "post",
// // server: true,
// // })
// // const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
// // method: "post",
// // body: {
// // uniqid: id + "111",
// // },
// // })
// const { data, pending, error, refresh } = await useFetch(`https://vote.gter.net/api/details`, {
// key: "details",
// body: {
// uniqid: id,
// },
// method: "post",
// })
// console.log("-------------分割线-------------------")
await detailsHttp({ uniqid: id }).then(res => {
// console.log("res", res)
if (res.code != 200) {
ElMessage.error(res.message)
router.push("/index.html")
@@ -453,21 +384,22 @@ try {
option.value = data["option"]
isvote.value = data["isvote"]
seo.value = data.seo
// uniqidIndex.value = data.info?.id % 6
})
}
} catch (error) {}
</script>
<style scoped lang="less">
@font-face {
font-family: "emojifont";
src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf");
}
.content {
width: 1200px;
// height: 500px;
margin: 0 auto;
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);
@@ -571,8 +503,6 @@ try {
flex-direction: column;
.option-item {
width: 570px;
// height: 40px;
// background-color: var(--bg-color);
border: 1px solid var(--bc-color);
border-radius: 10px;
word-break: break-all;
@@ -593,7 +523,6 @@ try {
top: 0;
left: 0;
z-index: -1;
// border: 1px solid var(--bc-color);
}
&:hover::after {
@@ -612,7 +541,6 @@ try {
.tick-icon {
display: block;
}
.option-content {
color: #000000;
font-weight: 650;
@@ -639,7 +567,6 @@ try {
}
.option-area {
width: 570px;
// height: 318px;
background-color: var(--bg-color);
border: 1px solid var(--bc-color);
border-radius: 10px;
@@ -700,7 +627,6 @@ try {
height: 5px;
width: 100%;
justify-content: flex-end;
// display: none;
margin-top: 3px;
.option-progress-step {
@@ -725,6 +651,95 @@ try {
flex: 1;
padding-top: 22px;
padding-left: 42px;
.respond {
.respond-title {
font-size: 16px;
line-height: 20px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
margin-bottom: 20px;
.respond-amount {
color: #555555;
font-weight: 400;
margin-left: 8px;
}
}
.respond-no {
width: 377px;
height: 30px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 208px;
margin-bottom: 10px;
position: relative;
.respond-no-box {
justify-content: space-around;
.item {
line-height: 30px;
font-size: 16px;
font-family: "emojifont";
cursor: pointer;
}
}
}
.respond-box {
display: flex;
flex-wrap: wrap;
position: relative;
.item {
font-size: 12px;
color: #555555;
height: 30px;
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 8px;
padding: 0 6px;
display: inline-flex;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
&.pitch {
border: none;
background: rgba(246, 246, 246, 1);
}
.code {
margin-right: 4px;
line-height: 30px;
font-size: 16px;
font-family: "emojifont";
}
}
.respond-select {
width: 250px;
height: 30px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 208px;
.respond-select-box {
justify-content: space-around;
.respond-select-item {
cursor: pointer;
font-size: 16px;
font-family: "emojifont";
line-height: 30px;
}
}
/deep/ .respond-add {
background: rgba(98, 177, 255, 1);
}
}
}
}
}
}
</style>
@@ -742,40 +757,4 @@ try {
padding: 0;
}
}
// .options-popup {
// border-radius: 10px !important;
// padding: 44px 74px !important;
// .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(249, 93, 93, 1);
// border-color: rgba(249, 93, 93, 1);
// color: #fff;
// margin-left: 20px;
// }
// &.options-no {
// background-color: #fff;
// border-color: rgba(170, 170, 170, 1);
// color: #333;
// }
// }
// }
// }
</style>