为你推荐

src/components/business-new/yqy-adjust.vue

 <template>
-  <div class="cource-teach" id="adjust-u">
-      <div :class="isFixed ? 'cource-header fixed' : 'cource-header'" :style="{height:menuptop}">
+<div class="cource-teach" id="adjust-u">
+    <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="font-title">
-              {{title}}
+            <div class="font-title">
+                {{title}}
             </div>
-          </div>
-      </div>
-      <div class="couse-cont">
+        </div>
+    </div>
+    <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="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in list">
                 <div class="course-pic" @click="goToPage(item)">
-                  <img v-lazy="item.courseInfoUrl" class="pic-tec" />
-                  <span class="course-tag">{{item.disName}}</span>
+                    <img v-lazy="item.courseInfoUrl" class="pic-tec" />
+                    <span class="course-tag">{{item.disName}}</span>
                 </div>
                 <p class="course-txt">
-                  {{item.name}}
+                    {{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)">
+                    <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 class="loading-box" >
+        <div class="loading-box">
             <span class="loading-more-txt" v-if="isLoading">努力加载中...</span>
             <span class="no-more" v-if="noMore">没有更多了......</span>
         </div>
-        
-      </div>
-      <!-- <LOADING v-if="isShowLoading"></LOADING> -->
-  </div>
+
+    </div>
+    <!-- <LOADING v-if="isShowLoading"></LOADING> -->
+</div>
 </template>
 
 <script>
-
-import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui';
+import {
+    Loadmore,
+    Spinner,
+    InfiniteScroll
+} from 'mint-ui';
 // import { setEventByModuleCode } from '@/utils/index'
- // import LOADING from '../../components/common/loading-new';
+// import LOADING from '../../components/common/loading-new';
 export default {
-  data () {
-    return {
-      list:[],
-      pageNo:2,
-      isDisabled:false,
-      pageSize:10,
-      title:'为您推荐',
-      isCollected:'',
-      allLoaded:true,
-      loading:false,//是否滚动加载
-      isLoading:false,//加载中
-      noMore:false,
-      clientHeight:'auto',
-      isShowLoading:true,
-      menuHeight:0,
-      ptop:20,
-      popHeight:0,
-      menuptop:0,
-      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'
-        })
-        
+    data() {
+        return {
+            list: [],
+            pageNo: 2,
+            isDisabled: false,
+            pageSize: 10,
+            title: '为您推荐',
+            isCollected: '',
+            allLoaded: true,
+            loading: false, //是否滚动加载
+            isLoading: false, //加载中
+            noMore: false,
+            clientHeight: 'auto',
+            isShowLoading: true,
+            menuHeight: 0,
+            ptop: 20,
+            popHeight: 0,
+            menuptop: 0,
+            isReauestBack: true,
+        }
     },
-
-    //跳转
-    goToPage(item){
-      this.pageBurialPoin({
-        menuLevel:1,
-        menuCode:'m_home',
-        functionCode:'f_recommend',
-        actionCode:'c_course',
-        labelId:item.id,
-        labelValue :item.name,
-      })
-      this.pageNo = 1;
-      this.$emit("setRefrshParm",{isclick:true})
-      let 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
-      })
+    props: {
+        isFixed: {
+            default: false,
+            type: Boolean
+        },
+        statusBarHeight: {
+            type: Number,
+            default: 0
+        },
+        adjustPageNo: {
+            type: Number,
+            default: 1
+        },
+        userToken: {
+            type: String,
+            default: ''
+        },
+        parmData: {
+            type: Array,
+            default: []
+        },
     },
- 
-
-
-    //滑动加载更多
-    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)
-      }
-      
+    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) {
 
-    //收藏 取消收藏
-    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: '注册登陆后才能收藏哦'
-          })
+            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'
         }
-      })
+        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: {
 
-    //加载数据
-    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;
-          }
-        }
+        getStatusHight() {
+            rocNative.getStatusBarHeight({
+                __funcName: '__getStatusBarHeight'
+            })
+        },
+
+        //跳转
+        goToPage(item) {
+            this.pageBurialPoin({
+                menuLevel: 1,
+                menuCode: 'm_home',
+                functionCode: 'f_recommend',
+                actionCode: 'c_course',
+                labelId: item.id,
+                labelValue: item.name,
+            })
+            this.pageNo = 1;
+            this.$emit("setRefrshParm", {
+                isclick: true
+            })
+            let 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
+            })
+        },
+
+        //滑动加载更多
+        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>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
+
 <style lang="scss" scoped>
 @import '../../style/mixin.scss';
 @import '../../style/global.scss';
+
 img {
     @include bis('../../images/evaluatBg.png');
 }
-.ellipsis{
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  width: px2rem(170px);
-}
 
-.couse-list{
-  overflow: hidden;
-  
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    width: px2rem(170px);
 }
-.bgFill{
-  background: inherit;
-  height: px2rem(20px);
-}
-.cource-teach .cource-header,.couse-cont{
-  padding:0 px2rem(15px);
+
+.couse-list {
+    overflow: hidden;
+
 }
-.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;*/
-  
-  /*height: px2rem(45px);*/
-  margin-bottom: px2rem(15px);
-  .font-title{
-    line-height: px2rem(36px);
-    height: px2rem(36px);
-    background: #fff;
-  }
+
+.couse-cont {}
+
+.fixBox {}
+
+.cource-header {
+    /* margin: 0 0 px2rem(11px) 0;*/
+
+    /*height: px2rem(45px);*/
+    margin-bottom: px2rem(15px);
+
+    .font-title {
+        line-height: px2rem(36px);
+        height: px2rem(36px);
+        background: #fff;
+    }
 }
-.loading-box{
-  font-size: px2rem(16px);
-  padding:px2rem(10px) 0 px2rem(20px) 0;
-  text-align: center;
-  span{
-    color:#999;
-  }
-  
+
+.loading-box {
+    font-size: px2rem(16px);
+    padding: px2rem(10px) 0 px2rem(20px) 0;
+    text-align: center;
+
+    span {
+        color: #999;
+    }
+
 }
-.change-part{
-  margin-top:px2rem(10px);
-  float: right;
-  font-size:px2rem(11px);
-  line-height: px2rem(11px);
-  border:1px solid #A9AEB7;
-  border-radius: px2rem(9px);
-  vertical-align: middle;
-  padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);
-  img{
-    width: px2rem(12px);
-    height: px2rem(12px);
-    
-  }
+
+.change-part {
+    margin-top: px2rem(10px);
+    float: right;
+    font-size: px2rem(11px);
+    line-height: px2rem(11px);
+    border: 1px solid #A9AEB7;
+    border-radius: px2rem(9px);
+    vertical-align: middle;
+    padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);
+
+    img {
+        width: px2rem(12px);
+        height: px2rem(12px);
+
+    }
 }
-.fixed{
-
-  .fixBox{
-    position: fixed;
-    top:0;
-    left: 0;
-    width: 100%;
-  
-    z-index: 112;
-    .font-title{
-      background: #44A99B;
-      padding:0 px2rem(15px);
-      color:#fff;
+
+.fixed {
+
+    .fixBox {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+
+        z-index: 112;
+
+        .font-title {
+            background: #44A99B;
+            padding: 0 px2rem(15px);
+            color: #fff;
+        }
+    }
+
+    .bgFill {
+        background: #44A99B;
     }
-  }
-  .bgFill{
-    background: #44A99B;
-  }
 
 }
-.course-item{
-  float: left;
-  margin-bottom:  px2rem(19px);
-  margin-right: px2rem(5px);
+
+.course-item {
+    float: left;
+    margin-bottom: px2rem(19px);
+    margin-right: px2rem(5px);
 }
-.end-left{
-  margin-right: 0;
+
+.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%;
-    display: block;
+
+.course-pic {
+    width: px2rem(170px);
+    height: px2rem(95px);
     border-radius: px2rem(3px);
-  }
-  .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);
+    position: relative;
+
+    .pic-tec {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: px2rem(3px);
+    }
+
+    .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-opt{
-  font-size: px2rem(12px);
-  position: relative;
-  /*margin-top: px2rem(6px);*/
-  .opt-info{
-    color:#999;
-  }
-  .opt{
-    display: inline-block;
-    height: px2rem(18px);
-    line-height: px2rem(18px);
-    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-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);
 }
 
+.course-opt {
+    font-size: px2rem(12px);
+    position: relative;
 
+    /*margin-top: px2rem(6px);*/
+    .opt-info {
+        color: #999;
+    }
 
-.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);
+    .opt {
+        display: inline-block;
+        height: px2rem(18px);
+        line-height: px2rem(18px);
+        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);
+
+    }
 }
 
+.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>