初步完成留言界面

houtai/src/apis/tab7.js

@@ -0,0 +1,42 @@
+import axios from '../utils/request'
+// -----------------------web----------------------------
+// 提交留言
+export const commentSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/comment/save',
+    data
+  })
+}
+// 获取列表
+export const commentWebList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/comment/list',
+    data
+  })
+}
+
+// -----------------------后台----------------------------
+// 获取列表
+export const commentList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/comment/list',
+    data
+  })
+}
+// 留言的审核-通过2，不通过1
+export const commentAudit = (status, id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/comment/audit/${id}/${status}`
+  })
+}
+// 删除留言
+export const commentRemove = (id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/comment/remove/${id}`
+  })
+}

houtai/src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 const service = axios.create({
-  // baseURL: 'http://192.168.0.135:8012/', // 本地调试
-  baseURL: 'http://192.168.0.245:8005/', // 线上调试
+  baseURL: 'http://192.168.0.135:8005/', // 本地调试
+  // baseURL: 'http://192.168.0.245:8005/', // 线上调试
   // baseURL: '', // build
   timeout: 5000
 })

houtai/src/views/forum/index.vue

@@ -26,10 +26,7 @@
       <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>
@@ -232,10 +229,7 @@ export default {
   background: #fff9ec;
 }
 .forum {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin: 0 auto;
   width: 1200px;
   height: 100vh;
   min-height: 800px;
@@ -286,7 +280,7 @@ export default {
   }
   .topImg {
     margin-top: -10px;
-    width: 1200px;
+    min-width: 1200px;
     height: 225px;
     background: url("../../assets/img/banner.png");
     background-size: 100% 100%;

houtai/src/views/forum/look.vue

@@ -221,10 +221,7 @@ export default {
   background: #fff9ec;
 }
 .forum_look {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin: 0 auto;
   width: 1200px;
   height: 100vh;
   min-height: 800px;

houtai/src/views/message/index.vue

@@ -2,20 +2,20 @@
   <div class="message">
     <div class="conten">
       <h2 class="title">留言板</h2>
-      <ul class="liuyan">
-        <li v-for="i in 20" :key="i">
-          <div class="name">王大锤锤锤</div>
-          <div class="con">
-            快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐快乐！~
-          </div>
-          <div class="time">2022.1.4 17:34</div>
+      <ul class="liuyan"  v-if="data.length>0">
+        <li v-for="item in data" :key="item.id">
+          <div class="name">{{item.creatorName}}</div>
+          <div class="con">{{item.content}}</div>
+          <div class="time">{{item.createTime}}</div>
         </li>
       </ul>
+        <!-- 没有数据的时候提示 -->
+        <div class="liuyan noneTxt" v-else>暂无数据</div>
       <!-- 分页器 -->
       <div class="pagination">
         <el-pagination
           layout="prev, pager, next"
-          :total="50"
+          :total="total"
           @current-change="currentChange"
         >
         </el-pagination>
@@ -39,11 +39,11 @@
             type="text"
             placeholder="请输入您的姓名"
             v-model="name"
-            maxlength="5"
+            maxlength="8"
             show-word-limit
           >
           </el-input>
-          <el-button type="primary">提 交</el-button>
+          <el-button type="primary" @click="commentSave">提 交</el-button>
         </div>
       </div>
     </div>
@@ -56,9 +56,7 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import { commentSave, commentWebList } from '@/apis/tab7'
 export default {
   name: 'message',
   components: {},
@@ -66,7 +64,17 @@ export default {
     // 这里存放数据
     return {
       textarea: '',
-      name: ''
+      name: '',
+      data: [],
+      total: 0,
+      formData: {
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: '',
+        status: 2
+      }
     }
   },
   // 监听属性 类似于data概念
@@ -78,11 +86,33 @@ export default {
     // 分页器方法
     currentChange (val) {
       console.log('当前页改变了', val)
-      // this.getList({ pageNum: val, pageSize: 10 });
+      this.formData.pageNum = val
+      this.commentWebList(this.formData)
+    },
+    // 点击提交留言
+    async  commentSave () {
+      if (this.textarea.trim() === '') return this.$message.warning('内容不能为空!')
+      if (this.name.trim() === '') return this.$message.warning('名字不能为空!')
+      const res = await commentSave({ content: this.textarea, creatorName: this.name })
+      if (res.code === 0) {
+        this.textarea = this.name = ''
+        this.$message.success('提交成功，等待审核.')
+      } else this.$message.warning(res.msg)
+    },
+    // 封装获取列表的方法
+    async commentWebList (data) {
+      const res = await commentWebList(data)
+      this.total = res.data.total
+      res.data.records.forEach(v => {
+        v.createTime = v.createTime.substring(0, v.createTime.length - 3)
+      })
+      this.data = res.data.records
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    this.commentWebList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -122,12 +152,11 @@ export default {
   color: #878787 !important;
 }
 .message {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
+  position: relative;
+  margin: 0 auto;
   width: 1000px;
-  height: 700px;
+  height: 100vh;
+  min-height: 700px;
   .conten {
     /deep/.el-button--primary{
       width: 100%;
@@ -149,8 +178,12 @@ export default {
       background-color: #fff;
     }
 
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
     width: 100%;
-    height: 100%;
+    height: 700px;
     background-color: #fff;
     padding: 20px;
     .title {
@@ -188,7 +221,7 @@ export default {
           padding: 12px 0;
         }
         .name {
-          width: 130px;
+          width: 140px;
         }
         .con {
           flex: 1;
@@ -199,6 +232,12 @@ export default {
         }
       }
     }
+    .noneTxt{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 26px;
+    }
     .pagination {
       display: flex;
       justify-content: center;

houtai/src/views/tab7/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="tab7">
-    <div class="insideTop">
-      留言审核
-    </div>
+    <div class="insideTop">留言审核</div>
     <div class="obstruct"></div>
     <!-- 主要内容 -->
     <div class="conten">
@@ -26,19 +24,19 @@
         ></el-input>
         <span class="search_k">状态：</span>
         <el-select
-          v-model="formData.type"
+          v-model="formData.status"
           placeholder="请选择"
           style="width: 240px"
         >
           <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="0"></el-option>
+          <el-option label="审核通过" :value="2"></el-option>
+          <el-option label="审核不通过" :value="1"></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,21 +49,31 @@
               }}
             </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 label="留言内容" prop="content"></el-table-column>
+          <el-table-column prop="creatorName" label="发布人" width="200">
           </el-table-column>
-          <el-table-column prop="name2" label="发布人" width="180"> </el-table-column>
-          <el-table-column prop="name2" label="发布时间" width="180">
+          <el-table-column prop="createTime" label="发布时间" width="200">
           </el-table-column>
-          <el-table-column prop="name2" label="审核状态" width="180">
+          <el-table-column prop="status" label="审核状态" width="150">
           </el-table-column>
-          <el-table-column label="操作" width="180">
-            <template #default>
-              <el-button type="text" style="color: #254e91;">通过</el-button>
-              <el-button type="text">不通过</el-button>
-              <el-button type="text">删除</el-button>
+          <el-table-column label="操作" width="200">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.status !== '通过'"
+                type="text"
+                style="color: #254e91"
+                @click="passMes(2, row.id)"
+                >通过</el-button
+              >
+              <el-button type="text" @click="passMes(1, row.id)" v-if="row.status !== '不通过'"
+                >不通过</el-button
+              >
+              <el-button
+                type="text"
+                @click="delMes(row.id)"
+                v-if="row.status !== '通过'"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -86,36 +94,24 @@
 </template>
 
 <script>
+import { commentList, commentAudit, commentRemove } from '@/apis/tab7'
 export default {
   name: 'tab7',
   components: {},
   data () {
     // 这里存放数据
     return {
-      total: 100,
+      total: 0,
       time: '',
       formData: {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 9999,
+        pageSize: 10,
         searchKey: '',
-        type: 'time'
+        status: ''
       },
-      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概念
@@ -128,18 +124,68 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击通过和不通过
+    async passMes (status, id) {
+      const res = await commentAudit(status, id)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        this.commentList(this.formData)
+      } else this.$message.warning(res.msg)
+    },
+    // 点击删除
+    delMes (id) {
+      this.$confirm('确定删除吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await commentRemove(id)
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.commentList(this.formData)
+          } else this.$message.warning(res.msg)
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 点击重置
+    resetBtn () {
+      this.formData.searchKey = ''
+      this.formData.status = ''
+      this.time = ''
+      this.formData.pageNum = 1
+      this.formData.startTime = this.formData.endTime = ''
+      this.commentList(this.formData)
+    },
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.commentList(this.formData)
+    },
+    // 封装获取留言列表的方法
+    async commentList (data) {
+      const res = await commentList(data)
+      this.total = res.data.total
+      res.data.records.forEach((v) => {
+        if (v.status === 0) v.status = '待审核'
+        else if (v.status === 1) v.status = '不通过'
+        else if (v.status === 2) v.status = '通过'
+      })
+      this.tableData = res.data.records
+    },
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.commentList(this.formData)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-    }, // 点击查看
-    lookGood (id) {
-      this.$router.push({
-        path: '/layout/tab7Look'
-        // query: { conLeftId: this.conLeft }
-      })
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.commentList(this.formData)
     },
     // 时间处理----------------
     handleSelect (e) {
@@ -176,7 +222,10 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 调用获取列表方法
+    this.commentList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -191,7 +240,7 @@ export default {
 <style lang='less' scoped>
 .tab7 {
   height: 100%;
-  .insideTop .add{
+  .insideTop .add {
     right: 55px;
   }
   .conten {