index.vue

<template>
  <div class="index">
    <div class="banner-block">
      <swiper :options="swiperOption" class="banner" ref="mySwiper">
        <swiper-slide v-for="(data,index) in bannerList"  :key="index">
          <img class="banner" :src="data.url+'?imageslim'" @click="toBannerUrl(data.link)">
        </swiper-slide>
      </swiper>
    </div>
    <div class="btn-block">
      <div class="btn" @click="teacherQ2 = true">
        <img :src="imgUrl.record"/>
      </div>
      <div class="btn" @click="toOld($event)">
        <img :src="imgUrl.oldChange"/>
      </div>
      <div class="btn" @click="toHear">
        <img :src="imgUrl.listen"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.more"/>
      </div>
    </div>
    <div class="class-block">
      <div class="title" @click="toGoodsList()" v-if="lessonList.length > 0">
        我的课程
        <img class="more" :src="imgUrl.indexMore"/>
      </div>
      <div class="title" v-if="lessonList.length < 1">
        我的课程
      </div>
      <div class="lesson-block">
        <swiper :options="swiperOption2" ref="mySwiper2">
          <swiper-slide v-for="(data,index) in lessonList" :key="index">
            <div class="goods-block" @click="toMap(data)">
              <span class="tips" v-if="data.start_at">
                开课时间：{{data.start_at}}
              </span>
              <img :src="data.imgLesson+'?imageslim'">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="goods-block" @click="toNewUrl">
              <img :src="imgUrl.noMore">
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <mt-popup v-model="teacherQ2">
      <div class="teacher-block">
        <div class="userNo">
          学员号：{{user_id}}
        </div>
        <img :src="imgUrl.teacherBg" class="teacher-bg"/>
        <img :src="teacherDetail.qr" class="qr" v-if="teacherDetail">
        <img :src="imgUrl.qr" class="qr" v-if="!teacherDetail">
        <div class="content-text">
          <div class="title" v-if="teacherDetail">
            请长按识别图中二维码添加老师
          </div>
          <div class="title" v-if="!teacherDetail">
            请长按识别图中二维码关注公众号
          </div>
          以便我们能及时为您提供更好的学习体验
        </div>
        <div class="closeBtn" @click="teacherQ2 = false"></div>
      </div>
    </mt-popup>
    <bottom-tab></bottom-tab>
    <guide-page></guide-page>
  </div>
</template>

<script>
  import guidePage from './guide/index'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import {getBannerListApi,getUserDetailApi,getUserLessonApi,getTeacherApi,getNewApi,getRedirectApi} from "../service/api";
  import {IndexImage} from "../util/imgUrl";
  import bottomTab from './public/bottomTab';
  import { Toast } from 'mint-ui';
  export default {
    name: "index",
    components:{
      swiper,
      swiperSlide,
      bottomTab,
      guidePage
    },
    data(){
      let that = this;
      return {
        bannerList:[],
        teacherQ2:false,
        teacherDetail:null,
        imgUrl: IndexImage,
        user_id:null,
        newUrl:'',
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperOption2:{
          width: window.innerWidth * 0.95,
          on: {
            resize: function () {
              this.params.width = window.innerWidth * 0.95;
              this.update();
            }
          }
        },
        lessonList:[]
      }
    },
    methods:{
      toOld(e){
        // this.$sa.quick('trackHeatMap',e.srcElement)
        window.location.href = 'https://appanqlfkth3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjoiIiwicmVzb3VyY2VfaWQiOiIiLCJwcm9kdWN0X2lkIjoicF81YjE0YjdjMjdjNDZiX2Rvd0xicDc1IiwiYXBwX2lkIjoiYXBwYU5RTGZrdEgzNzE3In0?state=2f12ab00cbc58f98cdc8193c8151437f_Sc7T3q'
      },
      toBannerUrl(data){
        window.location.href = data
      },
      toHear(){
        this.$router.push({name:'collection'})
      },
      toNewUrl(){
        window.location.href = this.newUrl
      },
      initPage(){
        getRedirectApi().then(res=>{
          if(res && res !== "" && res !==null){
            window.location.href = res
          }
        });
        getUserDetailApi().then(res=>{
          this.user_id=res.user_id;
          // this.$sa.login(this.user_id)
        });
        getBannerListApi().then(res=>{
          this.bannerList = res.list
        });
        getNewApi().then(res=>{
          this.newUrl = res[0].desc
        });
        getUserLessonApi().then(res=>{
          this.lessonList = res
        });
        getTeacherApi().then(res=>{
          if(res.id){
            this.teacherDetail = res;
            if(localStorage.getItem('qrType') !== 'hidden'){
              localStorage.setItem('qrType','hidden');
              if(window.innerWidth < window.innerHeight ){
                this.teacherQ2 = true
              }
            }
          }
        })
      },
      toGoodsList(){
        this.$router.push({name:'myGoodsList'})
      },
      dateParse(dateString){
        let SEPARATOR_BAR = "-";
        let SEPARATOR_SLASH = "/";
        let SEPARATOR_DOT = ".";
        let dateArray;
        if(dateString.indexOf(SEPARATOR_BAR) > -1){
          dateArray = dateString.split(SEPARATOR_BAR);
        }else if(dateString.indexOf(SEPARATOR_SLASH) > -1){
          dateArray = dateString.split(SEPARATOR_SLASH);
        }else{
          dateArray = dateString.split(SEPARATOR_DOT);
        }
        return new Date(dateArray[0], dateArray[1]-1, dateArray[2]);
      },
      dateCompare(dateString, compareDateString){
        let dateTime = dateString.getTime();
        let compareDateTime = compareDateString.getTime();
        if(compareDateTime > dateTime){
          return 1;
        }else if(compareDateTime == dateTime){
          return 0;
        }else{
          return -1;
        }
      },
     toMap(data) {
        if(this.dateCompare(new Date(),this.dateParse(data.start_at))<1){
          this.$router.push({
            name: 'map',
            query:
              {
                periods_id: data.periods_id,
                parent_category_id: data.parent_category_id,
                course_type:data.course_type
              }
          })
        }else{
          Toast('该课程暂未开始')
        }
      }
    },
    mounted(){
      this.initPage()
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .index{
    background: #eee;
    padding-bottom: 50*@toVw;
  }
  .banner-block{
    width: 375*@toVw;
    height: 200*@toVw;
    position: relative;
    .notice{
      position: absolute;
      bottom: 0;
      background: rgba(255, 238, 7, 0.8);
      padding: 5px;
      color: #666;
      font-size: 14px;
      z-index: 5;

    }
    .banner{
      width: 375*@toVw;
      height: 200*@toVw;
    }
  }
  .teacher-block{
    position: relative;
    width: 74.66666667vw;
    background-color: rgba(0,0,0,0.7);
    .userNo{
      position: absolute;
      top: -40 * @toVw;
      width: 100 * @toVw;
      text-align: center;
      left: 50%;
      margin-left: -50 * @toVw;
      border-radius: 118 * @toVw;
      background: white;
      padding: 8 * @toVw;
    }
    .teacher-bg{
      width: 280*@toVw;
    }
    .qr{
      width: 138*@toVw;
      height: 138*@toVw;
      position: absolute;
      top:65 * @toVw;
      left: 70 * @toVw;
    }
    .content-text{
      width: 100%;
      text-align: center;
      position: absolute;
      top: 315 * @toVw;
      font-size:12 * @toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
      line-height:23px;
      .title{
        color: #333;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        margin-bottom: 5 * @toVw;
        font-size: 17*@toVw;
      }
    }
    .closeBtn{
      position: absolute;
      width: 30*@toVw;
      height: 30*@toVw;
      right: 8*@toVw;
      top: 8*@toVw;
    }
  }

  .btn-block{
    display: flex;
    padding: 12*@toVw 8*@toVw;
    background: white;
    justify-content: space-around;
    .btn{
      width: 68*@toVw;
      height: 68*@toVw;
      img{
        width: 100%;
      }
    }
  }
  .lesson-block{
    padding-bottom: 20px;
    .goods-block{
      position: relative;
      width: 335*@toVw;
      .tips{
        display: inline-block;
        font-size:12px;
        font-family:PingFang-SC-Bold;
        font-weight:normal;
        color:rgba(255,255,255,1);
        line-height:17px;
        padding: 2px 5px;
        position: absolute;
        right: 10px;
        top: 12px;
        background:rgba(245,166,35,1);
        border-radius:10px;
      }
      img{
        width: 335*@toVw;
        height: 236*@toVw;
        border-radius: 8px;
      }
    }

  }
  .class-block{
    margin-top: 10px;
    font-family: PingFang-SC-Medium;
    font-size: 18px;
    color: #333333;
    text-align: center;
    background: white;
    .title{
      padding: 8*@toVw;
      position: relative;
      .more{
        position: absolute;
        width: 30*@toVw;
        bottom: 10px;
        right: 20px;
      }
    }
  }


</style>