<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)"> </swiper-slide> </swiper> </div> <div class="btn-block"> <div class="btn" @click="showTeacher()"> <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"> <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> </div> </template> <script> import "swiper/dist/css/swiper.css"; import { swiper, swiperSlide } from "vue-awesome-swiper"; import { getBannerListApi, getUserLessonApi, getTeacherApi, getNewApi, getRedirectApi } from "../service/api"; import { IndexImage } from "../util/imgUrl"; import bottomTab from "./public/bottomTab"; import { Toast } from 'vant'; export default { name: "index2", components: { swiper, swiperSlide, bottomTab }, 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: { showTeacher() { this.teacherQ2 = true; this.$sa.track("buttonClick", { tabTitle: "首页", moduleTitle: "功能按钮", buttonType: "板块按钮", buttonName: "我的老师" }); }, toOld(e) { this.$sa.track("buttonClick", { tabTitle: "首页", moduleTitle: "功能按钮", buttonType: "板块按钮", buttonName: "晚安电台" }); // this.$sa.quick('trackHeatMap',e.srcElement) window.location.href = "https://appanqlfkth3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjoiIiwicmVzb3VyY2VfaWQiOiIiLCJwcm9kdWN0X2lkIjoicF81YjE0YjdjMjdjNDZiX2Rvd0xicDc1IiwiYXBwX2lkIjoiYXBwYU5RTGZrdEgzNzE3In0"; }, toBannerUrl(data) { this.$sa.track("adClick", { adTitle: data.title, adID: data.link, adPage: "首页" }); window.location.href = data.link; }, toHear() { this.$sa.track("buttonClick", { tabTitle: "首页", moduleTitle: "功能按钮", buttonType: "板块按钮", buttonName: "磨耳朵" }); this.$router.push({ name: "collection" }); }, toNewUrl() { this.$sa.track("buttonClick", { tabTitle: "首页", moduleTitle: "课程", buttonType: "没课banner", buttonName: "没有更多课程" }); window.location.href = this.newUrl; }, initPage() { getRedirectApi().then(res => { if (res && res !== "" && res !== null) { window.location.href = res; } }); this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id; getBannerListApi().then(res => { this.bannerList = res.list; }); getNewApi().then(res => { this.newUrl = res[0].desc; }); getUserLessonApi().then(res => { let is_view_course = "没有课程"; if (res && res.length > 0) { is_view_course = "体验课"; for (let i = 0; i < res.length; i++) { if (res[i].course_type === 0) { is_view_course = "正式课"; } } this.$sa.track("viewHomepage", { is_view_course: is_view_course }); } 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.$sa.track("buttonClick", { tabTitle: "首页", moduleTitle: "课程", buttonType: "板块按钮", buttonName: "我的课程" }); 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) { this.$sa.track("buttonClick", { tabTitle: "首页", moduleTitle: "课程", buttonType: "课程", buttonName: "进入课程" }); 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>