AIgod_shixi_vue/pages/home/index.vue

<template>
  <div id="aCoursesList" class="bg-fa of">
    <section class="container">
      <section class="i-article">
        <div class="fl col-7">
          <section class="mr30">
            <header class="comm-title all-article-title">
              <h2 class="fl tac">
                <span class="c-333" style="font-weight: bold;">推荐</span>
              </h2>
              <section class="c-tab-title">
                <!-- <a href="javascript: void(0)">&nbsp;</a> -->
              </section>
            </header>
            <!-- /无数据提示 开始-->
            <!-- /无数据提示 结束-->
            <article class="i-article-list">
              <!-- /文章列表 开始-->
              <ul>
                <li v-for="(recommendation,index) in recommendationList" :key="recommendation.id">
                  <aside class="i-article-pic">
                    <img :src="recommendation.imageUrl" :alt="1">
                  </aside>
                  <h3 class="hLh30 txtOf">
                    <a :title="recommendation.title" href="/home/1" class="i-art-title">{{ recommendation.title }}</a>
                  </h3>
                  <section class="i-q-txt mt5 i-q-txt2"/>
                  <section class="hLh30 txtOf mt5  a-list-extrainfo">
                    <div class="fl">
                      <img :src="recommendation.head" alt="" width="23px" height="23px" style="border-radius: 13px;">
                      <span class="c-999 f-fM">{{ recommendation.author }}</span>&nbsp;
                      <span class="c-999 f-fM">{{ formatDateTime(recommendation.publishTime) }}</span>&nbsp;
                      <span class="el-icon-view">&nbsp;{{ recommendation.shares }}</span>&nbsp;&nbsp;
                      <span class="el-icon-chat-dot-square">&nbsp;{{ recommendation.comments }}</span>&nbsp;&nbsp;
                      <!-- <span> -->
                      <!-- <a class="noter-dy vam" title="回答" href="http://127.0.0.1:81/front/articleinfo/23.html">
                          <em class="icon18">&nbsp;</em>
                          <span>{{ recommendation.comments }}</span>
                        </a> -->
                      <!-- <a href="#" class=""><span class="el-icon-chat-dot-square">{{ recommendation.comments }}</span></a> -->
                      <!-- <tt title="赞一下" class=" vam ml10 f-fM" @click="addPraise(recommendation.id)">
                        <img src="/assets/img/pic/YES.png" alt="" style="color: aqua;">
                        <span>{{ recommendation.likes }}</span>
                      </tt> -->
                      <!-- </span> -->
                      <!-- <span class="" @click="praise(index,recommendation.id)">
                        <img v-if="recommendation.isLikd==0" src="/assets/img/pic/NO.png" alt=""></i>
                        <img src="/assets/img/pic/YES.png" alt="">
                      </span>
                      <span>{{ recommendation.likes }}</span> -->
                      <span>
                        <i
                          :id="'like-count'+recommendation.id"
                          :style="{color: recommendation.isLiked==0 ? '#f56c6c' : '#c0c4cc'}"
                          class="el-icon-thumb "
                          @click="praise(recommendation.id,recommendation.isLiked,index)"
                        >&nbsp;{{ recommendation.likes }}</i>
                        <!-- <i v-if="recommendation.isLiked==0" class="el-icon-thumb">&nbsp;{{ recommendation.likes }}</i>&nbsp;&nbsp;
                        <i class="el-icon-thumb" style="color: aqua;">&nbsp;{{ recommendation.likes }}</i> -->
                      </span>
                    </div>
                  </section>
                </li>
              </ul>
              <!-- /文章列表 结束-->
            </article>

            <!-- 公共分页 开始 -->
            <!-- <div>
              <div class="paging">
                <a class="undisable" title>首</a>
                <a id="backpage" class="undisable" href="#" title>&lt;</a>
                <a href="#" title class="current undisable">1</a>
                <a href="#" title>2</a>
                <a id="nextpage" href="#" title>&gt;</a>
                <a href="#" title>末</a>
                <div class="clear"/>
              </div>
            </div> -->
            <!-- 公共分页 结束 -->

          </section>
        </div>

        <!-- 精选视频 -->
        <aside class="fl col-3 articleRecommend">
          <div>
            <header class="comm-title all-article-title">
              <h2 class="fl tac">

                <span class="c-333 " style="font-weight: bold;">精选视频</span>
              </h2>
              <section class="c-tab-title">
                <!-- <a href="javascript: void(0)">&nbsp;</a> -->
              </section>
            </header>
            <article class="i-article-list">
              <!-- /文章列表 开始-->
              <ul>
                <li v-for="featured in featuredList" :key="featured.id">
                  <aside class="i-article-pic">
                    <img :src="featured.imageUrl" :alt="1">
                  </aside>
                  <h3 class="hLh30 txtOf">
                    <a :title="featured.title" href="/home/1" class="i-art-title">{{ featured.title }}</a>
                  </h3>
                  <section class="i-q-txt mt5 i-q-txt2"/>
                  <section class="hLh30 txtOf mt5 pr10 a-list-extrainfo">
                    <div class="fl">
                      <span class="el-icon-view">&nbsp;{{ featured.views }}</span>&nbsp;&nbsp;
                      <span class="c-999 f-fM">{{ formatDateTime(featured.publishTime) }}</span>&nbsp;
                    </div>
                  </section>
                </li>
              </ul>
              <!-- /文章列表 结束-->
            </article>

          </div>
</aside></section></section></div></template>
<!-- <script>

</script> -->
<script>
import indexApi from '~/api/home'
import service from '../../utils/request'
// import service from '../../utils/request'

export default {

  async asyncData() {
    // 获取直播和专题数据
    const RecommendationResponse = await indexApi.RecommendationList()
    const recommendationList = RecommendationResponse.data
    const FeaturedResponse = await indexApi.FeaturedList()
    const featuredList = FeaturedResponse.data
    // var time = recommendationList.publishTime
    // var d = new Date(time)
    // var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
    return {
      recommendationList,
      featuredList

      // currentMonth: new Date().getMonth() + 1

    }
  },
  methods: {
    praise(id, index) {
      service.post('recommendation/api/addLike/' + id)
        // .then(response => response.json())
        .then(Response => {
          // console.log(id)
          // console.log(status)
          // console.log(response)
          // window.location.reload()
          // console.log(this.RecommendationResponse)
          // console.log(id)

          // document.getElementById(`like-count`).textContent = data.data.likes
          // document.getElementById(`like-isLiked`).className = data.isLiked ? 'liked' : ''
          service.post('recommendation/api/selectRecommendation')
            .then(Response => {
              const data = Response.data
              // console.log(data)
              for (var i = 0; i < data.length; i++) {
                // console.log(data[i])
                if (data[i].id === id) {
                  // console.log(data[i].id)
                  // console.log(id)
                  document.getElementById(`like-count` + id).textContent = data[i].likes
                  if (data[i].isLiked === 0) {
                    // console.log(data[i].isLiked)
                    document.getElementById(`like-count` + id).style.color = '#f56c6c'
                  } else {
                    document.getElementById(`like-count` + id).style.color = '#c0c4cc'
                  }
                }
              }

              // const isLikd = data.isLiked
              // document.getElementById(`like-count`).textContent = data.likes
              // const i = document.getElementById(`like-count`)
              // // '#f56c6c' : '#c0c4cc'
              // if (isLikd) {
              //   i.style.color = '#f56c6c'
              // } else {
              //   i.style.color = '#c0c4cc'
              // }
              // console.log(Response)
            })

          // console.log(data)
        })
        .catch(error => {
          console.log(error)
          console.log('error')
        })
    },
    formatDateTime(isoString) {
      const date = new Date(isoString)
      const month = (date.getMonth() + 1).toString().padStart(2, 0)
      const day = date.getDate().toString().padStart(2, 0)
      const hours = date.getHours().toString().padStart(2, 0)
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${month}-${day} ${hours}:${minutes}`
    }
  }
}
</script>