new_era/src/pages/scene/components/content.vue

<template>
  <div class="vcontent">
    <div class="vcontentcon">
      <div class="vcontenttitle">
        留言板
      </div>
      <div class="cbody">
        <ul>
          <li v-for="(item, i) in list" :key="i">
            <img :src="item.avatar || require(`@/assets/images/project/icon/usericon.png`)" alt="" />
            <div>
              <p>{{ item.message }}</p>
              <p>{{ item.dateline }}</p>
            </div>
            <p>{{ item.author }}</p>
          </li>
        </ul>
        <pagination class="paging" v-if="paging.total > 0" @changeCurrent="changeCurrent" :paging="paging" />

        <div class="vbtm">
          <div class="vtextarea">
            <textarea v-model="msg" rows="6" maxlength="100" cols="20" placeholder="请输入留言......"></textarea>
            <emoji class="emoji" @select="selectEmoji" :type="0" id="biaoqing1" />
            <span class="maxlength">{{ msg.length }}/100</span>
          </div>
          <div class="subtn" @click="submit">
            <span>提交<br />留言</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcontentList, postcontent } from "@/config/api";
import emoji from "@/components/emoji";

function timestampToStr(timestamp) {
  let time = new Date(timestamp * 1000);
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let date = time.getDate();
  let hours = time.getHours();
  let minute = time.getMinutes();
  let second = time.getSeconds();

  if (month < 10) {
    month = "0" + month;
  }

  if (date < 10) {
    date = "0" + date;
  }

  if (hours < 10) {
    hours = "0" + hours;
  }

  if (minute < 10) {
    minute = "0" + minute;
  }

  if (second < 10) {
    second = "0" + second;
  }

  return year + "-" + month + "-" + date + " " + hours + ":" + minute + ":" + second;
}

export default {
  data() {
    return {
      list: [],
      msg: "",
      paging: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1,
      },
    };
  },
  components: { emoji },
  mounted() {
    this.getcontentList();
  },
  methods: {
    submit() {
      if (!this.msg.trim()) {
        this.$showTips({ content: "请输入留言内容" });
      } else {
        postcontent({ message: this.msg}, () => {
          this.$showTips({ content: '留言成功' });
          this.msg = "";
          this.getcontentList();
        });
      }
    },
    selectEmoji(data) {
      this.msg += data;
    },
    changeCurrent(data) {
      this.paging.current = data;
      this.getcontentList();
    },

    getcontentList() {
      getcontentList(
        {
          prepage: this.paging.pageSize,
          page: this.paging.current,
        },
        (res) => {
          this.list = res.data.content.map((item) => {
            return {
              ...item,
              dateline: timestampToStr(item.dateline),
            };
          });

          this.paging.total = res.data.total;
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
@w: 1236px;
@fixw: 8px;
.vcontent {
  width: @w;
  position: relative;
  height: 740px;
  pointer-events: none;

  .vcontentcon {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 34px 0 0;
    background-image: url("~@/assets/images/proj2022/icon/tcbg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    .vcontenttitle {
      margin: 20px 0 20px;
      padding-left: 220px;
      text-align: left;
      font-size: 30px;
      font-weight: bold;
      position: relative;
      &::after{
        content: '';
        display: inline-block;
        position: absolute;
        left: 251px;
        bottom: -10px;
        width: 30px;
        height: 4px;
        background: #399efc;
      }
    }
    .cbody {
      width: 90%;
      margin: 0 auto;
      padding: 20px 30px;
      .ctitle {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        > span {
          &:first-of-type {
            font-size: 24px;
          }
        }
      }
      > ul {
        height: 300px;
        overflow-y: auto;
        border-bottom: 2px solid #fff;
        margin-top: 20px;
        background: rgba(12, 22, 32, 0.55);
        padding: 0 20px 20px;
        > li {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px dashed #d8d8d8;
          padding: 14px 0;
          @wh: 50px;
          &:last-of-type {
            border-bottom: none;
          }
          > img {
            border-radius: 50%;
            width: @wh;
            height: @wh;
            flex-shrink: 0;
          }
          > div {
            text-align: left;
            flex: 10;
            margin-left: 20px;
            > p {
              &:first-of-type {
                font-size: 16px;
              }
              &:last-of-type {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.7);
                margin-top: 10px;
              }
            }
          }
          > p {
            flex-shrink: 0;
          }
        }
      }
      .paging {
        margin-top: 4px;
      }
      .vbtm {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .vtextarea {
          background-color: rgba(0, 0, 0, 0.5);
          width: 80%;
          margin: 18px 0;
          position: relative;
          > textarea {
            background: none;
            outline: none;
            width: 100%;
            border: none;
            padding: 10px 20px;
          }
          .emoji {
            position: absolute;
            bottom: 0;
            left: 18px;
          }
          .maxlength {
            position: absolute;
            bottom: 10px;
            color: #a8a8a8;
            right: 18px;
          }
        }
        .subtn {
          width: 18%;
          height: 140px;
          border-radius: 4px;
          background-image: url("~@/assets/images/proj2022/icon/tab.png");
          background-repeat: no-repeat;
          background-size: auto 100%;
          position: relative;
          cursor: pointer;
          > span {
            position: absolute;
            left: 24%;
            top: 20%;
            display: inline-block;
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .submitbtn {
    position: absolute;
    pointer-events: auto;
    bottom: 34px;
    font-size: 26px;
    z-index: 1099;
    left: 49%;
    letter-spacing: 1px;
    cursor: pointer;
    transform: translateX(-50%);
    padding: 10px 55px;
    border-radius: 6px;
  }
}
</style>