留言板初步完工

houtai/src/router/index.js

@@ -4,11 +4,19 @@ import { Message } from 'element-ui'
 Vue.use(VueRouter)
 
 const routes = [
+  // 留言板pc
   {
     path: '/message',
     name: 'message',
     component: () => import('../views/message/index.vue')
   },
+  // 留言板M
+  {
+    path: '/messageM',
+    name: 'messageM',
+    component: () => import('../views/messageM/index.vue')
+  },
+  // 论坛pc
   {
     path: '/forum',
     name: 'forum',
@@ -174,7 +182,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   // 如果是去登录页，不需要验证，直接下一步
-  if (to.name === 'login' || to.name === 'message' || to.name === 'forum') next()
+  if (to.name === 'login' || to.name === 'message' || to.name === 'messageM' || to.name === 'forum' || to.name === 'forumM') next()
   // 否则要有token值才能下一步，不然就返回登录页
   else {
     const token = localStorage.getItem('CQLJXU_token')

houtai/src/utils/request.js

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

houtai/src/views/forumM/index.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='forumM'>forumM</div>
+</template>
+
+<script>
+export default {
+  name: 'forumM',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+
+</style>

houtai/src/views/messageM/index.vue

@@ -0,0 +1,211 @@
+<!--  -->
+<template>
+  <div class="messageM">
+    <div class="top">
+      <h3>留言板</h3>
+      <p>已有 {{ total }} 条留言</p>
+    </div>
+    <!-- 内容 -->
+    <div class="conten">
+      <div class="row" v-for="item in data" :key="item.id">
+        <div class="left">
+          <img src="../../assets/imgAdd/touxiang.png" alt="" />
+        </div>
+        <div class="right">
+          <p>
+            {{ item.creatorName }} <span>{{ item.createTime }}</span>
+          </p>
+          <div class="txt">{{ item.content }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 文本域和按钮 -->
+    <div class="bottmInp">
+      <div class="texe">
+        <el-input
+          maxlength="100"
+          show-word-limit
+          resize="none"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入留言..."
+          v-model="textarea"
+        >
+        </el-input>
+      </div>
+      <div class="button">
+        <div class="button_left">
+          <el-input
+            type="text"
+            placeholder="请填写您的姓名"
+            v-model="name"
+            maxlength="8"
+            show-word-limit
+          >
+          </el-input>
+        </div>
+        <div class="button_right">
+        <el-button
+          type="primary"
+          @click="commentSave"
+          >提 交</el-button
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { commentSave, commentWebList } from '@/apis/tab7'
+export default {
+  name: 'messageM',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      textarea: '',
+      name: '',
+      data: [],
+      total: 0,
+      formData: {
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 99999,
+        searchKey: '',
+        status: 2
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击提交留言
+    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
+      this.data = res.data.records
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    this.commentWebList(this.formData)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.messageM {
+  background: url("../../assets/imgAdd/mesBac.png");
+  padding: 24px;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  /deep/::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    color: transparent;
+  }
+  .top {
+    & > h3 {
+      font-size: 20px;
+    }
+    & > p {
+      margin-top: 5px;
+      font-size: 12px;
+      color: #a19d97;
+    }
+  }
+  .conten {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+    .row {
+      border-bottom: 2px dashed #fff;
+      padding: 15px 0;
+      display: flex;
+      .left {
+        width: 46px;
+        height: 46px;
+        margin-right: 15px;
+        & > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        & > p {
+          display: flex;
+          justify-content: space-between;
+          font-size: 16px;
+          align-items: center;
+          & > span {
+            font-size: 12px;
+            color: #a19d97;
+          }
+        }
+        .txt {
+          margin-top: 10px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  .bottmInp {
+    padding: 10px 0;
+    /deep/.el-textarea__inner:focus {
+      border-color: #b9412e;
+    }
+    /deep/.el-textarea__inner {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+    /deep/.el-textarea .el-input__count {
+      background-color: transparent;
+      color: #878787;
+    }
+    /deep/.el-input__count-inner {
+      background-color: transparent;
+      color: #878787;
+    }
+    .button {
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      .button_left{
+        width: 75vh;
+        margin-right: 5vh;
+      }
+      .button_right{
+        width: 20vh;
+      }
+    }
+  }
+}
+</style>