hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-13 04:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

讨论

Browse Source
This commit is contained in:
yuping
2022-12-12 12:29:04 +08:00
parent 8227ce538c
commit ea0d1f6fa6
4 changed files with 130 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/api.js
View File

@@ -34,7 +34,7 @@ export const EXAMINATION_QUERYEXAMINATIONDETAILBYID = '/examination/queryExamina
export const DISCUSS_COLLECTION = '/discussSubmit/clickDiscussCollectionCountOr post'
export const DISCUSS_LIKE = '/discussSubmit/clickDiscussLikeCountOr post'
export const DISCUSS_LIST = '/discussSubmit/list'
export const DISCUSS_DETAIL = '/discuss/getDiscussDetail'
export const DISCUSS_DETAIL = '/discussSubmit/detail'
export const DISCUSS_SUBMIT_REVIEW_LIST = '/discussSubmit/queryDiscussSubmitAndReview'
export const COMMENT_LIST = '/comment/list'

52
src/api/request.js
View File

@@ -1,28 +1,64 @@
import router from "@/router";
import {ref, watch} from "vue";
import {reactive, ref, toRefs, watch} from "vue";
import axios from 'axios';
export function usePage(_url, param) {
const state = reactive({
data: {},
loading: false,
total: 0,
size: 10,
current: 1,
params: {pageNo: 1, pageSize: 10, ...param}
})
watch(param, () => {
state.params = {...state.params, ...param}
fetchData()
})
function fetchData() {
state.loading = true
request(_url, state.params).then(r => {
state.params.pageNo === 1 ? (state.data = r.data.records) : (state.data = [...state.data, ...r.data.records])
state.size = r.data.size
state.total = r.data.total
state.current = r.data.current
state.loading = false
})
}
fetchData()
return {
...toRefs(state),
fetchData,
};
}
export function useRequest(_url, params = {}) {
const data = ref({})
const loading = ref(false)
const state = reactive({
data: {},
loading: false,
})
watch(params, () => {
fetchData()
})
function fetchData() {
loading.value = true
state.loading = true
request(_url, params).then(r => {
data.value = r.data
loading.value = false
state.data = r.data
state.loading = false
})
}
fetchData()
return {
data,
loading,
...toRefs(state),
fetchData,
};
}

19
src/views/discuss/DiscussPage.vue
View File

@@ -39,21 +39,18 @@
<div class="title">
{{ projectInfo.name }}
</div>
<!-- todo #讨论页面 发表帖子跳转到哪里-->
<button class="btn">发表帖子</button>
<!-- <button class="btn">发表帖子</button>-->
</div>
<div v-for="(item,i) in projectInfo.stageVoList" :key="i">
<div class="line clearfix">
<div class="linetitle">{{ item.name }}</div>
<div class="radi"></div>
<!-- todo #讨论页面 状态字段没有-->
<div class="intime">进行中</div>
</div>
<div class="allbtn">
<!-- todo #讨论页面 查询条件最新 最热 查询字段-->
<button :class="`btnone ${param.searchType==1?'active':''}`" @click="param.searchType=1">最新</button>
<button :class="`btntwo ${param.searchType==2?'active':''}`" @click="param.searchType=2"
<button :class="`btnone ${param.searchType==1?'active':''}`" >最新</button>
<button :class="`btntwo ${param.searchType==2?'active':''}`"
style="margin-left: 20px">最热
</button>
</div>
@@ -115,13 +112,13 @@ function comment({discussId: id}) {
function like(d) {
d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1)
d.praised = !d.praised
request(COMMENT_PRAISE, {targetId: d.discussId, type: 5})
request(COMMENT_PRAISE, {targetId: d.discussId, type: 3})
}
function collection(d) {
d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1)
d.collected = !d.collected
request(COMMENT_COLLECTION, {targetId: d.discussId, type: 6})
request(COMMENT_COLLECTION, {targetId: d.discussId, type: 4})
}
</script>
@@ -174,9 +171,7 @@ function collection(d) {
background: #ffffff;
border-radius: 8px;
margin-top: 24px;
// display: flex;
// flex-direction: column;
// align-items: center;
display: block;
.middletitle {
display: flex;
margin-top: 64px;
@@ -216,7 +211,7 @@ function collection(d) {
.line {
display: flex;
margin: 47px 45px 0 75px;
max-width: 1810px;
//max-width: 1810px;
// height: 50px;
background: #f9f9f9;
position: relative;

168
src/views/discussdetail/DiscussDetail.vue
View File

@@ -37,37 +37,36 @@
<!-- 中间部分 -->
<div class="middletitle">
<div class="title">
{{ disDetail.discussName }}
{{ disDetail.projectName }}
</div>
<!--todo #帖子评论详情 回复功能点击后去哪里-->
<button class="btn">回复</button>
</div>
<div class="line clearfix">
<div class="linetitle">{{ disDetail.discussExplain }}</div>
<div class="linetitle">{{ disDetail.stageName }}</div>
<div class="radi"></div>
<!--todo #帖子评论详情 缺少状态字段-->
<div class="intime">进行中</div>
</div>
<div class="discusscontent clearfix">
<div class="contenttop clearfix">
<div class="contenttitle">{{ data.discussSubmitTitle }}</div>
<div @click="like(data.discussId)"
<div class="contenttitle">{{ disDetail.discussName }}</div>
<div @click="like()"
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px">
<span class="iconfont icon-dianzan" :style="{color:data.isLike?'red':'#b3bdc4',marginLeft: '19px'}"></span>
<div class="count"> {{ data.discussLikeCount }}</div>
<span class="iconfont icon-dianzan"
:style="{color:disDetail.praised?'red':'#b3bdc4',marginLeft: '19px'}"></span>
<div class="count"> {{ disDetail.praiseNum || 0 }}</div>
</div>
<div @click="collection(data.discussId)"
<div @click="collection()"
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px">
<span class="iconfont icon-shoucang"
:style="{color:data.isCollection?'red':'#b3bdc4',marginLeft: '19px'}"></span>
<div class="count"> {{ data.discussCollectionCount }}</div>
:style="{color: disDetail.collected?'red':'#b3bdc4',marginLeft: '19px'}"></span>
<div class="count"> {{ disDetail.collectionNum || 0 }}</div>
</div>
</div>
<div class="contentmid">
{{ data.discussSubmitTitle }}
{{ disDetail.discussExplain }}
</div>
</div>
</div>
@@ -75,15 +74,14 @@
<div class="bascinfor">
<div class="inputone">
<el-input
v-model="textarea1"
v-model="disComment.content"
:autosize="{ minRows: 5, maxRows: 5 }"
resize="none"
maxlength="100"
type="textarea"
placeholder="写评论~"
@input="textareaInput"
/>
<div class="words">{{ textarealength }}/100</div>
<div class="words">{{ disComment.content.length }}/100</div>
<div class="upload">
<div style="display: flex">
<div class="allimg" v-for="(img,i) in commentSubmitFileList">
@@ -105,62 +103,61 @@
<div class="thinline"></div>
<div class="bottom">
<div v-for="(row,i) in data.submitReviewVoList">
<div v-for="(row,i) in commontList">
<div class="header">
<div class="avator"></div>
<div class="id">{{ row.stuName }}</div>
<!--todo #帖子评论详情 评论人名称后面有个（显示事业）？-->
<div class="id">{{ row.userName }}</div>
<div class="showCareer">(显示事业)</div>
<div class="idThink">理性思考，崇尚科学</div>
</div>
<div class="discuss clearfix">
<div class="discussmain clearfix">
<div class="talkmain">
{{ row.discussReviewContent }}
{{ row.content }}
</div>
</div>
<!--todo #帖子评论详情 评论评论中缺少点赞数 是否点赞字段-->
<div class="intime">{{ row.createTime }}</div>
<div class="intime">{{ row.ctime }}</div>
<div class="likeYou">
<div @click="commentComment(row)" style="display: flex;cursor: pointer;align-items: baseline;">
<span class="iconfont icon-pinglun" :style="{color:'#b3bdc4'}"></span>
<div class="count"> {{ row.discussLikeCount }}</div>
<span class="iconfont icon-pinglun"
:style="{color:'#b3bdc4'}"></span>
<!-- <div class="count"> {{ row.praiseNum || 0 }}</div>-->
</div>
<div @click="commentLike(row)"
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px">
<span class="iconfont icon-shoucang"
:style="{color:data.submitReviewVoList[i].isLike?'red':'#b3bdc4'}"></span>
<div class="count"> {{ row.discussLikeCount }}</div>
<span class="iconfont icon-dianzan"
:style="{color:row.praised?'red':'#b3bdc4'}"></span>
<div class="count"> {{ row.praiseNum || 0 }}</div>
</div>
</div>
<div v-for="(replay,j) in row.submitReplyVoList">
<div v-for="(replay,j) in row.children">
<div class="reply">
<div class="sameava avaone"></div>
<div class="sameuser">{{ replay.stuName }}</div>
<div class="sameuser">{{ replay.userName }}</div>
<div class="centerreply">回复</div>
<div class="sameava avatwo"></div>
<div class="sameuser">{{ row.stuName }}</div>
<div class="replytime">{{ replay.createTime }}</div>
<div class="sameuser">{{ row.userName }}</div>
<div class="replytime">{{ replay.ctime }}</div>
</div>
<div class="allreplyimg">
<div class="singleimg"></div>
</div>
<div class="mainreply">
<div class="replydetail">
{{ replay.replyContent }}
{{ replay.content }}
</div>
<!-- <div class="talk"></div> -->
</div>
<div class="likeYou">
<div @click="commentComment(replay)" style="display: flex;cursor: pointer;align-items: baseline;">
<span class="iconfont icon-pinglun" :style="{color:'#b3bdc4'}"></span>
<div class="count"> {{ replay.discussLikeCount }}</div>
<!-- <div class="count"> {{ replay.commentNum }}</div>-->
</div>
<div @click="commentLike(replay)"
style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px">
<span class="iconfont icon-shoucang"
:style="{color:replay.isLike?'red':'#b3bdc4'}"></span>
<div class="count"> {{ replay.discussLikeCount }}</div>
<span class="iconfont icon-dianzan"
:style="{color:replay.praised?'red':'#b3bdc4'}"></span>
<div class="count"> {{ replay.praiseNum || 0 }}</div>
</div>
</div>
</div>
@@ -171,15 +168,14 @@
<div class="discuss clearfix">
<div class="inreply">
<el-input
v-model="textarea2"
v-model="replayComment.content"
:autosize="{ minRows: 5, maxRows: 5 }"
resize="none"
maxlength="100"
type="textarea"
@input="textareaInputdown"
:placeholder="placeholder"
:placeholder="replayComment.placeholder"
/>
<div class="words">{{ textarealength2 }}/100</div>
<div class="words">{{ replayComment.content.length }}/100</div>
<div class="upload">
<div style="display: flex">
<div class="allimg" v-for="(img,i) in fileList">
@@ -194,8 +190,7 @@
<div class="shangchuan">上传图片</div>
</button>
</UploadImg>
<!--todo #帖子评论详情 评论和回复评论的层级关系 只有2级？-->
<button class="btntwo">发表</button>
<button class="btntwo" @click="submitReplayComment">发表</button>
</datagrid>
</div>
</div>
@@ -209,51 +204,33 @@
<script setup>
import {reactive, ref, toRefs} from "vue";
import {useRoute} from "vue-router/dist/vue-router";
import {request, useRequest} from "@/api/request";
import {request, usePage, useRequest} from "@/api/request";
import {
DISCUSS_COLLECTION,
COMMENT_ADD,
COMMENT_COLLECTION,
COMMENT_LIST, COMMENT_PRAISE,
DISCUSS_DETAIL,
DISCUSS_LIKE,
DISCUSS_LIST,
DISCUSS_SUBMIT_REVIEW_LIST,
FILE_UPLOAD
} from "@/api/api";
import UploadImg from '@/components/img/UploadImg.vue'
const {query: {id: discussSubmitId, discussId}} = useRoute()
const {query: {id, discussSubmitId}} = useRoute()
const {data} = useRequest(DISCUSS_SUBMIT_REVIEW_LIST, {discussSubmitId})
const {data: commontList, fetchData: commonFetch} = usePage(COMMENT_LIST, {id, type: 1})
const {data: disDetail} = useRequest(DISCUSS_DETAIL, {discussId})
const {data: disDetail} = useRequest(DISCUSS_DETAIL, {id})
const fileList = ref([])
const commentSubmitFileList = ref([])
const state = reactive({
textarea1: "",
textarealength: 0,
textarea2: "",
textarealength2: 0,
const disComment = ref({
content: '',
})
const replayComment = ref({
placeholder: '',
rId:''
});
const {
textarea1,
textarealength,
textarea2,
textarealength2,
placeholder
} = toRefs(state)
const textareaInput = (e) => {
state.textarea1 = e;
state.textarealength = e.length;
};
const textareaInputdown = (e) => {
state.textarea2 = e;
state.textarealength2 = e.length;
};
content: '',
pid: ''
})
function removeImg(i) {
fileList.value.splice(i, 1)
@@ -263,34 +240,46 @@ function removeCommentImg() {
commentSubmitFileList.value.splice(i, 1)
}
//todo 帖子是否点赞收藏
function like(discussSubmitId) {
data.value.isLike ? (data.value.discussLikeCount -= 1) : (data.value.discussLikeCount += 1)
data.value.isLike = !data.value.isLike
request(DISCUSS_LIKE, {discussSubmitId})
//todo 帖子和评论 返回是否点赞和收藏
function like() {
disDetail.value.praised ? (disDetail.value.praiseNum -= 1) : (disDetail.value.praiseNum += 1)
disDetail.value.praised = !disDetail.value.praised
request(COMMENT_PRAISE, {targetId: disDetail.value.discussId, type: 5})
}
function collection(discussSubmitId) {
data.value.isCollection ? (data.value.discussCollectionCount -= 1) : (data.value.discussCollectionCount += 1)
data.value.isCollection = !data.value.isCollection
request(DISCUSS_COLLECTION, {discussSubmitId})
function collection() {
disDetail.value.collected ? (disDetail.value.collectionNum -= 1) : (disDetail.value.collectionNum += 1)
disDetail.value.collected = !disDetail.value.collected
request(COMMENT_COLLECTION, {targetId: disDetail.value.discussId, type: 6})
}
function commentLike(obj) {
obj.isLike ? (obj.discussLikeCount -= 1) : (obj.discussLikeCount += 1)
obj.isLike = !obj.isLike
const discussSubmitId = obj.discussSubmitId
request(DISCUSS_LIKE, {discussSubmitId})
obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1)
obj.praised = !obj.praised
request(COMMENT_PRAISE, {targetId: obj.id, type: 5})
}
function commentComment(obj) {
state.placeholder = '@ '+obj.stuName
state.rId = obj.discussSubmitId
replayComment.value.placeholder = '@ ' + obj.userName
replayComment.value.pid = obj.id
}
function submitComment() {
request(COMMENT_ADD, {targetId: disDetail.value.discussId, content: disComment.value.content, type: 1}).then(() => {
commonFetch()
})
}
function submitReplayComment() {
request(COMMENT_ADD, {
targetId: disDetail.value.discussId,
content: replayComment.value.content,
type: 2,
pid: replayComment.value.pid
}).then(() => {
commonFetch()
})
}
</script>
@@ -378,7 +367,6 @@ function submitComment() {
.line {
display: flex;
margin: 47px 45px 0 75px;
max-width: 1810px;
height: 50px;
background: #f9f9f9;
position: relative;