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

更新底部链接

Browse Source
This commit is contained in:
A1300399510
2024-07-17 12:25:33 +08:00
parent b8d2b04a4e
commit 0f833adadb
74 changed files with 1159 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,34 +69,34 @@
</ClientOnly>
</div>
<div class="right">
<div class="respond">
<div class="respond" v-if="riposteoptions.length != 0">
<div class="respond-title flexacenter">
回应
<div class="respond-amount">21</div>
<div class="respond-amount">{{ ripostecount.total || 0 }}</div>
</div>
<div class="respond-no flexflex">
<div v-if="ripostelist.length == 0" class="respond-no flexflex">
<div class="respond-no-box flex1 flexflex">
<div class="item" v-for="item in 8" :key="item">&#xc150;</div>
<div class="item" v-for="item in randomEmojis" :key="item" v-html="jointriposte(item)" @click="selectEomji(item)"></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 v-else class="respond-box">
<div class="item flexacenter" :class="{ 'pitch': item.selected }" v-for="(item, index) in ripostelist" :key="item" @click="selectListEomji(index)">
<div class="code flexacenter" v-html="jointriposte(item.item)"></div>
{{ item.num }}
</div>
<RespondAdd></RespondAdd>
<div class="respond-select flexflex">
<div v-if="ripostelist.length < 3" 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 class="respond-select-item" v-for="item in randomEmojis" :key="item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
</div>
<RespondAdd></RespondAdd>
</div>
<RespondAdd v-else></RespondAdd>
</div>
</div>
<DetailsComments ref="commentsRef" :token="token"></DetailsComments>
<DetailsComments ref="commentsRef" :token="token" @update:commentComments="commentComments = $event"></DetailsComments>
</div>
<DetailsArea @closeDiscussInputFields="closeDiscussInputFields"></DetailsArea>
<DetailsArea @closeDiscussInputFields="closeDiscussInputFields" :ripostecount="ripostecount" :commentComments="commentComments"></DetailsArea>
</div>
<el-dialog class="default-popup options-popup" v-model="cancelPopoverState" width="488px" align-center>
@@ -109,7 +109,7 @@
</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 }] })
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=vote" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] })
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus"
@@ -121,6 +121,8 @@ const router = useRouter()
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
let commentComments = ref(0)
let id = route.params.id
let uniqidIndex = ref(0)
@@ -133,6 +135,197 @@ onMounted(() => {
clearBottom()
})
let ripostelist = ref([])
let ripostecount = ref({})
let riposteoptions = ref([])
provide("riposteoptions", riposteoptions)
const getRiposte = () => {
getRiposteHttp({ token: token.value }).then(res => {
if (res.code != 200) return
let data = res.data
ripostecount.value = data.count || {}
ripostelist.value = data.list || []
riposteoptions.value = data.options || []
// console.log("ripostelist", ripostelist.value)
// console.log("ripostecount", ripostecount.value)
// console.log("riposteoptions", riposteoptions.value)
if (ripostelist.value.length <= 3) randomEmoji()
randomBottomEmoji()
})
}
let randomEmojis = ref([]) // 随机 五个 emoji
let randomBottomEmojis = ref([]) // 随机 8个 emoji
provide("randomEmojis", randomEmojis)
provide("randomBottomEmojis", randomBottomEmojis)
// 随机 7 个Emoji
const randomEmoji = () => {
let emojiList = ripostelist.value
// 需要排除的 Emoji
let exclude = []
emojiList.forEach(element => {
exclude.push(element.item)
})
let selectedList = [] // 待选择 Emoji To be selected
// 默认是有点赞的
for (const key in riposteoptions.value[0].data) {
if (key != "c150") selectedList.push(key)
}
const random = []
if (!exclude.includes("c150")) random.push("c150") // 添加第一个点赞 emoji
selectedList = selectedList.filter(itemB => !exclude.includes(itemB))
// 生成随机索引，确保不重复
let indexes = []
while (indexes.length < 7) {
let randomIndex = Math.floor(Math.random() * selectedList.length)
if (indexes.indexOf(randomIndex) === -1) {
indexes.push(randomIndex)
random.push(selectedList[randomIndex])
}
}
randomEmojis.value = random
}
const randomBottomEmoji = () => {
let selectedList = [] // 待选择 Emoji To be selected
// 默认是有点赞的
for (const key in riposteoptions.value[0].data) {
selectedList.push(key)
}
// 打乱数组顺序
selectedList.sort(() => Math.random() - 0.5)
const randomItems = selectedList.slice(0, 8)
randomBottomEmojis.value = randomItems
}
// 拼接 回应需要的 字符
const jointriposte = item => {
return `&#x${item};`
}
provide("jointriposte", jointriposte)
// 选择回应
const selectListEomji = index => {
if (isNeedLogin.value) {
goLogin()
return
}
let emojiList = ripostelist.value
let target = emojiList[index]
if (riposteHttpState) return
riposteHttpState = true
riposteSubmitHttp({ token: token.value, item: target.item })
.then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
handleEmojiData(data)
})
.finally(() => {
riposteHttpState = false
})
}
let riposteHttpState = false // 回应加载中
// 选择 emoji
const selectEomji = item => {
if (isNeedLogin.value) {
goLogin()
return
}
if (riposteHttpState) return
riposteHttpState = true
riposteSubmitHttp({ token: token.value, item })
.then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
handleEmojiData(data)
})
.finally(() => {
riposteHttpState = false
})
}
provide("selectEomji", selectEomji)
// 选中 在 Emoji 弹窗中 选择
const selectEomjiPop = key => {
if (isNeedLogin.value) {
goLogin()
return
}
let emojiList = ripostelist.value
// 判断 是否已经 有了
const index = emojiList.findIndex(item => item.item == key)
if (index === -1) {
if (riposteHttpState) return
riposteHttpState = true
riposteSubmitHttp({ token: token.value, item: key })
.then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
handleEmojiData(data)
})
.finally(() => {
riposteHttpState = false
})
}
}
provide("selectEomjiPop", selectEomjiPop)
// 专门处理 展示列表的 数据结构
const handleEmojiData = data => {
let emojiList = ripostelist.value
let isnew = true
emojiList.forEach((element, index) => {
if (element.item == data.item) {
isnew = false
if (element.selected) element.num--
else element.num++
element.selected = !element.selected
}
})
// 代表是新数据
if (isnew) {
emojiList.push({
item: data.item,
num: 1,
selected: true,
})
}
let newArray = []
emojiList.forEach(item => {
if (item.num > 0) newArray.push(item)
})
if (newArray.length < 3) randomEmoji()
ripostecount.value = data.count
ripostelist.value = newArray
}
let info = ref({})
let qrcode = ref("") // 分享二维码
let iscollection = ref(0) // 是否收藏
@@ -179,6 +372,8 @@ const getDetails = async () => {
data["option"].forEach(element => {
if (element.selected) haveVotedValue.value = element.value
})
getRiposte()
})
}
@@ -649,10 +844,10 @@ try {
.right {
flex: 1;
padding-top: 22px;
padding-left: 42px;
.respond {
padding: 22px 42px 30px;
border-bottom: 5px solid #f6f6f6;
.respond-title {
font-size: 16px;
line-height: 20px;
@@ -676,7 +871,7 @@ try {
border-radius: 208px;
margin-bottom: 10px;
position: relative;
.respond-no-box {
justify-content: space-around;
.item {
@@ -697,17 +892,20 @@ try {
font-size: 12px;
color: #555555;
height: 30px;
border: 1px solid rgba(215, 215, 215, 1);
// border: 1px solid rgba(215, 215, 215, 1);
background: rgba(246, 246, 246, 1);
border-radius: 8px;
padding: 0 6px;
display: inline-flex;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
user-select: none;
&.pitch {
border: none;
background: rgba(246, 246, 246, 1);
// border: none;
border: 1px solid rgba(215, 215, 215, 1);
background: #fff;
}
.code {
@@ -733,12 +931,8 @@ try {
line-height: 30px;
}
}
/deep/ .respond-add {
background: rgba(98, 177, 255, 1);
}
}
}
}
}
}