xinjiang_army/web/src/views/scene/components/comment/Message.vue

<template>
  <div class="message-body">
    <div class="message">
      <div class="con">
        <ul class="form">
          <li>
            <span>留言人：</span>
            <div class="name">
              <sradio
                @click.native="select = 'nickName'"
                :checked="select == 'nickName'"
                class="radio lightradio"
                :name="'使用昵称'"
              />
              <sradio
                @click.native="select = 'realName'"
                :checked="select == 'realName'"
                class="radio lightradio"
                :name="'使用真实姓名'"
              />
            </div>
          </li>
          <li>
            <span>留言内容：</span>
            <div class="input">
              <textarea
                :placeholder="
                  mseIsShow
                    ? '请输入您的留言,您的留言将直接显示'
                    : '请输入您的留言'
                "
                maxlength="250"
                v-model="msg"
                rows="3"
                cols="80"
              >
              </textarea>
              <span>{{ msg.length }}/250</span>
              <span class="loginwarn" v-if="!token" @click.stop="tologin"
                ><img :src="require('@/assets/images/warn.png')" alt="" />
                请先登录后，再进行留言</span
              >
            </div>
            <div class="button dati_btn" @click="leaveMsg('', '')">
              <span class="active">提交</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="leaving">
        <div class="title">
          <span
            >全部留言
            <i class="lightbtmLine"></i>
          </span>
        </div>
        <ul class="content">
          <li v-for="(item, i) in message" :key="i">
            <div class="info">
              <span class="primaryTxt">{{
                (item.isRealName ? item.realName : item.nickName) || "匿名用户"
              }}</span>
              <span>{{ item.createTime }}</span>
            </div>
            <div class="body">
              <span>{{ item.content }}</span>
              <div class="txtSameHovers" @click="showComment(item, i)">
                <img
                  :src="require(`@/assets/images/btnlist/item_comment.png`)"
                  alt=""
                />
                <span>评论</span>
              </div>
            </div>
            <ul class="response-text" v-if="item.children">
              <li v-for="(sub, idx) in item.children" :key="idx">
                <div>{{ sub.content }}</div>
                <div>
                  来自：{{
                    sub.isRealName ? sub.realName : sub.nickName
                  }}
                  的评论 {{ sub.createTime }}
                </div>
              </li>
            </ul>
            <template v-if="item.showComment">
              <div class="response input">
                <textarea
                  v-model="item.comment"
                  rows="3"
                  maxlength="250"
                  cols="80"
                  placeholder="请写下您的评论"
                ></textarea>
                <span>{{ item.comment.length }}/250</span>
              </div>
              <div
                class="subbutton button primarybtn mySubbutton"
                @click="leaveMsg(item, i)"
              >
                提交
              </div>
            </template>
          </li>
        </ul>
      </div>
      <div v-if="!loadAll" class="loadmore" @click="loadmore">
        <span class="lightborderThemeStyle">加载更多</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getMsg, saveMsg, webMesCheck } from "@/config/api";

export default {
  data() {
    return {
      msg: "",
      message: [],
      select: "nickName",
      mtotal: 0,
      mpageSize: 6,
      mcurrentPage: 1,
      loadAll: false,
      // 是否有留言权限
      mseIsShow: false,
    };
  },
  watch: {
    mpageSize() {
      this.getMessage();
    },
  },
  async mounted() {
    this.getMessage();
  },
  methods: {
    tologin() {
      window.scrollTo(0, 0);
      this.$bus.$emit("showLogin", true);
    },
    loadmore() {
      this.mpageSize += this.mpageSize;
    },
    async leaveMsg(item = "", i = "") {
      let tmp = (item ? item.comment : this.msg).trim();
      if (!tmp) {
        return alert("留言不能为空");
      }
      saveMsg(
        "comment",
        {
          content: tmp,
          parentId: item.id || "",
          isRealName: Number(this.select == "realName"),
        },
        (res) => {
          if (res.code == 0) {
            this.msg = "";
            alert("留言成功");
            item && this.showComment(item, i);
            this.getMessage();
          }
        }
      );
    },
    showComment(item, i) {
      item.showComment = !item.showComment;
      item.comment = "";
      this.$set(this.message, i, item);
    },
    async getMessage() {
      if (this.loadAll) return;
      getMsg(
        {
          pageNum: this.mcurrentPage,
          pageSize: this.mpageSize,
        },
        (result) => {
          result.data.list.forEach((item) => {
            item.showComment = false;
            item.comment = "";
          });
          if (result.data.list.length == this.message.length) {
            this.loadAll = true;
          }
          this.message = result.data.list;
          this.mtotal = result.data.total;
        }
      );
    },
  },
  async created() {
    // 查看是否有留言权限
    let res = await webMesCheck();
    this.mseIsShow = res.data;
  },
};
</script>

<style lang="less" scoped>
.message-body {
  max-width: 80%;
  margin: 100px auto 0;
  position: relative;
  height: 80%;
  z-index: 99;
  .message {
    height: 100%;
    .con {
      width: 100%;
      .form {
        text-align: left;
        width: 100%;
        > li {
          margin-bottom: 30px;
          display: flex;
          width: 100%;
          align-items: flex-start;
          > span {
            display: inline-block;
            width: 100px;
            flex-shrink: 0;
            font-size: 20px;
            margin-right: 10px;
            text-align: right;
          }
          .name {
            .radio {
              margin-right: 50px;
            }
          }
          .input {
            flex: auto;
            width: 100%;
            position: relative;
            font-size: 0;
            > textarea {
              width: 100%;
              line-height: 2;
              font-size: 16px;
              color: #2d2d2d;
            }
            > span {
              display: inline-block;
              color: rgba(153, 153, 153, 1);
              position: absolute;
              font-size: 12px;
              bottom: 5px;
              right: 14px;
            }
            .loginwarn {
              left: 50%;
              right: auto;
              transform: translateX(-50%);
              background-color: rgba(51, 51, 51, 0.5);
              color: #fff;
              display: flex;
              align-items: center;
              bottom: 10px;
              padding: 4px;
              border-radius: 2px;
              > img {
                width: 20px;
                margin-right: 4px;
              }
            }
          }
          .button {
            flex-shrink: 0;
            align-self: flex-end;
            text-align: center;
            border: none;
            border-radius: 5px;
            margin-left: 20px;
            > span {
              width: 100%;
              padding: 0;
              border-radius: 5px;
              margin-left: 0;
            }
          }
          &:last-of-type {
            margin-bottom: 10px;
          }
        }
      }
      > div {
        display: flex;
        justify-content: center;
        align-items: center;

        .button {
          position: relative;
          width: 150px;
          &:first-of-type {
            margin-right: 50px;
          }
          > span {
            position: absolute;
            left: -220px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(153, 153, 153, 1);
            display: flex;
            align-items: center;
            > img {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }
          }
        }
      }
    }
    .leaving {
      height: 40%;

      .title {
        text-align: left;
        font-size: 30px;
        border-bottom: 1px solid #fff;
        padding-bottom: 10px;
        position: relative;
        margin-bottom: 20px;
        width: 98%;
        span {
          display: inline-block;
          min-width: 118px;
          font-size: 20px;
          position: relative;
          > i {
            bottom: -16px;
          }
        }
      }
      .content {
        color: #fff;
        text-align: left;
        padding-right: 20px;
        overflow-y: auto;
        height: 80%;
        > li {
          margin-bottom: 10px;
          .info {
            > span {
              display: inline-block;
              font-size: 20px;
              margin-right: 10px;
              &:not(:first-of-type) {
                font-size: 14px;
              }
            }
          }
          .body {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            > span {
              width: 90%;
              word-break: break-all;
              display: inline-block;
              color: #fff;
            }
            .txtSameHovers {
              color: #fff;
              cursor: pointer;
              img {
                margin-right: 10px;
                width: 16px;
                position: relative;
                top: -1px;
              }
            }
          }
          .response {
            margin-top: 10px;
            border: 1px #fff solid;
            width: 100%;
            position: relative;
            font-size: 0;
            > textarea {
              line-height: 2;
              color: #2d2d2d;
            }
            > span {
              display: inline-block;
              color: #909399;
              position: absolute;
              font-size: 12px;
              bottom: 5px;
              right: 14px;
            }
          }
          .response-text {
            border: 1px rgba(153, 153, 153, 1) solid;
            background-color: #f3f3f3;
            padding: 10px 13px;
            color: rgba(153, 153, 153, 1);
            > li {
              > div {
                &:last-of-type {
                  font-size: 14px;
                  text-align: right;
                  margin-top: 20px;
                }
              }
            }
          }
          .subbutton {
            font-size: 18px;
            font-weight: bold;
            display: inline-block;
            text-align: center;
            margin-top: 20px;
          }
        }
      }
    }
    .loadmore {
      margin-top: 70px;
      .lightborderThemeStyle {
        padding: 10px 30px;
        border-radius: 4px;
      }
    }
  }
}
</style>