|
|
@@ -1,263 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="message">
|
|
|
- <div class="input-msg">
|
|
|
- <textarea name="" id="msg" cols="50" rows="5" v-model.trim="title" @keyup.enter="sendMsg"
|
|
|
- :placeholder="refer"></textarea>
|
|
|
- <el-button @click="sendMsg" type="primary" size="medium" > 发送信息 </el-button>
|
|
|
- </div>
|
|
|
- <div class="history">
|
|
|
- <div class="msg-item" v-for="msg in msgList" :key="msg.id">
|
|
|
- <div>
|
|
|
- <h3>用户：{{msg.author}}</h3>
|
|
|
- <p><small>{{msg.createTime | formatTime}}</small></p>
|
|
|
- <p class="cont">{{msg.title}}</p>
|
|
|
-
|
|
|
- <block v-if="msg.replyTime>0 && msg.reply!=''">
|
|
|
- <h3 style="color: red;">官方答复</h3>
|
|
|
- <p><small>{{msg.replyTime | formatTime}}</small></p>
|
|
|
- <p class="cont">{{msg.reply}}</p>
|
|
|
- </block>
|
|
|
-
|
|
|
- <p class="control">
|
|
|
- <el-button @click="replyMsg(msg)" type="primary" size="mini"> 回复 </el-button>
|
|
|
- <el-button v-if="msg.userId==userInfo.uid" @click="delMsg(msg.postId)" type="danger" size="mini"> 删除 </el-button>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- httpServer
|
|
|
- } from "@/components/httpServer/httpServer.js";
|
|
|
- import { mapGetters } from "vuex";
|
|
|
- import { MessageBox } from "element-ui";
|
|
|
- export default {
|
|
|
- created() {
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- page: 1,
|
|
|
- size: 6,
|
|
|
- total: 0,
|
|
|
- refer:'',
|
|
|
- title: "",
|
|
|
- msgList: [],
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- mediaId(){
|
|
|
- this.page = 1
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters("user", ["userInfo"])
|
|
|
- },
|
|
|
- onShow(){
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- props:['mediaId', "id"],
|
|
|
- methods: {
|
|
|
- loadData(){
|
|
|
- if( !this.mediaId ) return;
|
|
|
- let param = {
|
|
|
- mediaId: this.mediaId,
|
|
|
- page: this.page,
|
|
|
- size: this.size
|
|
|
- }
|
|
|
- httpServer( "Course.GetUserPostMediaList", param).then(res=>{
|
|
|
- if( res.code != 200) return;
|
|
|
- this.total = res.data.total;
|
|
|
- this.msgList = res.data.list||[];
|
|
|
- })
|
|
|
- },
|
|
|
- sendMsg() {
|
|
|
- if (this.title === "") {
|
|
|
- alert("留言内容为空")
|
|
|
- return
|
|
|
- }
|
|
|
- let title = this.refer +this.title
|
|
|
- let param = {title, mediaId: this.mediaId};
|
|
|
- httpServer( "Course.AddPostMedia", param).then(res=>{
|
|
|
- if( res.code != 200) return;
|
|
|
- this.title = '';
|
|
|
- this.refer = '';
|
|
|
- param.userId = this.userInfo.uid;
|
|
|
- param.author = this.userInfo.nickname;
|
|
|
- param.createTime = parseInt(Date.now()/1000)
|
|
|
- this.msgList.push( param )
|
|
|
- this.total += 1
|
|
|
- })
|
|
|
- },
|
|
|
- doDelMsg(postId){
|
|
|
- let param = {postId};
|
|
|
- httpServer( "Course.DeletePostMedia", {postId}).then(res=>{
|
|
|
- if( res.code != 200) return;
|
|
|
- this.loadData()
|
|
|
- })
|
|
|
- },
|
|
|
- replyMsg(msg){
|
|
|
- let title = msg.title||''
|
|
|
- if( title.substr(0,2) == '回复'){
|
|
|
- title = title.split('\n')[1];
|
|
|
- }
|
|
|
- this.refer = `回复 @${msg.author}:${title}\n`
|
|
|
- },
|
|
|
- delMsg(postId) {
|
|
|
- let that = this
|
|
|
- MessageBox({
|
|
|
- title: "删除信息",
|
|
|
- message: "删除之后不可恢复，是否确认删除！！",
|
|
|
- showCancelButton: true,
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- beforeClose: (action, instance, done) => {
|
|
|
- if (action === "confirm") {
|
|
|
- instance.confirmButtonLoading = true;
|
|
|
- instance.confirmButtonText = '提交中...';
|
|
|
- that.doDelMsg(postId);
|
|
|
- done();
|
|
|
- instance.confirmButtonLoading = false;
|
|
|
- that.dialogVisible = true;
|
|
|
-
|
|
|
- } else{
|
|
|
- done();
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- filters: {
|
|
|
- formatTime: value => {
|
|
|
- const date = new Date(value*1000);
|
|
|
- return `${date.getFullYear()}年${(date.getMonth()+1).toString().padStart(2,0)}月${date.getDate().toString().padStart(2,0)}日 ${date.getHours().toString().padStart(2,0)}时${date.getMinutes().toString().padStart(2,0)}分${date.getSeconds().toString().padStart(2,0)}秒`
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<!-- 如果想让这里编写的样式只对当前组件有效，style上添加一个scoped属性-->
|
|
|
-<style scoped>
|
|
|
- .input-msg {
|
|
|
- width: 80%;
|
|
|
- margin: 10px auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- #msg {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- padding: 10px;
|
|
|
- outline: none;
|
|
|
- border: 1px solid rgba(219, 73, 73, 0.466);
|
|
|
- border-radius: 5px;
|
|
|
- resize: none;
|
|
|
- display: block;
|
|
|
- margin: 10px auto;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .send-msg {
|
|
|
- width: 200px;
|
|
|
- height: 40px;
|
|
|
- border: none;
|
|
|
- background-color: orangered;
|
|
|
- color: wheat;
|
|
|
- border-radius: 20px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .send-msg:hover {
|
|
|
- background-color: rgb(34, 231, 109);
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .history {
|
|
|
- width: 80%;
|
|
|
- padding: 20px 10px;
|
|
|
- margin: 10px auto;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .msg-item {
|
|
|
- display: flex;
|
|
|
- padding: 10px;
|
|
|
- border-bottom: 1px dashed #888;
|
|
|
- }
|
|
|
-
|
|
|
-/* .msg-item img {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 10px;
|
|
|
- } */
|
|
|
-
|
|
|
- .msg-item div {
|
|
|
- margin-left: 10px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .msg-item div h2 {
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .msg-item div h2 small {
|
|
|
- font-size: 16px;
|
|
|
- color: #888;
|
|
|
- font-weight: 600;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .msg-item div p.cont {
|
|
|
- font-size: 16px;
|
|
|
- color: #444;
|
|
|
- margin: 10px 0;
|
|
|
- word-wrap: break-word;
|
|
|
- word-wrap: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
- min-height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .control {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- .reply{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
- border: 1px solid #888;
|
|
|
- border-radius: 15px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-edit {
|
|
|
- background-color: rgb(20, 187, 247);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-edit:hover {
|
|
|
- background-color: rgb(17, 148, 196);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-del {
|
|
|
- background-color: rgb(247, 20, 88);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-del:hover {
|
|
|
- background-color: rgb(192, 21, 72);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-</style>
|
