Skip to content

P
pica.cloud.web-education-admin
提交 4332b291 编写于 作者: 杨广俊's avatar 杨广俊
浏览文件
操作

排序组件

上级 837a63b8
隐藏空白字符变更
内嵌 并排
正在显示 包含 455 行增加 和 23 行删除
src/components/business/course-list.1.vue 0 → 100644
浏览文件 @ 4332b291
<template>
<section>
<GroupTitle :groupNum="groupNum" />
<div class="cource-teach">
<div class="couse-list">
<div
:class="index % 2 == 1 ? 'course-item end-left' : 'course-item'"
v-for="(item, index) in parmData" :key="index">
<div class="course-pic" @click="goToPage(item)">
<img v-lazy="item.courseInfoUrl" class="pic-tec" />
<span class="course-tag">{{item.disName}}</span>
</div>
<p class="course-txt">
{{item.name}}
</p>
<div class="course-opt">
<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)">
{{item.whetherFavors==2?'收藏':'已收藏'}}
</span>
</div>
</div>
</div>
<div v-if="parmData.length==0" class="noSource">暂无最新教程数据</div>
</div>
</section>
</template>
<script>
//import { setEventByModuleCode } from '@/utils/index'
import GroupTitle from '@/components/business/group-title';
export default {
name: 'CourseList',
data() {
return {
list: [],
title: '最新课程',
pageNo: 1,
pageSize: 6,
needShow: true
// parmData: []
}
},
props: {
userToken: {
type: String,
default: ''
},
parmData: {
type: Array,
default: () => []
},
groupNum: {
type: String,
default: '0'
}
},
computed: {
cParmData() {
return this.parmData
},
// groupNum() {
// return this.parmData.length + ''
// }
},
components: {
GroupTitle
},
mounted() {
// this.getData()
// this.list = this.parmData;
},
methods: {
showAllItem(index) {
// this.needShow = !this.needShow
},
//跳转
goToPage(item) {
this.$emit("setRefrshParm", {
isclick: true
})
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_new_course',
actionCode: 'c_course',
labelId: item.id,
labelValue: item.name,
})
let itemData = {};
if (item == '') {
itemData = {
"title": item.name,
"imageUrl": "",
"appModuleInfo": {
"code": "M200",
"type": 4,
"name": "课程介绍页",
"paramFlag": 1,
"paramList": [{
"key": "className",
"value": "com.picahealth.yunque.activitys.famousteacherschool.AllDiseaseActivity###MicroProfessionMoreTableController",
"type": 4,
"seqNo": 1
},
{
"key": "disCategoryId",
"value": '-1',
"type": 1,
"seqNo": 2
}
]
}
};
} else {
itemData = {
"title": item.name,
"imageUrl": "",
"appModuleInfo": {
"code": "M200",
"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
})
},
//收藏 取消收藏
collectFun(status, id, name) {
// alert(this.userToken)
status = status == 1 ? 2 : 1;
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_new_course',
actionCode: 'c_collect',
labelId: id,
labelValue: name,
})
let _this = this,
parm = {
token: _this.userToken,
type: status,
courseId: id,
setEntry: 'headers'
}
_this.POST('contents/favors', parm).then(function (res) {
if (res.code === '000000') {
_this.handelData(id, status);
} else {
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
}
})
},
handelData(id, status) {
let d = this.parmData;
for (let i = 0; i < d.length; i++) {
if (id == d[i].id) {
d[i].whetherFavors = status;
}
}
},
getData() {
//alert("最新课程");
let _this = this,
parm = {
pageNo: _this.pageNo,
pageSize: _this.pageSize,
token: _this.userToken,
setEntry: 'headers'
}
_this.GET('/contents/HomeNewCourse/NewCourseInformation', parm).then(function (res) {
if (res.code === '000000') {
_this.parmData = res.data.contentAppModels || [];
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/global.scss';
@import '../../style/mixin.scss';
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list {
overflow: hidden;
}
.get-more {
border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
display: inline-block;
float: right;
margin-top: px2rem(3px);
height: px2rem(16px);
line-height: px2rem(16px);
font-size: px2rem(11px);
}
.thorw-icon {
width: px2rem(8px);
height: px2rem(8px);
}
.noSource {
text-align: center;
font-size: px2rem(13px);
padding: px2rem(13px) 0;
color: #999;
}
.cource-teach {
padding: 0 px2rem(15px);
}
.course-item {
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.end-left {
margin-right: 0;
}
.course-pic {
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
position: relative;
.pic-tec {
width: 100%;
height: 100%;
border-radius: px2rem(3px);
display: block;
}
.course-tag {
position: absolute;
display: inline-block;
top: px2rem(5px);
left: px2rem(5px);
line-height: px2rem(16px);
height: px2rem(16px);
color: #4A87D4;
padding: 0 px2rem(3px);
background: #FAFCFF;
border: 1px solid #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.course-txt {
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
max-height: px2rem(38px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.opt-info {
color: #999;
}
.course-opt {
font-size: px2rem(12px);
/* margin-top: px2rem(6px);*/
position: relative;
.opt {
display: inline-block;
top: 0;
right: 0;
position: absolute;
height: px2rem(18px);
line-height: px2rem(18px);
padding: 0 px2rem(4px);
}
.collect {
background: #F7F8F9;
color: #666;
}
.collected {
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
.title {
font-size: px2rem(18px);
height: px2rem(18px);
margin: 0 0 px2rem(21px) 0;
font-weight: bold;
color: #28344C
}
</style>
src/components/business/course-list.vue
浏览文件 @ 4332b291
<template> <template>
<section> <section>
<GroupTitle :groupNum="groupNum" /> <GroupTitle :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
<div class="cource-teach"> <div class="cource-teach">
<div class="couse-list"> <div class="couse-list">
<div <div
...@@ -54,6 +54,14 @@ export default { ...@@ -54,6 +54,14 @@ export default {
groupNum: { groupNum: {
type: String, type: String,
default: '0' default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
} }
}, },
computed: { computed: {
......
src/components/business/five-minutes.vue
浏览文件 @ 4332b291
<template> <template>
<section> <section>
<GroupTitle groupTitle="5分钟医学院" :groupNum="groupNum"/> <GroupTitle groupTitle="5分钟医学院" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
<div class="hot-teacher"> <div class="hot-teacher">
<div :class="index>1 && (index+1 == parmData.length)?'teacher-item item-end' : 'teacher-item'" :key="index" <div :class="index>1 && (index+1 == parmData.length)?'teacher-item item-end' : 'teacher-item'" :key="index"
v-for="(item,index) in parmData" @click="goToPage(item)"> v-for="(item,index) in parmData" @click="goToPage(item)">
...@@ -56,6 +56,14 @@ export default { ...@@ -56,6 +56,14 @@ export default {
groupNum: { groupNum: {
type: String, type: String,
default: '0' default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
} }
}, },
computed: { computed: {
......
src/components/business/group-title.vue
浏览文件 @ 4332b291
<template> <template>
<section class="group-title"> <section class="group-title">
<span class="group-title-name">{{groupTitle}} </span> <article v-show="showTitle" class="group-title-title">
<span v-show="isShowNum"> ({{groupNum}})</span> <span>{{groupTitle}} </span>
<span v-show="isShowNum"> ({{groupNum}})</span>
</article>
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">学习人数</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">发布时间</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/>
</div>
</article>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
showOrderIndex: 1
} }
}, },
props: { props: {
...@@ -23,7 +35,25 @@ export default { ...@@ -23,7 +35,25 @@ export default {
groupNum: { groupNum: {
type: String, type: String,
default: "0" default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
} }
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
}
} }
} }
</script> </script>
...@@ -34,10 +64,29 @@ export default { ...@@ -34,10 +64,29 @@ export default {
margin-left: px2rem(15px); margin-left: px2rem(15px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
&-name { &-order {
margin-right: px2rem(6px); display: flex;
flex-direction: row;
padding: px2rem(20px) 0 px2rem(15px);
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin-right: px2rem(20px);
}
img {
position: absolute;
top: px2rem(2px);
left: px2rem(51px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.active {
color: #449284;
} }
span { &-title {
padding: px2rem(20px) 0 px2rem(15px); padding: px2rem(20px) 0 px2rem(15px);
font-size: px2rem(18px); font-size: px2rem(18px);
font-weight: 500; font-weight: 500;
......
src/components/business/health-comics.vue
浏览文件 @ 4332b291
<template> <template>
<section> <section>
<GroupTitle groupTitle="健康漫画" :groupNum="groupNum" /> <GroupTitle groupTitle="健康漫画" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
<div class="font-style"> <div class="font-style">
<div class="teach-opt"> <div class="teach-opt">
<div class="teach-list"> <div class="teach-list">
...@@ -48,6 +48,14 @@ export default { ...@@ -48,6 +48,14 @@ export default {
groupNum: { groupNum: {
type: String, type: String,
default: '0' default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
} }
}, },
computed: { computed: {
......
src/components/business/teacher-list.vue
浏览文件 @ 4332b291
<template> <template>
<section> <section>
<GroupTitle groupTitle="讲师" :groupNum="groupNum" /> <GroupTitle groupTitle="讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
<div class="font-style"> <div class="font-style">
<div class="teach-opt"> <div class="teach-opt">
<div class="teach-list"> <div class="teach-list">
...@@ -60,6 +60,14 @@ export default { ...@@ -60,6 +60,14 @@ export default {
groupNum: { groupNum: {
type: String, type: String,
default: '0' default: '0'
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: false
} }
}, },
mounted() { mounted() {
......
src/style/common.scss
浏览文件 @ 4332b291
// * { img {
// -webkit-user-select: none; -webkit-user-select: none;
// -moz-user-select: none; -moz-user-select: none;
// -o-user-select: none; -o-user-select: none;
// user-select: none; user-select: none;
// } }
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, { body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, {
padding: 0; padding: 0;
......
src/views/result.vue
浏览文件 @ 4332b291
...@@ -48,19 +48,19 @@ ...@@ -48,19 +48,19 @@
<NoMoreItem/> <NoMoreItem/>
</div> </div>
<div class="list-container" v-show="navIndex === '1' && showTab1"> <div class="list-container" v-show="navIndex === '1' && showTab1">
<CourseList :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/> <CourseList :showTitle="showTitle" :showOrder="showOrder" :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/>
<NoMoreItem/> <NoMoreItem/>
</div> </div>
<div class="list-container" v-show="navIndex === '2' && showTab2"> <div class="list-container" v-show="navIndex === '2' && showTab2">
<FiveMinutes :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/> <FiveMinutes :showTitle="showTitle" :showOrder="showOrder" :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/>
<NoMoreItem/> <NoMoreItem/>
</div> </div>
<div class="list-container" v-show="navIndex === '3' && showTab3"> <div class="list-container" v-show="navIndex === '3' && showTab3">
<TeacherList :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/> <TeacherList :showTitle="showTitle" :showOrder="showOrder" :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/>
<NoMoreItem/> <NoMoreItem/>
</div> </div>
<div class="list-container" v-show="navIndex === '4' && showTab4"> <div class="list-container" v-show="navIndex === '4' && showTab4">
<HealthComics :parmData="educationContentsAll" :groupNum="educationContentCount"/> <HealthComics :showTitle="showTitle" :showOrder="showOrder" :parmData="educationContentsAll" :groupNum="educationContentCount"/>
<NoMoreItem/> <NoMoreItem/>
</div> </div>
</article> </article>
...@@ -107,7 +107,9 @@ export default { ...@@ -107,7 +107,9 @@ export default {
showTab1: true, showTab1: true,
showTab2: true, showTab2: true,
showTab3: true, showTab3: true,
showTab4: true showTab4: true,
showTitle: false,
showOrder: true
} }
}, },
components: { components: {
...@@ -135,7 +137,7 @@ export default { ...@@ -135,7 +137,7 @@ export default {
console.log(this.searchText) console.log(this.searchText)
}, },
mounted(){ mounted(){
this.search(this.searchText) // this.search(this.searchText)
// this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll') // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
}, },
methods: { methods: {
...@@ -145,6 +147,7 @@ export default { ...@@ -145,6 +147,7 @@ export default {
}, },
// 搜索结果 // 搜索结果
search(searchText) { search(searchText) {
this.showLoading = true
let _this = this, let _this = this,
para = { para = {
searchCategory: '1,2,3,4', searchCategory: '1,2,3,4',
...@@ -163,6 +166,7 @@ export default { ...@@ -163,6 +166,7 @@ export default {
this.showTab3 = true this.showTab3 = true
this.showTab4 = true this.showTab4 = true
this.GET(url, para).then(res => { this.GET(url, para).then(res => {
this.showLoading = false
_this.searchText = '' _this.searchText = ''
_this.navIndex = '0' _this.navIndex = '0'
if (res.code == '000000') { if (res.code == '000000') {
...@@ -296,9 +300,10 @@ export default { ...@@ -296,9 +300,10 @@ export default {
margin: px2rem(15px) px2rem(15px) px2rem(-1px); margin: px2rem(15px) px2rem(15px) px2rem(-1px);
padding-bottom: px2rem(11px); padding-bottom: px2rem(11px);
font-size: px2rem(14px); font-size: px2rem(14px);
color: #449284; color: #666;
} }
.bt-2 { .bt-2 {
color: #449284;
border-bottom: px2rem(3px) solid #449284; border-bottom: px2rem(3px) solid #449284;
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或