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

更新底部链接和隐藏回应

Browse Source
This commit is contained in:
A1300399510
2024-07-19 15:03:52 +08:00
parent ed9eecf599
commit a770221a67
66 changed files with 960 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,7 +124,6 @@
<div class="details-list">
<div class="details-list-item flexacenter">
<div class="details-value describe" :class="{ 'unlock-unlock': !isdisplay }" v-if="info['message']">
<!-- {{ info["message"] }} -->
<div v-html="info['message']"></div>
<div class="unlock-mask flexflex" style="width: 693px;">
<div class="">作者设置了浏览限制</div>
@@ -165,6 +164,33 @@
</div>
</div>
<!-- 回应 -->
<div class="respond-area" v-if="false">
<div class="respond-title flexacenter">
回应
<div class="value">{{ ripostecount.total || 0 }}</div>
</div>
<div v-if="ripostelist.length == 0" class="respond-no-box flexacenter">
<div class="respond-no flex1">
<div v-for="item in randomEmojis" :key="item" class="code" v-html="jointriposte(item)" @click="selectEomji(item)"></div>
</div>
<RespondAdd></RespondAdd>
</div>
<div v-else class="respond-box">
<div v-for="(item, index) in ripostelist" :key="item" class="respond-item flexacenter" :class="{ 'pitch': item.selected }" @click="selectListEomji(index)">
<div class="code flexacenter" v-html="jointriposte(item.item)"></div>
{{ item.num }}
</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>
</div>
<RespondAdd></RespondAdd>
</div>
<RespondAdd v-else></RespondAdd>
</div>
</div>
<!-- 讨论 -->
<div class="comment-box" ref="commentBoxRef">
<div class="comment-title flexacenter">
@@ -333,10 +359,11 @@
<img class="icon h8" src="@/assets/img/eye-icon-black.svg" />
{{ info["views"] }}
</div>
<div class="item flexacenter" @click="handleLike">
<img class="icon h16" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
<img class="icon h16" v-else src="@/assets/img/like-icon.png" />
{{ info["likenum"] || "" }}
<div class="item flexacenter" v-if="false">
<!-- <img class="icon h16" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" /> -->
<!-- <img class="icon h16" v-else src="@/assets/img/like-icon.png" /> -->
<img class="icon h16" src="@/assets/img/riposte-icon.png" />
{{ ripostecount.total || 0 }}
</div>
<div class="item flexacenter" @click="handleScrollComments()"><img class="icon h15" src="@/assets/img/comment-icon.png" />{{ commentComments }}</div>
<ClientOnly>
@@ -454,7 +481,7 @@ let uniqid = route.params.id
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] })
let contentRightRef = ref(null)
let contentRightHeight = ref(null)
@@ -603,8 +630,6 @@ const getDetails = () => {
ismyself.value = data.ismyself
qrcode.value = data["share"]["qrcode"]
// console.log(iscollection.value);
if (relatedlist.value.length == 0) getRelatedlistHttp()
else CalculateSelectedList()
@@ -612,6 +637,7 @@ const getDetails = () => {
detailsLoading.value = false
getCommentListHttp()
getRiposte()
})
}
@@ -699,12 +725,6 @@ const getCommentListHttp = () => {
if (data["count"] == 0) isEmptyState.value = true
else isEmptyState.value = false
// console.log(data["data"])
// data["data"].forEach(element => {
// console.log("element", element["content"])
// element.content = element["content"].replace(/{:rose:}/g, `<img src="https://bbs.gter.net/static/image/smiley/lxh/rose.gif" />`)
// })
commentList.value = commentList.value.concat(data["data"])
commentComments.value = data["comments"]
@@ -849,7 +869,6 @@ const submitAnswerComments = (content, index, i) => {
// if (index == null) content = commentInputTop.value
// else content = commentInput.value
console.log(targetCommentList, "index", index, "111")
if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
else if (index != null) parentid = targetCommentList[index]["id"]
@@ -913,6 +932,8 @@ const submitAnswerComments = (content, index, i) => {
message: res.message,
type: "success",
})
if (!isdisplay.value) isdisplay.value = true
})
}
@@ -1109,7 +1130,6 @@ const isBrowser = computed(() => {
// 点击发送信息
const sendMessage = uin => {
console.log(typeof messagePrivateItem);
if (uin && typeof messagePrivateItem == "function") {
messagePrivateItem({ uin: uin })
return
@@ -1343,9 +1363,187 @@ const postCommentFocusBlur = () => {
})
}, 200)
}
let ripostelist = ref([])
let ripostecount = ref({})
let riposteoptions = ref({})
provide("riposteoptions", riposteoptions)
const getRiposte = () => {
getRiposteHttp({ token }).then(res => {
if (res.code != 200) return
let data = res.data
ripostecount.value = data.count || {}
ripostelist.value = data.list || []
riposteoptions.value = data.options || []
if (ripostelist.value.length <= 3) randomEmoji()
})
}
let randomEmojis = ref([]) // 随机 五个 emoji
provide("randomEmojis", randomEmojis)
// 随机 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 jointriposte = item => {
return `&#x${item};`
}
provide("jointriposte", jointriposte)
let riposteHttpState = false // 回应加载中
// 选择 emoji
const selectEomji = item => {
if (isNeedLogin.value) {
goLogin()
return
}
if (riposteHttpState) return
riposteHttpState = true
riposteSubmitHttp({ token, 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, 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
if (!isdisplay.value) isdisplay.value = true
}
// 选择回应
const selectListEomji = index => {
if (isNeedLogin.value) {
goLogin()
return
}
let emojiList = ripostelist.value
let target = emojiList[index]
if (riposteHttpState) return
riposteHttpState = true
riposteSubmitHttp({ token, item: target.item })
.then(res => {
if (res.code != 200) {
ElMessage.error(res.message)
return
}
let data = res.data
handleEmojiData(data)
})
.finally(() => {
riposteHttpState = false
})
}
</script>
<style lang="less" scoped>
@font-face {
font-family: "emojifont";
src: url("https://oss.x-php.com/static/riposte/emojifont-sbix.ttf");
}
.content {
width: 1200px;
margin: 0 auto 60px;
@@ -1665,14 +1863,6 @@ const postCommentFocusBlur = () => {
height: 16px;
margin-right: 7px;
}
// .eye-icon {
// width: 13px;
// height: 8px;
// margin-right: 5px;
// }
// font-size: 12px;
// color: #aaaaaa;
}
}
}
@@ -1782,6 +1972,102 @@ const postCommentFocusBlur = () => {
}
}
.respond-area {
border-bottom: 1px solid #ebebeb;
padding: 40px 45px 30px;
.respond-title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
font-size: 16px;
line-height: 20px;
margin-bottom: 20px;
.value {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #555555;
margin-left: 5px;
}
}
.respond-no-box {
width: 382px;
height: 40px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 40px 208px 208px 40px;
/deep/ .respond-add {
margin: 5px;
}
.respond-no {
display: flex;
justify-content: space-around;
.code {
margin-right: 4px;
line-height: 30px;
font-size: 16px;
font-family: "emojifont";
cursor: pointer;
user-select: none;
}
}
}
.respond-box {
display: flex;
flex-wrap: wrap;
.respond-item {
font-size: 12px;
color: #555555;
height: 30px;
// border: 1px solid #d7d7d7;
background: #f6f6f6;
border-radius: 8px;
padding: 0 6px;
display: inline-flex;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
user-select: none;
.code {
margin-right: 4px;
line-height: 30px;
font-size: 16px;
font-family: "emojifont";
user-select: none;
}
&.pitch {
// border: none;
border: 1px solid #d7d7d7;
background: #fff;
}
}
.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;
}
}
}
}
}
.comment-box {
padding-top: 40px;
padding-left: 45px;

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

@@ -30,7 +30,7 @@ import { ElMessage } from "element-plus"
let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] })
const gridContainer = ref(null)
let masonryInstance = null

2
pages/index.vue
View File

@@ -2,6 +2,6 @@
<script setup>
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", body: true }] })
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>

2
pages/publish/index.vue
View File

@@ -115,7 +115,7 @@
import { ElMessage } from "element-plus"
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
const router = useRouter()
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] })
const setDisabled = time => {
return time.getTime() > Date.now() // 可选历史天、可选当前天、不可选未来天