NUXT_FRONTEND/components/Article.vue

<template>
  <div>
    <section class="detail section longread" :style="'background-image: url(' + (this.news.image ? this.news.image.url : '') + ')'">
      <div class="admin-button-in-news" style="margin-bottom: 0;padding-top: 26px;" v-if="userPermissionGroup == 3 || userPermissionGroup == 5">
        <a class="copy" :href="'/admin/publications/' + news.id" target="_blank">Редактирование новости</a>
        <a class="inject" @click="inject(news)">Инжект</a>
      </div>
      <div class="detail__wrapper section-wrapper section-wrapper_extra">
        <div class="detail-main">
          <div class="detail-main__wrapper">
            <!--<div class="detail-main__topic">
              <ul class="detail-main__topic-list">
                <li class="detail-main__topic-item">
                  <nuxt-link
                    :to="{ name: 'articles' }"
                    class="detail-main__topic-link"
                    >Статьи</nuxt-link
                  >
                </li>
                <li class="detail-main__topic-item">
                  <nuxt-link
                    :to="{
                      name: 'news-category',
                      params: { category: news.category.alias },
                    }"
                    class="detail-main__topic-link"
                    href="javascript:void(0)"
                    >{{ news.category ? news.category.name : "" }}</nuxt-link
                  >
                </li>
              </ul>
            </div>-->
            <div class="detail-main__top">
                <h1 class="detail-top__title title_h1" v-html="news.title"></h1>
                <div class="detail-top__date">
                  {{ convertDate(news.start_activity) }}
                </div>
                <div class="detail-top__actions">
                  <div class="detail-top__share">
                    <div class="socials-share">
                      <ul class="socials-share__list">
                        <li class="socials-share__item">
                           <ShareNetwork
                          network="Odnoklassniki"
                          :url="'https://www.amic.ru'+$route.fullPath"
                          :title="news.title"
                          class="socials-share__link"
                          :hashtags="news.hash_tags.length ? news.hash_tags.join(' ') : ''"
                          >
                            <BaseIcon :name="'ok'" clear
                          /></ShareNetwork>
                        </li>
                        <li class="socials-share__item">
                          <ShareNetwork
                          network="twitter"
                          :url="'https://www.amic.ru'+$route.fullPath"
                          :title="news.title"
                          class="socials-share__link"
                          :hashtags="news.hash_tags.length ? news.hash_tags.join(' ') : ''"
                          >
                            <BaseIcon :name="'tw'" clear
                          /></ShareNetwork>
                        </li>
                        <li class="socials-share__item">
                          <ShareNetwork
                          network="vk"
                          :url="'https://www.amic.ru'+$route.fullPath"
                          :title="news.title"
                          :description="news.description"
                          class="socials-share__link"
                          :hashtags="news.hash_tags.length ? news.hash_tags.join(' ') : ''"
                          >
                            <BaseIcon :name="'vk'" clear
                          /></ShareNetwork>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              <!--<div class="detail-top__footer">
                <aside class="detail-top__footer-side">
                  <div class="detail-top__author">
                    <div class="news-author news-author_article">
                      <NewsAuthor :news="news" />
                    <p>{{ news.image ? news.image.title : ''}}</p>
                    </div>
                  </div>
                  <div class="detail-top__info">
                    <p>{{ news.source }}</p>
                    <p>{{ news.image ? news.image.title : ''}}</p>
                  </div>
                  <div class="detail-top__tags">
                    <ul class="detail-top__tags-list">
                      <li class="detail-top__tags-item"
                      v-for="tag in news.hash_tags"
                      :key="tag">
                        <a class="detail-top__tags-link" href="javascript:void(0)" >
                          {{ tag }}</a>
                      </li>
                    </ul>
                  </div>
                </aside>
              </div>-->
            </div>
            <div class="detail-main__description" v-html="news.description"></div>
            <NewsContent :rawHtml="news.content" />

            <div v-if="news.show_pull">
              <ArticleCommentsList :pull_id="news.comment_pull_id" @commentResponse="commentResponseData" :newCommentsList="commentsList" />
              <ArticleCommentsForm :pull_id="news.comment_pull_id" :response_user_name="this.comment.response_user_name" :response_user_id="this.comment.response_user_id" @clearCommentResponse="clearCommentResponse" @commentsResponseData="commentsResponseData" />
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
    },
  },
  data() {
    return {
      userPermissionGroup: null,
      comment: {
        text: "",
        response_user_id: "",
        response_user_name: "",
        pullId: this.news.comment_pull_id
      },
      commentsList: {}
    }
  },
  mounted() {
    if(this.$store.state.auth.user){
      this.userPermissionGroup = this.$store.state.auth.user.user_permission_group;
    }
  },
  methods: {
    convertDate(dateTampstamp) {
      const date = new Date(dateTampstamp * 1000);
      const dateString =
              date.toLocaleString("ru", {
                day: 'numeric',
                month: 'long'
              }) +
              " " +
              date.getFullYear()
              + ", " +
              ("0" + date.getHours()).slice(-2) +
              ":" +
              ("0" + date.getMinutes()).slice(-2);
      return dateString;
    },
    commentResponseData(data){
      this.comment.response_user_id = data.user_id;
      this.comment.response_user_name = data.user_name;
    },
    clearCommentResponse(){
      this.comment.response_user_id = "";
      this.comment.response_user_name = "";
    },
    inject(item) {
      let res = "##news_" + item.id + "##";
      this.$clipboard(res);
      alert('Инжект скопирован в буфер обмена');
    },
    commentsResponseData(data){
      this.commentsList = data;
    },
  },
};
</script>

<style lang="less">
	.longread{
		background-size: contain;
		.detail-main{
      background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 52%, rgba(255,255,255,0.3) 100%);
      border-radius: 30px;
      margin-top: 100px;
      @media screen and(max-width: 768px) {
        margin-top: 0px;
      }
      &__wrapper{
        padding: 0 30px;
        @media screen and(max-width: 768px) {
          padding: 0;
        }
  		}
      &__topic-list{
        justify-content: center;
        margin: 20px 0;
      }
      &__top{
        text-align: center;
        h1{
          max-width: 700px;
          margin: 150px auto 50px;
          font-size: 52px;
          line-height: 120%;
          @media screen and(max-width: 768px) {
            font-size: 20px;
            margin: 30px auto 20px;
            padding: 0 10px;
          }
        }
        .socials-share{
          &__list{
            justify-content: center;
          }
        }
        .detail-top{
          &__author{
            margin: 50px 0 20px;
          }
          &__footer{
            justify-content: center;
          }
        }
      }
      &__description {
        text-align: center;
        font-size: 20px;
        margin-bottom: 30px;
        @media screen and(max-width: 768px) {
          font-size: 16px;
          margin-bottom: 30px;
          padding: 0 10px;
        }
      }
      &__article{
        background: white;
        padding: 50px;
        box-sizing: border-box;
        border-radius: 20px;
        @media screen and(max-width: 768px) {
          padding: 1px 15px;
        }
        h1,h2,h3,h4{
          margin: 30px 0 20px;
        }
        p,h1,h2,h3{
          max-width: 700px;
          margin-left: auto;
          margin-right: auto;
          color: #222;
        }
        blockquote{
          margin: 60px 0;
          padding: 30px 0;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          @media screen and(max-width: 768px) {
            margin: 20px 0;
            padding: 10px 0;
          }
          p{
            font-size: 38px;
            max-width: 90%;
            line-height: 140%;
            @media screen and(max-width: 768px) {
              font-size: 18px;
            }
          }
        }
      }
    }
	}

	.news-author__figure {
		flex: none;
		width: 50px;
		height: 50px;
	}
	.news-author__img {
		max-width: 100%;
	}
</style>