rt-sim-training-client/src/views/newMap/displayNew/demon/messageBoard.vue

<template>
  <el-dialog
    id="elDialog"
    title="留言板"
    :visible.sync="dialogVisible"
    fullscreen
    center
    :before-close="handleClose"
  >
    <el-card class="box-card" style="width: 80%;margin-left: 10%;padding: 20px;margin-bottom: 20px;background-color: rgba(255,255,255,0)">
      <div v-if="postCommentList.length">
        <template v-for="(item,i) in postCommentList">
          <div :key="i" style="border: 1px solid #C0C0C0;border-radius: 5px;margin-bottom: 20px;box-shadow: 2px 2px 3px #808080;padding: 10px;background-color: #fff">
            <div style="margin-bottom: 10px;display: flex;align-items: center;">
              <img :src="avatarUrl(item)" class="head_portrait">
              <div style="display: inline-block;margin-right: 20px;margin-left:10px;font-size: 18px;color: #000;">{{ item.creatorNickName }}</div>
              <div style="display: inline-block;">{{ item.createTime }}</div>
            </div>
            <div style="margin-left: 60px;" v-html="$escapeHTML(`${item.content}`)" />
          </div>
        </template>
      </div>
      <div v-else style="text-align: center;width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #ccc;">
        <span>暂无评论</span>
      </div>
      <div style="width: 100%;text-align: center;">
        <el-pagination
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next,jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <quill-editor ref="quillEditor" v-model="content" style="width: 80%;margin-left: 10%;" placeholder="请输入内容" :margin-bottom="20" :unload-img="true" :noHandleP="true" />
    <span id="boardBottom" class="dialog-footer">
      <el-button @click="handleClear">清空</el-button>
      <el-button type="primary" @click="commitComment">留言</el-button>
      <el-button type="danger" @click="dialogVisible = false">返回</el-button>
    </span>
    <el-button size="mini" type="danger" style="position: fixed; right: 100px;top: 80px;" @click="goSlide">我要留言</el-button>
    <div v-show="imgShow" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.5);" @click="handelCloseImg">
      <img id="targetImg" src="" style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);min-width: 500px;max-height: 80%;height: auto;">
    </div>
  </el-dialog>
</template>

<script>
import { answerPost, queryPostPaging } from '@/api/learn';
export default {
    name: 'MessageBoard',
    data() {
        return {
            dialogVisible: false,
            content: '',
            postCommentList: [],
            pageSize: 10,
            pageNum: 0,
            total: 0,
            imgShow: false
        };
    },
    created() {
        const that = this;
        window.handleZoomImg = function () {
            that.imgShow = true;
            document.getElementById('targetImg').src = event.target.currentSrc;
        };
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        doShow() {
            this.handleCurrentChange();
            this.dialogVisible = true;
        },
        commitComment() {
            const images = this.content.match(/<img/g);
            if (images && images.length > 3) {
                this.$message.error('留言内容使用图片应小于三张！');
                return;
            }
            answerPost({postId: 1, content: this.content}).then(resp => {
                this.handleCurrentChange();
                this.$message.success('留言成功 ！');
                this.content = '';
            }).catch(error => {
                this.$message.error('留言失败 ！');
            });
        },
        handleCurrentChange() {
            queryPostPaging(1, {pageSize: this.pageSize, pageNum: this.pageNum}).then(resp => {
                this.postCommentList = [];
                (resp.data.list || []).forEach(item => {
                    const value = item.content.replace(/<img/g, '<img style="width: 100px;height: auto;cursor: zoom-in;" onclick="handleZoomImg()"');
                    item.content = value;
                    this.postCommentList.push(item);
                });
                this.total = resp.data.total;
            });
        },
        goSlide() {
            const bottom = document.getElementById('boardBottom');
            const element = document.getElementById('elDialog').childNodes[0];
            element.scrollTop = bottom.offsetTop;
            this.$refs.quillEditor.getFocus();
        },
        avatarUrl(val) {
            if (val && val.creatorAvatarPath) {
                return 'https://joylink.club/oss/joylink' + val.creatorAvatarPath;
            } else {
                return 'https://joylink.club/oss/wxmicro_assistant/userhead/defaultuser.png';
            }
        },

        handleClear() {
            this.content = '';
        },
        handelCloseImg() {
            this.imgShow = false;
            document.getElementById('targetImg').src = '';
        }
    }
};
</script>

<style scoped>
	.dialog-footer{
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	.head_portrait{
		width: 50px;
		height: 50px;
		border-radius: 25px;
	}
	.img-box{
		width: 100px;
		height: auto;
	}
	/deep/.el-dialog.is-fullscreen{
		background-image:url('../../../../assets/bg_board.jpg');
	}
	/deep/.ql-container{
		height: 80%;
	}
</style>