初步完成移动端留言和论坛

houtai/src/main.js

@@ -5,6 +5,12 @@ import App from './App.vue'
 import router from './router'
 import './assets/css/base.css'
 import Moment from 'moment'
+
+// 留言和论坛的下拉刷新
+import { List } from 'vant'
+import 'vant/lib/index.css'
+Vue.use(List)
+
 Vue.prototype.moment = Moment
 Vue.config.productionTip = false
 const imgErr = {

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/forum/list.vue

@@ -586,12 +586,12 @@ export default {
     /deep/.el-input__count-inner {
       background-color: transparent;
     }
-    /deep/.w-e-toolbar {
-      background-color: rgba(255, 255, 255, 0.5) !important;
-    }
-    /deep/.w-e-text-container {
-      background-color: rgba(255, 255, 255, 0.5) !important;
-    }
+    // /deep/.w-e-toolbar {
+    //   background-color: rgba(255, 255, 255, 0.5) !important;
+    // }
+    // /deep/.w-e-text-container {
+    //   background-color: rgba(255, 255, 255, 0.5) !important;
+    // }
   }
 }
 </style>

houtai/src/views/forum/look.vue

@@ -690,12 +690,12 @@ export default {
     /deep/.el-input__count-inner {
       background-color: transparent;
     }
-    /deep/.w-e-toolbar {
-      background-color: rgba(255, 255, 255, 0.5) !important;
-    }
-    /deep/.w-e-text-container {
-      background-color: rgba(255, 255, 255, 0.5) !important;
-    }
+    // /deep/.w-e-toolbar {
+    //   background-color: rgba(231,218,203) !important;
+    // }
+    // /deep/.w-e-text-container {
+    //   background-color: rgba(231,218,203) !important;
+    // }
   }
 }
 </style>

houtai/src/views/forumM/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="forumM_index">
       <keep-alive>
-    <!-- <component :is='cutCom' @cutComFn='cutComFn' :lookInfo='lookInfo'></component> -->
-    <component :is='cutCom' @cutComFn='cutComFn'></component>
+    <component :is='cutCom' @cutComFn='cutComFn' :lookInfo='lookInfo'></component>
+    <!-- <component :is='cutCom' @cutComFn='cutComFn'></component> -->
   </keep-alive>
   </div>
 </template>
@@ -16,7 +16,8 @@ export default {
   data () {
     // 这里存放数据
     return {
-      cutCom: 'List'
+      cutCom: 'List',
+      lookInfo: {}
     }
   },
   // 监听属性 类似于data概念
@@ -26,11 +27,11 @@ export default {
   // 方法集合
   methods: {
     // 从List组件点击文章触发
-    cutComFn (item) {
+    cutComFn (item, flag) {
       // 改变is的值切换动态组件
-      if (item.id) this.cutCom = 'Look'
+      if (flag) this.cutCom = 'Look'
       else this.cutCom = 'List'
-      // this.lookInfo = item
+      this.lookInfo = item
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）

houtai/src/views/forumM/list.vue

@@ -12,7 +12,15 @@
       </li>
     </ul>
     <!-- 内容 -->
-    <div class="conten" ref="contenSro">
+
+    <van-list
+      class="conten"
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+      :immediate-check="false"
+    >
       <div
         class="row"
         v-for="item in dataArr"
@@ -41,10 +49,12 @@
           </div>
         </div>
       </div>
-    </div>
+    </van-list>
+
     <!-- 底部的回帖按钮 -->
-    <div class="postMes" @click="postMesShow=true">我 要 发 贴</div>
-    <!-- 富文本 -->
+    <div class="postMes" @click="postMesShow = true">我 要 发 贴</div>
+
+    <!-- 点击我要发贴出来的发帖页面 -->
     <div class="postMesShow" v-show="postMesShow">
       <div class="postMesBack" @click="postMesShow = false">
         <i class="el-icon-arrow-left"></i>
@@ -52,7 +62,7 @@
       </div>
       <!-- 标题输入框 -->
       <el-input
-        style="margin:20px 0 10px"
+        style="margin: 20px 0 10px"
         type="text"
         placeholder="帖子标题字数不能超过30个字。"
         v-model="title"
@@ -69,33 +79,61 @@
         <el-option label="美丽校园" value="school"></el-option>
         <el-option label="文物典藏" value="goods"></el-option>
       </el-select>
+        <!-- 上传图片 -->
+        <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 id="div1" style="z-index: 1"></div>
+      <div id="div1" style="z-index: 1">
+      </div>
       <!-- 底部姓名和按钮 -->
       <div class="postMesFloo">
-          <el-input
-            style="margin-right: 20px"
-            type="text"
-            placeholder="请填写您的姓名"
-            v-model="creatorName"
-            maxlength="8"
-            show-word-limit
-          >
-          </el-input>
-          <div class="submit">提 交</div>
+        <el-input
+          style="margin-right: 20px"
+          type="text"
+          placeholder="请填写您的姓名"
+          v-model="creatorName"
+          maxlength="8"
+          show-word-limit
+        >
+        </el-input>
+        <div class="submit" @click="publish">提 交</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { webBbsList, webBbsVisit, webBbsLike } from '@/apis/tab8'
+import axios from '@/utils/request'
+import E from 'wangeditor'
+import { webBbsList, webBbsVisit, webBbsLike, webBbsSave } from '@/apis/tab8'
 export default {
   neme: 'forumM_list',
   components: {},
+  props: {
+    lookInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data () {
     // 这里存放数据
     return {
+      // 服务器前缀地址
+      baseURL: '',
+
+      // vant下拉刷新的数据----------
+      loading: false,
+      finished: false,
+      // vant下拉刷新的数据----------
       tabInd: 1,
       tab: [
         { id: 1, name: '数字史馆', type: 'scene' },
@@ -110,7 +148,7 @@ export default {
         status: 2,
         type: 'scene',
         pageNum: 1,
-        pageSize: 99999,
+        pageSize: 5,
         bbsType: 'topic'
       },
       selectType: 'scene',
@@ -120,7 +158,7 @@ export default {
       // 点赞-帖子的开关
       likeFlagOne: [],
       // 控制富文本的显示和隐藏
-      postMesShow: true
+      postMesShow: false
     }
   },
   // 监听属性 类似于data概念
@@ -129,38 +167,117 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击发表文章
+    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('发帖成功，等待审核.')
+        this.fuTxtShow = false
+      } else this.$message.warning(res.msg)
+    },
+    // 上传图片
+    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.urlPath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
+      )
+    },
+    // vant下拉刷新触发的函数
+    onLoad () {
+      this.formData.pageNum++
+      this.webBbsList(this.formData)
+    },
+    // 封装消息提示函数
+    notify (message, type) {
+      this.$notify({
+        message,
+        position: 'bottom-right',
+        type,
+        duration: 1000
+      })
+    },
     // 点击点赞
     async likeClick (item) {
       if (!this.likeFlagOne.includes(item.id)) {
         const res = await webBbsLike('upVote', item.id)
         if (res.code === 0) {
-          this.$message.success('点赞成功.')
+          this.notify('点赞成功', 'success')
           this.likeFlagOne.push(item.id)
           item.upVote++
           item.flag = true
-        } else this.$message.warning(res.msg)
-      } else this.$message.warning('您已经赞过了.')
+        } else this.notify(res.msg, 'warning')
+      } else this.notify('您已经赞过了', 'warning')
     },
     // 点击通知父组件切换 动态组件is的值，并且把数据传过去
     async skip (item) {
       await webBbsVisit(item.id)
-      this.$emit('cutComFn', item)
+      const temp = document.querySelector('.conten')
+      this.$emit('cutComFn', { ...item, scrollTop: temp.scrollTop }, true)
     },
     cutTab (item) {
+      this.dataArr = []
       this.tabInd = item.id
       this.formData.type = item.type
+      this.formData.pageNum = 1
       this.webBbsList(this.formData)
+      this.finished = false
       // 让下面的下拉框同步
       this.selectType = item.type
       // 回到屏幕顶点
-      this.$refs.contenSro.scrollTo({ top: 0 })
+      // const temp = document.querySelector('.conten')
+      // temp.scrollTo({ top: 0 })
       // console.log('-----------')
       // window.scrollTo({ top: 0 })
     },
     // 封装获取列表的方法
     async webBbsList (data) {
       const res = await webBbsList(data)
-      this.dataArr = res.data.records
+      res.data.records.forEach((v) => {
+        this.dataArr.push(v)
+      })
+      this.loading = false
+      if (res.data.records.length < 5 || this.dataArr.length >= res.data.total) this.finished = true
       this.likeFlagOne.forEach((p) => {
         this.dataArr.forEach((v) => {
           if (p === v.id) v.flag = true
@@ -169,9 +286,35 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 调用获取列表方法
+    this.webBbsList(this.formData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  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 () {}, // 生命周期 - 更新之前
@@ -179,8 +322,10 @@ export default {
   beforeDestroy () {}, // 生命周期 - 销毁之前
   destroyed () {}, // 生命周期 - 销毁完成
   activated () {
-    // 调用获取列表方法
-    this.webBbsList(this.formData)
+    if (this.lookInfo.scrollTop) {
+      const temp = document.querySelector('.conten')
+      temp.scrollTo({ top: this.lookInfo.scrollTop })
+    }
   } // 如果页面有keep-alive缓存功能，这个函数会触发
 }
 </script>
@@ -190,6 +335,7 @@ export default {
   height: 100%;
   & > h3 {
     font-size: 20px;
+    margin-left: 10px;
   }
   .topTab {
     margin: 10px;
@@ -303,20 +449,53 @@ export default {
     /deep/.el-input__count-inner {
       background-color: transparent;
     }
-    /deep/.w-e-toolbar {
-      background-color: rgba(255, 255, 255, 0.5) !important;
+    // /deep/.w-e-toolbar {
+    //   background-color: rgba(255, 255, 255, 0.5) !important;
+    // }
+    // /deep/.w-e-text-container {
+    //   background-color: rgba(255, 255, 255, 0.5) !important;
+    // }
+    /deep/.w-e-toolbar .w-e-menu {
+      display: none !important;
     }
-    /deep/.w-e-text-container {
-      background-color: rgba(255, 255, 255, 0.5) !important;
+    /deep/.w-e-toolbar .w-e-menu:nth-of-type(17) {
+      display: flex !important;
     }
-    #div1{
-      height: calc(100vh - 230px);
+
+      .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: 170px;
+        left: 70px;
+        width: 40px;
+        height: 40px;
+      }
+    #div1 {
+      height: calc(100vh - 240px);
+      margin-top: 10px;
+      /deep/.w-e-text-container{
+        height: calc(100% - 45px) !important;
+      }
     }
-    .postMesFloo{
+    .postMesFloo {
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
-      .submit{
+      .submit {
         margin-top: 2px;
         width: 60px;
         height: 36px;

houtai/src/views/forumM/look.vue

@@ -0,0 +1,464 @@
+<template>
+  <div class="forumM_look">
+    <!-- 返回按钮和标题 -->
+    <div class="postMesBackTop" @click="$emit('cutComFn', lookInfo, false)">
+      <i class="el-icon-arrow-left"></i>
+      <span>{{ lookInfo.title }}</span>
+    </div>
+    <!-- 内容 -->
+    <!-- 没有数据的时候 -->
+    <div class="conten null" :class="{offsetHeight:offsetHeight}" v-if="dataArr.length === 0">暂无回帖</div>
+    <van-list
+      v-else
+      :class="{offsetHeight:offsetHeight}"
+      class="conten"
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+      :immediate-check="false"
+    >
+      <div class="row" v-for="item in dataArr" :key="item.id">
+        <div class="row_top">
+          <div class="left">
+            <img src="../../assets/imgAdd/touxiang.png" alt="" />
+            <div>
+              <p>{{ item.creatorName }}</p>
+              <p class="right">{{ item.createTime }}</p>
+            </div>
+          </div>
+          <div class="rowFloo" @click="clickLike(item)">
+            <div class="tow" :class="{ active: item.flag }">
+              {{ item.upVote }}
+            </div>
+          </div>
+        </div>
+        <div class="rowCon">
+          <div class="title">{{ item.title }}</div>
+          <div v-html="item.content" class="txt"></div>
+        </div>
+      </div>
+    </van-list>
+
+    <!-- 底部的回帖按钮 -->
+    <div class="postMes" @click="postMesShow = true">我 要 回 贴</div>
+
+    <!-- 点击我要发贴出来的发帖页面 -->
+    <div class="postMesShow" v-show="postMesShow">
+      <div class="postMesBack" @click="postMesShow = false">
+        <i class="el-icon-arrow-left"></i>
+        <span>我 要 回 贴</span>
+      </div>
+      <!-- 上传图片 -->
+      <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 id="div2" style="z-index: 1"></div>
+      <!-- 底部姓名和按钮 -->
+      <div class="postMesFloo">
+        <el-input
+          style="margin-right: 20px"
+          type="text"
+          placeholder="请填写您的姓名"
+          v-model="name2"
+          maxlength="8"
+          show-word-limit
+        >
+        </el-input>
+        <div class="submit" @click="publish">提 交</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/request'
+import E from 'wangeditor'
+import { webBbsMesList, webBbsLike, webBbsSave } from '@/apis/tab8'
+export default {
+  name: 'forumM_look',
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: {
+    lookInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    // 这里存放数据
+    return {
+      // 头部高度的变化
+      offsetHeight: false,
+      // 控制富文本的显示和隐藏
+      postMesShow: false,
+      name2: '',
+      content: '',
+      // 服务器前缀地址
+      baseURL: '',
+      // 点赞-帖子的开关
+      likeFlag: [],
+
+      formData: {
+        parentId: null,
+        pageNum: 1,
+        pageSize: 5
+      },
+      // vant下拉刷新的数据----------
+      loading: false,
+      finished: false,
+      // vant下拉刷新的数据----------
+      dataArr: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击发表文章
+    async publish () {
+      if (this.name2.trim() === '') {
+        return this.$message.warning('名字不能为空!')
+      }
+      if (this.editor.txt.html() === '') {
+        return this.$message.warning('内容不能为空')
+      }
+      const res = await webBbsSave({
+        bbsType: 'reply',
+        parentId: this.formData.parentId,
+        content: this.editor.txt.html(),
+        creatorName: this.name2,
+        type: this.lookInfo.type,
+        title: this.lookInfo.title
+      })
+      if (res.code === 0) {
+        this.name2 = ''
+        this.editor.txt.html('')
+        this.$message.success('回帖成功，等待审核.')
+        this.webBbsMesList(this.formData)
+        this.fuTxtShow = false
+      } else this.$message.warning(res.msg)
+    },
+    // 上传图片
+    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.urlPath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
+      )
+    },
+
+    // 封装消息提示函数
+    notify (message, type) {
+      this.$notify({
+        message,
+        position: 'bottom-right',
+        type,
+        duration: 1000
+      })
+    },
+    // 点击点赞
+    async clickLike (item) {
+      console.log('--------')
+      if (!this.likeFlag.includes(item.id)) {
+        const res = await webBbsLike('upVote', item.id)
+        if (res.code === 0) {
+          this.notify('点赞成功', 'success')
+          this.likeFlag.push(item.id)
+          item.upVote++
+          item.flag = true
+        } else this.notify(res.msg, 'warning')
+      } else this.notify('您已经赞过了', 'warning')
+    },
+    onLoad () {
+      this.formData.pageNum++
+      this.webBbsMesList(this.formData)
+    },
+    // 封装获取评论列表的方法
+    async webBbsMesList (data) {
+      const res = await webBbsMesList(data)
+      res.data.records.forEach((v) => {
+        this.dataArr.push(v)
+      })
+      this.loading = false
+      if (
+        res.data.records.length < 5 ||
+        this.dataArr.length >= res.data.total
+      ) {
+        this.finished = true
+      }
+      // 点赞高亮的判断
+      this.dataArr.forEach((v) => {
+        this.likeFlag.forEach((p) => {
+          if (p === v.id) v.flag = true
+        })
+      })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E('#div2')
+    // 配置字体
+    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 () {
+    this.dataArr = []
+    this.formData.pageNum = 1
+    this.formData.parentId = this.lookInfo.id
+    this.webBbsMesList(this.formData)
+    // 获取头部的高度
+    const temp = document.querySelector('.postMesBackTop')
+    if (temp.offsetHeight > 40) this.offsetHeight = true
+    else this.offsetHeight = false
+  } // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.forumM_look {
+  width: 100%;
+  height: 100%;
+  .postMesBackTop {
+    margin-bottom: 20px;
+    padding-right: 80px;
+    display: flex;
+    align-items: center;
+    font-size: 30px;
+    font-weight: 700;
+    & > span {
+      font-size: 20px;
+      display: -webkit-box;
+      overflow: hidden;
+      white-space: normal !important;
+      text-overflow: ellipsis;
+      word-wrap: break-word;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+  .conten {
+    width: 100%;
+    height: calc(100vh - 140px);
+    overflow-y: auto;
+    .row {
+      margin-bottom: 10px;
+      padding: 8px;
+      padding-bottom: 0;
+      border-bottom: 1px dashed #fff;
+      .row_top {
+        display: flex;
+        justify-content: space-between;
+        .left {
+          max-width: 200px;
+          display: flex;
+          & > img {
+            margin-right: 10px;
+            width: 36px;
+            height: 36px;
+          }
+          & > div {
+            & > p {
+              font-size: 14px;
+              vertical-align: top;
+            }
+            .right {
+              margin-top: 5px;
+              font-size: 12px;
+              color: #a19d97;
+            }
+          }
+        }
+        .rowFloo {
+          padding: 0 10px;
+          display: flex;
+          justify-content: space-between;
+          & > div {
+            padding-left: 30px;
+            height: 40px;
+            line-height: 40px;
+          }
+          .tow {
+            background: url("../../assets/imgAdd/like.png") no-repeat left
+              center;
+          }
+          .active {
+            background: url("../../assets/imgAdd/likeAc.png") no-repeat left
+              center;
+          }
+        }
+      }
+      .rowCon {
+        .title {
+          font-weight: 700;
+          margin: 10px 0;
+        }
+        .txt {
+          font-size: 14px;
+          padding-bottom: 10px;
+        }
+      }
+    }
+  }
+  .null {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+  }
+  .offsetHeight{
+    height: calc(100vh - 162px);
+  }
+  .postMes {
+    margin-top: 10px;
+    background-color: #b92e2e;
+    text-align: center;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    color: #fff;
+  }
+  .postMesShow {
+    padding: 20px;
+    background: url("../../assets/imgAdd/mesBac.png") #f3e9d9;
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    .postMesBack {
+      display: flex;
+      align-items: center;
+      font-size: 30px;
+      font-weight: 700;
+      & > span {
+        font-size: 20px;
+      }
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+    /deep/.el-input__count-inner {
+      background-color: transparent;
+    }
+    // /deep/.w-e-toolbar {
+    //   background-color: rgba(255, 255, 255, 0.5) !important;
+    // }
+    // /deep/.w-e-text-container {
+    //   background-color: rgba(255, 255, 255, 0.5) !important;
+    // }
+    /deep/.w-e-toolbar .w-e-menu {
+      display: none !important;
+    }
+    /deep/.w-e-toolbar .w-e-menu:nth-of-type(17) {
+      display: flex !important;
+    }
+
+    .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: 60px;
+      left: 70px;
+      width: 40px;
+      height: 40px;
+    }
+    #div2 {
+      height: calc(100vh - 124px);
+      margin-top: 10px;
+      /deep/.w-e-text-container {
+        height: calc(100% - 45px) !important;
+      }
+    }
+    .postMesFloo {
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      .submit {
+        margin-top: 2px;
+        width: 60px;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        color: #fff;
+        background-color: #b92e2e;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+</style>

houtai/src/views/message/index.vue

@@ -2,15 +2,15 @@
   <div class="message">
     <div class="conten">
       <h2 class="title">留 言 板</h2>
-      <ul class="liuyan"  v-if="data.length>0">
+      <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>
+          <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="liuyan noneTxt" v-else>暂无数据</div>
       <!-- 分页器 -->
       <div class="pagination">
         <el-pagination
@@ -37,17 +37,22 @@
         <div class="button">
           <div class="button_left">
             <div class="biaoji"></div>
-          <el-input
-            style="width:270px"
-            type="text"
-            placeholder="请填写您的姓名"
-            v-model="name"
-            maxlength="8"
-            show-word-limit
-          >
-          </el-input>
+            <el-input
+              style="width: 270px"
+              type="text"
+              placeholder="请填写您的姓名"
+              v-model="name"
+              maxlength="8"
+              show-word-limit
+            >
+            </el-input>
           </div>
-          <el-button style="width:120px;color: #d7b07e;" type="primary" @click="commentSave">提 交</el-button>
+          <el-button
+            style="width: 120px; color: #d7b07e"
+            type="primary"
+            @click="commentSave"
+            >提 交</el-button
+          >
         </div>
       </div>
     </div>
@@ -94,10 +99,13 @@ export default {
       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 })
+    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('提交成功，等待审核.')
@@ -107,7 +115,7 @@ export default {
     async commentWebList (data) {
       const res = await commentWebList(data)
       this.total = res.data.total
-      res.data.records.forEach(v => {
+      res.data.records.forEach((v) => {
         v.createTime = v.createTime.substring(0, v.createTime.length - 3)
       })
       this.data = res.data.records
@@ -162,11 +170,11 @@ export default {
   height: 100vh;
   min-height: 650px;
   .conten {
-    background: url('../../assets/img/mesBac.png');
+    background: url("../../assets/img/mesBac.png");
     background-size: 100% 100%;
-    border-top: 8px solid #BE1220;
-    border-bottom: 8px solid #BE1220;
-    /deep/.el-button--primary{
+    border-top: 8px solid #be1220;
+    border-bottom: 8px solid #be1220;
+    /deep/.el-button--primary {
       background-color: #b92e2e;
       width: 100%;
       height: 40px;
@@ -176,7 +184,7 @@ export default {
       color: #333333;
     }
     /deep/.el-pager li.active {
-      color: #B92E2E;
+      color: #b92e2e;
     }
     /deep/.el-pagination button {
       background-color: transparent;
@@ -206,7 +214,7 @@ export default {
       /*滚动条里面小方块*/
       border-radius: 10px;
       box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-      background: rgba(185, 46, 46, .3);
+      background: rgba(185, 46, 46, 0.3);
     }
     .liuyan::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
@@ -222,7 +230,7 @@ export default {
       height: 320px;
       overflow-y: auto;
       li {
-        border-bottom: 1px dashed #B92E2E;
+        border-bottom: 1px dashed #b92e2e;
         color: #878787;
         font-size: 16px;
         display: flex;
@@ -241,7 +249,7 @@ export default {
         }
       }
     }
-    .noneTxt{
+    .noneTxt {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -282,23 +290,23 @@ export default {
       margin-top: 15px;
       display: flex;
       justify-content: space-between;
-      .button_left{
+      .button_left {
         width: 300px;
         display: flex;
         align-items: center;
-        .biaoji{
+        .biaoji {
           position: relative;
           margin-right: 10px;
           width: 20px;
           height: 20px;
           border-radius: 50%;
           border: 1px solid #b9412e;
-          &::after{
-            content: '';
+          &::after {
+            content: "";
             position: absolute;
             top: 50%;
             left: 50%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
             width: 15px;
             height: 15px;
             border-radius: 50%;

houtai/src/views/messageM/index.vue

@@ -6,7 +6,14 @@
       <p>已有 {{ total }} 条留言</p>
     </div>
     <!-- 内容 -->
-    <div class="conten">
+    <van-list
+      class="conten"
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+      :immediate-check="false"
+    >
       <div class="row" v-for="item in data" :key="item.id">
         <div class="left">
           <img src="../../assets/imgAdd/touxiang.png" alt="" />
@@ -18,7 +25,7 @@
           <div class="txt">{{ item.content }}</div>
         </div>
       </div>
-    </div>
+    </van-list>
     <!-- 文本域和按钮 -->
     <div class="bottmInp">
       <div class="texe">
@@ -64,6 +71,11 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // vant下拉刷新的数据----------
+      loading: false,
+      finished: false,
+      // vant下拉刷新的数据----------
+
       textarea: '',
       name: '',
       data: [],
@@ -72,7 +84,7 @@ export default {
         startTime: '',
         endTime: '',
         pageNum: 1,
-        pageSize: 99999,
+        pageSize: 10,
         searchKey: '',
         status: 2
       }
@@ -84,6 +96,11 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // vant下拉刷新触发的函数
+    onLoad () {
+      this.formData.pageNum++
+      this.commentWebList(this.formData)
+    },
     // 点击提交留言
     async  commentSave () {
       if (this.textarea.trim() === '') return this.$message.warning('内容不能为空!')
@@ -98,7 +115,11 @@ export default {
     async commentWebList (data) {
       const res = await commentWebList(data)
       this.total = res.data.total
-      this.data = res.data.records
+      res.data.records.forEach(v => {
+        this.data.push(v)
+      })
+      this.loading = false
+      if (res.data.records.length < 10) this.finished = true
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）

webM/src/main.js

@@ -15,7 +15,9 @@ Vue.use(Lazyload,{
   error: require('./assets/imgM/IMGerror.png'),
   loading: require('./assets/imgM/loading.gif')
 })
-
+// 留言和论坛的下拉刷新
+import { List } from 'vant'
+Vue.use(List)
 import 'vant/lib/index.css';
 
 import 'viewerjs/dist/viewer.css'

webM/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
 })
 // 请求拦截器