mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 17:36:45 +08:00
327 lines
7.9 KiB
Vue
327 lines
7.9 KiB
Vue
<template>
|
|
<ReturnHead
|
|
text="发讨论"
|
|
:showpublish="true"
|
|
:publishWork="publishWork"
|
|
v-model:postAdd="postAdd"
|
|
></ReturnHead>
|
|
<div
|
|
class="discussupload"
|
|
:style="{
|
|
height: screenHeight - 73.5 + 'px',
|
|
}"
|
|
>
|
|
<div class="inputcontainer">
|
|
<div class="inputt">
|
|
<div class="i_title">
|
|
<el-input
|
|
type="text"
|
|
id="input_title"
|
|
placeholder="请输入标题"
|
|
v-model="titleName"
|
|
/>
|
|
</div>
|
|
<div class="discusscontent">
|
|
<!-- <el-input
|
|
type="textarea"
|
|
placeholder="请输入正文"
|
|
v-model="textarea"
|
|
autosize
|
|
></el-input> -->
|
|
<Toolbar
|
|
style="border-bottom: 1px solid #ccc"
|
|
:editor="editorRef"
|
|
:defaultConfig="toolbarConfig"
|
|
:mode="mode"
|
|
/>
|
|
<Editor
|
|
style="min-height: 300px; overflow-y: hidden"
|
|
v-model="valueHtml"
|
|
:defaultConfig="editorConfig"
|
|
:mode="mode"
|
|
@onCreated="handleCreated"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="imgcon">
|
|
<div class="linecon">
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="allimg">
|
|
<img src="../../assets/image/discuss/images.png" />
|
|
<img src="../../assets/image/discuss/pre.png" />
|
|
<img src="../../assets/image/discuss/next.png" />
|
|
<img src="../../assets/image/discuss/delete.png" />
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref,
|
|
toRefs,
|
|
shallowRef,
|
|
onBeforeUnmount,
|
|
computed,
|
|
} from "vue";
|
|
import { request, useRequest } from "@/api/request";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import "@wangeditor/editor/dist/css/style.css";
|
|
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
|
import { fileUp, videoUp } from "../../api/request";
|
|
import { PostAdd } from "@/api/api";
|
|
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({
|
|
text: "",
|
|
textarea: "",
|
|
screenHeight: document.body.clientHeight, // 屏幕高度
|
|
disTitle: null,
|
|
});
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
// 使用
|
|
const loading = ref(false); // loading
|
|
const openLoading = () => {
|
|
loading.value = ElLoading.service({
|
|
lock: true,
|
|
text: "Loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
};
|
|
const closeLoading = () => {
|
|
loading.value.close();
|
|
};
|
|
//发布讨论
|
|
const publishWork = () => {
|
|
console.log("点击了发布");
|
|
};
|
|
|
|
// 编辑器实例，必须用 shallowRef
|
|
const editorRef = shallowRef();
|
|
|
|
// 内容 HTML
|
|
const valueHtml = ref("");
|
|
const titleName = ref("");
|
|
const toolbarConfig = {
|
|
excludeKeys: ["insertVideo", "uploadVideo", "insertImage", "group-video"],
|
|
};
|
|
|
|
const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
|
|
|
|
editorConfig.MENU_CONF["uploadImage"] = {
|
|
// 自定义上传
|
|
async customUpload(file, insertFn) {
|
|
openLoading();
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
fileUp(formData).then((res) => {
|
|
closeLoading();
|
|
if (res.data.code === 200) {
|
|
// 最后插入图片 url alt href
|
|
insertFn(res.data.data, file.name, res.data.data);
|
|
}
|
|
});
|
|
},
|
|
};
|
|
editorConfig.MENU_CONF["uploadVideo"] = {
|
|
// 自定义上传
|
|
async customUpload(file, insertVideoFn) {
|
|
openLoading();
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
console.log("file", file, insertVideoFn);
|
|
videoUp(formData).then((res) => {
|
|
console.log("res", res);
|
|
if (res.data.code === 200) {
|
|
closeLoading();
|
|
// 最后插入图片 url alt href
|
|
insertVideoFn(res.data.data, file.name, res.data.data);
|
|
}
|
|
});
|
|
},
|
|
};
|
|
|
|
const handleCreated = (editor) => {
|
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
|
};
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
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>
|
|
|
|
<style lang="scss">
|
|
.clearfix:before,
|
|
clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.discussupload {
|
|
width: 100%;
|
|
// height: 100%;
|
|
background-color: #fff;
|
|
// margin-top: 73.5px;
|
|
.inputcontainer {
|
|
margin-top: 10px;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
// height: 100px;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// height: 80%;
|
|
height: 100%;
|
|
.inputt {
|
|
width: 100%;
|
|
height: calc(100% - 79px);
|
|
// height: 100px;
|
|
// padding-bottom: 79px;
|
|
|
|
.discusscontent {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.i_title {
|
|
margin-left: 16.5px;
|
|
width: 90%;
|
|
border-bottom: 1px solid #f1f2f3;
|
|
margin-bottom: 5px;
|
|
::-webkit-input-placeholder {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #04243c;
|
|
}
|
|
:-ms-input-placeholder {
|
|
font-size: 16px;
|
|
color: #04243c;
|
|
}
|
|
#input_title {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 18.5px auto 21px 0px;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
.el-input__wrapper {
|
|
background-color: rgba(255, 255, 255, 0);
|
|
box-shadow: 0 0 0 0px var(--el-input-hover-border-color) inset;
|
|
}
|
|
.el-input__wrapper:hover {
|
|
box-shadow: 0 0 0 0px var(--el-input-hover-border-color) inset;
|
|
}
|
|
.el-input__wrapper:focus {
|
|
box-shadow: 0 0 0 0px var(--el-input-hover-border-color) inset;
|
|
}
|
|
}
|
|
::v-deep .el-textarea__inner {
|
|
resize: none;
|
|
border-color: transparent;
|
|
height: 100%;
|
|
}
|
|
::v-deep .el-textarea:focus {
|
|
border-color: transparent;
|
|
}
|
|
::v-deep .el-textarea {
|
|
height: 100%;
|
|
}
|
|
.el-textarea__inner {
|
|
border: 0 !important;
|
|
resize: none !important; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
|
|
box-shadow: none !important;
|
|
padding: 16px 18px;
|
|
}
|
|
.el-textarea__inner:hover {
|
|
box-shadow: none !important;
|
|
border: 0 !important;
|
|
}
|
|
.el-textarea__inner:focus {
|
|
border: none;
|
|
border: 0 !important;
|
|
}
|
|
.imgcon {
|
|
// margin-top: 24.5px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
.linecon {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.line {
|
|
width: 90%;
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
}
|
|
}
|
|
.allimg {
|
|
width: 70%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 24.5px;
|
|
margin-top: 24.5px;
|
|
img {
|
|
width: 20px;
|
|
height: 19px;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|