<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" @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()"> <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"> <swiper-slide v-for="(data,index) in lessonList" :key="index"> <div class="goods-block" @click="toMap(data)"> <span class="tips" v-if="data.periods_info"> 开课时间:{{data.periods_info.start_at}} </span> <img :src="data.goods_info.goods_desc.imgLesson &&data.goods_info.goods_desc.imgLesson[0] ?data.goods_info.goods_desc.imgLesson[0].url :data.goods_info.goods_desc.img[0].url"> </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> </div> </template> <script> import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' import {getBannerListApi,getUserDetailApi,getUserLessonApi,getTeacherApi,getNewApi} 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 }, data(){ return { bannerList:[], teacherQ2:false, teacherDetail:null, imgUrl: IndexImage, user_id:null, newUrl:'', swiperOption: { pagination: { el: '.swiper-pagination' } }, swiperOption2:{ width: window.innerWidth * 0.95, }, lessonList:[] } }, methods:{ toOld(){ window.location.href = 'https://wechat.singsingenglish.com' }, toBannerUrl(data){ window.location.href = data }, toHear(){ window.location.href = 'https://appanqlfkth3717.h5.xiaoeknow.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjoiIiwicmVzb3VyY2VfaWQiOiIiLCJwcm9kdWN0X2lkIjoicF81YjE0YjdjMjdjNDZiX2Rvd0xicDc1IiwiYXBwX2lkIjoiYXBwYU5RTGZrdEgzNzE3In0?state=2f12ab00cbc58f98cdc8193c8151437f_Sc7T3q' }, toNewUrl(){ window.location.href = this.newUrl }, initPage(){ getUserDetailApi().then(res=>{ this.user_id=res.user_id }); getBannerListApi().then(res=>{ this.bannerList = res.list }); getNewApi().then(res=>{ this.newUrl = res[0].desc }); getUserLessonApi().then(res=>{ res.forEach(i=>{ i.goods_info.desc = JSON.parse(i.goods_info.desc); i.goods_info.share_desc = JSON.parse(i.goods_info.share_desc); i.goods_info.goods_desc = JSON.parse(i.goods_info.goods_desc) }); this.lessonList = res }); getTeacherApi().then(res=>{ if(res.id){ this.teacherDetail = res; if(localStorage.getItem('qrType') !== 'hidden'){ localStorage.setItem('qrType','hidden'); this.teacherQ2 = true } } }) }, toGoodsList(){ this.$router.push({name:'myGoodsList'}) }, toMap(data) { if (data.periods_info) { this.$router.push({ name: 'map', query: { periods_id: data.periods_id, parent_category_id: data.periods_info.parent_category_id, course_type:data.goods_info.course_type } }) }else{ Toast('该课程暂无期数') } } }, mounted(){ this.initPage() } } </script> <style scoped lang="less"> @import "../util/public"; .index{ background: #eee; padding-bottom: 80px; } .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>