feat:增加讨论发帖点赞等

This commit is contained in:
lixg
2023-02-20 23:11:02 +08:00
parent e43e9c5bd9
commit e168bedd6b
11 changed files with 635 additions and 256 deletions

View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com * @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-13 11:42:48 * @Date: 2023-01-13 11:42:48
* @LastEditors: lixg lixg@dongwu-inc.com * @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-02-19 18:05:07 * @LastEditTime: 2023-02-20 17:57:40
* @FilePath: /stu_h5/src/api/api.js * @FilePath: /stu_h5/src/api/api.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@@ -54,8 +54,18 @@ export const VOTE_DETAIL_SUBMIT = `/voteSubmit/vote/commit post`
// 讨论模块 // 讨论模块
// -- 根据讨论的Id查询讨论发表的帖子 // -- 根据讨论的Id查询讨论发表的帖子
export const QueryDiscussSubmitDetailByDiscussId = '/discussSubmit/queryDiscussSubmitDetailByDiscussId post' export const QueryDiscussSubmitDetailByDiscussId = '/discussSubmit/queryDiscussSubmitDetailByDiscussId post'
export const COMMENT_PRAISE = '/comment/praise post'
export const COMMENT_COLLECTION = '/comment/collection post' export const COMMENT_COLLECTION = '/comment/collection post'
// 查询讨论下的帖子
export const PostList = `/statement/list`
// 发表帖子
export const PostAdd = `/statement/add post`
// 贴子点赞
export const PostPraise = `/statement/praise`
// 帖子详情查询
export const PostDetails = `/statement/info`
export const COMMENT_LIST = '/comment/list'
export const COMMENT_PRAISE = '/comment/praise'
// 外部考试详情接口 // 外部考试详情接口
export const EXTERNALEXAM = `/external/exam/queryExternalExam` export const EXTERNALEXAM = `/external/exam/queryExternalExam`

View File

@@ -157,7 +157,7 @@ const httpupload = axios.create({
headers: { "Content-Type": "multipart/form-data" }, headers: { "Content-Type": "multipart/form-data" },
}); });
export const fileUp = (data) => httpupload.post("/file/img", data, { export const fileUp = (data) => httpupload.post("/file/upload", data, {
headers: { "Content-Type": "multipart/form-data" }, headers: { "Content-Type": "multipart/form-data" },
}); });
export const videoUp = (data) => httpupload.post("/file/uploadunlimit", data, { export const videoUp = (data) => httpupload.post("/file/uploadunlimit", data, {

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com * @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-16 17:26:39 * @Date: 2023-01-16 17:26:39
* @LastEditors: lixg lixg@dongwu-inc.com * @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-02-18 15:16:34 * @LastEditTime: 2023-02-20 11:56:39
* @FilePath: /stu_h5/src/components/ReturnHead.vue * @FilePath: /stu_h5/src/components/ReturnHead.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@@ -72,6 +72,14 @@ export default {
type: Number, type: Number,
default: null, default: null,
}, },
discussId: {
type: Number,
default: null,
},
postAdd: {
type: Function,
default: null,
},
}, },
setup(props, ctx) { setup(props, ctx) {
const router = useRouter(); const router = useRouter();
@@ -79,7 +87,12 @@ export default {
router.back(); router.back();
}; };
const publishClick = () => { const publishClick = () => {
props.publishWork && props.publishWork(); if (props.postAdd) {
props.postAdd && props.postAdd();
}
if (props.publishWork) {
props.publishWork && props.publishWork();
}
}; };
const goFileStorage = () => { const goFileStorage = () => {
router.push({ router.push({
@@ -93,9 +106,9 @@ export default {
const goPublish = () => { const goPublish = () => {
router.push({ router.push({
path: "/discussupload", path: "/discussupload",
// query: { query: {
// courseId: props.courseId, discussId: props.discussId,
// }, },
}); });
}; };
return { return {

View File

@@ -5,10 +5,10 @@
<div class="tithead"> <div class="tithead">
<div class="headin"> <div class="headin">
<div class="vaa"> <div class="vaa">
<img class="vaaimg" src="../../assets/image/discuss/px.jpg" /> <img class="vaaimg" :src="disDetail?.userAvatar" />
</div> </div>
<div class="vaainfo"> <div class="vaainfo">
<div class="vaana">付欣晴</div> <div class="vaana">{{ disDetail?.userName }}</div>
<div class="vaanato">认识事物的本质</div> <div class="vaanato">认识事物的本质</div>
</div> </div>
</div> </div>
@@ -19,16 +19,14 @@
<div class="previewmani"> <div class="previewmani">
<div class="alltalkcontainer"> <div class="alltalkcontainer">
<div class="inne"> <div class="inne">
<div class="takltitle">从营销角度分析我的团队需要这些能力</div> <div class="takltitle">{{ disDetail?.title }}</div>
<div class="taklcon"> <div class="taklcon" v-html="disDetail?.content"></div>
所谓团队协作能力是指建立在团队的基础之上发挥团队精神互补互助以达到团队最大工作效率的能力对于团队的成员来说不仅要有个人能力更需要有在不同的位置上各尽所能与其他成员协调合作的能力
</div>
<div class="tt clearfix"> <div class="tt clearfix">
<div class="ttin"> <div class="ttin">
请基于公司战略方向和你所负责的组织业务发展识别3个你和你的团队在未来3年的新的能力与技能要求 {{ discussInfo ? discussInfo : "-" }}
</div> </div>
</div> </div>
<div class="botime">2022-08-15 22:28</div> <div class="botime">{{ disDetail?.createTime }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -39,65 +37,106 @@
<div class="reshead"> <div class="reshead">
<div class="headn"> <div class="headn">
<div class="pl">评论</div> <div class="pl">评论</div>
<div class="ts">1992</div> <div class="ts">{{ hfPage?.total }}</div>
</div>
<div class="reply" :style="{ opacity: reply1Show ? 0 : 1 }">
<img
style="width: 28px; height: 28px; margin-right: 5px"
src="../../assets/image/uploadImg2.png"
/>
<el-input
type="text"
v-model="disComment.content"
resize="none"
maxlength="100"
placeholder="写评论~"
style="width: calc(100% - 40px)"
/>
</div>
<div class="reply" :style="{ opacity: reply1Show ? 1 : 0 }">
<el-input
type="text"
v-model="replayComment.content"
resize="none"
maxlength="100"
:placeholder="replayComment.placeholder"
style="width: calc(100% - 40px)"
@blur="reply1Blur"
class="replyInp"
/>
<img
style="width: 28px; height: 28px; margin-left: 5px"
src="../../assets/image/uploadImg2.png"
/>
</div> </div>
</div> </div>
<div class="linee"></div> <!-- <div class="linee"></div> -->
<div class="restorebox"> <div class="restorebox" v-for="(item, index) in commontList" :key="index">
<div class="restoremani"> <div class="restoremani">
<div <div class="rescon clearfix">
class="rescon clearfix"
v-for="(item, index) in restore"
:key="index"
>
<div class="head"> <div class="head">
<div> <div>
<img class="headavator" :src="item.head" /> <img class="headavator" :src="item.studentAvatar" />
</div> </div>
<div class="namehead"> <div class="namehead">
{{ item.name }} {{ item.createName }}
</div> </div>
</div> </div>
<div class="inner"> <div class="inner">
<div class="recon">{{ item.re }}</div> <div class="recon">{{ item.content }}</div>
<div class="botto"> <div class="botto">
<div class="time">{{ item.time }}</div> <div class="time">{{ item.createTime }}</div>
<div class="re">回复</div> <div class="re" @click="commentComment(item)">回复</div>
<div class="right"> <div class="right" @click="commentLike(item)">
<div class="good"> <div class="good">
<img src="../../assets/image/discuss/elsedianzan.png" /> <img
v-if="item.praised"
src="../../assets/image/discuss/elsedianzan1.png"
/>
<img
v-else
src="../../assets/image/discuss/elsedianzan.png"
/>
</div> </div>
<div class="gocount">67</div> <div class="gocount">{{ item.praiseNum || 0 }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="newre"> <div class="newre" v-if="item.children.length !== 0">
<div class="tri"></div> <div class="tri"></div>
<div class="reccon"> <div class="reccon">
<div class="rec clearfix"> <div class="rec clearfix">
<div <div
class="it" class="it"
v-for="(itemc, index) in newrestore" v-for="(itemc, key) in item.children"
:key="index" :key="key"
> >
<div class="ava"> <div class="ava">
<img class="avainner" :src="itemc.head" /> <img class="avainner" :src="itemc.studentAvatar" />
</div> </div>
<div class="redetail"> <div class="redetail">
<div class="rename">{{ itemc.name }}</div> <div class="rename">{{ itemc.createName }}</div>
<div class="rein">{{ itemc.re }}</div> <div class="rein">{{ itemc.content }}</div>
<div class="detre"> <div class="detre">
<div class="day">{{ itemc.time }}</div> <div class="day">{{ itemc.createTime }}</div>
<div class="huifu">回复</div> <div class="huifu" @click="commentComment(itemc)">
<div class="good"> 回复
</div>
<div class="good" @click="commentLike(itemc)">
<img <img
v-if="itemc.praised"
class="gimg"
src="../../assets/image/discuss/elsedianzan1.png"
/>
<img
v-else
class="gimg" class="gimg"
src="../../assets/image/discuss/elsedianzan.png" src="../../assets/image/discuss/elsedianzan.png"
/> />
<div class="gcou">0</div> <div class="gcou">{{ itemc.praiseNum || 0 }}</div>
</div> </div>
</div> </div>
<!-- <div class="line"></div> --> <!-- <div class="line"></div> -->
@@ -115,86 +154,281 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 重复上述 -->
<div class="linee"></div>
<div class="restorebox">
<div class="restoremani">
<div
class="rescon clearfix"
style="margin-bottom: 20px"
v-for="(item, index) in restore"
:key="index"
>
<div class="head">
<div>
<img class="headavator" :src="item.head" />
</div>
<div class="namehead">
{{ item.name }}
</div>
</div>
<div class="inner">
<div class="recon">{{ item.re }}</div>
<div class="botto">
<div class="time">{{ item.time }}</div>
<div class="re">回复</div>
<div class="right">
<div class="good">
<img src="../../assets/image/discuss/elsedianzan.png" />
</div>
<div class="gocount">67</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- 回复框 -->
<!-- <div class="reply1" v-if="reply1Show">
<el-input
type="text"
v-model="replayComment.content"
resize="none"
maxlength="100"
:placeholder="replayComment.placeholder"
style="width: calc(100% - 40px)"
@blur="reply1Blur"
:autofocus="autofocus"
/>
<img
style="width: 28px; height: 28px; margin-left: 5px"
src="../../assets/image/uploadImg2.png"
/>
</div> -->
</div> </div>
</template> </template>
<script> <script setup>
import { reactive, toRefs } from "vue"; import { reactive, ref } from "vue";
import ReturnHead from "@/components/ReturnHead.vue"; import ReturnHead from "@/components/ReturnHead.vue";
import px from "@/assets/image/discuss/px.jpg"; import px from "@/assets/image/discuss/px.jpg";
export default { import { request, useRequest } from "@/api/request";
name: "DiscussDetail", import {
components: { PostDetails,
ReturnHead, COMMENT_LIST,
DISCUSS_LIST,
COMMENT_PRAISE,
} from "@/api/api";
import { useRoute, useRouter } from "vue-router/dist/vue-router";
const {
query: { id, type, postID, targetId },
} = useRoute();
const restore = ref([
{
name: "罗宗梅",
time: "2022-09-01",
re: "教师基本功扎实,知识讲解准确,教学设计合理,始终以学生为主体,自主学习,小组交流讨论,上台交流展示等形式,师生配合默契,取得了较好的学习效果。",
head: px,
reimg: px,
}, },
setup() { ]);
const state = reactive({ const newrestore = ref([
restore: [ {
{ name: "赵雪梨",
name: "罗宗梅", time: "3天前",
time: "2022-09-01", re: "教学重难点突出,板书条理清晰。教学步骤设计合理由浅入深,循序渐进。",
re: "教师基本功扎实,知识讲解准确,教学设计合理,始终以学生为主体,自主学习,小组交流讨论,上台交流展示等形式,师生配合默契,取得了较好的学习效果。", head: px,
head: px, },
reimg: px, ]);
}, const disDetail = ref({});
], const commontList = ref([]);
const spreadReply = ref(-1);
const hfPage = ref({
currentPage: 1,
pageNo: 1,
pageSize: 10,
total: 0,
});
//获取讨论详情
const discussInfo = ref("");
request(DISCUSS_LIST, {
type: type == 1 ? 2 : 1,
id: targetId,
})
.then((e) => {
console.log("讨论详情", e);
discussInfo.value = e.data.discussDtoList[0].discussExplain;
})
.catch((err) => {
console.log(err);
});
newrestore: [ // 获取数据
{ const getData = () => {
name: "赵雪梨", useRequest(PostDetails, { id: postID }, (e) => {
time: "3天前", console.log("disDetail", e);
re: "教学重难点突出,板书条理清晰。教学步骤设计合理由浅入深,循序渐进。", disDetail.value = e.data;
head: px, console.log("查询帖子下的评论参数", {
}, statementId: e.data.discussId,
// { pageNo: 10,
// name: "赵雪梨", pageSize: 1,
// time: "三天前",
// re: "教学重难点突出,板书条理清晰。教学步骤设计合理由浅入深,循序渐进。",
// head: require("../../assets/image/discuss/px.jpg"),
// },
],
}); });
// 获取帖子下的评论
return { request(COMMENT_LIST, {
...toRefs(state), id: e.data.id,
}; type: 1,
}, pageNo: hfPage.value.currentPage,
pageSize: 10,
})
.then((res) => {
console.log("我是获取当前帖子的评论", res);
commontList.value = res.data.records;
hfPage.value.total = Number(res.data.total);
clearText();
})
.catch((err) => {
console.log(err);
});
});
}; };
getData();
// 查看更多-展开回复列表
function lookMore(i) {
i == spreadReply.value ? (spreadReply.value = -1) : (spreadReply.value = i);
}
// 清空回复及评论输入框
const clearText = () => {
disComment.value.content = "";
fileListComment.value = [];
fileListCommentRelpay.value = [];
replayComment.value.content = "";
};
// 回复分页
function handleCurrentChange(e, k) {
console.log("分页打印", e, k);
hfPage.value.currentPage = e;
hfPage.value.pageNo = e;
getData();
}
const commentSubmitFileList = ref([]);
const disComment = ref({
content: "",
});
const replayComment = ref({
placeholder: "",
content: "",
pid: "",
});
// 评论图片展示数组
const fileListComment = ref([]);
// 回复图片展示数组
const fileListCommentRelpay = ref([]);
// 上传图片成功返回的URL
const uploadBack = (e) => {
console.log("--------->", e);
fileListComment.value.push(e);
};
const uploadReplyBack = (e) => {
console.log("--------->", e);
fileListCommentRelpay.value.push(e);
};
function removeImg(i) {
fileListCommentRelpay.value.splice(i, 1);
}
function removeCommentImg(i) {
fileListComment.value.splice(i, 1);
}
function like() {
console.log(disDetail.value);
disDetail.value.praised
? (disDetail.value.praiseNum = Number(disDetail.value.praiseNum) - 1)
: (disDetail.value.praiseNum = Number(disDetail.value.praiseNum) + 1);
disDetail.value.praised = !disDetail.value.praised;
request(PostPraise, { targetId: disDetail.value.id, type: 3 });
}
function collection() {
disDetail.value.collected
? (disDetail.value.collectionNum =
Number(disDetail.value.collectionNum) - 1)
: (disDetail.value.collectionNum =
Number(disDetail.value.collectionNum) + 1);
disDetail.value.collected = !disDetail.value.collected;
request(PostPraise, { targetId: disDetail.value.id, type: 4 });
}
function commentLike(obj) {
obj.praised
? (obj.praiseNum = Number(obj.praiseNum) - 1)
: (obj.praiseNum = Number(obj.praiseNum) + 1);
obj.praised = !obj.praised;
request(COMMENT_PRAISE, { targetId: obj.id, type: 1 });
}
const reply1Show = ref(false);
const autofocus = ref(false);
function commentComment(obj) {
reply1Show.value = true;
// autofocus.value = true;
replayComment.value.placeholder = "@ " + obj.createName;
replayComment.value.pid = obj.id;
if (document.getElementsByClassName("replyInp")[0]) {
document
.getElementsByClassName("replyInp")[0]
.querySelector("input")
.focus();
}
console.log("获得焦点", document.getElementsByClassName("replyInp")[0]);
}
function reply1Blur() {
reply1Show.value = false;
// autofocus.value = false;
console.log("失去焦点");
// document.getElementsByClassName("replyInp")[0].querySelector("input").blur();
}
// function reply1Focus() {
// reply1Show.value = true;
// autofocus.value = true;
// }
// 提交评论
function submitComment() {
console.log(disDetail.value, fileListComment.value);
let imgFileUrl = [];
for (let i = 0; i < fileListComment.value.length; i++) {
imgFileUrl.push(fileListComment.value[i].url);
}
console.table("帖子评论参数", {
id: disDetail.value.id,
targetId: disDetail.value.id,
content: disComment.value.content,
type: 1,
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
});
request(COMMENT_ADD, {
targetId: disDetail.value.id,
content: disComment.value.content,
type: 1,
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
})
.then((res) => {
console.log(res);
getData();
})
.catch((err) => {
console.log(err);
});
}
// 回复评论
function submitReplayComment() {
let imgFileUrl = [];
for (let i = 0; i < fileListCommentRelpay.value.length; i++) {
imgFileUrl.push(fileListCommentRelpay.value[i].url);
}
console.table("帖子回复评论参数", {
id: disDetail.value.id,
targetId: disDetail.value.id,
content: replayComment.value.content,
type: 1,
pid: replayComment.value.pid,
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
});
request(COMMENT_ADD, {
targetId: disDetail.value.id,
content: replayComment.value.content,
type: 1,
pid: replayComment.value.pid,
img: imgFileUrl.length !== 0 ? imgFileUrl.toString() : "",
})
.then((res) => {
console.log(res);
getData();
})
.catch((err) => {
console.log(err);
});
}
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -355,8 +589,10 @@ export default {
.reshead { .reshead {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
height: 50px; align-items: center;
position: relative;
height: 100px;
.headn { .headn {
width: 90%; width: 90%;
display: flex; display: flex;
@@ -372,6 +608,13 @@ export default {
line-height: 50px; line-height: 50px;
} }
} }
.reply {
display: flex;
align-items: center;
width: 90%;
position: absolute;
bottom: 15px;
}
} }
.linee { .linee {
height: 0; height: 0;
@@ -381,7 +624,7 @@ export default {
.restorebox { .restorebox {
width: 100%; width: 100%;
// height: 200px; // height: 200px;
border-top: 1px solid #f1f2f3;
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
display: flex; display: flex;
@@ -484,6 +727,7 @@ export default {
} }
} }
.redetail { .redetail {
width: 100%;
margin-left: 12.5px; margin-left: 12.5px;
.rename { .rename {
color: #02172a; color: #02172a;
@@ -554,5 +798,13 @@ export default {
} }
} }
} }
.reply1 {
display: flex;
align-items: center;
width: 90%;
margin-left: 5%;
position: absolute;
bottom: 100px;
}
} }
</style> </style>

View File

@@ -1,18 +1,22 @@
<template> <template>
<div class="discusspage"> <div class="discusspage">
<ReturnHead text="讨论详情" :ispublish="true"></ReturnHead> <ReturnHead
text="讨论详情"
:ispublish="true"
:discussId="discussId"
></ReturnHead>
<div class="head clearfix"> <div class="head clearfix">
<div class="title"> <div class="title">
{{ {{
data && data.discussDtoList && data.discussDtoList.length !== 0 info && info.discussDtoList && info.discussDtoList.length !== 0
? data?.discussDtoList[0].discussName ? info?.discussDtoList[0].discussName
: "-" : "-"
}} }}
</div> </div>
<div class="title" style="margin-top: 0px"> <div class="title" style="margin-top: 0px">
{{ {{
data && data.discussDtoList && data.discussDtoList.length !== 0 info && info.discussDtoList && info.discussDtoList.length !== 0
? data?.discussDtoList[0].discussExplain ? info?.discussDtoList[0].discussExplain
: "-" : "-"
}} }}
</div> </div>
@@ -24,15 +28,15 @@
<div class="firstbtncontainer"> <div class="firstbtncontainer">
<div class="inbtn"> <div class="inbtn">
<button <button
@click="changee" @click="nowPost(info.discussDtoList[0].id)"
:class="onfo ? 'new samebtn' : 'samebtn hot'" :class="searchType === 1 ? 'new samebtn' : 'samebtn hot'"
> >
最新 最新
</button> </button>
<div class="dd"></div> <div class="dd"></div>
<button <button
@click="changeee" @click="hotPost(state.info.discussDtoList[0].id)"
:class="onfo ? 'samebtn hot' : 'new samebtn'" :class="searchType === 2 ? 'new samebtn' : 'samebtn hot'"
> >
最热 最热
</button> </button>
@@ -40,53 +44,61 @@
</div> </div>
<div class="discusscontainer clearfix"> <div class="discusscontainer clearfix">
<div class="item" v-for="(item, index) in discuss" :key="index"> <div class="item" v-for="(item, index) in postList" :key="index">
<div class="thinline"></div> <div class="thinline"></div>
<div class="coni"> <div class="coni" @click="goDetails(item)">
<div class="conin"> <div class="conin">
<div class="tit">{{ item.title }}</div> <div class="tit">{{ item.title }}</div>
<div class="inn">{{ item.contain }}</div> <div class="inn" v-html="item.content"></div>
</div> </div>
</div> </div>
<div class="thinline"></div> <div class="thinline"></div>
<div class="bott"> <div class="bott">
<div class="dicon"> <div class="dicon">
<div class="imgcont" @click="goDetails"> <div class="imgcont" @click="goDetails(item)">
<img <img
class="imgs" class="imgs"
src="../../assets/image/discuss/pinglun.png" src="../../assets/image/discuss/pinglun.png"
/> />
<div class="samei" style="margin-top: 2px"> <div class="samei" style="margin-top: 2px">
{{ item.pinglun }} {{ item.commentNum || 0 }}
</div> </div>
</div> </div>
<div class="imgcont"> <div class="imgcont" @click="like(item)">
<img <img
v-if="item.isGood" v-if="item.praised"
@click="getId(item)"
style="margin-left: 56px" style="margin-left: 56px"
class="imgs" class="imgs"
src="../../assets/image/discuss/dianzan2.png" src="../../assets/image/discuss/dianzan2.png"
/> />
<img <img
v-else v-else
@click="getId(item)"
style="margin-left: 56px" style="margin-left: 56px"
class="imgs" class="imgs"
src="../../assets/image/discuss/dianzan.png" src="../../assets/image/discuss/dianzan.png"
/> />
<div <div
:class="item.isGood ? 'sameii' : 'samei'" :class="item.praised ? 'sameii' : 'samei'"
style="margin-top: 2px" style="margin-top: 2px"
> >
{{ item.dianzan }} {{ item.praiseNum || 0 }}
</div> </div>
</div> </div>
</div> </div>
</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>
</div> </div>
@@ -106,124 +118,75 @@ import {
COMMENT_PRAISE, COMMENT_PRAISE,
DISCUSS_LIST, DISCUSS_LIST,
QueryDiscussSubmitDetailByDiscussId, QueryDiscussSubmitDetailByDiscussId,
PostList,
PostPraise,
} from "@/api/api"; } from "@/api/api";
const router = useRouter(); const router = useRouter();
const state = reactive({ const state = reactive({
onfo: true, onfo: true,
discuss: [ info: {},
// { pageNo: 1,
// id: 1, pageSize: 10,
// title: "从营销角度分析:我的团队需要这些能力", searchType: 1,
// contain: postList: [], //帖子列表
// "所谓团队协作能力,是指建立在团队的基础之上,发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...", total: 0, // 帖子总条数
// pinglun: 317, currentPage: 1,
// dianzan: 103, content: 1,
// isGood: false, discussId: null,
// }, noMore: false,
],
}); });
const { onfo, discuss } = toRefs(state); const {
const changee = () => { onfo,
if (state.onfo !== true) { discuss,
state.onfo = !state.onfo; info,
} pageNo,
}; pageSize,
const changeee = () => { searchType,
if (state.onfo == true) { postList, //帖子列表
state.onfo = !state.onfo; total, // 帖子总条数
} currentPage,
}; content,
const getId = (it) => { discussId,
it.isGood = !it.isGood; noMore,
if (it.isGood) { } = toRefs(state);
it.dianzan++;
} else {
it.dianzan--;
}
// console.log(it.isGood);
};
//获取讨论详情 //获取讨论详情
const { const {
query: { id, type }, query: { id, type },
} = useRoute(); } = useRoute();
const { data } = useRequest(DISCUSS_LIST, { id, type }); request(DISCUSS_LIST, {
console.log("获取讨论", data); 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) { function getPostList(discussId) {
console.log({ console.log("获取帖子参数", {
discussId: discussId, pid: discussId,
pageNo: state.pageNo, current: state.pageNo,
pageSize: state.pageSize, order: 1,
searchType: state.searchType,
}); });
request(QueryDiscussSubmitDetailByDiscussId, { request(PostList, {
discussId: discussId, pid: discussId,
pageNo: state.pageNo, current: state.pageNo,
pageSize: state.pageSize, order: state.content,
searchType: state.searchType,
}) })
.then((e) => { .then((e) => {
console.log("我是当前讨论下的帖子", e); console.log("我是当前讨论下的帖子", e);
state.postList = e.data.rows; state.postList = state.postList.concat(e.data.records);
state.total = e.data.total; state.total = Number(e.data.total);
if (e.data.records.length === 0) {
// 添加一条假的数据 供测试使用 state.noMore = true;
state.postList = [ }
{
createTime: "",
createUser: 0,
discussCollectionCount: "234",
discussId: "",
discussLikeCount: "3576",
discussReviewCount: "12353",
discussSubmitContent:
"帖子的内容----帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容",
discussSubmitId: "",
discussSubmitPictureAddress: "",
discussSubmitTitle: "我是一个用来测试的帖子标题",
stuId: "",
stuName: "",
updateTime: "",
updateUser: 0,
submitReviewVoList: [
{
createTime: "",
createUser: 0,
discussLikeCount: "",
discussReviewContent: "",
discussReviewFlag: "",
discussReviewId: "",
discussReviewPictureAddress: "",
discussSubmitId: "",
stuId: "",
stuName: "",
submitReplyVoList: [
{
createTime: "",
createUser: 0,
discussReplyId: 0,
discussReviewId: "",
replyContent: "",
replyFlag: "",
replyPictureAddress: "",
reviewStuId: "",
reviewStuName: "",
stuId: "",
stuName: "",
updateTime: "",
updateUser: 0,
},
],
updateTime: "",
updateUser: 0,
},
],
},
];
state.total = 100;
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
@@ -232,28 +195,63 @@ function getPostList(discussId) {
// 最新 // 最新
function nowPost(discussId) { function nowPost(discussId) {
state.content = 1;
state.searchType = 1; state.searchType = 1;
state.pageNo = 1; state.pageNo = 1;
state.currentPage = 1; state.currentPage = 1;
state.postList = [];
state.noMore = false;
getPostList(discussId); getPostList(discussId);
} }
// 最热 // 最热
function hotPost(discussId) { function hotPost(discussId) {
state.content = 2;
state.searchType = 2; state.searchType = 2;
state.pageNo = 1; state.pageNo = 1;
state.currentPage = 1; state.currentPage = 1;
state.postList = [];
state.noMore = false;
getPostList(discussId); getPostList(discussId);
} }
//跳转到讨论详情 //跳转到讨论详情
const goDetails = () => { const goDetails = (item) => {
console.log("item", item);
router.push({ router.push({
path: "/discussdetail", path: "/discussdetail",
// query: { query: {
// courseId: props.courseId, targetId: id,
// }, id: item.discussId,
type,
postID: item.id,
postName: state.info.discussDtoList[0].discussName,
},
}); });
}; };
// 帖子点赞
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> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -298,7 +296,7 @@ const goDetails = () => {
display: flex; display: flex;
justify-content: center; justify-content: center;
.previewmani { .previewmani {
// width: 90%; width: 100%;
margin-top: 17px; margin-top: 17px;
.firstbtncontainer { .firstbtncontainer {
width: 100%; width: 100%;
@@ -374,7 +372,7 @@ const goDetails = () => {
width: 100%; width: 100%;
.item { .item {
// width: 90%; width: 90%;
// position:relative; // position:relative;
.thinline { .thinline {
@@ -443,6 +441,16 @@ const goDetails = () => {
} }
} }
} }
.clickMoreBox {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 400;
color: #2478ff;
padding-bottom: 20px;
}
} }
} }
} }

View File

@@ -3,6 +3,7 @@
text="发讨论" text="发讨论"
:showpublish="true" :showpublish="true"
:publishWork="publishWork" :publishWork="publishWork"
v-model:postAdd="postAdd"
></ReturnHead> ></ReturnHead>
<div <div
class="discussupload" class="discussupload"
@@ -17,7 +18,7 @@
type="text" type="text"
id="input_title" id="input_title"
placeholder="请输入标题" placeholder="请输入标题"
v-model:value="disTitle" v-model="titleName"
/> />
</div> </div>
<div class="discusscontent"> <div class="discusscontent">
@@ -59,18 +60,35 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, toRefs, shallowRef, onBeforeUnmount } from "vue"; import {
reactive,
ref,
toRefs,
shallowRef,
onBeforeUnmount,
computed,
} from "vue";
import { request, useRequest } from "@/api/request";
import ReturnHead from "@/components/ReturnHead.vue"; import ReturnHead from "@/components/ReturnHead.vue";
import "@wangeditor/editor/dist/css/style.css"; import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { fileUp, videoUp } from "../../api/request"; import { fileUp, videoUp } from "../../api/request";
import { PostAdd } from "@/api/api";
import { ElLoading } from "element-plus"; import { ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import store from "@/store";
import { ElMessage } from "element-plus";
const router = useRouter();
const {
query: { discussId },
} = useRoute();
const state = reactive({ const state = reactive({
text: "", text: "",
textarea: "", textarea: "",
screenHeight: document.body.clientHeight, // 屏幕高度 screenHeight: document.body.clientHeight, // 屏幕高度
disTitle: null, disTitle: null,
}); });
const userInfo = computed(() => store.state.userInfo);
// 使用 // 使用
const loading = ref(false); // loading const loading = ref(false); // loading
const openLoading = () => { const openLoading = () => {
@@ -93,7 +111,7 @@ const editorRef = shallowRef();
// 内容 HTML // 内容 HTML
const valueHtml = ref(""); const valueHtml = ref("");
const titleName = ref("");
const toolbarConfig = { const toolbarConfig = {
excludeKeys: ["insertVideo", "uploadVideo", "insertImage", "group-video"], excludeKeys: ["insertVideo", "uploadVideo", "insertImage", "group-video"],
}; };
@@ -142,6 +160,41 @@ onBeforeUnmount(() => {
if (editor == null) return; if (editor == null) return;
editor.destroy(); editor.destroy();
}); });
// 发表帖子发布操作
const postAdd = () => {
console.log("用户信息", userInfo.value);
let obj = {
collectionNum: 0,
commentNum: 0,
content: valueHtml.value,
ctime: "",
discussId: discussId,
id: 0,
mtime: "",
praiseNum: 0,
status: 0,
title: titleName.value,
userAvatar: userInfo.value.avatar,
userId: userInfo.value.id,
userJobName: userInfo.value.jobName,
userName: userInfo.value.realName,
userOrgName: userInfo.value.orgName,
};
console.log("发表帖子传递的参数", obj);
request(PostAdd, obj)
.then((res) => {
console.log(res);
if (res.code == 200) {
ElMessage.success("发帖成功");
titleName.value = "";
valueHtml.value = "";
}
})
.catch((err) => {
console.log(err);
});
};
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@@ -81,14 +81,13 @@ console.log("外链信息", data);
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const goOuterChain = () => { const goOuterChain = () => {
console.log("userInfo", userInfo); console.log("userInfo", userInfo);
status != 1 && request(STUDY_RECORD, {
request(STUDY_RECORD, { studentId: userInfo.value.id,
studentId: userInfo.value.id, targetId: infoId,
targetId: infoId, logo: type,
logo: type, stageOrChapterId: chapterOrStageId,
stageOrChapterId: chapterOrStageId, taskId: taskId,
taskId: taskId, });
});
window.open(data.value.linkAddress, "_top"); window.open(data.value.linkAddress, "_top");
}; };

View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com * @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-19 11:28:11 * @Date: 2023-01-19 11:28:11
* @LastEditors: lixg lixg@dongwu-inc.com * @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-02-19 21:02:52 * @LastEditTime: 2023-02-20 10:45:25
* @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue * @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@@ -181,7 +181,7 @@ const handleClick = (tab, event) => {
const goDetails = () => { const goDetails = () => {
router.push({ router.push({
path: "/pathdetails", path: "/pathdetails",
query: { routerId: 397 }, query: { routerId: 404 },
}); });
// router.push({ // router.push({
// path: "/projectdetails", // path: "/projectdetails",

View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com * @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-13 11:42:48 * @Date: 2023-01-13 11:42:48
* @LastEditors: lixg lixg@dongwu-inc.com * @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-02-19 12:16:34 * @LastEditTime: 2023-02-20 11:20:13
* @FilePath: /stu_h5/vite.config.js * @FilePath: /stu_h5/vite.config.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@@ -113,6 +113,50 @@ export default defineConfig(({ command, mode }) =>
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL, target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true, changeOrigin: true,
}, },
'/statement/add': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/collection': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/delete': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/praise': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/update': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/list': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/stu/externalExam/submitExternalExam': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/comment/list': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/comment/add': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/comment/praise': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/comment/collection': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/info': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/getComments': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
}, '/statement/getMoreComments': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,
},
} }
} }