提交 189dab19 编写于 作者: 杨广俊's avatar 杨广俊

为你推荐

上级 d025a2ce
<template> <template>
<div class="cource-teach" id="adjust-u"> <div class="cource-teach" id="adjust-u">
<div :class="isFixed ? 'cource-header fixed' : 'cource-header'" :style="{height:menuptop}"> <div :class="isFixed ? 'cource-header fixed' : 'cource-header'" :style="{height:menuptop}">
<div class="fixBox"> <div class="fixBox">
...@@ -28,66 +28,69 @@ ...@@ -28,66 +28,69 @@
</div> </div>
</div> </div>
</div> </div>
<div class="loading-box" > <div class="loading-box">
<span class="loading-more-txt" v-if="isLoading">努力加载中...</span> <span class="loading-more-txt" v-if="isLoading">努力加载中...</span>
<span class="no-more" v-if="noMore">没有更多了......</span> <span class="no-more" v-if="noMore">没有更多了......</span>
</div> </div>
</div> </div>
<!-- <LOADING v-if="isShowLoading"></LOADING> --> <!-- <LOADING v-if="isShowLoading"></LOADING> -->
</div> </div>
</template> </template>
<script> <script>
import {
import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui'; Loadmore,
Spinner,
InfiniteScroll
} from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index' // import { setEventByModuleCode } from '@/utils/index'
// import LOADING from '../../components/common/loading-new'; // import LOADING from '../../components/common/loading-new';
export default { export default {
data () { data() {
return { return {
list:[], list: [],
pageNo:2, pageNo: 2,
isDisabled:false, isDisabled: false,
pageSize:10, pageSize: 10,
title:'为您推荐', title: '为您推荐',
isCollected:'', isCollected: '',
allLoaded:true, allLoaded: true,
loading:false,//是否滚动加载 loading: false, //是否滚动加载
isLoading:false,//加载中 isLoading: false, //加载中
noMore:false, noMore: false,
clientHeight:'auto', clientHeight: 'auto',
isShowLoading:true, isShowLoading: true,
menuHeight:0, menuHeight: 0,
ptop:20, ptop: 20,
popHeight:0, popHeight: 0,
menuptop:0, menuptop: 0,
isReauestBack:true, isReauestBack: true,
} }
}, },
props:{ props: {
isFixed:{ isFixed: {
default:false, default: false,
type:Boolean type: Boolean
}, },
statusBarHeight:{ statusBarHeight: {
type:Number, type: Number,
default:0 default: 0
}, },
adjustPageNo:{ adjustPageNo: {
type:Number, type: Number,
default:1 default: 1
}, },
userToken:{ userToken: {
type:String, type: String,
default:'' default: ''
}, },
parmData:{ parmData: {
type:Array, type: Array,
default:[] default: []
}, },
}, },
mounted(){ mounted() {
this.list = this.parmData; this.list = this.parmData;
...@@ -104,70 +107,68 @@ export default { ...@@ -104,70 +107,68 @@ export default {
// this.getData(); // this.getData();
}, },
created(){ created() {
let _this = this; let _this = this;
window.__getStatusBarHeight = function(parm){ window.__getStatusBarHeight = function (parm) {
if(window.__isAndroid){ if (window.__isAndroid) {
_this.popHeight = parseInt(parm.statusBarHeight)/2 _this.popHeight = parseInt(parm.statusBarHeight) / 2
}else{ } else {
_this.popHeight = parm.statusBarHeight _this.popHeight = parm.statusBarHeight
} }
_this.ptop = _this.popHeight+'px'; _this.ptop = _this.popHeight + 'px';
_this.menuptop = _this.popHeight+36+'px'
///alert(_this.menuptop);
_this.menuptop = _this.popHeight + 36 + 'px'
} }
this.getStatusHight() this.getStatusHight()
}, },
watch:{ watch: {
}, },
components:{ components: {
// LOADING // LOADING
}, },
methods: { methods: {
getStatusHight(){ getStatusHight() {
rocNative.getStatusBarHeight({ rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight' __funcName: '__getStatusBarHeight'
}) })
}, },
//跳转 //跳转
goToPage(item){ goToPage(item) {
this.pageBurialPoin({ this.pageBurialPoin({
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_recommend', functionCode: 'f_recommend',
actionCode:'c_course', actionCode: 'c_course',
labelId:item.id, labelId: item.id,
labelValue :item.name, labelValue: item.name,
}) })
this.pageNo = 1; this.pageNo = 1;
this.$emit("setRefrshParm",{isclick:true}) this.$emit("setRefrshParm", {
let itemData={ isclick: true
"title":item.name, })
"imageUrl":"", let itemData = {
"appModuleInfo":{ "title": item.name,
"code":"M200", "imageUrl": "",
"type":4, "appModuleInfo": {
"name":"课程介绍页", "code": "M200",
"paramFlag":1, "type": 4,
"paramList":[ "name": "课程介绍页",
{ "paramFlag": 1,
"key":"className", "paramList": [{
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController", "key": "className",
"type":4, "value": "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"seqNo":1 "type": 4,
"seqNo": 1
}, },
{ {
"key":"courseId", "key": "courseId",
"value":`${item.id}`, "value": `${item.id}`,
"type":1, "type": 1,
"seqNo":2 "seqNo": 2
} }
] ]
} }
...@@ -179,61 +180,58 @@ export default { ...@@ -179,61 +180,58 @@ export default {
}) })
}, },
//滑动加载更多 //滑动加载更多
loadMore(){ loadMore() {
let _this = this; let _this = this;
if (_this.isReauestBack) {
if(_this.isReauestBack){
_this.isLoading = true; _this.isLoading = true;
//埋点 //埋点
this.pageBurialPoin({ this.pageBurialPoin({
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_recommend', functionCode: 'f_recommend',
actionCode:'c_load_more' actionCode: 'c_load_more'
}) })
setTimeout(()=>{ setTimeout(() => {
_this.getData('loadMore'); _this.getData('loadMore');
},500) }, 500)
} }
}, },
//收藏 取消收藏 //收藏 取消收藏
collectFun(status,id,name){ collectFun(status, id, name) {
// alert(this.userToken); // alert(this.userToken);
status = status == 1 ? 2 : 1; status = status == 1 ? 2 : 1;
this.pageBurialPoin({ this.pageBurialPoin({
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_recommend', functionCode: 'f_recommend',
actionCode:'c_collect', actionCode: 'c_collect',
labelId:id, labelId: id,
labelValue :name, labelValue: name,
}) })
let _this = this, let _this = this,
parm = { parm = {
token:_this.userToken, token: _this.userToken,
type:status, type: status,
courseId:id, courseId: id,
setEntry: 'headers', setEntry: 'headers',
data:{ data: {
token:_this.userToken, token: _this.userToken,
} }
} }
/// alert(this.token) /// alert(this.token)
_this.POST('contents/favors',parm).then(function(res){ _this.POST('contents/favors', parm).then(function (res) {
if(res.code === '000000'){ if (res.code === '000000') {
_this.handelData(id,status); _this.handelData(id, status);
}else{ } else {
//alert(res.message); //alert(res.message);
rocNative.showNativeToast({ rocNative.showNativeToast({
message: '注册登陆后才能收藏哦' message: '注册登陆后才能收藏哦'
...@@ -242,37 +240,37 @@ export default { ...@@ -242,37 +240,37 @@ export default {
}) })
}, },
handelData(id,status){ handelData(id, status) {
let d = this.list; let d = this.list;
for(let i=0;i<d.length;i++){ for (let i = 0; i < d.length; i++) {
if(id == d[i].id){ if (id == d[i].id) {
d[i].whetherFavors = status; d[i].whetherFavors = status;
} }
} }
}, },
//加载数据 //加载数据
getData(type){ getData(type) {
let _this = this, let _this = this,
parm = { parm = {
pageNo:_this.pageNo, pageNo: _this.pageNo,
pageSize:_this.pageSize, pageSize: _this.pageSize,
token:_this.userToken, token: _this.userToken,
setEntry: 'headers' setEntry: 'headers'
} }
_this.GET('contents/courses/recommendCourseList',parm).then(function(res){ _this.GET('contents/courses/recommendCourseList', parm).then(function (res) {
if(res.code === '000000'){ if (res.code === '000000') {
if(res.data == null || res.data.length == 0){ if (res.data == null || res.data.length == 0) {
res.data = []; res.data = [];
_this.isLoading = false; _this.isLoading = false;
_this.noMore = true; _this.noMore = true;
_this.loading = true; _this.loading = true;
_this.isReauestBack = false; _this.isReauestBack = false;
}else{ } else {
_this.isReauestBack = true; _this.isReauestBack = true;
_this.list = [..._this.list ,...res.data]; _this.list = [..._this.list, ...res.data];
_this.isLoading = true; _this.isLoading = true;
_this.noMore = false; _this.noMore = false;
_this.loading = false; _this.loading = false;
...@@ -287,127 +285,145 @@ export default { ...@@ -287,127 +285,145 @@ export default {
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import '../../style/mixin.scss';
@import '../../style/global.scss'; @import '../../style/global.scss';
img { img {
@include bis('../../images/evaluatBg.png'); @include bis('../../images/evaluatBg.png');
} }
.ellipsis{
.ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
width: px2rem(170px); width: px2rem(170px);
} }
.couse-list{ .couse-list {
overflow: hidden; overflow: hidden;
} }
.bgFill{
.bgFill {
background: inherit; background: inherit;
height: px2rem(20px); height: px2rem(20px);
} }
.cource-teach .cource-header,.couse-cont{
padding:0 px2rem(15px);
}
.couse-cont{
.cource-teach .cource-header,
.couse-cont {
padding: 0 px2rem(15px);
} }
.fixBox{ .couse-cont {}
} .fixBox {}
.cource-header{
.cource-header {
/* margin: 0 0 px2rem(11px) 0;*/ /* margin: 0 0 px2rem(11px) 0;*/
/*height: px2rem(45px);*/ /*height: px2rem(45px);*/
margin-bottom: px2rem(15px); margin-bottom: px2rem(15px);
.font-title{
.font-title {
line-height: px2rem(36px); line-height: px2rem(36px);
height: px2rem(36px); height: px2rem(36px);
background: #fff; background: #fff;
} }
} }
.loading-box{
.loading-box {
font-size: px2rem(16px); font-size: px2rem(16px);
padding:px2rem(10px) 0 px2rem(20px) 0; padding: px2rem(10px) 0 px2rem(20px) 0;
text-align: center; text-align: center;
span{
color:#999; span {
color: #999;
} }
} }
.change-part{
margin-top:px2rem(10px); .change-part {
margin-top: px2rem(10px);
float: right; float: right;
font-size:px2rem(11px); font-size: px2rem(11px);
line-height: px2rem(11px); line-height: px2rem(11px);
border:1px solid #A9AEB7; border: 1px solid #A9AEB7;
border-radius: px2rem(9px); border-radius: px2rem(9px);
vertical-align: middle; vertical-align: middle;
padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px); padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);
img{
img {
width: px2rem(12px); width: px2rem(12px);
height: px2rem(12px); height: px2rem(12px);
} }
} }
.fixed{
.fixBox{ .fixed {
.fixBox {
position: fixed; position: fixed;
top:0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 112; z-index: 112;
.font-title{
.font-title {
background: #44A99B; background: #44A99B;
padding:0 px2rem(15px); padding: 0 px2rem(15px);
color:#fff; color: #fff;
} }
} }
.bgFill{
.bgFill {
background: #44A99B; background: #44A99B;
} }
} }
.course-item{
.course-item {
float: left; float: left;
margin-bottom: px2rem(19px); margin-bottom: px2rem(19px);
margin-right: px2rem(5px); margin-right: px2rem(5px);
} }
.end-left{
.end-left {
margin-right: 0; margin-right: 0;
} }
.course-pic{
width:px2rem(170px); .course-pic {
height:px2rem(95px); width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px); border-radius: px2rem(3px);
position: relative; position: relative;
.pic-tec{
.pic-tec {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
border-radius: px2rem(3px); border-radius: px2rem(3px);
} }
.course-tag{
.course-tag {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top:px2rem(5px); top: px2rem(5px);
left: px2rem(5px); left: px2rem(5px);
line-height: px2rem(16px); line-height: px2rem(16px);
height:px2rem(16px); height: px2rem(16px);
color:#4A87D4; color: #4A87D4;
padding: 0 px2rem(3px); padding: 0 px2rem(3px);
background: #FAFCFF; background: #FAFCFF;
border:1px solid #C3DCFB; border: 1px solid #C3DCFB;
font-size: px2rem(10px); font-size: px2rem(10px);
border-radius: px2rem(2px); border-radius: px2rem(2px);
} }
} }
.course-txt{
.course-txt {
margin-top: px2rem(5px); margin-top: px2rem(5px);
font-size: px2rem(14px); font-size: px2rem(14px);
line-height: px2rem(19px); line-height: px2rem(19px);
...@@ -418,47 +434,48 @@ img { ...@@ -418,47 +434,48 @@ img {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
width: px2rem(170px); width: px2rem(170px);
} }
.course-opt{
.course-opt {
font-size: px2rem(12px); font-size: px2rem(12px);
position: relative; position: relative;
/*margin-top: px2rem(6px);*/ /*margin-top: px2rem(6px);*/
.opt-info{ .opt-info {
color:#999; color: #999;
} }
.opt{
.opt {
display: inline-block; display: inline-block;
height: px2rem(18px); height: px2rem(18px);
line-height: px2rem(18px); line-height: px2rem(18px);
padding:0 px2rem(4px); padding: 0 px2rem(4px);
position: absolute; position: absolute;
right: 0; right: 0;
top:0; top: 0;
} }
.collect{
.collect {
background: #F7F8F9; background: #F7F8F9;
color: #666; color: #666;
} }
.collected{
.collected {
color: #F47A48; color: #F47A48;
background: RGBA(244, 122, 72, 0.04); background: RGBA(244, 122, 72, 0.04);
} }
} }
.font-title {
.font-title{
font-size: px2rem(18px); font-size: px2rem(18px);
font-weight: bold; font-weight: bold;
color: #28344C color: #28344C
} }
.title{
.title {
font-size: px2rem(16px); font-size: px2rem(16px);
text-align: left; text-align: left;
width: px2rem(170px); width: px2rem(170px);
max-height: px2rem(20px); max-height: px2rem(20px);
} }
</style> </style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册