mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 02:46:47 +08:00
467 lines
12 KiB
Vue
467 lines
12 KiB
Vue
<template>
|
|
<div class="discusspage">
|
|
<ReturnHead
|
|
text="讨论详情"
|
|
:ispublish="true"
|
|
:discussId="discussId"
|
|
:id="id"
|
|
:type="type"
|
|
></ReturnHead>
|
|
<div class="head clearfix">
|
|
<div class="title">
|
|
{{
|
|
info && info.discussDtoList && info.discussDtoList.length !== 0
|
|
? info?.discussDtoList[0].discussName
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="title" style="margin-top: 0px">
|
|
{{
|
|
info && info.discussDtoList && info.discussDtoList.length !== 0
|
|
? info?.discussDtoList[0].discussExplain
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview">
|
|
<div class="previewbox">
|
|
<div class="previewmani">
|
|
<div class="firstbtncontainer">
|
|
<div class="inbtn">
|
|
<button
|
|
@click="nowPost(info.discussDtoList[0].id)"
|
|
:class="searchType === 1 ? 'new samebtn' : 'samebtn hot'"
|
|
>
|
|
最新
|
|
</button>
|
|
<div class="dd"></div>
|
|
<button
|
|
@click="hotPost(state.info.discussDtoList[0].id)"
|
|
:class="searchType === 2 ? 'new samebtn' : 'samebtn hot'"
|
|
>
|
|
最热
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="discusscontainer clearfix">
|
|
<div class="item" v-for="(item, index) in postList" :key="index">
|
|
<div class="thinline"></div>
|
|
<div class="coni" @click="goDetails(item)">
|
|
<div class="conin">
|
|
<div class="tit">{{ item.title }}</div>
|
|
<div class="inn" v-html="item.content"></div>
|
|
</div>
|
|
</div>
|
|
<div class="thinline"></div>
|
|
<div class="bott">
|
|
<div class="dicon">
|
|
<div class="imgcont" @click="goDetails(item)">
|
|
<img
|
|
class="imgs"
|
|
src="../../assets/image/discuss/pinglun.png"
|
|
/>
|
|
<div class="samei" style="margin-top: 2px">
|
|
{{ item.commentNum || 0 }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imgcont" @click="like(item)">
|
|
<img
|
|
v-if="item.praised"
|
|
style="margin-left: 56px"
|
|
class="imgs"
|
|
src="../../assets/image/discuss/dianzan2.png"
|
|
/>
|
|
<img
|
|
v-else
|
|
style="margin-left: 56px"
|
|
class="imgs"
|
|
src="../../assets/image/discuss/dianzan.png"
|
|
/>
|
|
<div
|
|
:class="item.praised ? 'sameii' : 'samei'"
|
|
style="margin-top: 2px"
|
|
>
|
|
{{ item.praiseNum || 0 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clickMoreBox" v-if="!noMore && total > 10">
|
|
<div class="clickMore" @click="handleCurrentChange">
|
|
点击加载更多~
|
|
</div>
|
|
</div>
|
|
<div class="clickMoreBox" v-if="noMore">
|
|
<div class="clickMore" style="color: rgba(95, 109, 117, 1)">
|
|
已经到底啦~
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, toRefs } from "vue";
|
|
// import TitleHead from "@/components/TitleHead.vue";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import { request, useRequest } from "@/api/request";
|
|
import { useRoute } from "vue-router/dist/vue-router";
|
|
import { useRouter } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
import {
|
|
COMMENT_COLLECTION,
|
|
COMMENT_PRAISE,
|
|
DISCUSS_LIST,
|
|
QueryDiscussSubmitDetailByDiscussId,
|
|
PostList,
|
|
PostPraise,
|
|
} from "@/api/api";
|
|
const router = useRouter();
|
|
const state = reactive({
|
|
onfo: true,
|
|
info: {},
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
searchType: 1,
|
|
postList: [], //帖子列表
|
|
total: 0, // 帖子总条数
|
|
currentPage: 1,
|
|
content: 1,
|
|
discussId: null,
|
|
noMore: false,
|
|
});
|
|
const {
|
|
onfo,
|
|
discuss,
|
|
info,
|
|
pageNo,
|
|
pageSize,
|
|
searchType,
|
|
postList, //帖子列表
|
|
total, // 帖子总条数
|
|
currentPage,
|
|
content,
|
|
discussId,
|
|
noMore,
|
|
} = toRefs(state);
|
|
|
|
//获取讨论详情
|
|
const {
|
|
query: { id, type },
|
|
} = useRoute();
|
|
request(DISCUSS_LIST, {
|
|
type: type == 1 ? 2 : 1,
|
|
id,
|
|
})
|
|
.then((e) => {
|
|
state.info = e.data;
|
|
console.log("讨论详情", state.info);
|
|
state.discussId = e.data.discussDtoList[0].id;
|
|
getPostList(e.data.discussDtoList[0].id);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
// 获取帖子
|
|
function getPostList(discussId) {
|
|
console.log("获取帖子参数", {
|
|
pid: discussId,
|
|
current: state.pageNo,
|
|
order: 1,
|
|
});
|
|
|
|
request(PostList, {
|
|
pid: discussId,
|
|
current: state.pageNo,
|
|
order: state.content,
|
|
})
|
|
.then((e) => {
|
|
console.log("我是当前讨论下的帖子", e);
|
|
state.postList = state.postList.concat(e.data.records);
|
|
state.total = Number(e.data.total);
|
|
if (e.data.records.length === 0 || e.data.records.length < 10) {
|
|
state.noMore = true;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
// 最新
|
|
function nowPost(discussId) {
|
|
state.content = 1;
|
|
state.searchType = 1;
|
|
state.pageNo = 1;
|
|
state.currentPage = 1;
|
|
state.postList = [];
|
|
state.noMore = false;
|
|
getPostList(discussId);
|
|
}
|
|
// 最热
|
|
function hotPost(discussId) {
|
|
state.content = 2;
|
|
state.searchType = 2;
|
|
state.pageNo = 1;
|
|
state.currentPage = 1;
|
|
state.postList = [];
|
|
state.noMore = false;
|
|
getPostList(discussId);
|
|
}
|
|
|
|
//跳转到讨论详情
|
|
const goDetails = (item) => {
|
|
console.log("item", item, state.info);
|
|
router.push({
|
|
path: "/discussdetail",
|
|
query: {
|
|
targetId: id,
|
|
id: item.discussId,
|
|
type,
|
|
postID: item.id,
|
|
postName: state.info.discussDtoList[0].discussName,
|
|
discussSettings: state.info.discussDtoList[0].discussSettings,
|
|
},
|
|
});
|
|
};
|
|
// 帖子点赞
|
|
function like(d) {
|
|
console.log("点击参数", d);
|
|
d.praised
|
|
? (d.praiseNum = Number(d.praiseNum) - 1)
|
|
: (d.praiseNum = Number(d.praiseNum) + 1);
|
|
d.praised = !d.praised;
|
|
console.log("我是点赞传递的参数", { targetId: d.id, type: 2 });
|
|
request(PostPraise, { targetId: d.id, type: 3 })
|
|
.then((res) => {
|
|
console.log("我是点赞的操作", res);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
// 分页
|
|
function handleCurrentChange(e, k) {
|
|
console.log("分页打印", e, k);
|
|
state.currentPage = state.currentPage + 1;
|
|
state.pageNo = state.pageNo + 1;
|
|
getPostList(state.info.discussDtoList[0].id);
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.discusspage {
|
|
width: 100%;
|
|
.head {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
.title {
|
|
width: 90%;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
color: #333330;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
.preview {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
|
|
.previewbox {
|
|
width: 100%;
|
|
// height: 200px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.previewmani {
|
|
width: 100%;
|
|
margin-top: 17px;
|
|
.firstbtncontainer {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.inbtn {
|
|
width: 90%;
|
|
display: flex;
|
|
.dd {
|
|
width: 20px;
|
|
height: 10px;
|
|
}
|
|
.samebtn {
|
|
width: 42.5px;
|
|
height: 23px;
|
|
font-size: 13px;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
}
|
|
.new {
|
|
color: #fff;
|
|
background-color: #387df7;
|
|
// margin-right: 10px;
|
|
}
|
|
.hot {
|
|
color: #6e7b84;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.discusstitle {
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
background-color: #f9f9f9;
|
|
// height: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.titcon {
|
|
margin-top: 11px;
|
|
width: 95%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.maint {
|
|
color: #333330;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
font-weight: bold;
|
|
width: 75%;
|
|
margin-bottom: 16px;
|
|
}
|
|
.intime {
|
|
display: flex;
|
|
margin-top: 2px;
|
|
.yuna {
|
|
margin-top: 4px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 1px solid #0060ff;
|
|
}
|
|
.in {
|
|
margin-left: 3px;
|
|
color: #0060ff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.discusscontainer {
|
|
// padding-bottom: 20px;
|
|
width: 100%;
|
|
|
|
.item {
|
|
width: 90%;
|
|
// position:relative;
|
|
|
|
.thinline {
|
|
// position:absolute;
|
|
// margin-top: 12px;
|
|
width: 100%;
|
|
height: 0;
|
|
left: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
}
|
|
.coni {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.conin {
|
|
width: 90%;
|
|
.tit {
|
|
margin-top: 25px;
|
|
color: #04243c;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
// line-height: 24px;
|
|
}
|
|
.inn {
|
|
margin-bottom: 20px;
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
max-height: 103px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bott {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.dicon {
|
|
display: flex;
|
|
width: 90%;
|
|
height: 35px;
|
|
// background-color: #bfa;
|
|
.imgcont {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
.imgs {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
.samei {
|
|
color: #b3bdc4;
|
|
font-size: 13px;
|
|
line-height: 35px;
|
|
margin-left: 9.5px;
|
|
}
|
|
|
|
.sameii {
|
|
color: #387df7;
|
|
font-size: 13px;
|
|
line-height: 35px;
|
|
margin-left: 9.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.clickMoreBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #2478ff;
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|