Skip to content

P
pica-admin-consultation
提交 189dab19 编写于 作者: 杨广俊's avatar 杨广俊
浏览文件
操作

为你推荐

上级 d025a2ce
隐藏空白字符变更
内嵌 并排
正在显示 包含 412 行增加 和 395 行删除
src/components/business-new/yqy-adjust.vue
浏览文件 @ 189dab19
<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">
<div class="bgFill" :style="{height:ptop}"></div> <div class="bgFill" :style="{height:ptop}"></div>
<div class="font-title"> <div class="font-title">
{{title}} {{title}}
</div> </div>
</div> </div>
</div> </div>
<div class="couse-cont"> <div class="couse-cont">
<div class="couse-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :style="'height:'+clientHeight"> <div class="couse-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :style="'height:'+clientHeight">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in list"> <div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in list">
<div class="course-pic" @click="goToPage(item)"> <div class="course-pic" @click="goToPage(item)">
<img v-lazy="item.courseInfoUrl" class="pic-tec" /> <img v-lazy="item.courseInfoUrl" class="pic-tec" />
<span class="course-tag">{{item.disName}}</span> <span class="course-tag">{{item.disName}}</span>
</div> </div>
<p class="course-txt"> <p class="course-txt">
{{item.name}} {{item.name}}
</p> </p>
<div class="course-opt"> <div class="course-opt">
<span class="opt-info">{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span> <span class="opt-info">{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span>
<span :class="item.whetherFavors==2?'opt collect':'opt collected'"@click="collectFun(item.whetherFavors,item.id,item.name)"> <span :class="item.whetherFavors==2?'opt collect':'opt collected'"@click="collectFun(item.whetherFavors,item.id,item.name)">
{{item.whetherFavors==2?'收藏':'已收藏'}} {{item.whetherFavors==2?'收藏':'已收藏'}}
</span> </span>
</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:{
isFixed:{
default:false,
type:Boolean
},
statusBarHeight:{
type:Number,
default:0
},
adjustPageNo:{
type:Number,
default:1
},
userToken:{
type:String,
default:''
},
parmData:{
type:Array,
default:[]
},
},
mounted(){
this.list = this.parmData;
this.$store.dispatch("setSource", []);
//this.pageNo = this.adjustPageNo;
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.menuHeight = this.popHeight + 7 + 40 + "px";
// this.ptop = this.popHeight + "px";
// this.getData();
},
created(){
let _this = this;
window.__getStatusBarHeight = function(parm){
if(window.__isAndroid){
_this.popHeight = parseInt(parm.statusBarHeight)/2
}else{
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight+'px';
_this.menuptop = _this.popHeight+36+'px'
///alert(_this.menuptop);
}
this.getStatusHight()
},
watch:{
},
components:{
// LOADING
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
}, },
props: {
//跳转 isFixed: {
goToPage(item){ default: false,
this.pageBurialPoin({ type: Boolean
menuLevel:1, },
menuCode:'m_home', statusBarHeight: {
functionCode:'f_recommend', type: Number,
actionCode:'c_course', default: 0
labelId:item.id, },
labelValue :item.name, adjustPageNo: {
}) type: Number,
this.pageNo = 1; default: 1
this.$emit("setRefrshParm",{isclick:true}) },
let itemData={ userToken: {
"title":item.name, type: String,
"imageUrl":"", default: ''
"appModuleInfo":{ },
"code":"M200", parmData: {
"type":4, type: Array,
"name":"课程介绍页", default: []
"paramFlag":1, },
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.id}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
}, },
mounted() {
this.list = this.parmData;
//滑动加载更多
loadMore(){ this.$store.dispatch("setSource", []);
//this.pageNo = this.adjustPageNo;
let _this = this;
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
if(_this.isReauestBack){ // }else{
// this.popHeight = this.statusBarHeight
_this.isLoading = true; // }
// this.menuHeight = this.popHeight + 7 + 40 + "px";
//埋点 // this.ptop = this.popHeight + "px";
this.pageBurialPoin({ // this.getData();
menuLevel:1,
menuCode:'m_home',
functionCode:'f_recommend',
actionCode:'c_load_more'
})
setTimeout(()=>{
_this.getData('loadMore');
},500)
}
}, },
created() {
let _this = this;
window.__getStatusBarHeight = function (parm) {
//收藏 取消收藏 if (window.__isAndroid) {
collectFun(status,id,name){ _this.popHeight = parseInt(parm.statusBarHeight) / 2
// alert(this.userToken); } else {
status = status == 1 ? 2 : 1; _this.popHeight = parm.statusBarHeight
this.pageBurialPoin({ }
menuLevel:1, _this.ptop = _this.popHeight + 'px';
menuCode:'m_home',
functionCode:'f_recommend', _this.menuptop = _this.popHeight + 36 + 'px'
actionCode:'c_collect',
labelId:id,
labelValue :name,
})
let _this = this,
parm = {
token:_this.userToken,
type:status,
courseId:id,
setEntry: 'headers',
data:{
token:_this.userToken,
}
}
/// alert(this.token)
_this.POST('contents/favors',parm).then(function(res){
if(res.code === '000000'){
_this.handelData(id,status);
}else{
//alert(res.message);
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
} }
}) this.getStatusHight()
}, },
watch: {
handelData(id,status){
let d = this.list;
for(let i=0;i<d.length;i++){
if(id == d[i].id){
d[i].whetherFavors = status;
}
}
}, },
components: {
// LOADING
},
methods: {
//加载数据 getStatusHight() {
getData(type){ rocNative.getStatusBarHeight({
let _this = this, __funcName: '__getStatusBarHeight'
parm = { })
pageNo:_this.pageNo, },
pageSize:_this.pageSize,
token:_this.userToken, //跳转
setEntry: 'headers' goToPage(item) {
} this.pageBurialPoin({
menuLevel: 1,
_this.GET('contents/courses/recommendCourseList',parm).then(function(res){ menuCode: 'm_home',
functionCode: 'f_recommend',
if(res.code === '000000'){ actionCode: 'c_course',
if(res.data == null || res.data.length == 0){ labelId: item.id,
res.data = []; labelValue: item.name,
_this.isLoading = false; })
_this.noMore = true; this.pageNo = 1;
_this.loading = true; this.$emit("setRefrshParm", {
_this.isReauestBack = false; isclick: true
}else{ })
_this.isReauestBack = true; let itemData = {
_this.list = [..._this.list ,...res.data]; "title": item.name,
_this.isLoading = true; "imageUrl": "",
_this.noMore = false; "appModuleInfo": {
_this.loading = false; "code": "M200",
_this.pageNo += 1; "type": 4,
} "name": "课程介绍页",
} "paramFlag": 1,
"paramList": [{
"key": "className",
"value": "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type": 4,
"seqNo": 1
},
{
"key": "courseId",
"value": `${item.id}`,
"type": 1,
"seqNo": 2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//滑动加载更多
loadMore() {
let _this = this;
}) if (_this.isReauestBack) {
_this.isLoading = true;
//埋点
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_recommend',
actionCode: 'c_load_more'
})
setTimeout(() => {
_this.getData('loadMore');
}, 500)
}
},
//收藏 取消收藏
collectFun(status, id, name) {
// alert(this.userToken);
status = status == 1 ? 2 : 1;
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_recommend',
actionCode: 'c_collect',
labelId: id,
labelValue: name,
})
let _this = this,
parm = {
token: _this.userToken,
type: status,
courseId: id,
setEntry: 'headers',
data: {
token: _this.userToken,
}
}
/// alert(this.token)
_this.POST('contents/favors', parm).then(function (res) {
if (res.code === '000000') {
_this.handelData(id, status);
} else {
//alert(res.message);
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
}
})
},
handelData(id, status) {
let d = this.list;
for (let i = 0; i < d.length; i++) {
if (id == d[i].id) {
d[i].whetherFavors = status;
}
}
},
//加载数据
getData(type) {
let _this = this,
parm = {
pageNo: _this.pageNo,
pageSize: _this.pageSize,
token: _this.userToken,
setEntry: 'headers'
}
_this.GET('contents/courses/recommendCourseList', parm).then(function (res) {
if (res.code === '000000') {
if (res.data == null || res.data.length == 0) {
res.data = [];
_this.isLoading = false;
_this.noMore = true;
_this.loading = true;
_this.isReauestBack = false;
} else {
_this.isReauestBack = true;
_this.list = [..._this.list, ...res.data];
_this.isLoading = true;
_this.noMore = false;
_this.loading = false;
_this.pageNo += 1;
}
}
})
}
} }
}
} }
</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{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list{ .ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
} }
.bgFill{
background: inherit; .couse-list {
height: px2rem(20px); overflow: hidden;
}
.cource-teach .cource-header,.couse-cont{
padding:0 px2rem(15px);
} }
.couse-cont{
.bgFill {
background: inherit;
height: px2rem(20px);
} }
.fixBox{ .cource-teach .cource-header,
.couse-cont {
padding: 0 px2rem(15px);
} }
.cource-header{
/* margin: 0 0 px2rem(11px) 0;*/ .couse-cont {}
/*height: px2rem(45px);*/ .fixBox {}
margin-bottom: px2rem(15px);
.font-title{ .cource-header {
line-height: px2rem(36px); /* margin: 0 0 px2rem(11px) 0;*/
height: px2rem(36px);
background: #fff; /*height: px2rem(45px);*/
} margin-bottom: px2rem(15px);
.font-title {
line-height: px2rem(36px);
height: px2rem(36px);
background: #fff;
}
} }
.loading-box{
font-size: px2rem(16px); .loading-box {
padding:px2rem(10px) 0 px2rem(20px) 0; font-size: px2rem(16px);
text-align: center; padding: px2rem(10px) 0 px2rem(20px) 0;
span{ text-align: center;
color:#999;
} span {
color: #999;
}
} }
.change-part{
margin-top:px2rem(10px); .change-part {
float: right; margin-top: px2rem(10px);
font-size:px2rem(11px); float: right;
line-height: px2rem(11px); font-size: px2rem(11px);
border:1px solid #A9AEB7; line-height: px2rem(11px);
border-radius: px2rem(9px); border: 1px solid #A9AEB7;
vertical-align: middle; border-radius: px2rem(9px);
padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px); vertical-align: middle;
img{ padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);
width: px2rem(12px);
height: px2rem(12px); img {
width: px2rem(12px);
} height: px2rem(12px);
}
} }
.fixed{
.fixed {
.fixBox{
position: fixed; .fixBox {
top:0; position: fixed;
left: 0; top: 0;
width: 100%; left: 0;
width: 100%;
z-index: 112;
.font-title{ z-index: 112;
background: #44A99B;
padding:0 px2rem(15px); .font-title {
color:#fff; background: #44A99B;
padding: 0 px2rem(15px);
color: #fff;
}
}
.bgFill {
background: #44A99B;
} }
}
.bgFill{
background: #44A99B;
}
} }
.course-item{
float: left; .course-item {
margin-bottom: px2rem(19px); float: left;
margin-right: px2rem(5px); margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
} }
.end-left{
margin-right: 0; .end-left {
margin-right: 0;
} }
.course-pic{
width:px2rem(170px); .course-pic {
height:px2rem(95px); width: px2rem(170px);
border-radius: px2rem(3px); height: px2rem(95px);
position: relative;
.pic-tec{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px); border-radius: px2rem(3px);
} position: relative;
.course-tag{
position: absolute; .pic-tec {
display: inline-block; width: 100%;
top:px2rem(5px); height: 100%;
left: px2rem(5px); display: block;
line-height: px2rem(16px); border-radius: px2rem(3px);
height:px2rem(16px); }
color:#4A87D4;
padding: 0 px2rem(3px); .course-tag {
background: #FAFCFF; position: absolute;
border:1px solid #C3DCFB; display: inline-block;
font-size: px2rem(10px); top: px2rem(5px);
border-radius: px2rem(2px); left: px2rem(5px);
} line-height: px2rem(16px);
} height: px2rem(16px);
.course-txt{ color: #4A87D4;
margin-top: px2rem(5px); padding: 0 px2rem(3px);
font-size: px2rem(14px); background: #FAFCFF;
line-height: px2rem(19px); border: 1px solid #C3DCFB;
max-height: px2rem(38px); font-size: px2rem(10px);
color: #333; border-radius: px2rem(2px);
overflow: hidden; }
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
} }
.course-opt{
font-size: px2rem(12px); .course-txt {
position: relative; margin-top: px2rem(5px);
/*margin-top: px2rem(6px);*/ font-size: px2rem(14px);
.opt-info{ line-height: px2rem(19px);
color:#999; max-height: px2rem(38px);
} color: #333;
.opt{ overflow: hidden;
display: inline-block; text-overflow: ellipsis;
height: px2rem(18px); -webkit-line-clamp: 2;
line-height: px2rem(18px); width: px2rem(170px);
padding:0 px2rem(4px);
position: absolute;
right: 0;
top:0;
}
.collect{
background: #F7F8F9;
color: #666;
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
} }
.course-opt {
font-size: px2rem(12px);
position: relative;
/*margin-top: px2rem(6px);*/
.opt-info {
color: #999;
}
.font-title{ .opt {
font-size: px2rem(18px); display: inline-block;
font-weight: bold; height: px2rem(18px);
color: #28344C line-height: px2rem(18px);
padding: 0 px2rem(4px);
} position: absolute;
.title{ right: 0;
font-size: px2rem(16px); top: 0;
text-align: left; }
width: px2rem(170px);
max-height: px2rem(20px); .collect {
background: #F7F8F9;
color: #666;
}
.collected {
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
} }
.font-title {
font-size: px2rem(18px);
font-weight: bold;
color: #28344C
}
.title {
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或