Seven_teams/houtai/src/views/message/index.vue

<template>
  <div class="message">
    <div class="conten">
      <h2 class="title">留 言 板</h2>
      <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="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
      <!-- 文本域和按钮 -->
      <div class="bottmInp">
        <div class="texe">
          <el-input
            maxlength="100"
            show-word-limit
            resize="none"
            type="textarea"
            :rows="3"
            placeholder="欢迎提交您的珍贵留言，100字以内~"
            v-model="textarea"
          >
          </el-input>
        </div>
        <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>
          </div>
          <el-button
            style="width: 120px; color: #d7b07e"
            type="primary"
            @click="commentSave"
            >提 交</el-button
          >
        </div>
      </div>
    </div>
    <ul>
      <li>
        <span></span>
      </li>
    </ul>
  </div>
</template>

<script>
import { commentSave, commentWebList } from '@/apis/tab7'
export default {
  name: 'message',
  components: {},
  data () {
    // 这里存放数据
    return {
      textarea: '',
      name: '',
      data: [],
      total: 0,
      formData: {
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        searchKey: '',
        status: 2
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 分页器方法
    currentChange (val) {
      // console.log('当前页改变了', val)
      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 () {
    this.commentWebList(this.formData)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
/deep/.el-input__inner::-webkit-input-placeholder {
  color: #878787 !important;
}
/deep/.el-input__inner:-moz-placeholder {
  color: #878787 !important;
}
/deep/.el-input__inner::-moz-placeholder {
  color: #878787 !important;
}
/deep/.el-input__inner:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #878787 !important;
}
/deep/.el-textarea__inner::-webkit-input-placeholder {
  color: #878787 !important;
}
/deep/.el-textarea__inner:-moz-placeholder {
  color: #878787 !important;
}
/deep/.el-textarea__inner::-moz-placeholder {
  color: #878787 !important;
}
/deep/.el-textarea__inner:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #878787 !important;
}
.message {
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 100vh;
  min-height: 650px;
  .conten {
    background: url("../../assets/img/mesBac.png");
    background-size: 100% 100%;
    border-top: 8px solid #be1220;
    border-bottom: 8px solid #be1220;
    /deep/.el-button--primary {
      background-color: #b92e2e;
      width: 100%;
      height: 40px;
    }
    /deep/.el-pager li {
      background-color: transparent;
      color: #333333;
    }
    /deep/.el-pager li.active {
      color: #b92e2e;
    }
    /deep/.el-pagination button {
      background-color: transparent;
    }
    /deep/.el-pagination button:disabled {
      background-color: transparent;
    }

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 650px;
    background-color: #fff;
    padding: 20px;
    .title {
      padding-left: 20px;
      color: #fff;
    }
    .liuyan::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    .liuyan::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(185, 46, 46, 0.3);
    }
    .liuyan::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: transparent;
    }
    .liuyan {
      background-color: rgba(255, 255, 255, 0.3);
      padding-right: 20px;
      margin: 20px 20px 0;
      padding: 15px;
      height: 320px;
      overflow-y: auto;
      li {
        border-bottom: 1px dashed #b92e2e;
        color: #878787;
        font-size: 16px;
        display: flex;
        & > div {
          padding: 12px 0;
        }
        .name {
          width: 140px;
        }
        .con {
          flex: 1;
          margin-right: 20px;
        }
        .time {
          width: 140px;
        }
      }
    }
    .noneTxt {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
    }
    .pagination {
      padding: 20px;
      margin: 0 auto;
      width: 920px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.3);
    }
    .bottmInp {
      /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;
      }
      margin-top: 15px;
      width: 100%;
      padding: 0 20px;
    }
    .button {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      .button_left {
        width: 300px;
        display: flex;
        align-items: center;
        .biaoji {
          position: relative;
          margin-right: 10px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 1px solid #b9412e;
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #b9412e;
          }
        }
      }
    }
  }
}
</style>