初步完工

houtai/src/apis/tab8.js

@@ -0,0 +1,85 @@
+import axios from '../utils/request'
+// -----------------------web----------------------------
+// 发帖--回帖
+export const webBbsSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/bbs/save',
+    data
+  })
+}
+// 获取列表
+export const webBbsList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/bbs/list',
+    data
+  })
+}
+// 获取帖子的评论（留言）
+export const webBbsMesList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/bbs/message/list',
+    data
+  })
+}
+// 点击回复给帖子评论
+// export const webBbsMesSave = (data) => {
+//   return axios({
+//     method: 'post',
+//     url: '/web/bbs/message/save',
+//     data
+//   })
+// }
+// 论坛-保存帖子浏览量
+export const webBbsVisit = (id) => {
+  return axios({
+    method: 'get',
+    url: `/web/bbs/visit/${id}`
+  })
+}
+// 点赞
+export const webBbsLike = (type, id) => {
+  return axios({
+    method: 'post',
+    url: `/web/bbs/like/${type}/${id}`
+  })
+}
+// 点踩
+// export const webBbsUnLike = (type, id) => {
+//   return axios({
+//     method: 'post',
+//     url: `/web/bbs/unLike/${type}/${id}`
+//   })
+// }
+// -----------------------后台----------------------------
+// 获取列表
+export const bbsListApi = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/bbs/list',
+    data
+  })
+}
+// 发帖的审核-通过2，不通过1
+export const bbsAuditApi = (status, id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/bbs/audit/${id}/${status}`
+  })
+}
+// 删除发帖
+export const bbsRemoveApi = (id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/bbs/remove/${id}`
+  })
+}
+// 根据id获取帖子内容
+// export const bbsDetailApi = (id) => {
+//   return axios({
+//     method: 'get',
+//     url: `/cms/bbs/detail/${id}`
+//   })
+// }

houtai/src/assets/css/base.css

@@ -104,7 +104,7 @@ input[type="number"] {
 }
 .table_img{
   width: 100px;
-  height: 50px;
+  height: 80px;
   object-fit: cover;
   border: 3px solid #ccc;
 }

houtai/src/router/index.js

@@ -15,11 +15,6 @@ const routes = [
     component: () => import('../views/forum/index.vue')
   },
   {
-    path: '/forum_look',
-    name: 'forum_look',
-    component: () => import('../views/forum/look.vue')
-  },
-  {
     path: '/',
     name: 'login',
     component: () => import('../views/login.vue')
@@ -179,7 +174,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   // 如果是去登录页，不需要验证，直接下一步
-  if (to.name === 'login' || to.name === 'message' || to.name === 'forum' || to.name === 'forum_look') next()
+  if (to.name === 'login' || to.name === 'message' || to.name === 'forum') next()
   // 否则要有token值才能下一步，不然就返回登录页
   else {
     const token = localStorage.getItem('CQLJXU_token')

houtai/src/views/forum/index.vue

@@ -1,110 +1,23 @@
+<!--  -->
 <template>
-  <div class="forum">
-    <div class="title">
-      <span>中国人民解放军陆军勤务学院论坛</span>
-      <ul>
-        <li
-          :class="{ active: item.id === tabInd }"
-          v-for="item in tab"
-          :key="item.id"
-          @click="cutTab(item.id)"
-        >
-          {{ item.name }}
-        </li>
-      </ul>
-    </div>
-    <div class="conten">
-      <div class="topImg">
-        <!-- <img src="../../assets/img/banner.png" alt="" /> -->
-      </div>
-      <div class="row rowFi">
-        <div class="row_one">最 新</div>
-        <div class="row_tow">作 者</div>
-        <div class="row_three">回复/查看</div>
-        <div class="row_four">发帖时间</div>
-      </div>
-      <div class="nullTit" v-if="0">暂无数据</div>
-      <div class="row" v-for="i in 5" :key="i" @click="skip">
-        <div class="row_one" :title="123456">
-          准确把握世界军事发展准确把握世界军事发展准确把握世界军事发展
-        </div>
-        <div class="row_tow">小猫爱吃鱼</div>
-        <div class="row_three">24/87</div>
-        <div class="row_four">2022.1.7 15:08:27</div>
-      </div>
-    </div>
-    <!-- 底部 -->
-    <div class="bottom">
-      <!-- 分页 -->
-      <div class="paging">
-        <el-pagination
-          layout="prev, pager, next,jumper"
-          :total="50"
-          :current-page="formData.pageNum"
-          @current-change="currentChange"
-        >
-        </el-pagination>
-      </div>
-      <div class="rickText">
-        <div class="inputR">
-          <el-select v-model="name1" placeholder="请选择主题分类" style="width:400px">
-            <el-option label="数字史馆" value="1"></el-option>
-            <el-option label="美丽校园" value="2"></el-option>
-            <el-option label="信息典藏" value="3"></el-option>
-          </el-select>
-          <el-input
-            style="margin: 0 20px;"
-            type="text"
-            placeholder="帖子标题字数不能超过30个字。"
-            v-model="text"
-            maxlength="30"
-            show-word-limit
-          >
-          </el-input>
-          <el-input
-            style="width:400px"
-            type="text"
-            placeholder="请输入姓名"
-            v-model="name2"
-            maxlength="5"
-            show-word-limit
-          >
-          </el-input>
-        </div>
-        <!-- 富文本 -->
-        <div id="div1" style="z-index: 1"></div>
-        <!-- 按钮 -->
-        <div class="txtBtn">
-          <el-button type="primary" style="width:120px">发 表</el-button>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class='forum_index'>
+  <keep-alive>
+    <component :is='cutCom' @cutComFn='cutComFn' :lookInfo='lookInfo'></component>
+  </keep-alive>
+</div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-import E from 'wangeditor'
+import List from './list.vue'
+import Look from './look.vue'
 export default {
-  name: 'forum',
-  components: {},
+  name: 'forum_index',
+  components: { List, Look },
   data () {
     // 这里存放数据
     return {
-      tabInd: 1,
-      tab: [
-        { id: 1, name: '数字史馆' },
-        { id: 2, name: '美丽校园' },
-        { id: 3, name: '信息典藏' }
-      ],
-      formData: {
-        pageNum: 1,
-        pageSize: 10
-      },
-      name1: '1',
-      text: '',
-      name2: ''
+      cutCom: 'List',
+      lookInfo: {}
     }
   },
   // 监听属性 类似于data概念
@@ -113,45 +26,21 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    // 点击文章跳转
-    skip () {
-      this.$router.push('forum_look')
-    },
-    cutTab (id) {
-      this.tabInd = id
-    },
-    // 分页器方法
-    currentChange (val) {
-      console.log('当前页改变了', val)
-      // this.formData.pageNum = val;
-      // this.getList(this.formData);
+    // 从List组件点击文章触发
+    cutComFn (item) {
+      // 改变is的值切换动态组件
+      if (item.id) this.cutCom = 'Look'
+      else this.cutCom = 'List'
+      this.lookInfo = item
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
-    // 初始化富文本
-    // 富文本
-    this.editor = new E('#div1')
-    // 配置字体
-    this.editor.config.fontNames = [
-      '黑体',
-      '仿宋',
-      '楷体',
-      '标楷体',
-      '华文仿宋',
-      '华文楷体',
-      '宋体',
-      '微软雅黑',
-      'Arial',
-      'Tahoma',
-      'Verdana',
-      'Times New Roman'
-    ]
-    this.editor.config.uploadImgShowBase64 = true // 图片地址
-    this.editor.config.showLinkVideo = false
-    this.editor.create()
+
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -163,207 +52,4 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-/* 分页 */
-/deep/.el-pagination {
-  display: flex;
-  align-items: center;
-}
-/deep/.el-pager li {
-  color: #b9412e;
-  font-weight: 400;
-  min-width: 24px;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  margin: 0 8px;
-  border: 1px solid #b9412e;
-  background-color: transparent;
-  border-radius: 50%;
-}
-/deep/.el-pager li:hover {
-  color: #b9412e;
-}
-/deep/.el-pager li.active {
-  width: 30px;
-  height: 30px;
-  background-color: #b9412e;
-  border-radius: 50%;
-  color: #fff;
-}
-/deep/.el-pager li.active + li {
-  border: 1px solid #c7c7c7;
-}
-/deep/.el-pagination button:hover {
-  color: #b9412e;
-}
-/deep/.el-pagination .btn-next {
-  background-color: transparent;
-  color: #b9412e;
-}
-/deep/.el-pagination .btn-prev {
-  background-color: transparent;
-  color: #b9412e;
-}
-/deep/.el-pager li.active + li {
-  border: 1px solid #b9412e;
-}
-/deep/.el-pagination button:disabled {
-  color: #fff9ec;
-  background-color: transparent;
-}
-::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 0px;
-}
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #b9412e;
-}
-::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #fff9ec;
-}
-.forum {
-  margin: 0 auto;
-  width: 1200px;
-  height: 100vh;
-  min-height: 800px;
-  overflow-y: auto;
-  .title {
-    position: relative;
-    color: #f3eabd;
-    display: flex;
-    align-items: center;
-    height: 60px;
-    background-color: #bd1b1b;
-    & > span {
-      font-weight: 700;
-      padding-left: 40px;
-      font-size: 26px;
-      margin-right: 100px;
-    }
-    & > ul {
-      height: 60px;
-      display: flex;
-      & > li {
-        margin-right: 30px;
-        cursor: pointer;
-        letter-spacing: 2px;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 150px;
-        font-size: 22px;
-        text-align: center;
-      }
-      .active {
-        border-bottom: 5px solid #f3eabd;
-      }
-    }
-    // &::after {
-    //   content: "";
-    //   position: absolute;
-    //   width: 100%;
-    //   height: 1px;
-    //   bottom: -1px;
-    //   left: 0;
-    //   display: block;
-    //   background-color: #bd1b1b;
-    // }
-  }
-  .topImg {
-    margin-top: -10px;
-    min-width: 1200px;
-    height: 225px;
-    background: url("../../assets/img/banner.png");
-    background-size: 100% 100%;
-    // & > img {
-    //   width: 100%;
-    //   height: 100%;
-    // }
-  }
-  .conten {
-    color: #5f5f5f;
-    background-color: #fff9ec;
-    .row {
-      cursor: pointer;
-      margin: 0 24px;
-      border-bottom: 1px solid #ccc;
-      font-size: 16px;
-      display: flex;
-      & > div {
-        height: 60px;
-        line-height: 60px;
-        margin: 0 40px;
-      }
-      .row_one {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-left: 0;
-        flex: 1;
-      }
-      .row_tow {
-        width: 120px;
-      }
-      .row_three {
-        width: 100px;
-      }
-      .row_four {
-        margin-right: 0;
-        width: 150px;
-      }
-    }
-    .rowFi {
-      font-weight: 600;
-      border-bottom: none;
-      font-size: 22px;
-    }
-    .nullTit{
-      font-size: 30px;
-      color: #b9412e;
-      text-align: center;
-    }
-  }
-  .bottom {
-    padding: 0 20px 20px 20px;
-    background-color: #fff9ec;
-    .paging {
-      /deep/.el-input__inner {
-        color: #b9412e;
-        width: 30px;
-        height: 30px !important;
-        background-color: transparent;
-        border-color: #b9412e;
-        border-radius: 50%;
-      }
-      /deep/.el-pagination__jump {
-        color: #b9412e;
-      }
-      height: 80px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .rickText {
-      width: 100%;
-      background-color: #fffcf6;
-      padding: 20px;
-      .inputR{
-        display: flex;
-        margin-bottom: 20px;
-      }
-      .txtBtn{
-        margin-top: 20px;
-      }
-    }
-  }
-}
 </style>

houtai/src/views/forum/list.vue

@@ -0,0 +1,509 @@
+<template>
+  <div class="forum_list">
+    <div class="title">
+      <span>中国人民解放军陆军勤务学院论坛</span>
+      <ul>
+        <li
+          :class="{ active: item.id === tabInd }"
+          v-for="item in tab"
+          :key="item.id"
+          @click="cutTab(item)"
+        >
+          {{ item.name }}
+        </li>
+      </ul>
+    </div>
+    <div class="conten">
+      <div class="topImg">
+        <!-- <img src="../../assets/img/banner.png" alt="" /> -->
+      </div>
+      <div class="row rowFi">
+        <div class="row_one">最 新</div>
+        <div class="row_tow">作 者</div>
+        <div class="row_three">回复/查看</div>
+        <div class="row_four">发帖时间</div>
+      </div>
+      <div class="nullTit" v-if="dataArr.length===0">暂无数据</div>
+      <div class="row" v-for="item in dataArr" :key="item.id" @click="skip(item)" v-else>
+        <div class="row_one">{{item.title}}</div>
+        <div class="row_tow">{{item.creatorName}}</div>
+        <div class="row_three">{{item.reply?item.reply:0}}/{{item.visit?item.visit:0}}</div>
+        <div class="row_four">{{item.createTime}}</div>
+      </div>
+    </div>
+    <!-- 底部 -->
+    <div class="bottom">
+      <!-- 分页 -->
+      <div class="paging"  v-if="total>5">
+        <el-pagination
+          layout="prev, pager, next,jumper"
+          :total="total"
+          :current-page="formData.pageNum"
+          :page-size='formData.pageSize'
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+      <div class="rickText">
+        <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: 0 20px"
+            type="text"
+            placeholder="帖子标题字数不能超过30个字。"
+            v-model="title"
+            maxlength="30"
+            show-word-limit
+          >
+          </el-input>
+          <el-input
+            style="width: 400px"
+            type="text"
+            placeholder="请输入姓名"
+            v-model="creatorName"
+            maxlength="8"
+            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">
+          <el-button type="primary" style="width: 120px" @click="publish"
+            >发 表</el-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/request'
+import { webBbsSave, webBbsList, webBbsVisit } from '@/apis/tab8'
+import E from 'wangeditor'
+export default {
+  name: 'forum_list',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      // 列表数据
+      dataArr: [],
+      total: 0,
+      // 服务器前缀地址
+      baseURL: '',
+      tabInd: 1,
+      tab: [
+        { id: 1, name: '数字史馆', type: 'scene' },
+        { id: 2, name: '美丽校园', type: 'school' },
+        { id: 3, name: '信息典藏', type: 'goods' }
+      ],
+      formData: {
+        endTime: '',
+        searchKey: '',
+        startTime: '',
+        status: 2,
+        type: 'scene',
+        pageNum: 1,
+        pageSize: 5,
+        bbsType: 'topic'
+      },
+      selectType: 'scene',
+      title: '',
+      creatorName: '',
+      content: ''
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 上传图片
+    beforethumbUploadImg (file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5
+      const typeOk =
+        file.type === 'image/png' ||
+        file.type === 'image/jpeg' ||
+        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.urlPath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
+      )
+    }, // 点击发表文章
+    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('内容不能为空')
+      }
+      const res = await webBbsSave({
+        bbsType: 'topic',
+        content: this.editor.txt.html(),
+        creatorName: this.creatorName,
+        title: this.title,
+        type: this.selectType
+      })
+      if (res.code === 0) {
+        this.title = this.creatorName = ''
+        this.editor.txt.html('')
+        this.$message.success('发帖成功，等待审核.')
+      } else this.$message.warning(res.msg)
+    },
+    // 点击通知父组件切换 动态组件is的值，并且把数据传过去
+    async skip (item) {
+      await webBbsVisit(item.id)
+      this.$emit('cutComFn', item)
+    },
+    cutTab (item) {
+      this.tabInd = item.id
+      this.formData.type = item.type
+      this.formData.pageNum = 1
+      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)
+    },
+    // 封装获取列表的方法
+    async webBbsList (data) {
+      const res = await webBbsList(data)
+      this.total = res.data.total
+      this.dataArr = res.data.records
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E('#div1')
+    // 配置字体
+    this.editor.config.fontNames = [
+      '黑体',
+      '仿宋',
+      '楷体',
+      '标楷体',
+      '华文仿宋',
+      '华文楷体',
+      '宋体',
+      '微软雅黑',
+      'Arial',
+      'Tahoma',
+      'Verdana',
+      'Times New Roman'
+    ]
+    this.editor.config.uploadImgShowBase64 = true // 图片地址
+    this.editor.config.showLinkVideo = false
+    this.editor.create()
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated () {
+    // 调用获取列表方法
+    this.webBbsList(this.formData)
+  }
+}
+</script>
+<style lang='less' scoped>
+/* 分页 */
+/deep/.el-pagination {
+  display: flex;
+  align-items: center;
+}
+/deep/.el-pager li {
+  color: #b9412e;
+  font-weight: 400;
+  min-width: 24px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin: 0 8px;
+  border: 1px solid #b9412e;
+  background-color: transparent;
+  border-radius: 50%;
+}
+/deep/.el-pager li:hover {
+  color: #b9412e;
+}
+/deep/.el-pager li.active {
+  width: 30px;
+  height: 30px;
+  background-color: #b9412e;
+  border-radius: 50%;
+  color: #fff;
+}
+/deep/.el-pager li.active + li {
+  border: 1px solid #c7c7c7;
+}
+/deep/.el-pagination button:hover {
+  color: #b9412e;
+}
+/deep/.el-pagination .btn-next {
+  background-color: transparent;
+  color: #b9412e;
+}
+/deep/.el-pagination .btn-prev {
+  background-color: transparent;
+  color: #b9412e;
+}
+/deep/.el-pager li.active + li {
+  border: 1px solid #b9412e;
+}
+/deep/.el-pagination button:disabled {
+  color: #fff9ec;
+  background-color: transparent;
+}
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 0px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #b9412e;
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #fff9ec;
+}
+.forum_list {
+  margin: 0 auto;
+  width: 1200px;
+  height: 100vh;
+  min-height: 800px;
+  overflow-y: auto;
+  .title {
+    position: relative;
+    color: #f3eabd;
+    display: flex;
+    align-items: center;
+    height: 60px;
+    background-color: #bd1b1b;
+    & > span {
+      font-weight: 700;
+      padding-left: 40px;
+      font-size: 26px;
+      margin-right: 100px;
+    }
+    & > ul {
+      height: 60px;
+      display: flex;
+      & > li {
+        margin-right: 30px;
+        cursor: pointer;
+        letter-spacing: 2px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 150px;
+        font-size: 22px;
+        text-align: center;
+      }
+      .active {
+        border-bottom: 5px solid #f3eabd;
+      }
+    }
+    // &::after {
+    //   content: "";
+    //   position: absolute;
+    //   width: 100%;
+    //   height: 1px;
+    //   bottom: -1px;
+    //   left: 0;
+    //   display: block;
+    //   background-color: #bd1b1b;
+    // }
+  }
+  .topImg {
+    margin-top: -10px;
+    min-width: 1200px;
+    height: 225px;
+    background: url("../../assets/img/banner.png");
+    background-size: 100% 100%;
+    // & > img {
+    //   width: 100%;
+    //   height: 100%;
+    // }
+  }
+  .conten {
+    padding-bottom: 20px;
+    color: #5f5f5f;
+    background-color: #fff9ec;
+    .row {
+      cursor: pointer;
+      margin: 0 24px;
+      border-bottom: 1px solid #ccc;
+      font-size: 16px;
+      display: flex;
+      & > div {
+        height: 60px;
+        line-height: 60px;
+        margin: 0 40px;
+        text-align: center;
+      }
+      .row_one {
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-left: 0;
+        flex: 1;
+      }
+      .row_tow {
+        width: 135px;
+      }
+      .row_three {
+        width: 100px;
+      }
+      .row_four {
+        margin-right: 0;
+        width: 170px;
+      }
+    }
+    .rowFi {
+      font-weight: 600;
+      border-bottom: none;
+      font-size: 22px;
+    }
+    .nullTit {
+      height: 100px;
+      line-height: 100px;
+      font-size: 30px;
+      color: #b9412e;
+      text-align: center;
+    }
+  }
+  .bottom {
+    padding: 0 20px 20px 20px;
+    background-color: #fff9ec;
+    .paging {
+      /deep/.el-input__inner {
+        color: #b9412e;
+        width: 30px;
+        height: 30px !important;
+        background-color: transparent;
+        border-color: #b9412e;
+        border-radius: 50%;
+      }
+      /deep/.el-pagination__jump {
+        color: #b9412e;
+      }
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .rickText {
+      width: 100%;
+      background-color: #fffcf6;
+      padding: 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 {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+</style>

houtai/src/views/layout/index.vue

@@ -306,7 +306,7 @@ export default {
     display: flex;
     width: 100%;
     padding: 30px 30px 0;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 70px);
   }
   .left {
     min-width: 220px;

houtai/src/views/message/index.vue

@@ -85,7 +85,7 @@ export default {
   methods: {
     // 分页器方法
     currentChange (val) {
-      console.log('当前页改变了', val)
+      // console.log('当前页改变了', val)
       this.formData.pageNum = val
       this.commentWebList(this.formData)
     },

houtai/src/views/tab8/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="tab8">
-    <div class="insideTop">
-      发帖审核
-    </div>
+    <div class="insideTop">发帖审核</div>
     <div class="obstruct"></div>
     <!-- 主要内容 -->
     <div class="conten">
@@ -10,7 +8,7 @@
       <div class="search">
         <span>提交时间：</span>
         <el-date-picker
-          style="width: 240px"
+          style="width: 200px"
           v-model="time"
           type="daterange"
           range-separator="-"
@@ -22,23 +20,44 @@
         <el-input
           v-model="formData.searchKey"
           placeholder="关键字"
-          style="width: 240px"
+          style="width: 200px"
         ></el-input>
         <span class="search_k">状态：</span>
         <el-select
+          v-model="formData.status"
+          placeholder="请选择"
+          style="width: 120px"
+        >
+          <el-option label="全部" value=""></el-option>
+          <el-option label="待审核" :value="0"></el-option>
+          <el-option label="审核通过" :value="2"></el-option>
+          <el-option label="审核不通过" :value="1"></el-option>
+        </el-select>
+        <span class="search_k">板块：</span>
+        <el-select
           v-model="formData.type"
           placeholder="请选择"
-          style="width: 240px"
+          style="width: 120px"
         >
           <el-option label="全部" value=""></el-option>
-          <el-option label="待审核" value="1"></el-option>
-          <el-option label="审核通过" value="time"></el-option>
-          <el-option label="审核不通过" value="number"></el-option>
+          <el-option label="数字史馆" value="scene"></el-option>
+          <el-option label="美丽校园" value="school"></el-option>
+          <el-option label="信息典藏" value="goods"></el-option>
+        </el-select>
+        <span class="search_k">类型：</span>
+        <el-select
+          v-model="formData.bbsType"
+          placeholder="请选择"
+          style="width: 80px"
+        >
+          <el-option label="全部" value=""></el-option>
+          <el-option label="主题" value="topic"></el-option>
+          <el-option label="回帖" value="reply"></el-option>
         </el-select>
         <!-- 右侧按钮 -->
         <div class="search_btn">
-          <el-button type="primary">查 询</el-button>
-          <el-button>重 置</el-button>
+          <el-button type="primary" @click="searchBtn">查 询</el-button>
+          <el-button @click="resetBtn">重 置</el-button>
         </div>
       </div>
       <!-- 表格 -->
@@ -51,23 +70,34 @@
               }}
             </template>
           </el-table-column>
-          <el-table-column label="标题">
-            <template #default="{ row }">
-              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="name2" label="类型"> </el-table-column>
-          <el-table-column prop="name2" label="发布人"> </el-table-column>
-          <el-table-column prop="name2" label="发布时间">
-          </el-table-column>
-          <el-table-column prop="name2" label="审核状态">
+          <el-table-column label="标题" prop="title"> </el-table-column>
+          <el-table-column prop="type" label="板块"> </el-table-column>
+          <el-table-column prop="bbsType" label="类型"> </el-table-column>
+          <el-table-column prop="creatorName" label="发布人"> </el-table-column>
+          <el-table-column prop="createTime" label="发布时间">
           </el-table-column>
+          <el-table-column prop="status" label="审核状态"> </el-table-column>
           <el-table-column label="操作">
-            <template #default='{row}'>
-              <el-button type="text" style="color: #254e91;" @click="lookGood(row.id)">查看</el-button>
-              <el-button type="text" style="color: #254e91;">通过</el-button>
-              <el-button type="text">不通过</el-button>
-              <el-button type="text">删除</el-button>
+            <template #default="{ row }">
+              <el-button
+                type="text"
+                style="color: #254e91"
+                @click="lookGood(row)"
+                >查看</el-button
+              >
+              <el-button
+                type="text"
+                style="color: #254e91"
+                v-if="row.status !== '通过'"
+                @click="passPost(2,row.id)"
+                >通过</el-button
+              >
+              <el-button type="text" v-if="row.status !== '不通过'" @click="passPost(1,row.id)"
+                >不通过</el-button
+              >
+              <el-button type="text" v-if="row.status !== '通过'" @click="bbsRemoveApi(row.id)"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -88,36 +118,26 @@
 </template>
 
 <script>
+import { bbsListApi, bbsAuditApi, bbsRemoveApi } from '@/apis/tab8'
 export default {
   name: 'tab8',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
+      total: 0,
       time: '',
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        status: '',
+        type: '',
+        bbsType: ''
       },
-      tableData: [
-        { name1: '1231231231231231231123123123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false },
-        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
-        { name1: '123', name2: '123', name3: false }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -130,19 +150,83 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击删除
+    bbsRemoveApi (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await bbsRemoveApi(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.getBbsList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 点击通过和不通过
+    async passPost (status, id) {
+      const res = await bbsAuditApi(status, id)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.getBbsList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.status = ''
+      this.formData.bbsType = ''
+      this.formData.type = ''
+      this.time = ''
+      this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
+      this.getBbsList(this.formData)
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.getBbsList(this.formData)
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.getBbsList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
-    lookGood (id) {
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.getBbsList(this.formData)
+    },
+    // 点击查看
+    lookGood (val) {
       this.$router.push({
-        path: '/layout/tab8Look'
-        // query: { conLeftId: this.conLeft }
+        path: '/layout/tab8Look',
+        query: val
       })
     },
+    // 封装获取列表的方法
+    async getBbsList (data) {
+      const res = await bbsListApi(data)
+      this.total = res.data.total
+      res.data.records.forEach((v) => {
+        if (v.bbsType === 'topic') v.bbsType = '主题'
+        else if (v.bbsType === 'reply') v.bbsType = '回帖'
+        if (v.status === 0) v.status = '待审核'
+        else if (v.status === 1) v.status = '不通过'
+        else if (v.status === 2) v.status = '通过'
+        if (v.type === 'scene') v.type = '数字史馆'
+        else if (v.type === 'school') v.type = '美丽校园'
+        else if (v.type === 'goods') v.type = '信息典藏'
+      })
+      this.tableData = res.data.records
+    },
     // 时间处理----------------
     handleSelect (e) {
       const date = []
@@ -178,7 +262,9 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    this.getBbsList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -193,7 +279,7 @@ export default {
 <style lang='less' scoped>
 .tab8 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {

houtai/src/views/tab8/tab8Look.vue

@@ -3,7 +3,7 @@
     <div class="insideTop">
       发帖审核 > 查看发帖信息
       <div class="add">
-        <el-button type="primary" @click="$router.push('/layout/tab2')"
+        <el-button type="primary" @click="$router.push('/layout/tab8')"
           >返 回</el-button
         >
       </div>
@@ -14,33 +14,40 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>板块：</div>
-        <span>某某某</span>
+        <span>{{data.type}}</span>
       </div>
       <div class="row">
-        <div>主题：</div>
-        <span>某某某</span>
+        <div>类型：</div>
+        <span>{{data.bbsType}}</span>
+      </div>
+      <div class="row">
+        <div>标题：</div>
+        <span>{{data.title}}</span>
       </div>
       <div class="row">
         <div>发布人：</div>
-        <span>某某某</span>
+        <span>{{data.creatorName}}</span>
       </div>
       <div class="row">
         <div>发布时间：</div>
-        <span>2021-12-12 12:30</span>
+        <span>{{data.createTime}}</span>
       </div>
-      <div class="con_top">发贴内容</div>
-      <div id="div1">领导简介</div>
+      <div class="con_top">{{data.bbsType}}内容</div>
+      <div id="div1" v-html="data.content"></div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from '@/utils/request'
 export default {
   name: 'tab8Look',
   components: {},
   data () {
     // 这里存放数据
     return {
+      data: {},
+      baseURL: ''
     }
   },
   // 监听属性 类似于data概念
@@ -50,7 +57,11 @@ export default {
   // 方法集合
   methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.data = this.$route.query
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前