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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/img/plus-sign.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1386 -326 )">
<path d="M 13.7215909090909 5.36931818181818 C 13.907196969697 5.55492424242424 14 5.78030303030303 14 6.04545454545454 L 14 7.95454545454545 C 14 8.21969696969697 13.907196969697 8.44507575757576 13.7215909090909 8.63068181818182 C 13.5359848484848 8.81628787878788 13.3106060606061 8.90909090909091 13.0454545454545 8.90909090909091 L 8.90909090909091 8.90909090909091 L 8.90909090909091 13.0454545454545 C 8.90909090909091 13.3106060606061 8.81628787878788 13.5359848484848 8.63068181818182 13.7215909090909 C 8.44507575757576 13.907196969697 8.21969696969697 14 7.95454545454546 14 L 6.04545454545455 14 C 5.78030303030303 14 5.55492424242424 13.907196969697 5.36931818181818 13.7215909090909 C 5.18371212121212 13.5359848484848 5.09090909090909 13.3106060606061 5.09090909090909 13.0454545454545 L 5.09090909090909 8.90909090909091 L 0.954545454545454 8.90909090909091 C 0.689393939393939 8.90909090909091 0.464015151515152 8.81628787878788 0.278409090909091 8.63068181818182 C 0.0928030303030303 8.44507575757576 0 8.21969696969697 0 7.95454545454545 L 0 6.04545454545454 C 0 5.78030303030303 0.0928030303030303 5.55492424242424 0.278409090909091 5.36931818181818 C 0.464015151515152 5.18371212121212 0.689393939393939 5.09090909090909 0.954545454545454 5.09090909090909 L 5.09090909090909 5.09090909090909 L 5.09090909090909 0.954545454545455 C 5.09090909090909 0.689393939393939 5.18371212121212 0.464015151515151 5.36931818181818 0.278409090909091 C 5.55492424242424 0.0928030303030298 5.78030303030303 0 6.04545454545455 0 L 7.95454545454546 0 C 8.21969696969697 0 8.44507575757576 0.0928030303030298 8.63068181818182 0.278409090909091 C 8.81628787878788 0.464015151515151 8.90909090909091 0.689393939393939 8.90909090909091 0.954545454545455 L 8.90909090909091 5.09090909090909 L 13.0454545454545 5.09090909090909 C 13.3106060606061 5.09090909090909 13.5359848484848 5.18371212121212 13.7215909090909 5.36931818181818 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1386 326 )" />
</g>
</svg>

119
components/DetailsArea.vue
View File

@ -58,12 +58,21 @@
</el-popover>
</ClientOnly>
</div>
<div class="floor-middle flexacenter comment-box">
<img class="avatar" :src="userInfoWin?.avatar" />
<!-- <input class="comment-input flex1" type="text" v-model="floorCommentInput" @keydown.enter="floorCommentBtn('input')" placeholder="说说你的想法或疑问…" /> -->
<el-input class="comment-input flex1" name="14752869" v-model="floorCommentInput" placeholder="说说你的想法或疑问…" @keydown.enter="floorCommentBtn('input')" maxlength="500" show-word-limit autocomplete="off"></el-input>
<div class="comment-btn flexcenter" @click="floorCommentBtn('input')">
<img class="comment-btn-icon" src="@/assets/img/arrow-white.svg" />
<div class="floor-middle" ref="floormiddle" @mouseover="closeMouseOver" @mouseout="openAutoCarousel" :class="{ 'floor-middle-respond': respondShowState }">
<div class="flexacenter respond">
<div class="respond-title">给个回应：</div>
<div class="respond-box flex1">
<div class="respond-item" v-for="item in 8" :key="item">&#xc150;</div>
</div>
<RespondAdd type="bottom" :message="respondShowState" @update:message="respondShowState = $event"></RespondAdd>
</div>
<div v-if="!respondShowState" class="flexacenter comment-box">
<img class="avatar" :src="userInfoWin?.avatar" />
<el-input class="comment-input flex1" name="14752869" v-model="floorCommentInput" placeholder="说说你的想法或疑问…" @keydown.enter="floorCommentBtn('input')" maxlength="500" show-word-limit autocomplete="off" @focus="closeMouseOver()"></el-input>
<div class="comment-btn flexcenter" @click="floorCommentBtn('input')">
<img class="comment-btn-icon" src="@/assets/img/arrow-white.svg" />
</div>
</div>
</div>
</div>
@ -73,6 +82,8 @@
<script setup>
import { ElMessage } from "element-plus"
const respondShowState = ref(false)
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
const userInfoWin = inject("userInfoWin")
@ -85,6 +96,8 @@ let token = inject("token")
const topHeadRef = inject("topHeadRef")
const isLoaded = inject("isLoaded")
const floormiddle = ref(null)
// 获取完整 url
const getFullUrl = () => {
if (typeof window === "undefined") return
@ -182,6 +195,39 @@ const emit = defineEmits(["closeDiscussInputFields"])
// // 点击底部调用关闭讨论输入框
const closeDiscussInputFields = () => emit("closeDiscussInputFields")
onMounted(() => {
})
watch(isLoaded, (newValue, oldValue) => {
if (newValue === true) {
openAutoCarousel()
}
});
let floormiddleIndex = 0 // 0起
let floormiddleTimer = null
// 开启自动轮播
const openAutoCarousel = () => {
floormiddleTimer = setInterval(() => {
floormiddleIndex = +!floormiddleIndex
floormiddle.value.scrollTo({
top: floormiddleIndex * 40,
behavior: "smooth",
})
}, 2000)
}
// 鼠标移入 关闭 自动滚动
const closeMouseOver = () => {
clearInterval(floormiddleTimer)
}
onBeforeUnmount(() => {
clearInterval(floormiddleTimer)
});
</script>
<style scoped lang="less">
@ -262,7 +308,7 @@ const closeDiscussInputFields = () => emit("closeDiscussInputFields")
}
}
.floor-middle {
.comment-box {
width: 471px;
height: 40px;
border-radius: 152px;
@ -299,6 +345,65 @@ const closeDiscussInputFields = () => emit("closeDiscussInputFields")
}
}
}
.respond {
padding-left: 18px;
width: 471px;
height: 40px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 208px;
position: relative;
.respond-title {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
color: #555555;
line-height: 20px;
}
.respond-box {
display: flex;
justify-content: space-around;
.respond-item {
font-family: "emojifont";
font-size: 18px;
line-height: 40px;
cursor: pointer;
}
}
/deep/ .respond-add {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--main-color);
.respond-add-icon {
width: 16px;
height: 16px;
}
&.angle::after {
top: -17px;
bottom: auto;
transform: translateX(-50%) rotate(225deg);
}
}
}
.floor-middle {
display: flex;
flex-direction: column;
height: 40px;
overflow: hidden;
&.floor-middle-respond {
overflow: visible;
// overflow: hidden;
}
}
}
}

2
components/DetailsComments.vue
View File

@ -750,6 +750,8 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, b
width: fit-content;
margin-bottom: 15px;
word-break: break-word;
padding: 6px;
border-radius: 4px;
}
.comments-input-masking {

109
components/RespondAdd.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<el-popover :width="470" trigger="click" popper-class="add-popper" :teleported="false" :offset="10" :show-arrow="false" @show="catState(true)" @hide="catState(false)" v-model:visible="state" :placement="type == 'bottom' ? 'top' : 'bottom' ">
<template #reference>
<div class="respond-add flexcenter" :class="{ 'angle': state }">
<img class="respond-add-icon" src="@/assets/img/plus-sign.svg" />
</div>
</template>
<div class="respond-list-box">
<div class="respond-list-title">选择你的回应：</div>
<div class="respond-list">
<div class="respond-item" v-for="item in 18" :key="item">&#xc150;</div>
</div>
</div>
</el-popover>
</template>
<script setup>
let props = defineProps({
type: Boolean,
})
let state = ref(false)
const emit = defineEmits(['update:message']);
const catState = value => {
state.value = value
if (props.type == "bottom") {
console.log(value);
emit('update:message', value);
}
}
</script>
<style lang="less" scoped>
.respond-add {
width: 30px;
height: 30px;
background: rgba(114, 219, 134, 1);
border-radius: 50%;
cursor: pointer;
position: relative;
&.angle {
&::after {
content: "";
background: #f6f6f6;
border: 1px solid #e4e7ed;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
border-top-left-radius: 2px;
width: 10px;
height: 10px;
position: absolute;
bottom: -17px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
z-index: 3000;
}
}
.respond-add-icon {
width: 14px;
height: 14px;
}
}
.respond-list-box {
width: 470px;
.respond-list-title {
font-size: 14px;
line-height: 22px;
color: #333333;
padding-top: 16px;
padding-left: 20px;
padding-bottom: 25px;
}
.respond-list {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(10, 1fr);
.respond-item {
font-size: 20px;
font-family: "emojifont";
text-align: center;
margin-bottom: 20px;
cursor: pointer;
}
}
}
</style>
<style lang="less">
.el-popover.el-popper.add-popper {
padding: 0;
background: #f6f6f6;
border: 1px solid #ebebeb;
border-radius: 10px;
box-shadow: none;
left: 0 !important;
}
.el-popper.add-popper.is-light .el-popper__arrow::before {
background: #f6f6f6;
}
</style>

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>