更新PC回应
This commit is contained in:
A1300399510
@@ -165,10 +165,15 @@
|
||||
</div>
|
||||
|
||||
<!-- 回应 -->
|
||||
<div class="respond-area" v-if="false">
|
||||
<div class="respond-area">
|
||||
<div class="respond-title flexacenter">
|
||||
回应
|
||||
<div class="value">{{ ripostecount.total || 0 }}</div>
|
||||
<div v-if="ripostecount.user > 0" class="respond-list-btn" @click="openPopList">
|
||||
共 <span class="respond-list-btn-amount">{{ ripostecount.user }}</span
|
||||
>人回应
|
||||
<img class="respond-list-btn-icon" src="@/assets/img/arrowsRight.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="ripostelist.length == 0" class="respond-no-box flexacenter">
|
||||
<div class="respond-no flex1">
|
||||
@@ -183,7 +188,9 @@
|
||||
</div>
|
||||
<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 randomEmojis" :key="item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
|
||||
<template v-for="(item, index) in randomEmojis" :key="item">
|
||||
<div v-if="index < 5" class="respond-select-item" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
|
||||
</template>
|
||||
</div>
|
||||
<RespondAdd></RespondAdd>
|
||||
</div>
|
||||
@@ -475,6 +482,35 @@
|
||||
|
||||
<!-- 投币 排行榜 -->
|
||||
<RankingBox v-if="coinrankingState" :coinrankingList="coinrankingList"></RankingBox>
|
||||
|
||||
<div class="respond-pop-mask" v-if="respondPopListState">
|
||||
<div class="respond-pop">
|
||||
<div class="respond-pop-no" v-if="JSON.stringify(respondDetail) == '{}'">
|
||||
<img class="respond-title-icon" @click="closePopList()" src="@/assets/img/cross-grey.png" />
|
||||
<img src="@/assets/img/no-discussion.png" class="respond-pop-no-icon" />
|
||||
<div class="respond-pop-no-text">- 暂无数据 -</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="respond-pop-title">
|
||||
共<span class="respond-pop-amount">{{ ripostecount.user }}</span
|
||||
>人回应
|
||||
<img class="respond-title-icon" @click="closePopList()" src="@/assets/img/cross-grey.png" />
|
||||
</div>
|
||||
<div class="respond-list">
|
||||
<div class="respond-item" v-for="(item, index) in respondDetail" :key="index">
|
||||
<div class="respond-code" :class="{ 'pitch': item.selected }" v-html="jointriposte(item.item)" @click="selectEomjiListPop(item.item)"></div>
|
||||
<div class="respond-content flex1">
|
||||
<div class="respond-total">{{ item.user.length }} 人作此回应</div>
|
||||
<div class="user-item" v-for="(item, index) in item.user" :key="index" @click="TAHomePage(item['uin'])">
|
||||
<img class="user-avatar" :src="item.avatar" />
|
||||
{{ item.nickname || item.username }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -1540,6 +1576,63 @@ const selectListEomji = index => {
|
||||
riposteHttpState = false
|
||||
})
|
||||
}
|
||||
|
||||
let respondPopListState = ref(false) // 回应列表弹窗状态
|
||||
let respondDetail = ref({}) // 已回应列表
|
||||
|
||||
// 打开回应弹窗列表
|
||||
const openPopList = () => {
|
||||
respondPopListState.value = true
|
||||
getRespondDetail()
|
||||
}
|
||||
|
||||
// 关闭回应弹窗列表
|
||||
const closePopList = () => {
|
||||
respondPopListState.value = false
|
||||
}
|
||||
|
||||
// 回应详情
|
||||
const getRespondDetail = () => {
|
||||
riposteDetailHttp({ token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
respondDetail.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 点击回应列表的
|
||||
const selectEomjiListPop = key => {
|
||||
// let respondDetail = respondDetail.value
|
||||
|
||||
let target = respondDetail.value[key]
|
||||
|
||||
riposteSubmitHttp({ token, item: target.item }).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
|
||||
handleEmojiData(data)
|
||||
|
||||
if (target.selected) {
|
||||
target.user = target.user.filter(item => item.uin != data.uin)
|
||||
} else {
|
||||
target.user.push(data)
|
||||
}
|
||||
|
||||
let emojiList = ripostelist.value
|
||||
|
||||
if (target.user.length == 0) {
|
||||
emojiList = emojiList.filter(item => item.item != key)
|
||||
delete respondDetail.value[key]
|
||||
} else {
|
||||
target.selected = !target.selected
|
||||
respondDetail.value[key] = target
|
||||
}
|
||||
|
||||
ripostelist.value = emojiList
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -1992,6 +2085,25 @@ const selectListEomji = index => {
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.respond-list-btn {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.respond-list-btn-amount {
|
||||
font-weight: 650;
|
||||
color: #333;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.respond-list-btn-icon {
|
||||
width: 6px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2027,8 +2139,8 @@ const selectListEomji = index => {
|
||||
font-size: 12px;
|
||||
color: #555555;
|
||||
height: 30px;
|
||||
// border: 1px solid #d7d7d7;
|
||||
background: #f6f6f6;
|
||||
border: 1px solid #d7d7d7;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 0 6px;
|
||||
display: inline-flex;
|
||||
@@ -2046,9 +2158,8 @@ const selectListEomji = index => {
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
// border: none;
|
||||
border: 1px solid #d7d7d7;
|
||||
background: #fff;
|
||||
border: none;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2935,4 +3046,143 @@ const selectListEomji = index => {
|
||||
background-color: rgba(114, 219, 134, 1);
|
||||
border-color: rgba(114, 219, 134, 1) !important;
|
||||
}
|
||||
|
||||
.respond-pop-mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.respond-pop {
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
|
||||
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
|
||||
.respond-pop-title {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-bottom: 1px dotted rgba(215, 215, 215, 0.5);
|
||||
align-items: center;
|
||||
color: #555555;
|
||||
position: relative;
|
||||
.respond-pop-amount {
|
||||
margin: 0 8px;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
}
|
||||
.respond-title-icon {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.respond-list {
|
||||
overflow: auto;
|
||||
height: 450px;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #0003;
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.respond-item {
|
||||
display: flex;
|
||||
padding: 20px 0 0 20px;
|
||||
|
||||
&:not(:last-of-type) .respond-content {
|
||||
border-bottom: 1px dotted rgba(215, 215, 215, 0.5);
|
||||
}
|
||||
.respond-code {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 10px;
|
||||
font-family: "emojifont";
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
&.pitch {
|
||||
background-color: #f6f6bd;
|
||||
border: 1px solid #ccd003;
|
||||
}
|
||||
}
|
||||
|
||||
.respond-content {
|
||||
padding-bottom: 10px;
|
||||
.respond-total {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
display: inline-flex;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.user-avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.respond-pop-no {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.respond-title-icon {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.respond-pop-no-icon {
|
||||
width: 90px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.respond-pop-no-text {
|
||||
font-size: 13px;
|
||||
color: #7f7f7f;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,5 +3,4 @@
|
||||
const router = useRouter()
|
||||
router.replace("/index.html")
|
||||
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] })
|
||||
console.log("打印");
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user