Skip to content

H
h5-base
Commit 3d6a7f90 authored by chenyishuai@singsingenglish.com's avatar chenyishuai@singsingenglish.com
Browse files
Options

1

parent 5a1b8956
Hide whitespace changes
Inline Side-by-side
Showing with 366 additions and 362 deletions
config/dev.env.js
View file @ 3d6a7f90
......@@ -8,7 +8,7 @@ module.exports = merge(prodEnv, {
// API_URL: '"https://wechat-test.changchangenglish.com/"',
MAX_FILESIZE:'1024*1024*10',
IMAGE_URL_HEAD:'"http://cdn.singsingenglish.com/"',
BUY_URL:'"http://wechat-test.changchangenglish.com/#/buyDetail?"',
AUTHOR_UEL:'"http://wechat-test.changchangenglish.com/api/client/login?redirect_url=http://localhost:8085/#/"',
BUY_URL:'"https://wechat-test.changchangenglish.com/#/buyDetail?"',
AUTHOR_UEL:'"https://wechat-test.changchangenglish.com/api/client/login?redirect_url=http://localhost:8085/"',
REDIRECT_URL:'"http://localhost:8085/"',
});
config/index.js
View file @ 3d6a7f90
......@@ -19,6 +19,7 @@ module.exports = {
},
// Various Dev Server settings
// host: '192.168.31.242', // can be overwritten by process.env.HOST
// host: '10.1.23.97', // can be overwritten by process.env.HOST
host: 'localhost', // can be overwritten by process.env.HOST
port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
......
src/components/index.vue
View file @ 3d6a7f90
......@@ -2,40 +2,36 @@
<div class="index">
<div class="banner-block">
<swiper :options="swiperOption" class="banner" ref="mySwiper">
<swiper-slide v-for="(data,index) in bannerList" :key="index">
<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"/>
<img :src="imgUrl.record">
</div>
<div class="btn" @click="toOld($event)">
<img :src="imgUrl.oldChange"/>
<img :src="imgUrl.oldChange">
</div>
<div class="btn" @click="toHear">
<img :src="imgUrl.listen"/>
<img :src="imgUrl.listen">
</div>
<div class="btn">
<img :src="imgUrl.more"/>
<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">
我的课程
<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>
<span class="tips" v-if="data.start_at">开课时间：{{data.start_at}}</span>
<img :src="data.imgLesson+'?imageslim'">
</div>
</swiper-slide>
......@@ -49,20 +45,13 @@
</div>
<mt-popup v-model="teacherQ2">
<div class="teacher-block">
<div class="userNo">
学员号：{{user_id}}
</div>
<img :src="imgUrl.teacherBg" class="teacher-bg"/>
<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 class="title" v-if="teacherDetail">请长按识别图中二维码添加老师</div>
<div class="title" v-if="!teacherDetail">请长按识别图中二维码关注公众号</div>以便我们能及时为您提供更好的学习体验
</div>
<div class="closeBtn" @click="teacherQ2 = false"></div>
</div>
......@@ -73,331 +62,333 @@
</template>
<script>
import guidePage from './guide/index'
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 '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:{
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
import guidePage from "./guide/index";
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 "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"
}
},
initPage(){
getRedirectApi().then(res=>{
if(res && res !== "" && res !==null){
window.location.href = res
swiperOption2: {
width: window.innerWidth * 0.95,
on: {
resize: function() {
this.params.width = window.innerWidth * 0.95;
this.update();
}
});
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 = '正式课'
}
}
},
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
}
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('该课程暂未开始')
}
});
},
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]);
},
mounted(){
this.initPage()
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;
@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-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;
}
.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;
}
.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%;
}
.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;
}
}
.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;
}
}
.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>
src/components/newLesson/share.vue
View file @ 3d6a7f90
......@@ -96,8 +96,8 @@
});
},
shareImg(icon){
let URL = process.env.API_URL+'#/shareGoods?userID='+ this.userDetail.user_id;
console.log(icon)
let URL = process.env.API_URL+'#/shareGoods?userID='+ this.userDetail.user_id;
this.onShare(URL,icon);
},
initPage(){
......
src/components/shareTime.vue
View file @ 3d6a7f90
......@@ -26,6 +26,7 @@
},
methods:{
initPage(){
debugger
let str = this.day.toString();
for(let i=0;i<str.length;i++){
this.imgList.push(str[i])
......@@ -79,6 +80,7 @@
height: 200*@toVw;
text-align: center;
line-height: 200*@toVw;
font-size: 12px;
img{
width:90*@toVw;
vertical-align: middle;
......
src/util/common.js
View file @ 3d6a7f90
export default{
dateFmt:function(date,format) {
var o = {
"M+" : date.getMonth()+1, //month
"d+" : date.getDate(), //day
"h+" : date.getHours(), //hour
"m+" : date.getMinutes(), //minute
"s+" : date.getSeconds(), //second
"q+" : Math.floor((date.getMonth()+3)/3), //quarter
"S" : date.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
},
getUrlParam(){
export default {
dateFmt: function (date, format) {
var o = {
"M+": date.getMonth() + 1, //month
"d+": date.getDate(), //day
"h+": date.getHours(), //hour
"m+": date.getMinutes(), //minute
"s+": date.getSeconds(), //second
"q+": Math.floor((date.getMonth() + 3) / 3), //quarter
"S": date.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
},
getUrlParam() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
},
toDataURL (src, callback) {
var xhttp = new XMLHttpRequest()
xhttp.onload = function () {
var fileReader = new FileReader()
fileReader.onloadend = function () {
callback(fileReader.result)
}
fileReader.readAsDataURL(xhttp.response)
};
xhttp.responseType = 'blob'
xhttp.open('GET', src, true)
xhttp.send()
toDataURL(src, callback) {
var xhttp = new XMLHttpRequest()
xhttp.onload = function () {
var fileReader = new FileReader()
fileReader.onloadend = function () {
callback(fileReader.result)
}
fileReader.readAsDataURL(xhttp.response)
};
xhttp.responseType = 'blob'
xhttp.open('GET', src, true)
xhttp.send()
},
getParam(paramName) {
let paramValue = "", isFound = !1;
let arrSource = []
let i = 0
if (location.search.indexOf("?") == 0 && location.search.indexOf("=") > 1) {
arrSource = unescape(location.search).substring(1, location.search.length).split("&");
while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
}
return paramValue == "" && (paramValue = null), paramValue
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment