dd

src/pages/websiteindex/onlineclassroomindex.js

@@ -30,7 +30,7 @@ Page({
     imageRoot: app.globalData.imageRoot,
     imageVersion: app.globalData.imageVersion,
     quickenOptions: ['0.7倍速','正常倍速','1.25倍速','1.5倍速','2.0倍速'],
-    curTabIndex:1,
+    curTabIndex:0,
     curQuickenOptiont:1,
     quickenDailogShow:false,
     shareDailogShow:false,
@@ -53,7 +53,9 @@ Page({
     passWord:'',
     showPassWordTip:false,
     catalogSort: 1,
-    sortDailogShow: false
+    sortDailogShow: false,
+    showSeachBtn: false,
+    searchBoxupShow: false,
   },
 
   /**
@@ -254,6 +256,7 @@ Page({
   },
   searchHandle(){
     this.onlinesubcoursesGet()
+    this.hideSearchBoxup();
   },
   clickVideo(){
     if(this.data.videoStatus.isPlay){
@@ -303,11 +306,11 @@ Page({
   tabChange(e){
     const { index } = e.target.dataset;
     let sortDailogShow = this.data.sortDailogShow;
-    if(!index){
+    if(index == undefined){
       return
     }
-    if(this.data.curTabIndex == index && index == 2){
-      sortDailogShow = true
+    if(this.data.curTabIndex == index && index == 1){
+      sortDailogShow = !sortDailogShow
     }else{
       sortDailogShow = false
     }
@@ -323,6 +326,12 @@ Page({
       sortDailogShow
     })
   },
+  tabSwiperChange(e){
+    const { current } = e.detail;
+    this.setData({
+      curTabIndex: current
+    })
+  },
   catlogSortChange(e){
     const { sortindex } = e.currentTarget.dataset;
     if(sortindex){
@@ -333,6 +342,23 @@ Page({
       this.onlinesubcoursesGet()
     }
   },
+  catalogscroll(e){
+    const { scrollTop } = e.detail;
+    this.setData({
+      showSeachBtn: scrollTop > 100 ? true : false
+    })
+  },
+  showSearchBoxup(){
+    this.setData({
+      searchBoxupShow: true
+    })
+  },
+  hideSearchBoxup(){
+    this.setData({
+      searchBoxupShow: false,
+      catlogName: ''
+    })
+  },
   ShowQuickenDailog(){
     this.setData({
       quickenDailogShow: true

src/pages/websiteindex/onlineclassroomindex.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "list-loading": "../../../components/listloading",
     "empty-content": "../../../components/emptycontent",
-    "clock-item": "../../components/newclockitem"
+    "clock-item": "../../components/newclockitem",
+    "w-segmented-control": "../../../dist/w-segmented-control/index"
   }
 }
\ No newline at end of file

src/pages/websiteindex/onlineclassroomindex.wxss

 /* src/pages/websiteindex/onlineclassroomindex.wxss */
+@keyframes fontWeight {
+    from {
+       font-size: 28rpx;
+    }
+
+    to {
+        font-size: 30rpx;
+    }
+}
+
 .container{
     position: relative;
     min-height: 100vh;
@@ -77,7 +87,7 @@
     border-bottom: 2rpx solid rgba(242,242,242,1);
 }
 .top-box .title-box .title{
-    font-size:26rpx;
+    font-size:30rpx;
     font-family:PingFangSC-Medium,PingFang SC;
     font-weight:700;
     color:rgba(51,51,51,1);
@@ -99,7 +109,13 @@
     font-family:PingFangSC-Medium,PingFang SC;
     font-weight:700;
     color:rgba(102,102,102,1);
-    line-height: 1;
+    display: flex;
+    align-items: center;
+}
+.top-box .phase-count image{
+    width: 20rpx;
+    height: 24rpx;
+    margin-right: 12rpx;
 }
 .line-16{
     width:100%;
@@ -111,6 +127,7 @@
     padding: 26rpx 0;
 
 }
+
 .content-box .tab-box .tab-item{
     flex: 1;
     font-size:28rpx;
@@ -129,6 +146,8 @@
 }
 .content-box .tab-box .act-tab{
     color:rgba(249,187,0,1);
+    font-weight: bold;
+    animation: fontWeight .2s forwards;
 }
 .content-box .tab-box .tab-item .sort-dailog{
     width: 190rpx;
@@ -151,7 +170,7 @@
     height: 102rpx;
     padding-top: 54rpx;
     text-align: center;
-    font-size:20rpx;
+    font-size:26rpx;
     font-family:PingFangSC-Regular,PingFang SC;
     font-weight:400;
     color:rgba(114,114,114,1);
@@ -160,7 +179,7 @@
     height: 108rpx;
     padding-top: 40rpx;
     text-align: center;
-    font-size:20rpx;
+    font-size:26rpx;
     font-family:PingFangSC-Regular,PingFang SC;
     font-weight:400;
     color:rgba(114,114,114,1);
@@ -168,7 +187,61 @@
 .content-box .tab-box .tab-item .sort-dailog .actSort{
     color:rgba(249,187,0,1);
 }
+.content-box .swiper-wrapper {
+    height: calc(100vh - 328px);
+}
+.content-box .swiper-wrapper swiper{
+    height: calc(100vh - 328px);
+    position: relative;
+}
+.content-box .swiper-wrapper .search-btn{
+    width: 112rpx;
+    height: 112rpx;
+    position: absolute;
+    right: 10rpx;
+    bottom: 110rpx;
+}
+.content-box .swiper-wrapper .search-btn image{
+    width: 112rpx;
+    height: 112rpx;
+}
+.content-box .swiper-wrapper .search-box-up{
+    width:692rpx;
+    height:80rpx;
+    background:linear-gradient(135deg,rgba(251,216,68,1) 0%,rgba(250,203,56,1) 100%);
+    box-shadow:0px 2rpx 8rpx 0px rgba(202,156,17,0.3);
+    border-radius:42rpx;
+    display: flex;
+    align-items: center;
+    padding-left: 40rpx;
+    position: absolute;
+    left: 32rpx;
+    top: 16rpx;
+}
+.content-box .swiper-wrapper .search-box-up .up-text{
+    width: 200rpx;
+    font-size:28rpx;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(255,255,255,1);
+}
+.content-box .swiper-wrapper .search-box-up image{
+    width: 112rpx;
+    height: 112rpx;
+    position: absolute;
+    right: -16rpx;
+    top: -18rpx;
+    z-index: 1;
+}
+.content-box .swiper-wrapper .search-box-up input,.placeholder-class{
+    font-size:28rpx;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(255,255,255,1);
+    flex: 1;
+}
 .content-box  .introduction{
+    height: calc(100vh - 328px);
     padding: 36rpx;
 }
 .content-box  .introduction .img-box{
@@ -344,6 +417,7 @@
     color:rgba(84,84,84,1);
     line-height:40rpx;
     margin-bottom: 10rpx;
+    word-break: break-all;
 }
 .catalog-list .catalog-item .info-box .title-box .type-tag{
     width:64rpx;
@@ -449,7 +523,8 @@
     width:572rpx;
     height:58rpx;
     border-radius:30rpx;
-    border:2rpx solid rgba(204,204,204,1);
+    /* border:2rpx solid rgba(204,204,204,1); */
+    background:rgba(241,241,241,1);
     display: flex;
     align-items: center;
     padding: 0 30rpx;

src/pages/websiteindex/onlineclassroomplay.js

@@ -146,7 +146,9 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    // if (this.videoContextOnline) {
+    //   this.videoContextOnline.play();
+    // }
   },
 
   /**
@@ -368,7 +370,8 @@ Page({
       "videoStatus.isPlay": true
     })
   },
-  bindpause(){
+  bindpause(e){
+    console.log(e, 'bindpause')
     this.setData({
       "videoStatus.isPlay": false
     })