AIgod_shixi_vue/pages/index.vue

<template>

  <div>
    <div id="aCoursesList">
      <!-- 直播课程 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <!-- <span class="c-333">即将开播</span> -->
            </h2>
          </header>
          <div>
            <article class="comm-course-list">
              <ul id="bna" class="of">
                <li v-for="video in videoList" :key="video.id">
                  <div class="cc-l-wrap">
                    <section class="course-img">
                      <img
                        :src="video.coverImg"
                        :alt="video.mainTitle"
                        class="img-responsive"
                        style="width: 315px; height: 150px;align-items: center;"
                      >
                      <div class="cc-mask">
                        <a :href="'/video/'+video.id" title="即将开播" class="comm-btn c-btn-1">即将开播<br>明天{{ formatDateTime(video.publishTime) }}开播</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a :href="'/video/'+video.id" :title="video.mainTitle" class="course-title fsize18 c-333">{{ video.mainTitle }}</a>
                    </h3>
                    <div class="fl jgAttr c-ccc f-fA" style="position: absolute;">
                      <img :src="video.head" alt="" width="22px" height="22px" style="border-radius: 10px;display: inline-block;" >
                      <span class="c-999 f-fA" >{{ video.description }}</span>
                    </div>
                    <el-button
                      :id="'reservation'+video.id"
                      :style="{background: video.isBooked==0 ? 'cyan' : '#f56c6c'}"
                      style="position: absolute;margin-bottom: 120px;margin-left: 220px; height: 23px;width: 40px;padding: 1px;"
                      type="text"
                      size="small"
                      @click="reservation(video.id)">{{ video.isBooked==0? '预约':'已预约' }}</el-button>
                    <a href=""/>
                  </div>

                </li>

              </ul>
              <div class="clear"/>
            </article>
            <section class="tac pt20">
              <a href="#" title="全部直播" class="comm-btn c-btn-2">全部直播</a>
            </section>
          </div>
        </section>
      </div>
      <!-- 直播课程 结束 -->
    </div>
  </div>
</template>

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

export default {

  async asyncData() {
    // 获取课程和讲师数据
    const indexDataResponse = await indexApi.getVideoData()
    const videoList = indexDataResponse.data

    return {
      indexDataResponse,
      videoList
    }
  },

  // 幻灯片导航的定义
  data() {
    return {
      swiperOption: {
        // 配置分页
        pagination: {
          el: '.swiper-pagination'// 分页的dom节点
        },
        // 配置导航
        navigation: {
          nextEl: '.swiper-button-next', // 下一页dom节点
          prevEl: '.swiper-button-prev'// 前一页dom节点
        }
      }
    }
  },
  methods: {
    reservation(id, index) {
      service.post('video-data/api/isBookedById/' + id)
        .then(Response => {
          service.post('video-data/api/selectVideoData')
            .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)
                  var text = '预约'
                  // console.log(id)
                  if (data[i].isBooked === 1) {
                    text = '已预约'
                    document.getElementById(`reservation` + id).style.background = '#f56c6c'
                  } else {
                    document.getElementById(`reservation` + id).style.background = 'cyan'
                  }
                  document.getElementById(`reservation` + id).textContent = text
                }
              }
            })
        })
        .catch(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 `${hours}:${minutes}`
    }
  }
}
</script>