HM21St_Page_User/src/views/reporter/components/ReportDetail.vue

<template>
  <div class="detail-report" v-if="infoDetail">
    <i class="el-icon-close" @click="closeDialog"></i>
    <div
      class="detail-left"
      v-if="infoDetail.res_urls_type && infoDetail.res_urls_type.length > 0"
    >
      <el-carousel :autoplay="false" arrow="always">
        <el-carousel-item
          v-for="item in infoDetail.res_urls_type"
          :key="item.url"
        >
          <template v-if="item.type === 'img'">
            <el-image
              class="image"
              :src="item.url"
              :fit="'contain'"
              :style="'width:802px;height:870px;'"
            >
              <div
                slot="placeholder"
                class="image-slot"
                :style="'line-height:130px'"
              >
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
          <template v-else-if="item.type === 'mp4'">
            <video controls width="802" height="870">
              <source :src="item.url" type="video/webm" />
              <source :src="item.url" type="video/mp4" />
              Sorry, your browser doesn't support embedded videos.
            </video>
          </template>
          <template v-else-if="item.type === 'mp3'">
            <audio :src="item.url" controls loop muted>
              浏览器不支持音频播放。
            </audio>
          </template>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="detail-right">
      <div class="right-top">
        <div class="creator-info">
          <el-image
            :src="
              infoDetail.creator_img_url
                ? infoDetail.creator_img_url
                : require('../../../assets/avatar.png')
            "
            fit="cover"
            style="width: 32px; height: 32px; margin-right: 8px"
          >
          </el-image>
          <span class="name">{{ infoDetail.creator_name }}</span>
        </div>
        <h3>{{ infoDetail.art_title }}</h3>
        <p>{{ infoDetail.art_content }}</p>
        <b>{{ infoDetail.create_time.substring(0, 10) }}</b>
      </div>
      <div class="right-bottom">
        <h4>
          共
          {{
            infoDetail.comment_count > 999 ? "999+" : infoDetail.comment_count
          }}
          条评论
        </h4>
        <div class="comment-box">
          <div class="comment-item">
            <div class="comment-top">
              <el-image
                :src="
                  infoDetail.creator_img_url
                    ? infoDetail.creator_img_url
                    : require('../../../assets/avatar.png')
                "
                fit="cover"
                style="width: 32px; height: 32px; margin-right: 16px"
              >
              </el-image>
              <div class="comment-top-right">
                <span class="name">{{ infoDetail.creator_name }}</span>
                <p>{{ infoDetail.art_content }}</p>
                <div class="comment-top-bottom">
                  <b>{{ infoDetail.create_time.substring(0, 10) }}</b>
                  <div class="ding-box">
                    <svg-icon
                      icon-class="like-line"
                      className="chat"
                    ></svg-icon>
                    <span>{{
                      infoDetail.ding_count < 1000
                        ? infoDetail.ding_count
                        : "999+"
                    }}</span>
                    <svg-icon
                      icon-class="chat-line"
                      className="chat"
                    ></svg-icon>
                    <span>{{
                      infoDetail.comment_count < 1000
                        ? infoDetail.comment_count
                        : "999+"
                    }}</span>
                    <svg-icon
                      icon-class="delete-line"
                      className="chat"
                    ></svg-icon>
                  </div>
                </div>
                <div class="comment-bottom">
                  <div class="comment-bottom-item">
                    <el-image
                      :src="
                        infoDetail.creator_img_url
                          ? infoDetail.creator_img_url
                          : require('../../../assets/avatar.png')
                      "
                      fit="cover"
                      style="width: 32px; height: 32px; margin-right: 16px"
                    >
                    </el-image>
                    <div class="comment-top-right">
                      <span class="name">{{ infoDetail.creator_name }}</span>
                      <p>{{ infoDetail.art_content }}</p>
                      <div class="comment-top-bottom">
                        <b>{{ infoDetail.create_time.substring(0, 10) }}</b>
                        <div class="ding-box">
                          <svg-icon
                            icon-class="like-line"
                            className="chat"
                          ></svg-icon>
                          <span>{{
                            infoDetail.ding_count < 1000
                              ? infoDetail.ding_count
                              : "999+"
                          }}</span>
                          <svg-icon
                            icon-class="chat-line"
                            className="chat"
                          ></svg-icon>
                          <span>{{
                            infoDetail.comment_count < 1000
                              ? infoDetail.comment_count
                              : "999+"
                          }}</span>
                          <svg-icon
                            icon-class="delete-line"
                            className="chat"
                          ></svg-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="comment-bottom-item">
                    <el-image
                      :src="
                        infoDetail.creator_img_url
                          ? infoDetail.creator_img_url
                          : require('../../../assets/avatar.png')
                      "
                      fit="cover"
                      style="width: 32px; height: 32px; margin-right: 16px"
                    >
                    </el-image>
                    <div class="comment-top-right">
                      <span class="name">{{ infoDetail.creator_name }}</span>
                      <p>
                        回复<span class="reply-name">SlowLee</span
                        >{{ infoDetail.art_content }}
                      </p>
                      <div class="comment-top-bottom">
                        <b>{{ infoDetail.create_time.substring(0, 10) }}</b>
                        <div class="ding-box">
                          <svg-icon
                            icon-class="like-line"
                            className="chat"
                          ></svg-icon>
                          <span>{{
                            infoDetail.ding_count < 1000
                              ? infoDetail.ding_count
                              : "999+"
                          }}</span>
                          <svg-icon
                            icon-class="chat-line"
                            className="chat"
                          ></svg-icon>
                          <span>{{
                            infoDetail.comment_count < 1000
                              ? infoDetail.comment_count
                              : "999+"
                          }}</span>
                          <svg-icon
                            icon-class="delete-line"
                            className="chat"
                          ></svg-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="input-box">
        <div class="ding-box">
          <svg-icon icon-class="like-line" className="chat"></svg-icon>
          <span>{{
            infoDetail.ding_count < 1000 ? infoDetail.ding_count : "999+"
          }}</span>
          <svg-icon icon-class="chat-line" className="chat"></svg-icon>
          <span>{{
            infoDetail.comment_count < 1000 ? infoDetail.comment_count : "999+"
          }}</span>
        </div>
        <el-input placeholder="输入评论" v-model="searchInput" maxlength="100">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "publishReport",
  props: ["info"],
  data() {
    return {
      infoDetail: JSON.parse(JSON.stringify(this.info)),
      searchInput: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleData() {
      this.infoDetail.res_urls_type = [];
      this.infoDetail.res_urls.forEach((item) => {
        let index = item.lastIndexOf(".");
        let type = item.substring(index + 1).toLowerCase();
        let obj = {
          type: "img",
          url: item,
        };
        if (
          type === "avi" ||
          type === "wmv" ||
          type === "mpeg" ||
          type === "mov" ||
          type === "mp4"
        ) {
          obj.type = "mp4";
        } else if (type === "mp3" || type === "wav") {
          obj.type = "mp3";
        }
        this.infoDetail.res_urls_type.push(obj);
      });
      this.$forceUpdate();
    },
    closeDialog() {
      this.$emit("closeDetail");
    },
  },
  created() {},
  mounted() {
    this.handleData();
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.detail-report {
  display: flex;
  position: relative;
  .el-icon-close {
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.88);
    top: 24px;
    right: 24px;
    z-index: 1;
  }
  .detail-left {
    width: 802px;
    height: 870px;
  }
  .detail-right {
    position: relative;
    flex: 1;
    padding-bottom: 150px;
    .right-top {
      padding: 24px 24px 16px 24px;
      border-bottom: 1px solid #f1f1f1;
    }
    .creator-info {
      display: flex;
      align-items: center;
      span {
        color: #2f3742;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
      }
    }
    h3 {
      color: #2f3742;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      margin: 16px 0;
    }
    p {
      color: #2f3742;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      margin: 0 0 16px 0;
    }
    b {
      color: #c6c6c6;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }
  .right-bottom {
    padding: 16px 24px;
    h4 {
      color: #2f3742;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      margin: 0;
    }
  }
  .input-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 24px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    .ding-box {
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .svg-icon {
        width: 24px;
        height: 24px;
        &.chat {
          color: rgba(0, 0, 0, 0.85);
        }
      }
      span {
        margin: 0 16px 0 4px;
      }
    }
    .el-input {
      border-radius: 8px;
      background: #f4f4f4;
    }
  }
  .comment-box {
    .comment-item {
      padding: 24px 0;
      font-size: 14px;
      line-height: 22px;
      .comment-top {
        display: flex;
        &-right {
          flex: 1;
        }
      }
      .comment-bottom {
        margin-top: 24px;
        .comment-top-right {
          flex: 1;
        }
        &-item {
          width: 100%;
          padding: 8px 0;
          display: flex;
        }
      }
      .name {
        color: rgba(0, 0, 0, 0.5);
      }
      p {
        color: #000;
        margin: 8px 0;
      }
      .reply-name {
        margin: 0 4px;
        color: rgba(0, 0, 0, 0.6);
      }
      .comment-top-bottom {
        display: flex;
        justify-content: space-between;
        .ding-box {
          color: rgba(0, 0, 0, 0.65);

          .svg-icon {
            font-size: 16px;
            cursor: pointer;
          }
          span {
            font-size: 12px;
            line-height: 22px;
            margin: 0 16px 0 4px;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.detail-report {
  .el-carousel__container {
    height: 870px;
    .el-carousel__item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .input-box {
    .el-input__inner {
      background: #f4f4f4;
    }
  }
}
</style>