排序组件

src/components/business/course-list.1.vue

+<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

 <template>
 <section>
-    <GroupTitle :groupNum="groupNum" />
+    <GroupTitle :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
     <div class="cource-teach">
         <div class="couse-list">
             <div 
@@ -54,6 +54,14 @@ export default {
         groupNum: {
             type: String,
             default: '0'
+        },
+        showTitle: {
+            type: Boolean,
+            default: true
+        },
+        showOrder: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

src/components/business/five-minutes.vue

 <template>
     <section>
-        <GroupTitle groupTitle="5分钟医学院" :groupNum="groupNum"/>
+        <GroupTitle groupTitle="5分钟医学院" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
         <div class="hot-teacher">
             <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)">
@@ -56,6 +56,14 @@ export default {
         groupNum: {
             type: String,
             default: '0'
+        },
+        showTitle: {
+            type: Boolean,
+            default: true
+        },
+        showOrder: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

src/components/business/group-title.vue

 <template>
   <section class="group-title">
-      <span class="group-title-name">{{groupTitle}} </span>
-      <span v-show="isShowNum"> ({{groupNum}})</span>
+      <article v-show="showTitle" class="group-title-title">
+        <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>
 </template>
 <script>
 export default {
   data() {
       return {
-        
+        showOrderIndex: 1
       }
   },
   props: {
@@ -23,7 +35,25 @@ export default {
     groupNum: {
       type: String,
       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>
@@ -34,10 +64,29 @@ export default {
   margin-left: px2rem(15px);
   display: flex;
   flex-direction: row;
-  &-name {
-    margin-right: px2rem(6px);
+  &-order {
+    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);
     font-size: px2rem(18px);
     font-weight: 500;

src/components/business/health-comics.vue

 <template>
 <section>
-    <GroupTitle groupTitle="健康漫画" :groupNum="groupNum" />
+    <GroupTitle groupTitle="健康漫画" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
     <div class="font-style">
         <div class="teach-opt">
             <div class="teach-list">
@@ -48,6 +48,14 @@ export default {
         groupNum: {
             type: String,
             default: '0'
+        },
+        showTitle: {
+            type: Boolean,
+            default: true
+        },
+        showOrder: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

src/components/business/teacher-list.vue

 <template>
 <section>
-    <GroupTitle groupTitle="讲师" :groupNum="groupNum" />
+    <GroupTitle groupTitle="讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder"/>
     <div class="font-style">
         <div class="teach-opt">
             <div class="teach-list">
@@ -60,6 +60,14 @@ export default {
         groupNum: {
             type: String,
             default: '0'
+        },
+        showTitle: {
+            type: Boolean,
+            default: true
+        },
+        showOrder: {
+            type: Boolean,
+            default: false
         }
     },
     mounted() {

src/style/common.scss

-// * {
-//   -webkit-user-select: none;
-//   -moz-user-select: none;
-//   -o-user-select: none;
-//   user-select: none;
-// }
+img {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-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, {
     padding: 0;

src/views/result.vue

@@ -48,19 +48,19 @@
         <NoMoreItem/>
       </div>
       <div class="list-container" v-show="navIndex === '1' && showTab1">
-        <CourseList :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/>
+        <CourseList :showTitle="showTitle" :showOrder="showOrder" :parmData="contentAppModelsAll" :groupNum="contentAppModelCount"/>
         <NoMoreItem/>
       </div>
       <div class="list-container" v-show="navIndex === '2' && showTab2">
-        <FiveMinutes :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/>
+        <FiveMinutes :showTitle="showTitle" :showOrder="showOrder" :parmData="fiveMinutesMedicalContentListAll" :groupNum="fiveMinutesMedicalContentListCount"/>
         <NoMoreItem/>
       </div>
       <div class="list-container" v-show="navIndex === '3' && showTab3">
-        <TeacherList :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/>
+        <TeacherList :showTitle="showTitle" :showOrder="showOrder" :parmData="pCourseDoctorModelsAll" :groupNum="pCourseDoctorModelCount"/>
         <NoMoreItem/>
       </div>
       <div class="list-container" v-show="navIndex === '4' && showTab4">
-        <HealthComics :parmData="educationContentsAll" :groupNum="educationContentCount"/>
+        <HealthComics :showTitle="showTitle" :showOrder="showOrder" :parmData="educationContentsAll" :groupNum="educationContentCount"/>
         <NoMoreItem/>
       </div>
     </article>
@@ -107,7 +107,9 @@ export default {
       showTab1: true,
       showTab2: true,
       showTab3: true,
-      showTab4: true
+      showTab4: true,
+      showTitle: false,
+      showOrder: true
     }
   },
   components: {
@@ -135,7 +137,7 @@ export default {
     console.log(this.searchText)
   },
   mounted(){
-    this.search(this.searchText)
+    // this.search(this.searchText)
     // this.searchAll(this.searchText, '1', 'contentAppModels', 'contentAppModelsAll')
   },
   methods: {
@@ -145,6 +147,7 @@ export default {
     },
     // 搜索结果
     search(searchText) {
+      this.showLoading = true
       let _this = this,
           para = {
               searchCategory: '1,2,3,4',
@@ -163,6 +166,7 @@ export default {
       this.showTab3 = true
       this.showTab4 = true
       this.GET(url, para).then(res => {
+          this.showLoading = false
           _this.searchText = ''
           _this.navIndex = '0'
           if (res.code == '000000') {
@@ -296,9 +300,10 @@ export default {
       margin: px2rem(15px) px2rem(15px) px2rem(-1px);
       padding-bottom: px2rem(11px);
       font-size: px2rem(14px);
-      color: #449284;
+      color: #666;
     }
     .bt-2 {
+      color: #449284;
       border-bottom: px2rem(3px) solid #449284;
     }
   }