no message
This commit is contained in:
A1300399510
parent
c80cee6eb0
commit
d7915dd321
53
app.vue
53
app.vue
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -87,4 +87,55 @@ a {
|
||||
*::-moz-scrollbar-thumb:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
header.page-header .box .tab-list .item.pitch {
|
||||
color: #72db86 !important;
|
||||
}
|
||||
|
||||
header.page-header .box .tab-list .item.pitch:after {
|
||||
background-color: #72db86 !important;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
flex-direction: column;
|
||||
height: 101px;
|
||||
background-color: rgba(244, 248, 255, 1);
|
||||
border: 1px solid rgba(220, 224, 234, 1);
|
||||
border-radius: 10px;
|
||||
z-index: 100;
|
||||
|
||||
.avatar-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.avatar-item {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-popover.el-popper.avatar-box-popper {
|
||||
min-width: 140px;
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
assets/img/homepage-icon.png
Normal file
BIN
assets/img/homepage-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/img/send-messages-icon.png
Normal file
BIN
assets/img/send-messages-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -29,14 +29,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from "vue-router"
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
let keyword = ref("")
|
||||
|
||||
onMounted(() => {
|
||||
getHistoricalSearchList()
|
||||
|
||||
// getUser()
|
||||
keyword.value = route.query["keyword"]
|
||||
})
|
||||
|
||||
let count = ref({})
|
||||
@ -112,7 +114,6 @@ const handleClickClear = () => {
|
||||
let historicalSearchState = ref(false) // 历史记录弹窗状态
|
||||
let historicalSearchList = ref([]) // 历史记录数据
|
||||
|
||||
|
||||
let MyPopupRef = ref(null)
|
||||
// 点击我的获取消息
|
||||
const handleUser = key => {
|
||||
|
||||
@ -26,6 +26,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-list flexacenter">
|
||||
<div class="data-item flexacenter">
|
||||
<img class="data-item-icon" src="@/assets/img/eye-icon.svg" />
|
||||
{{ item["views"] || 0 }}
|
||||
</div>
|
||||
<div class="data-item flexacenter" @click.prevent="handleLike(item['uniqid'], item['token'])">
|
||||
<img class="data-item-icon" v-if="item['islike'] == 0" src="@/assets/img/like-no.svg" />
|
||||
<img class="data-item-icon" v-else src="@/assets/img/like-yes.png" />
|
||||
@ -165,7 +169,7 @@ const handleLike = (uniqid, token) => {
|
||||
color: #aaaaaa;
|
||||
font-size: 12px;
|
||||
.data-item {
|
||||
margin-left: 15px;
|
||||
margin-left: 26px;
|
||||
.data-item-icon {
|
||||
width: 13px;
|
||||
margin-right: 5px;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="tba-list flexcenter">
|
||||
<div class="tab-item flexcenter" :class="{ pitch: MyPopupState == 'collect' }" @click="cutMy('collect')">
|
||||
我的收藏
|
||||
<div class="value">{{ count["collect"] }}</div>
|
||||
<div class="value">{{ collectCount || count["collect"] }}</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-item flexcenter" :class="{ pitch: MyPopupState == 'mj' }" @click="cutMy('mj')">
|
||||
@ -18,35 +18,35 @@
|
||||
<Empty></Empty>
|
||||
</div>
|
||||
<div class="content" v-else @scroll="handleListScroll">
|
||||
<div class="item flexflex" v-for="(item, index) in showList" :key="index" @click="goDetails(item['uniqid'])">
|
||||
<div class="item flexflex" v-for="(item, index) in showList" :key="index" @click="goDetails(item['uniqid'] || item?.data?.uniqid)">
|
||||
<div class="left flexflex">
|
||||
<div class="name">{{ item["school"] }}</div>
|
||||
<div class="name">{{ item["school"] || item["data"]["school"] }}</div>
|
||||
<div class="info-box flexflex">
|
||||
<div class="info-item flexacenter" v-if="item['profession']">
|
||||
<div class="info-item flexacenter" v-if="item['profession'] || item?.['data']?.['profession']">
|
||||
<div class="info-item-name">专业</div>
|
||||
<div class="info-item-value">{{ item["profession"] }}</div>
|
||||
<div class="info-item-value">{{ item["profession"] || item["data"]["profession"] }}</div>
|
||||
</div>
|
||||
<div class="info-item flexacenter" v-if="item['project']">
|
||||
<div class="info-item flexacenter" v-if="item['project'] || item?.data?.project">
|
||||
<div class="info-item-name">项目</div>
|
||||
<div class="info-item-value">{{ item["project"] }}</div>
|
||||
<div class="info-item-value">{{ item["project"] || item?.data?.project }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box flexacenter">
|
||||
<div class="text-time">1小时前发布</div>
|
||||
<div class="text-message flex1 ellipsis">{{ item["message"] }}</div>
|
||||
<div class="text-time" v-if="item?.releasetime">{{ handleDate(item?.releasetime) }}发布</div>
|
||||
<div class="text-message flex1 ellipsis">{{ item["message"] || item["data"]["message"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operate-area flexacenter">
|
||||
<img class="delete-icon" v-if="MyPopupState == 'collect'" src="@/assets/img/delete-icon.svg" />
|
||||
<div class="anonymous-box flexacenter" v-else @click="openAnonymousState(index)">
|
||||
<img class="delete-icon" v-if="MyPopupState == 'collect'" @click.stop="cancelCollection(item['token'], index)" src="@/assets/img/delete-icon.svg" />
|
||||
<div class="anonymous-box flexacenter" v-else @click.stop="openAnonymousState(index)">
|
||||
<div class="text">{{ item["anonymous"] == 1 ? "匿名" : "公开" }}</div>
|
||||
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
|
||||
<div class="state-popup flexflex" v-if="item['anonymousState']" @click.stop="">
|
||||
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index)">
|
||||
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index, 0)">
|
||||
<div class>公开发表</div>
|
||||
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
|
||||
</div>
|
||||
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index)">
|
||||
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index, 1)">
|
||||
<div class>匿名发表</div>
|
||||
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
|
||||
</div>
|
||||
@ -79,13 +79,26 @@ onMounted(() => {
|
||||
let showList = ref([])
|
||||
|
||||
let collectList = []
|
||||
let collectPage = 1
|
||||
let collectLoading = false
|
||||
let collectCount = ref(0)
|
||||
|
||||
const getCollect = () => {
|
||||
MyUserCollectHttp({}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
collectList = collectList.concat(data.data)
|
||||
showList.value = collectList
|
||||
})
|
||||
if (collectPage == 0 || collectLoading) return
|
||||
collectLoading = true
|
||||
MyUserCollectHttp({ page: collectPage })
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
collectList = collectList.concat(data.data)
|
||||
showList.value = collectList
|
||||
|
||||
if (collectList.length < data["count"]) collectPage++
|
||||
else collectPage = 0
|
||||
|
||||
collectCount.value = data["count"]
|
||||
})
|
||||
.finally(() => (collectLoading = false))
|
||||
}
|
||||
|
||||
let publishList = []
|
||||
@ -130,9 +143,28 @@ const openAnonymousState = index => {
|
||||
showList.value = [...publishList]
|
||||
}
|
||||
|
||||
// 关闭全部匿名弹窗
|
||||
const closeAllAnonymousState = () => {
|
||||
publishList.forEach(element => {
|
||||
element["anonymousState"] = false
|
||||
})
|
||||
showList.value = [...publishList]
|
||||
}
|
||||
// 修改匿名状态
|
||||
const handleAnonymousState = (token, index) => {
|
||||
const handleAnonymousState = (token, index, anonymous) => {
|
||||
console.log("token", token, index)
|
||||
changeAnonymousHttp({ token, anonymous }).then(res => {
|
||||
console.log("res", res)
|
||||
if (res.code != 200) return
|
||||
|
||||
publishList[index]["anonymous"] = anonymous
|
||||
showList.value = [...publishList]
|
||||
closeAllAnonymousState()
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 详情页滚动事件
|
||||
@ -155,6 +187,23 @@ defineExpose({
|
||||
})
|
||||
|
||||
// const emit = defineEmits(["cutMy"]);
|
||||
|
||||
// 处理取消收藏
|
||||
const cancelCollection = (token, index) => {
|
||||
MyUserDeleteCollectHttp({ token }).then(res => {
|
||||
console.log("res", res)
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
|
||||
collectList.splice(index, 1)
|
||||
collectCount.value--
|
||||
|
||||
console.log(collectList, "collectList")
|
||||
showList.value = [...collectList]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.popup-mask {
|
||||
|
||||
245
components/Report.vue
Normal file
245
components/Report.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<!-- 举报 -->
|
||||
<div class="alert-form">
|
||||
<div class="comments reports">
|
||||
<div class="head">
|
||||
<span style="display: flex; align-items: center;"> <img style="width: 25px; margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png" />举报投诉 </span>
|
||||
<div class="close icon-close iconfont" @click="alertShow = false"></div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="radio-area flexacenter">
|
||||
<div class="radio-area-item flexacenter" :class="{ pitch: checkList.includes(s) }" v-for="(s, i) in reasonList" :key="i" @click="selectRadio(s)">
|
||||
<div class="radio-area-frame"></div>
|
||||
{{ s }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box">
|
||||
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
|
||||
<div class="text-num">{{ 200 - alertText.length }}</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button type="button" @click="cancel()">取消</button>
|
||||
<button type="submit" :disabled="checkList.length == 0" @click="alertSubmit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
const props = defineProps(["reportToken"])
|
||||
const reasonList = ["广告", "辱骂", "重复发送", "不良信息", "其他"]
|
||||
let reportAlertShow = inject("reportAlertShow")
|
||||
|
||||
let checkList = ref([])
|
||||
let alertShow = ref(false)
|
||||
let alertText = ref("")
|
||||
|
||||
const selectRadio = value => {
|
||||
const index = checkList.value.indexOf(value)
|
||||
if (index === -1) checkList.value.push(value)
|
||||
else checkList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 举报提交
|
||||
const alertSubmit = () => {
|
||||
checkList.value.push(alertText.value)
|
||||
reportAlertShow.value = false
|
||||
commentReportHttp({
|
||||
message: checkList.value,
|
||||
token: props.reportToken,
|
||||
}).then(res => {
|
||||
checkList.value = []
|
||||
reportAlertShow.value = false
|
||||
ElMessage({
|
||||
message: res.message || "举报成功",
|
||||
type: "success",
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 取消
|
||||
const cancel = () => (reportAlertShow.value = false)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.alert-form {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 2100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
.reports {
|
||||
height: 440px;
|
||||
.radio-area {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.radio-area-item {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
.radio-area-frame {
|
||||
background-color: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
|
||||
&::after {
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-area-frame {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
&::after {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid #fff;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
-webkit-transform: rotate(45deg) scaleY(0);
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
-webkit-transition: -webkit-transform 0.15s ease-in 0.05s;
|
||||
transition: -webkit-transform 0.15s ease-in 0.05s;
|
||||
transition: transform 0.15s ease-in 0.05s;
|
||||
transition: transform 0.15s ease-in 0.05s, -webkit-transform 0.15s ease-in 0.05s;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.comments {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 740px;
|
||||
height: 440px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px 8px 6px 6px;
|
||||
.text-box {
|
||||
position: relative;
|
||||
}
|
||||
.text-num {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 34px 30px 40px;
|
||||
textarea {
|
||||
height: 172px;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
padding: 18px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #f7f7f7;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
padding: 0 18px 0 30px;
|
||||
display: flex;
|
||||
height: 56px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.close {
|
||||
color: #b3b3b3;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
button[type="button"] {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px #999999 solid;
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
width: 128px;
|
||||
height: 38px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button[type="submit"] {
|
||||
background-color: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-checked .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #50e3c2;
|
||||
border-color: #50e3c2;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-focus .el-checkbox__inner,
|
||||
.alert-form .el-checkbox__inner:hover {
|
||||
border-color: #50e3c2;
|
||||
}
|
||||
|
||||
.alert-form .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #50e3c2;
|
||||
}
|
||||
</style>
|
||||
@ -37,14 +37,34 @@ export const detailsSubmitommentListHttp = query => {
|
||||
return Http.post("/api/comment/submit", query)
|
||||
}
|
||||
|
||||
// 评论相关 - 评论点赞
|
||||
export const detailsLikeCommentHttp = query => {
|
||||
return Http.post("/api/comment/like", query)
|
||||
}
|
||||
|
||||
// 发布相关 - 发布问题初始化,编辑
|
||||
export const publishInitHttp = query => {
|
||||
return Http.post("/api/publish", query)
|
||||
}
|
||||
|
||||
// 发布相关 - 发布问题初始化,编辑
|
||||
// 发布相关 - 发布问题搜索学校
|
||||
export const publishSchoolSearchHttp = query => {
|
||||
return Http.post("https://offer.gter.net/miniprogram/InterviewExperience/schoolSearch", query)
|
||||
return Http.post("/api/publish/schoolSearch", query)
|
||||
}
|
||||
|
||||
// 发布相关 - 发布问题搜索专业
|
||||
export const publishProfessionSearchHttp = query => {
|
||||
return Http.post("/api/publish/professionSearch", query)
|
||||
}
|
||||
|
||||
// 发布相关 - 提交
|
||||
export const publishSubmitHttp = query => {
|
||||
return Http.post("/api/publish/submit", query)
|
||||
}
|
||||
|
||||
// 发布相关 - 更改匿名状态
|
||||
export const changeAnonymousHttp = query => {
|
||||
return Http.post("/api/publish/changeAnonymous", query)
|
||||
}
|
||||
|
||||
// 我的 - 用户信息
|
||||
@ -57,7 +77,18 @@ export const MyUserPublishHttp = query => {
|
||||
return Http.post("/api/user/publish", query)
|
||||
}
|
||||
|
||||
// 我的 - 删除收藏
|
||||
export const MyUserDeleteCollectHttp = query => {
|
||||
return Http.post("/api/user/deleteCollect", query)
|
||||
}
|
||||
|
||||
// 数据操作 - 收藏
|
||||
export const MyUserCollectHttp = query => {
|
||||
return Http.post("/api/user/collect", query)
|
||||
}
|
||||
}
|
||||
|
||||
// 评论相关 - 举报 Comment related
|
||||
export const commentReportHttp = query => {
|
||||
return Http.post("/api/operate/report", query)
|
||||
}
|
||||
|
||||
|
||||
@ -19,9 +19,9 @@ export const handleDate = (dateTimeStamp = new Date()) => {
|
||||
let Y = date.getFullYear() + "-"
|
||||
let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
|
||||
let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
|
||||
let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
|
||||
let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
|
||||
result = "" + Y + M + D + h + m
|
||||
// let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
|
||||
// let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
|
||||
result = "" + Y + M + D
|
||||
} else if (dayC >= 1) result = "" + Math.round(dayC) + "天前"
|
||||
else if (hourC >= 1) result = "" + Math.round(hourC) + "小时前"
|
||||
else if (minC >= 1) result = "" + Math.round(minC) + "分钟前"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
devtools: {enabled: true},
|
||||
modules: ["@element-plus/nuxt"]
|
||||
modules: ["@element-plus/nuxt"],
|
||||
})
|
||||
|
||||
10
package.json
10
package.json
@ -4,7 +4,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev --port 3002",
|
||||
"dev": "nuxt dev --host",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
@ -22,5 +22,11 @@
|
||||
"axios": "^1.6.2",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"qs": "^6.11.2"
|
||||
},
|
||||
"config": {
|
||||
"nuxt": {
|
||||
"host": "0.0.0.0",
|
||||
"port": "3000"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,7 +24,7 @@
|
||||
<img class="item-bj" src="@/assets/img/item-bj.svg" />
|
||||
<div class="mj-header flexacenter">
|
||||
<img class="mj-avatar" :src="item['avatar']" />
|
||||
<div class="user-name">{{ item["username"] }}</div>
|
||||
<div class="user-name">{{ item["username"] || "匿名用户" }}</div>
|
||||
<div class="time">{{ handleDate(item["releasetime"]) }}发布</div>
|
||||
</div>
|
||||
|
||||
@ -45,22 +45,40 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right flex1">
|
||||
<div class="right flex1" @scroll="handleCommentsScroll" v-loading="detailsLoading">
|
||||
<!-- <div class="right-loading"></div> -->
|
||||
<div class="header">
|
||||
<div class="title">{{ info["subject"] }}</div>
|
||||
<div class="mj-header flexacenter">
|
||||
<div class="mj-header-left flexacenter">
|
||||
<img class="mj-avatar" :src="info['avatar']" />
|
||||
<div class="user-name">{{ info["nickname"] }}</div>
|
||||
<div class="time">{{ info["releasetime"] }}发布</div>
|
||||
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false">
|
||||
<template #reference>
|
||||
<img class="mj-avatar" :src="info['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="avatar-box flexflex" v-if="info['uin']">
|
||||
<!-- <div class="avatar-box flexflex"> -->
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(info['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(info['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<div class="user-name">{{ info["nickname"] || "匿名用户" }}</div>
|
||||
<div class="time">{{ handleDate(info["releasetime"]) }}发布</div>
|
||||
</div>
|
||||
<div class="mj-header-right flexacenter">
|
||||
<div class="mj-header-right flexacenter" v-if="isBrowser">
|
||||
<img class="eye-icon" src="@/assets/img/eye-icon.svg" />
|
||||
{{ info["views"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-box" v-if="true">
|
||||
<div class="details-box">
|
||||
<div class="details-item">
|
||||
<div class="details-top">申请信息</div>
|
||||
<div class="details-list">
|
||||
@ -92,11 +110,12 @@
|
||||
<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 class="unlock-mask flexflex">
|
||||
<!-- {{ info["message"] }} -->
|
||||
<div v-html="info['message']"></div>
|
||||
<div class="unlock-mask flexflex" style="width: 693px;">
|
||||
<div class="">作者设置了浏览限制</div>
|
||||
<div class="flexacenter">
|
||||
<div class="emphasis">“回复”</div>
|
||||
<div class="emphasis">“回复/点赞”</div>
|
||||
后即可查看完整内容
|
||||
</div>
|
||||
</div>
|
||||
@ -110,7 +129,7 @@
|
||||
<div class="comment-box">
|
||||
<div class="comment-title flexacenter">
|
||||
讨论
|
||||
<div class="value">{{ commentCount || "" }}</div>
|
||||
<div class="value">{{ commentComments || "" }}</div>
|
||||
</div>
|
||||
<div class="post-comment flexacenter">
|
||||
<textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
|
||||
@ -124,8 +143,23 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="comment-list">
|
||||
<div class="comment-item flexflex" v-for="(item, index) in commentList" :key="index">
|
||||
<img class="comment-avatar" :src="item['avatar']" />
|
||||
<div class="comment-item flexflex" v-for="(item, index) in commentList" :key="item.id">
|
||||
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false">
|
||||
<template #reference>
|
||||
<img class="comment-avatar" :src="item['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="avatar-box flexflex" v-if="item['uin']">
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="sendMessage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(item['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
@ -136,10 +170,10 @@
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
<div class="report-box flexcenter" @click="report(item['token'])">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box">
|
||||
<div class="flexacenter like-box" @click="commentLike(index)">
|
||||
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
|
||||
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
|
||||
@ -157,31 +191,47 @@
|
||||
</div>
|
||||
<!-- 子评论 -->
|
||||
<div class="child-comments" v-if="item['child'].length > 0">
|
||||
<div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="i">
|
||||
<img class="comment-avatar" :src="item['avatar']" />
|
||||
<div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="ite.id">
|
||||
<!-- <img class="comment-avatar" :src="ite['avatar']" /> -->
|
||||
<el-popover placement="bottom-start" :width="140" trigger="click" popper-class="avatar-box-popper" :show-arrow="false">
|
||||
<template #reference>
|
||||
<img class="comment-avatar" :src="ite['avatar']" />
|
||||
</template>
|
||||
|
||||
<div class="avatar-box flexflex" v-if="item['uin']">
|
||||
<a class="av atar-item flexcenter" target="_blank" @click.prevent="sendMessage(ite['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/send-messages-icon.png" />
|
||||
发送信息
|
||||
</a>
|
||||
<a class="avatar-item flexcenter" target="_blank" @click.prevent="TAHomePage(ite['uin'])">
|
||||
<img class="avatar-icon" src="@/assets/img/homepage-icon.png" />
|
||||
TA的主页
|
||||
</a>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="comment-content flex1">
|
||||
<div class="comment-header flexacenter">
|
||||
<div class="comment-header-left flexacenter">
|
||||
<div class="comments-username">{{ item["nickname"] }}</div>
|
||||
<div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="item['isauthor']">作者</div>
|
||||
<div class="comments-username">{{ ite["nickname"] }}</div>
|
||||
<div class="comments-time">{{ handleDate(ite["timestamp"]) }}</div>
|
||||
<div class="comments-identity" v-if="ite['isauthor']">作者</div>
|
||||
</div>
|
||||
<div class="comment-header-right flexacenter">
|
||||
<div class="menu-box flexacenter">
|
||||
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
|
||||
<div class="report-box flexcenter">举报</div>
|
||||
<div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
|
||||
</div>
|
||||
<img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
|
||||
<div class="flexacenter like-box">
|
||||
<img class="like-icon" v-if="item['islike']" src="@/assets/img/like-icon-gray.png" />
|
||||
<img class="like-icon" v-else src="@/assets/img/like-icon-colours.png" />
|
||||
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
|
||||
<div class="flexacenter like-box" @click="commentLike(index, i)">
|
||||
<img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
|
||||
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
|
||||
<div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-text">
|
||||
<div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite["reply"]["nickname"] }}</div>
|
||||
{{ item["content"] }}
|
||||
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
|
||||
{{ ite["content"] }}
|
||||
</div>
|
||||
<div class="comments-input-box flexacenter" v-if="ite['childState']">
|
||||
<div class="comments-input flexflex">
|
||||
@ -214,7 +264,8 @@
|
||||
<img class="icon" v-else src="@/assets/img/like-icon.png" />
|
||||
{{ info["likenum"] || "" }}
|
||||
</div>
|
||||
<div class="item flexacenter"><img class="icon" src="@/assets/img/comment-icon.png" />9</div>
|
||||
<div class="item flexacenter"><img class="icon" src="@/assets/img/comment-icon.png" />{{ commentComments }}</div>
|
||||
|
||||
<div class="item flexacenter" @click="handleCollect()">
|
||||
<img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
|
||||
<img class="icon" v-else src="@/assets/img/collect-icon.png" />
|
||||
@ -265,6 +316,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Report v-if="reportAlertShow" :reportToken="reportToken"></Report>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -273,14 +325,12 @@ const route = useRoute()
|
||||
let uniqid = route.params.id
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
|
||||
// window.addEventListener("scroll", handleScroll)
|
||||
getDetails()
|
||||
})
|
||||
|
||||
watch(route, () => {
|
||||
clearAllData()
|
||||
|
||||
nextTick(() => getDetails())
|
||||
})
|
||||
|
||||
@ -321,10 +371,17 @@ let iscollection = ref(0) // 是否收藏
|
||||
let isdisplay = ref(true) // 是否隐藏
|
||||
let islike = ref(0) // 是否点赞
|
||||
let ismyself = ref(0) // 是否是作者
|
||||
let detailsLoading = ref(false) // 详情加载中
|
||||
|
||||
const getDetails = () => {
|
||||
if (detailsLoading.value) return
|
||||
detailsLoading.value = true
|
||||
|
||||
detailsHttp({ uniqid }).then(res => {
|
||||
if (res.code != 200) return
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
token = data["token"]
|
||||
info.value = data["info"]
|
||||
@ -335,9 +392,11 @@ const getDetails = () => {
|
||||
ismyself.value = data.ismyself
|
||||
qrcode.value = data["share"]["qrcode"]
|
||||
|
||||
getCommentListHttp()
|
||||
if (relatedlist.value.length == 0) getRelatedlistHttp()
|
||||
else CalculateSelectedList()
|
||||
|
||||
detailsLoading.value = false
|
||||
getCommentListHttp()
|
||||
})
|
||||
}
|
||||
|
||||
@ -385,6 +444,7 @@ const getRelatedlistHttp = () => {
|
||||
|
||||
let seo = ref({})
|
||||
let commentCount = ref(0)
|
||||
let commentComments = ref(0) // 所有的评论数
|
||||
let commentPage = ref(1)
|
||||
let commentList = ref([])
|
||||
let commentLoading = false
|
||||
@ -393,12 +453,13 @@ let isEmptyState = ref(false) // 评论是否为空
|
||||
|
||||
// 获取详情评论数据
|
||||
const getCommentListHttp = () => {
|
||||
if (commentPage.value == 0 || commentLoading) return
|
||||
if (commentPage.value == 0 || commentLoading || detailsLoading.value) return
|
||||
commentLoading = true
|
||||
|
||||
detailsCommentListHttp({
|
||||
// page: commentPage.value,
|
||||
// childlimit: 1,
|
||||
// limit: commentPage.value == 1 ? 3 : 10,
|
||||
page: commentPage.value,
|
||||
childlimit: 1,
|
||||
limit: 10,
|
||||
token,
|
||||
})
|
||||
.then(res => {
|
||||
@ -412,6 +473,8 @@ const getCommentListHttp = () => {
|
||||
|
||||
commentList.value = commentList.value.concat(data["data"])
|
||||
|
||||
commentComments.value = data["comments"]
|
||||
|
||||
if (commentList.value.length == data["count"]) commentPage.value = 0
|
||||
else commentPage.value++
|
||||
})
|
||||
@ -420,8 +483,6 @@ const getCommentListHttp = () => {
|
||||
|
||||
// 获取剩下的子评论
|
||||
const alsoCommentsData = (index, ind) => {
|
||||
// const targetAnswerList = [...answerList.value]
|
||||
|
||||
let targetCommentItem = { ...commentList.value[index] }
|
||||
const token = targetCommentItem["token"]
|
||||
const parentid = targetCommentItem["id"]
|
||||
@ -445,25 +506,54 @@ const alsoCommentsData = (index, ind) => {
|
||||
targetCommentItem["childPage"] = page
|
||||
|
||||
commentList.value[index] = targetCommentItem
|
||||
})
|
||||
}
|
||||
|
||||
console.log("targetCommentchild111", targetCommentItem)
|
||||
// 全部的启动到底部
|
||||
const handleCommentsScroll = e => {
|
||||
const el = e.target
|
||||
if (el.scrollHeight - el.scrollTop >= el.clientHeight + 40) return
|
||||
getCommentListHttp()
|
||||
}
|
||||
|
||||
// let merged1 = [...targetAnswerList[index]["commentList"][ind]["child"], ...data.data.filter(item2 => !targetAnswerList[index]["commentList"][ind]["child"].find(item1 => item1.id == item2.id))]
|
||||
// 评论点赞
|
||||
const commentLike = (index, i) => {
|
||||
const targetCommentList = [...commentList.value]
|
||||
|
||||
// targetAnswerList[index]["commentList"][ind]["child"] = merged1
|
||||
// answerList.value = targetAnswerList
|
||||
let token = ""
|
||||
if (i != null) token = targetCommentList[index]["child"][i].token
|
||||
else token = targetCommentList[index].token
|
||||
|
||||
detailsLikeCommentHttp({ token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
if (i != null) {
|
||||
targetCommentList[index]["child"][i].islike = data["status"]
|
||||
targetCommentList[index]["child"][i].likenum = data["likenum"]
|
||||
} else {
|
||||
targetCommentList[index].islike = data["status"]
|
||||
targetCommentList[index].likenum = data["likenum"]
|
||||
}
|
||||
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 监听滚动到底部
|
||||
const handleScroll = () => {
|
||||
return
|
||||
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
|
||||
const scrollHeight = document.documentElement.scrollHeight
|
||||
const clientHeight = document.documentElement.clientHeight
|
||||
|
||||
// console.log(scrollTop + clientHeight >= scrollHeight - 40)
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight - 40) getCommentListHttp()
|
||||
// if (scrollTop + clientHeight >= scrollHeight - 40) getCommentListHttp()
|
||||
}
|
||||
|
||||
// 打开 回答-评论 的子评论
|
||||
@ -489,38 +579,29 @@ let commentInput = ref("")
|
||||
|
||||
// 提交回答-评论
|
||||
const submitAnswerComments = (index, i) => {
|
||||
console.log(index, "index")
|
||||
// answerList.value[index]['commentState'] = true
|
||||
const targetCommentList = [...commentList.value]
|
||||
let content = ""
|
||||
let parentid = null
|
||||
let targetToken = ""
|
||||
if (index) targetToken = targetCommentList[index]["token"]
|
||||
else targetToken = token
|
||||
|
||||
if (index == null) content = commentInputTop.value
|
||||
else content = commentInput.value
|
||||
|
||||
console.log("content", content)
|
||||
|
||||
if (i != null) {
|
||||
parentid = targetCommentList[index]["child"][i]["id"]
|
||||
} else if (index != null) {
|
||||
parentid = targetCommentList[index]["id"]
|
||||
}
|
||||
|
||||
console.log("parentid", parentid)
|
||||
if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
|
||||
else if (index != null) parentid = targetCommentList[index]["id"]
|
||||
|
||||
detailsSubmitommentListHttp({
|
||||
content,
|
||||
token: targetToken,
|
||||
// parentid,
|
||||
token,
|
||||
parentid,
|
||||
}).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
console.log("data", data)
|
||||
isdisplay.value = true
|
||||
|
||||
if (i != null) {
|
||||
console.log("111", targetCommentList[index]["child"][i])
|
||||
|
||||
let targetData = {
|
||||
id: data["commentid"],
|
||||
content,
|
||||
@ -533,6 +614,8 @@ const submitAnswerComments = (index, i) => {
|
||||
...data,
|
||||
}
|
||||
|
||||
console.log("targetData", targetData)
|
||||
|
||||
targetCommentList[index]["child"].unshift(targetData)
|
||||
targetCommentList[index]["childnum"]++
|
||||
} else {
|
||||
@ -545,11 +628,24 @@ const submitAnswerComments = (index, i) => {
|
||||
...data,
|
||||
child: [],
|
||||
}
|
||||
targetCommentList.unshift(targetData)
|
||||
commentCount.value++
|
||||
if (index != null) {
|
||||
targetCommentList[index]["child"].unshift(targetData)
|
||||
targetCommentList[index]["childnum"]++
|
||||
} else {
|
||||
targetCommentList.unshift(targetData)
|
||||
commentCount.value++
|
||||
}
|
||||
}
|
||||
|
||||
commentComments.value++
|
||||
commentList.value = targetCommentList
|
||||
|
||||
// 请求 输入框的数据
|
||||
commentInputTop.value = ""
|
||||
commentInput.value = ""
|
||||
isEmptyState.value = false // 取消有可能的 没有评论
|
||||
|
||||
closeAnswerCommentsChild()
|
||||
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
@ -604,12 +700,17 @@ let copyText = text => {
|
||||
|
||||
// 点击点赞
|
||||
const handleLike = () => {
|
||||
if (islike.value) {
|
||||
ElMessage.error("不可取消点赞")
|
||||
return
|
||||
}
|
||||
operateLikeHttp({ token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
info.value["likenum"] = data["count"]
|
||||
islike.value = data["status"]
|
||||
|
||||
isdisplay.value = true
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
@ -641,7 +742,11 @@ const handleItem = uni => {
|
||||
|
||||
uniqid = uni
|
||||
|
||||
info.value = {}
|
||||
// info.value = {}
|
||||
info.value["message"] = ""
|
||||
info.value["subject"] = ""
|
||||
info.value["profession"] = ""
|
||||
|
||||
qrcode.value = ""
|
||||
iscollection.value = 0
|
||||
isdisplay.value = true
|
||||
@ -656,7 +761,8 @@ const handleItem = uni => {
|
||||
// clearAllData()
|
||||
|
||||
nextTick(() => getDetails())
|
||||
// replaceState(uni)
|
||||
|
||||
replaceState(uni)
|
||||
}
|
||||
|
||||
// 修改 url
|
||||
@ -665,6 +771,77 @@ const replaceState = uni => {
|
||||
// 替换当前URL，但不刷新页面
|
||||
window.history.pushState({}, "", `${window.location.origin}/details/${uni}`)
|
||||
}
|
||||
|
||||
let reportAlertShow = ref(false)
|
||||
let reportToken = ref("")
|
||||
|
||||
// 点击打开举报
|
||||
const report = token => {
|
||||
reportToken.value = token
|
||||
reportAlertShow.value = true
|
||||
}
|
||||
|
||||
provide("reportAlertShow", reportAlertShow)
|
||||
|
||||
// seo的
|
||||
if (process.server) {
|
||||
try {
|
||||
await detailsHttp({ uniqid }).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
token = data["token"]
|
||||
info.value = data["info"]
|
||||
seo.value = data.seo
|
||||
iscollection.value = data.iscollection
|
||||
isdisplay.value = data.isdisplay
|
||||
islike.value = data.islike
|
||||
ismyself.value = data.ismyself
|
||||
qrcode.value = data["share"]["qrcode"]
|
||||
|
||||
if (relatedlist.value.length == 0) getRelatedlistHttp()
|
||||
else CalculateSelectedList()
|
||||
detailsLoading.value = false
|
||||
getCommentListHttp()
|
||||
})
|
||||
|
||||
await relatedlistHttp({ token, page: 1 }).then(res => {
|
||||
if (res.code != 200) return
|
||||
|
||||
let data = res.data
|
||||
|
||||
relatedlist.value = data.data
|
||||
relatedcount.value = data.count
|
||||
|
||||
CalculateSelectedList()
|
||||
})
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
const isBrowser = computed(() => {
|
||||
return process.client // 使用 process.client 判断是否在浏览器环境下
|
||||
})
|
||||
|
||||
// 点击发送信息
|
||||
const sendMessage = uin => {
|
||||
console.log("uin", uin)
|
||||
redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&showmsg=1&uid=${uin}`)
|
||||
}
|
||||
|
||||
// 点击ta的主页
|
||||
const TAHomePage = uin => {
|
||||
redirectToExternalWebsite(`https://bbs.gter.net/home.php?mod=space&uid=${uin}`)
|
||||
}
|
||||
|
||||
// 跳转 url
|
||||
const redirectToExternalWebsite = url => {
|
||||
const link = document.createElement("a")
|
||||
link.href = url
|
||||
link.target = "_blank"
|
||||
link.click()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -777,8 +954,8 @@ const replaceState = uni => {
|
||||
// justify-content: space-between;
|
||||
|
||||
.mj-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@ -799,7 +976,7 @@ const replaceState = uni => {
|
||||
.info-item {
|
||||
line-height: 20px;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.info-name {
|
||||
color: #7f7f7f;
|
||||
@ -826,6 +1003,7 @@ const replaceState = uni => {
|
||||
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
padding: 30px 45px 25px;
|
||||
@ -837,6 +1015,10 @@ const replaceState = uni => {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mj-header-left {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mj-header {
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
@ -913,7 +1095,8 @@ const replaceState = uni => {
|
||||
|
||||
.details-value {
|
||||
color: #000000;
|
||||
|
||||
white-space: break-spaces;
|
||||
// width: 693px;
|
||||
&.date {
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
@ -926,6 +1109,7 @@ const replaceState = uni => {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
width: 693px;
|
||||
|
||||
.unlock-mask {
|
||||
display: none;
|
||||
@ -950,7 +1134,7 @@ const replaceState = uni => {
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 38px;
|
||||
line-height: normal;
|
||||
// display: none;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
margin-top: 7px;
|
||||
@ -1067,7 +1251,8 @@ const replaceState = uni => {
|
||||
|
||||
.comments-time {
|
||||
color: #aaaaaa;
|
||||
margin-right: 8px;
|
||||
// margin-right: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.comments-identity {
|
||||
@ -1149,7 +1334,7 @@ const replaceState = uni => {
|
||||
line-height: 22px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
|
||||
word-break: break-all;
|
||||
.comments-reply {
|
||||
color: #92a1bf;
|
||||
display: inline;
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<Head>
|
||||
<Title>寄托面经</Title>
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<div class="search-result flexacenter" v-if="keyword">
|
||||
<div class="keyword flexacenter" @click="clearKeyword">{{ keyword }} <img class="keyword-icon" src="@/assets/img/cross-circle-icon.png" /></div>
|
||||
@ -6,7 +9,7 @@
|
||||
<div class="total">共 {{ count }} 条搜索数据</div>
|
||||
</div>
|
||||
<div class="content" ref="gridContainer">
|
||||
<div class="empty-box" v-if="list.length == 0 && page == 0">
|
||||
<div class="empty-box flexcenter" v-if="list.length == 0 && page == 0">
|
||||
<empty hint="没有找到相关结果，请更换搜索关键词"></empty>
|
||||
</div>
|
||||
<template v-else>
|
||||
@ -14,11 +17,10 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="in-end" v-if="page == 0 && list.length > 0">- 到底了 -</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElMessage} from "element-plus"
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
const gridContainer = ref(null)
|
||||
let masonryInstance = null
|
||||
@ -30,7 +32,7 @@ keyword.value = route.query["keyword"]
|
||||
watchEffect(() => {
|
||||
if (keyword.value != route.query["keyword"]) {
|
||||
// keyword.value = route.query["keyword"]
|
||||
console.log(keyword.value)
|
||||
// console.log("keyword", keyword.value)
|
||||
list.value = []
|
||||
page.value = 1
|
||||
keyword.value = route.query["keyword"]
|
||||
@ -71,9 +73,16 @@ const getList = () => {
|
||||
if (page.value == 0 || loading) return
|
||||
|
||||
loading = true
|
||||
getListHttp({page: page.value, keyword: keyword.value})
|
||||
getListHttp({ page: page.value, keyword: keyword.value })
|
||||
.then(res => {
|
||||
if (res.code != 200) return
|
||||
if (res.code != 200) {
|
||||
page.value = 0
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "error",
|
||||
})
|
||||
return
|
||||
}
|
||||
// console.log("res", res.code)
|
||||
let data = res.data
|
||||
// list.value = data.data
|
||||
@ -96,14 +105,10 @@ const getList = () => {
|
||||
getList()
|
||||
|
||||
const handleLike = token => {
|
||||
operateLikeHttp({token}).then(res => {
|
||||
operateLikeHttp({ token }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
console.log("data", data)
|
||||
|
||||
console.log(list.value, "list.value")
|
||||
|
||||
list.value.forEach(element => {
|
||||
console.log(element, "element")
|
||||
if (element["token"] == token) {
|
||||
@ -129,6 +134,24 @@ const router = useRouter()
|
||||
const clearKeyword = () => {
|
||||
router.push(`/index.html`)
|
||||
}
|
||||
|
||||
try {
|
||||
if (process.server) {
|
||||
await getListHttp({ page: 1, keyword: keyword.value }).then(res => {
|
||||
if (res.code != 200) {
|
||||
page.value = 0
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "error",
|
||||
})
|
||||
return
|
||||
}
|
||||
let data = res.data
|
||||
|
||||
list.value = list.value.concat(data.data || [])
|
||||
})
|
||||
}
|
||||
} catch (error) {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flexacenter save-box save-left">
|
||||
<div class="flexacenter save-box save-left" @click="submit(0)">
|
||||
<img class="save-icon" src="@/assets/img/arrow-gray.png" />
|
||||
保存并退出
|
||||
</div>
|
||||
<div class="flexacenter save-box save-right">
|
||||
<div class="flexacenter save-box save-right" @click="abandonSaving">
|
||||
放弃保存
|
||||
<img class="save-icon" src="@/assets/img/cross-icon.png" />
|
||||
</div>
|
||||
@ -21,7 +21,7 @@
|
||||
<div class="info-item flexacenter">
|
||||
<div class="info-name">院校</div>
|
||||
<div class="flex1">
|
||||
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择院校" @select="handleSelect">
|
||||
<el-autocomplete debounce v-model="info.school" :fetch-suggestions="querySchoolSearch" clearable class="inline-input w-50" placeholder="输入关键词，选择院校" @select="handleSchoolSelect" :trigger-on-focus="false">
|
||||
<template #suffix>
|
||||
<img class="" src="@/assets/img/arrow-black.svg" />
|
||||
</template>
|
||||
@ -31,7 +31,7 @@
|
||||
<div class="info-item flexacenter">
|
||||
<div class="info-name">专业</div>
|
||||
<div class="flex1">
|
||||
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择专业" @select="handleSelect">
|
||||
<el-autocomplete v-model="info.profession" :fetch-suggestions="queryMajorSearch" clearable class="inline-input w-50" placeholder="输入关键词，选择专业" @select="handleMajorSelect" :trigger-on-focus="false">
|
||||
<template #suffix>
|
||||
<img class="" src="@/assets/img/arrow-black.svg" />
|
||||
</template>
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="info-item flexacenter">
|
||||
<div class="info-name">项目</div>
|
||||
<el-input class="flex1 input" placeholder="请输入"></el-input>
|
||||
<el-input class="flex1 input" placeholder="请输入" v-model="info.project"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
<div class="time-box item-input-box flexacenter">
|
||||
<el-config-provider :locale="zhCn">
|
||||
<el-date-picker v-model="value1" type="date" placeholder="请选择" size="large" class="flex1 flexacenter" :clear-icon="{}" />
|
||||
<el-date-picker v-model="info.interviewtime" type="date" placeholder="请选择" size="large" class="flex1 flexacenter" :clear-icon="{}" value-format="YYYY-MM-DD" />
|
||||
</el-config-provider>
|
||||
<img class="calendar-icon" src="@/assets/img/calendar-icon.svg" />
|
||||
</div>
|
||||
@ -65,11 +65,12 @@
|
||||
<div class="asterisk">*</div>
|
||||
</div>
|
||||
|
||||
<div class="title-box item-input-box flexacenter"><el-input v-model="title" placeholder="给你的面经帖起一个吸引的标题吧"></el-input></div>
|
||||
<div class="title-box item-input-box flexacenter"><el-input v-model="info.subject" placeholder="给你的面经帖起一个吸引的标题吧"></el-input></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visible-box flexacenter">
|
||||
<img class="visible-icon" src="@/assets/img/frame-no.svg" />
|
||||
<div class="visible-box flexacenter" @click="cutVisible()">
|
||||
<img class="visible-icon" v-if="info.isvisiblereply == 0" src="@/assets/img/frame-no.svg" />
|
||||
<img class="visible-icon" v-else src="@/assets/img/frame-pitch.svg" />
|
||||
回复/点赞可见
|
||||
</div>
|
||||
</div>
|
||||
@ -80,9 +81,8 @@
|
||||
面试构成及过程
|
||||
<div class="asterisk">*</div>
|
||||
</div>
|
||||
|
||||
<div class="course-box">
|
||||
<el-input v-model="course" type="textarea" placeholder="例如：项目介绍、面试时长、面试官、问题QA、需要注意的地方"></el-input>
|
||||
<el-input v-model="info.message" type="textarea" autosize placeholder="例如：项目介绍、面试时长、面试官、问题QA、需要注意的地方"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,80 +94,159 @@
|
||||
|
||||
<div class="floor-box">
|
||||
<div class="box flexacenter">
|
||||
<div class="anonymous-box flexacenter">
|
||||
<img class="anonymous-icon" src="@/assets/img/frame-pitch.svg" />
|
||||
<!-- <img class="anonymous-icon" src="@/assets/img/frame-no.svg" /> -->
|
||||
<div class="anonymous-box flexacenter" @click="cutAnonymous()">
|
||||
<img class="anonymous-icon" v-if="info.anonymous == 0" src="@/assets/img/frame-no.svg" />
|
||||
<img class="anonymous-icon" v-else src="@/assets/img/frame-pitch.svg" />
|
||||
匿名发表
|
||||
<div class="text">（发布后可修改）</div>
|
||||
</div>
|
||||
<div class="issue-btn flexcenter">发布</div>
|
||||
<div class="issue-btn flexcenter" @click="submit()">发布</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from "element-plus"
|
||||
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
|
||||
const router = useRouter()
|
||||
|
||||
const state1 = ref("")
|
||||
|
||||
const restaurants = ref([])
|
||||
let aaa = ref(1703001600000)
|
||||
|
||||
onMounted(() => {
|
||||
restaurants.value = loadAll()
|
||||
getInit()
|
||||
})
|
||||
|
||||
let token = ""
|
||||
const getInit = () => {
|
||||
publishInitHttp().then(res => {
|
||||
console.log("res", res)
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
const data = res.data
|
||||
token = data["token"]
|
||||
let interviewtime = data["info"]["interviewtime"] || 0
|
||||
if (interviewtime) data["info"]["interviewtime"] = handleDate(interviewtime)
|
||||
|
||||
console.log(interviewtime, "interviewtime")
|
||||
info.value = { ...data["info"] }
|
||||
|
||||
console.log(token)
|
||||
})
|
||||
}
|
||||
|
||||
const querySearch = (queryString, cb) => {
|
||||
// https://offer.gter.net/miniprogram/InterviewExperience/schoolSearch
|
||||
// 处理初始化 面试时间的 时间戳格式
|
||||
const handleDate = timestamp => {
|
||||
// 使用Date对象将时间戳转换为日期对象
|
||||
var date = new Date(timestamp * 1000)
|
||||
|
||||
// 获取年份、月份和日期
|
||||
var year = date.getFullYear()
|
||||
var month = ("0" + (date.getMonth() + 1)).slice(-2) // 月份从0开始，需要加1并补0
|
||||
var day = ("0" + date.getDate()).slice(-2) // 获取日期并补0
|
||||
|
||||
// 拼接为yyyy-mm-dd格式的日期字符串
|
||||
var formattedDate = year + "-" + month + "-" + day
|
||||
|
||||
return formattedDate
|
||||
}
|
||||
|
||||
let info = ref({
|
||||
school: "", // 学校
|
||||
profession: "", // 专业
|
||||
project: "", // 项目时间
|
||||
interviewtime: "", // 面试时间
|
||||
subject: "", //标题
|
||||
isvisiblereply: 0, // 回复点赞可见
|
||||
message: "", // 过程
|
||||
anonymous: 0, // 匿名状态
|
||||
})
|
||||
|
||||
// 关键字搜索学校
|
||||
const querySchoolSearch = (queryString, cb) => {
|
||||
publishSchoolSearchHttp({ keyword: queryString }).then(res => {
|
||||
// console.log("res", res)
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
console.log(data, "data")
|
||||
let data = res.data || []
|
||||
|
||||
let isRepetition = false
|
||||
|
||||
data.forEach(element => {
|
||||
console.log(element, "element")
|
||||
element['value']
|
||||
element["value"] = element["name"]
|
||||
if (element["name"] == queryString) isRepetition = true
|
||||
})
|
||||
if (!isRepetition) {
|
||||
data.unshift({
|
||||
value: queryString,
|
||||
})
|
||||
}
|
||||
cb(data)
|
||||
})
|
||||
|
||||
return
|
||||
|
||||
const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
|
||||
// call callback function to return suggestions
|
||||
cb(results)
|
||||
}
|
||||
|
||||
const createFilter = queryString => {
|
||||
return restaurant => {
|
||||
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
|
||||
}
|
||||
}
|
||||
const loadAll = () => {
|
||||
return [
|
||||
{ value: "vue", link: "https://github.com/vuejs/vue" },
|
||||
{ value: "element", link: "https://github.com/ElemeFE/element" },
|
||||
{ value: "cooking", link: "https://github.com/ElemeFE/cooking" },
|
||||
{ value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
|
||||
{ value: "vuex", link: "https://github.com/vuejs/vuex" },
|
||||
{ value: "vue-router", link: "https://github.com/vuejs/vue-router" },
|
||||
{ value: "babel", link: "https://github.com/babel/babel" },
|
||||
]
|
||||
// 选择院校
|
||||
const handleSchoolSelect = item => (info.value["schoolid"] = item["id"] || 0)
|
||||
|
||||
// 关键字搜索专业
|
||||
const queryMajorSearch = (queryString, cb) => {
|
||||
publishProfessionSearchHttp({ keyword: queryString }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data || []
|
||||
|
||||
let isRepetition = false
|
||||
|
||||
data.forEach(element => {
|
||||
element["value"] = element["name"]
|
||||
if (element["name"] == queryString) isRepetition = true
|
||||
})
|
||||
if (!isRepetition) {
|
||||
data.unshift({
|
||||
value: queryString,
|
||||
})
|
||||
}
|
||||
cb(data)
|
||||
})
|
||||
}
|
||||
|
||||
const handleSelect = item => {
|
||||
console.log(item)
|
||||
// 选择专业
|
||||
const handleMajorSelect = item => (info.value["profession_id"] = item["id"] || 0)
|
||||
|
||||
// 切换匿名状态
|
||||
const cutAnonymous = () => {
|
||||
info.value["anonymous"] = info.value["anonymous"] == 0 ? 1 : 0
|
||||
}
|
||||
|
||||
const value1 = ref("")
|
||||
const title = ref("")
|
||||
const course = ref("")
|
||||
// 切换回复可见状态
|
||||
const cutVisible = () => {
|
||||
info.value["isvisiblereply"] = info.value["isvisiblereply"] == 0 ? 1 : 0
|
||||
}
|
||||
|
||||
// 提交发布
|
||||
const submit = (status = 1) => {
|
||||
console.log(info.value)
|
||||
publishSubmitHttp({ info: info.value, token, status }).then(res => {
|
||||
if (res.code != 200) {
|
||||
ElMessage.error(res.message)
|
||||
return
|
||||
}
|
||||
|
||||
const data = res.data
|
||||
console.log("data", data)
|
||||
ElMessage.success(res.message)
|
||||
|
||||
router.push(`/details/${data["uniqid"]}`)
|
||||
})
|
||||
}
|
||||
|
||||
// 放弃保存 跳跃上一页或者首页
|
||||
const abandonSaving = () => {
|
||||
// console.log("router.currentRoute.value.meta.previousPage", router.currentRoute.value.meta.previousPage)
|
||||
if (router.currentRoute.value.meta.previousPage) router.go(-1)
|
||||
else router.push("./index.html") // 跳转到首页
|
||||
}
|
||||
|
||||
// 保存并退出
|
||||
const saveAndExit = () => {
|
||||
console.log("saveAndExit")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@ -291,6 +370,7 @@ const course = ref("")
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.visible-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@ -353,6 +433,7 @@ const course = ref("")
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
|
||||
.text {
|
||||
color: rgb(170, 170, 170);
|
||||
|
||||
@ -57,13 +57,9 @@ const get = (url, params) => {
|
||||
const post = (url, params) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//是将对象 序列化成URL的形式，以&进行拼接
|
||||
axios.post(url, QS.stringify(params)).then(res => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
if (err.data.code == 401) {
|
||||
resolve(err.data);
|
||||
} else reject(err.data)
|
||||
|
||||
axios.post(url, QS.stringify(params)).then(res => resolve(res.data)).catch(err => {
|
||||
if (err.data.code == 401) resolve(err.data);
|
||||
else reject(err.data)
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user