Seven_teams/web/src/views/tab6/list.vue

<template>
  <div class="tab6_list">
    <div class="left">
      <ul>
        <li
          :class="{ active: formData.type === item.type }"
          v-for="item in listData"
          :key="item.id"
          @click="cutTab(item)"
        >
          <p v-if="formData.type === item.type">
            ◆&emsp;{{ item.name }}&emsp;◆
          </p>
          <p v-else>{{ item.name }}</p>
          <span> {{ item.biaoshi }} </span>
        </li>
      </ul>
    </div>
    <!-- 下部内容 -->
    <div class="conten">
      <h1>
        公告/置顶
        <div class="con_tit_post" @click="rollBottom">发帖</div>
      </h1>
      <div class="con_list">
        <div class="con_tit">
          <div class="con_tit_one">标题</div>
          <div class="con_tit_tow">作者</div>
          <div class="con_tit_three">回复数</div>
          <div class="con_tit_four">最后发表</div>
        </div>
        <div class="hint" v-if="data.length===0">暂 无 数 据</div>
        <template v-else>
          <div
            class="con_tit con_tit2"
            v-for="item in data"
            :key="item.id"
            @click="skip(item)"
          >
            <div class="con_tit_one" :title="item.title">
              {{ item.title }}
            </div>
            <div class="con_tit_tow" :title="item.creatorName">
              {{ item.creatorName }}
            </div>
            <div class="con_tit_three" :title="item.reply">
              {{ item.reply ? item.reply : 0 }}
            </div>
            <div
              class="con_tit_four"
              :title="`${item.replyName ? item.replyName : item.creatorName} ${
                item.replyTime ? item.replyTime : item.updateTime
              }`"
            >
              {{
                item.replyName
                  ? item.replyName.length > 5
                    ? item.replyName.substring(0, 5) + "..."
                    : item.replyName
                  : item.creatorName.length > 5
                  ? item.creatorName.substring(0, 5) + "..."
                  : item.creatorName
              }}
              {{
                item.replyTime
                  ? item.replyTime.substring(0, 10)
                  : item.updateTime.substring(0, 10)
              }}
            </div>
          </div>
        </template>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination
          layout="prev,pager,next,jumper"
          :total="total"
          :page-size="5"
          :current-page="formData.pageNum"
          @current-change="currentChange"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>
      <!-- 底部富文本盒子 -->
      <div class="rickText">
        <div class="txtTit">发表新帖</div>
        <div class="inputR">
          <el-select
            v-model="selectType"
            placeholder="请选择主题分类"
            style="width: 400px"
          >
            <el-option label="点赞箱" value="scene"></el-option>
            <el-option label="战友情" value="school"></el-option>
            <el-option label="敢为先" value="goods"></el-option>
          </el-select>
          <el-input
            style="margin-left: 20px"
            type="text"
            placeholder="标题不能超过30字"
            v-model="title"
            maxlength="30"
            show-word-limit
          >
          </el-input>
          <!-- 上传图片 -->
          <el-upload
            accept=".png,.jpg,.jpeg,.gif"
            title="上传图片"
            class="upload-demo imgUplod"
            :action="baseURL + '/web/bbs/upload'"
            multiple
            :before-upload="beforethumbUploadImg"
            :on-success="upload_thumb_successImg"
          >
            <i class="w-e-icon-image"></i>
          </el-upload>
        </div>
        <!-- 富文本 -->
        <div id="div1" style="z-index: 1"></div>
        <!-- 按钮 -->
        <div class="txtBtn">
          <div>
            <span class="txtBtn_tit">请填写您的姓名</span>
            <el-input
              style="width: 300px"
              type="text"
              placeholder="请输入姓名"
              v-model="creatorName"
              maxlength="8"
              show-word-limit
            >
            </el-input>
          </div>
          <el-button type="primary" style="width: 120px" @click="publish"
            >发 表</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { webBbsSave, webBbsList } from "@/utils/api";
import E from "wangeditor";
import axios from "@/utils/request";
export default {
  name: "tab6_list",
  components: {},
  data() {
    //这里存放数据
    return {
      data: [],
      total: 0,
      listData: [
        { biaoshi: "/", id: 1, name: "点赞箱", type: "scene" },
        { biaoshi: "/", id: 2, name: "战友情", type: "school" },
        { biaoshi: "", id: 3, name: "敢为先", type: "goods" },
      ],
      formData: {
        bbsType: "topic",
        status: 2,
        pageNum: 1,
        pageSize: 5,
        type: "scene",
      },
      // 有关富文本
      selectType: "scene",
      title: "",
      creatorName: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击上部的发帖滚动到底部
    rollBottom() {
      window.scrollTo({ top: 1000, behavior: "smooth" });
    },
    // 点击通知父组件切换 动态组件is的值，并且把数据传过去
    async skip(item) {
      this.$emit("cutComFn", item);
    },
    // 点击发表
    async publish() {
      if (this.creatorName.trim() === "") {
        return this.$message.warning("名字不能为空!");
      }
      if (this.title.trim() === "") {
        return this.$message.warning("标题不能为空!");
      }
      if (this.editor.txt.html() === "") {
        return this.$message.warning("内容不能为空");
      }
      let obj = {
        bbsType: "topic",
        content: this.editor.txt.html(),
        creatorName: this.creatorName,
        title: this.title,
        type: this.selectType,
      };
      let res = await webBbsSave(obj);
      if (res.code === 0) {
        this.title = this.creatorName = "";
        this.editor.txt.html("");
        this.$message.success("发帖成功，等待审核.");
      } else this.$message.warning(res.msg);
    },
    // 切换顶部tab栏
    cutTab(val) {
      if (this.formData.type === val.type) return;
      this.formData.pageNum = 1;
      this.formData.type = val.type;
      this.selectType = val.type;
      this.webBbsList(this.formData);
    },
    // 分页器方法
    currentChange(val) {
      // console.log('当前页改变了', val)
      this.formData.pageNum = val;
      this.webBbsList(this.formData);
    },
    sizeChange(val) {
      // console.log('条数改变了', val)
      this.formData.pageNum = 1;
      this.formData.pageSize = val;
      this.webBbsList(this.formData);
    },
    // 上传图片
    beforethumbUploadImg(file) {
      // console.log(998, file)
      // 限制图片大小和格式
      const sizeOk = file.size / 1024 / 1024 < 5;
      const typeOk =
        file.type === "image/png" ||
        (file.type === "image/jpeg" && !file.name.includes(".jfif")) ||
        file.type === "image/gif";

      return new Promise((resolve, reject) => {
        if (!typeOk) {
          this.$message.error("图片格式有误！");
          reject(file);
        } else if (!sizeOk) {
          this.$message.error("图片大小超过5M！");
          reject(file);
        } else if (file.name.length > 32) {
          this.$message.error("图片名字不能超过32个字！");
          reject(file);
        } else {
          resolve(file);
        }
      });
    },
    upload_thumb_successImg(data) {
      this.$message.success("上传成功");
      this.editor.txt.append(
        `<img src="${this.baseURL}${data.data.filePath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
      );
    },
    // 封装一个获取列表的方法
    async webBbsList(data) {
      let res = await webBbsList(data);
      this.total = res.data.total;
      this.data = res.data.records;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL;
    this.webBbsList(this.formData);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 初始化富文本
    // 富文本
    this.editor = new E("#div1");
    // 配置字体
    this.editor.config.fontNames = [
      "黑体",
      "仿宋",
      "楷体",
      "标楷体",
      "华文仿宋",
      "华文楷体",
      "宋体",
      "微软雅黑",
      "Arial",
      "Tahoma",
      "Verdana",
      "Times New Roman",
    ];
    this.editor.config.showLinkVideo = false;
    this.editor.create();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    window.scrollTo({ top: 0 });
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.tab6_list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #3e3e3e;
  .left {
    position: relative;
    width: 100%;
    height: 200px;
    background: url("../../assets/img/tab6Tab.png");
    background-size: 100% 100%;
    ul {
      padding-left: 40px;
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      li {
        display: flex;
        justify-content: center;
        font-size: 20px;
        color: #fff;
        width: 240px;
        cursor: pointer;
        &:hover {
          color: #f2cd83;
        }
        & > span {
          margin-left: 50px;
          color: #fff !important;
        }
        & > p {
          text-align: center;
          width: 145px;
        }
      }
      .active {
        color: #f2cd83;
      }
    }
  }
  .conten {
    flex: 1;
    width: 100%;
    padding: 20px 300px;
    background: url("../../assets/img/tabBg.png");
    background-size: 100% 100%;
    & > h1 {
      position: relative;
      color: #be1220;
      font-size: 24px;
      margin-bottom: 35px;
      .con_tit_post {
        font-weight: 400;
        font-size: 22px;
        text-align: center;
        line-height: 40px;
        width: 120px;
        height: 40px;
        background-color: #be1220;
        color: #fff;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
    .con_list {
      .hint {
        text-align: center;
        font-size: 36px;
        width: 100%;
        height: 100px;
        line-height: 100px;
      }

      .con_tit {
        display: flex;
        font-weight: 700;
        font-size: 26px;
        color: #3a3a3a;
        & > div {
          padding-right: 20px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .con_tit_one {
          padding-left: 10px;
          text-align: left;
          flex: 1;
        }
        .con_tit_tow {
          width: 150px;
        }
        .con_tit_three {
          width: 150px;
        }
        .con_tit_four {
          text-align: right;
          padding-right: 50px;
          width: 300px;
        }
      }
      .con_tit2 {
        font-weight: 400;
        & > div {
          cursor: pointer;
          height: 70px;
          line-height: 70px;
          font-size: 22px;
          border-bottom: 1px dashed #d5a6a6;
        }
        .con_tit_four {
          padding-right: 10px;
        }
      }
    }
    .paging {
      /deep/.el-input__inner {
        width: 30px;
        height: 30px !important;
        background-color: transparent;
        border-radius: 50%;
      }
      margin: 30px 0;
    }
    .rickText {
      width: 100%;
      background-color: #fcf7f4;
      padding: 20px;
      .txtTit {
        color: #3a3a3a;
        font-weight: 700;
        font-size: 20px;
        margin-bottom: 20px;
      }
      .inputR {
        display: flex;
        margin-bottom: 20px;
        position: relative;
        .imgUplod {
          /deep/.w-e-icon-image {
            color: #999;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
          }
          /deep/.el-upload-list {
            display: none !important;
          }
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          position: absolute;
          z-index: 9999;
          top: 61px;
          right: 0px;
          width: 40px;
          height: 40px;
          &:hover {
            background-color: #f6f6f6;
            /deep/.w-e-icon-image {
              color: black;
            }
          }
        }
      }
      .txtBtn {
        color: #9c9c9c;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .txtBtn_tit {
          margin-right: 15px;
          position: relative;
          &::after {
            content: "*";
            position: absolute;
            right: -10px;
            top: -6px;
            color: red;
          }
        }
      }
    }
  }
}
</style>