课程简介页面

pages/course/chapterDetail.vue

@@ -323,7 +323,7 @@ export default {
     plus.screen.lockOrientation("default");
 
     this.options = options;
-    this.getCourseDescriptionData();
+    
     // this.getUserInfo()
     // this.getCateList()
   },
@@ -333,10 +333,12 @@ export default {
   },
   onShow() {
     this.screenLoading=false
-    this.currentCateIndex = 0;
+  
+    this.currentCateIndex = this.options.videoIndex?this.options.videoIndex:0;
     // #ifdef APP-PLUS
     plus.screen.unlockOrientation(); //解除锁定屏幕方向
     plus.screen.lockOrientation("portrait-primary");
+    this.getCourseDescriptionData();
     // #endif
   },
   computed: {
@@ -496,7 +498,7 @@ export default {
           that.curriculumData = res.data.detail;
           that.videoArray = res.data.videos;
           if (that.videoArray.length > 0) {
-            this.currentVideo = that.videoArray[0];
+            this.currentVideo = that.videoArray[that.currentCateIndex];
             this.initVideo();
           }
           // if (res.obj.correlatedList && res.obj.correlatedList.length > 0) {

pages/course/courseDetail.vue

@@ -87,7 +87,7 @@
                     v-html="course.content"
                   >
                   </view>
-                  <text
+                  <!-- <text
                     style="
                       position: absolute;
                       bottom: 0;
@@ -96,7 +96,7 @@
                     "
                   >
                     {{ isHideCourseInfo ? "展开" : "收起" }}
-                  </text>
+                  </text> -->
                 </view>
               </view>
             </view>
@@ -106,47 +106,64 @@
 
         </view>
 
-        <view style="padding:10rpx">
+        <view class="containerBg2">
-          <view v-for="(v, i) in librayList" style="margin-bottom:40rpx;">
+
+          <view class="PM_font shiting">精彩试听</view>
+          <view class="shiting_content">   <view v-for="(v, i) in librayList" style="margin-bottom:40rpx;" >
             <view class="catalogueTitle chapter_title" >
+              <view class="top">
+               <view class="line"></view>
               <view class="left"
-                ><text style="font-weight: blod" class='catalogue_title'>{{ v.title }}</text>
+                >
+                
+                <text style="font-weight: blod" class='catalogue_title'>{{ v.title }}</text>
                 <!-- 普通用户或者国学Vip --> 
+                
+               
+                
+              </view> 
+              <view class="not_purchased" v-if="(v.isBuy != 1 && (vip.type == 0 || vip.type == 3))||( v.isBuy == 1 &&
+                    (vip.type == 0 || vip.type == 3) &&
+                    v.endTime)">
+                <view class="spot"></view>
+                 <!--  -->
               <text
-                  class="not_purchased"
+                  
                 v-if="v.isBuy != 1 && (vip.type == 0 || vip.type == 3)"
                   >未购买
                 </text>
-
+                <!--  -->
                 <text
-                  class="not_purchased"
                  v-if="
                     v.isBuy == 1 &&
                     (vip.type == 0 || vip.type == 3) &&
                     v.endTime
                   "
-                  >有效期至{{ v.endTime }}
+                 
-                </text>
+                  >有效期至{{ v.endTime }}2024:06:25 00:00:00
-              </view>
+                </text>  </view>  
-              <!--    -->
+                
+                
                 <view class="right">
+              <!--   -->
+              
+              
               <u-icon
                v-if="goBuyType!=1"
                   @click="handleClickGetGoodsList(v)"
                   class="editIcon"
                   name="shopping-cart-fill"
-                  color="#F42C32"
+                  color="#FF2B57"
                   size="30"
                   style="display: inline-block; margin-left: 10rpx"
                 ></u-icon
               ></view>
               </view>
+              
+              <!--    -->
+           
+            </view>
             <view class="chapter_content">
-              <!-- <uni-section
-                style="background: transparent"
-                title="章节列表"
-                type="line"
-              ></uni-section> -->
               
               <view
                 v-if="courseList[i].length > 0"
@@ -156,33 +173,44 @@
               >
                 <view
                   class="item_videoList"
-                  @click.stop="gotoDetail(item, index)"
+                
                 >
                   <view style="display: flex;width: calc(100% - 140rpx); align-items: center">
+                   
+                  
                     <text
                       class="hidden1"
-                      style="display: inline-block; width: calc(100% - 100rpx)"
+                      style="display: inline-block;color: #1E2F3E; width: calc(100% - 100rpx);font-weight: bold;"
                       >{{ item.title }}</text
                     >
 
-                    <uni-tag
+                    <!-- <uni-tag
                       v-if="item.isAudition == 1"
                       style="margin-left: 10rpx"
                       :inverted="true"
                       text="试听"
                       size="mini"
                       type="primary"
-                    />
+                    /> -->
                   </view>
                   <text style="color: #b0b0b0; font-size: 24rpx"
                     >【共{{ item.videoList.length }}课时】</text
                   >
                 </view>
+
+              <view class="videoList">
+
+
+                <view class="video_item"   @click.stop="gotoDetail(item, videoIndex)" v-for="(video,videoIndex) in item.videoList">
+                  【{{ video.type == "2" ? "音频" : "视频" }}】{{ getNumber(videoIndex + 1) }}
+                </view>
+              </view>
               </view>
 
               <view v-else> 暂无文章</view>
             </view>
-          </view>
+          </view></view>
+       
         </view>
 
         <view class="linkPro" v-if="tjProList.length > 0">
@@ -665,7 +693,7 @@ export default {
       }
     },
     //课程详情
-    async gotoDetail(v, video, index) {
+    async gotoDetail(v, videoIndex) {
       console.log("v at line 668:", v);
       // if (
       //   this.cateList[this.currentCateIndex].isBuy == 1 ||
@@ -674,7 +702,7 @@ export default {
       // ) {
       uni.navigateTo({
         // url: '../bookShop/commodityDetail?id=' + item.id
-        url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&videoId=${video.id}`,
+        url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&videoIndex=${videoIndex}`,
       });
       // } else {
       //   this.$commonJS.showToast("请先购买课程");
@@ -2046,7 +2074,7 @@ export default {
   // background-image: linear-gradient(108deg, #cae9f9 0%, #e1f6fc8c 50%);
 
   // background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
-  padding: 0 20rpx;
+  // padding: 0 20rpx;
   font-size: 40rpx;
 
 
@@ -2169,15 +2197,47 @@ export default {
 
 
 .chapter_title {
+  width: 100%;
   font-size: 28rpx;
   display: flex;
   align-items: center;
+  position: relative;
 
-  justify-content: space-between;
+  // justify-content: space-between;
+  .top{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .left{
+      display: flex;
+      align-items: center;
+    }
+    .right{
+      // float: right;
+      position: absolute;
+      right: 0;
+    }
+  }
   .not_purchased {
-    color: #636262;
+    position: relative;
+.spot{
+  width: 8rpx;
+  height: 8rpx;
+  position: absolute;
+  right: -4rpx;
+  border-radius: 8rpx;
+  background-color: #33435D;
+  bottom: -4rpx;
+}
+    color: #33435D;
     margin-left: 20rpx;
     font-size: 24rpx;
+    padding:0 20rpx;
+    border-bottom: 2rpx dotted #33435D;
+    text{
+      margin: 0 10rpx;
+      letter-spacing: 1rpx;
+    }
   }
 }
 .course_title {
@@ -2273,7 +2333,6 @@ export default {
   justify-content: space-between;
 }
 .commonDetailPage {
-  background: linear-gradient(108deg, #D2E7FC 0%, #EAEDF8 50%) !important;
  }
 
 .course_info_box {
@@ -2290,25 +2349,93 @@ margin-bottom:10rpx;
 
 
 .catalogue_title{
-  background-image: linear-gradient(108deg, #8BBDFE 0%, #0261ffd6 50%);
+  background: linear-gradient(130deg,#162A4F  0%, #1E4C7D 100%);
-  border:4rpx solid #1FB2F8;
+  -webkit-background-clip: text;
-  box-shadow: 0 2px 12px 0 rgba(255,255,255,.1);
+  -webkit-text-fill-color: transparent;
-  border-radius:40rpx;
+  font-size: 42rpx;
-  color:#fff;
+  font-weight: bold;
-  width:200rpx;
+  letter-spacing: 4rpx;
-  height:70rpx;
+  
-  display:inline-block;
+  // border:4rpx solid #1FB2F8;
-  padding:10rpx 20rpx;
+  // box-shadow: 0 2px 12px 0 rgba(255,255,255,.1);
+  // border-radius:40rpx;
+  // color:#fff;
+  // width:200rpx;
+  // height:70rpx;
+  // display:inline-block;
+  // padding:10rpx 20rpx;
 
 }
 .chapter_content {
   padding: 20rpx;
-  padding-top:60rpx;
+  // padding-top:60rpx;
-  margin-top:-40rpx;
+  margin-top:40rpx;
   border:4rpx solid #FFFFFC;
+  background-image: linear-gradient(52deg, #E8F6FF 0%, #E3F2FE 50%);
   // background-image: linear-gradient(-180deg, #8BBDFE 0%, #B4DCFF 100%);
+  // background:rgba(255, 255, 255, 0.85);
+  // background:rgba(255, 255, 255, 0.85);
+  box-shadow: 0px 0px 10px 0px #89C8E9 !important;
+  border-top-right-radius:40rpx;
+  border-bottom-left-radius:40rpx;
+  .videoList{
+    // padding:0 20rpx;
+    display: flex;
+    align-items: center;
+    // justify-content: space-between;
+    .video_item{
+      width: 24%;
+      font-size: 22rpx;
+      margin: 10rpx 0;
       background:rgba(255, 255, 255, 0.85);
-  box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.2) !important;
+      box-shadow: 0 2px 12px 0 rgba(255,255,255,.1);
-  border-radius:20rpx;
+      border-radius: 10rpx;
+      padding: 10rpx 20rpx;
+      margin-right: 1%;
+
+      color: #333;
+      letter-spacing: 2rpx;
+
+    }
+  }
+}
+
+.line{
+  width: 16rpx;
+  height: 50rpx;
+  border-top-right-radius:12rpx ;
+  border-bottom-right-radius:12rpx ;
+  margin-right: 20rpx;
+  background-image: linear-gradient(108deg, #2786EB 0%, #35A6FF 100%);
+}
+
+.containerBg2{
+  padding-top: 40rpx;
+  // margin-top: 100rpx;
+ background: linear-gradient(108deg, #C3E7FF 0%, #59BAFE 100%) !important;
+
+  .shiting{
+    line-height: 100rpx;
+    background: linear-gradient(130deg, #4FA1FD 0%, #12F3FF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+    margin-bottom: 20rpx;
+    // background-image: linear-gradient(108deg, #4FA1FD 100%, #4FA1FD 0%);
+    // border:4rpx solid #1FB2F8;
+  // box-shadow: 0 2px 12px 0 rgba(255,255,255,.1);
+  // border-radius:40rpx;
+  color:#fff;
+  // width:200rpx;
+  // height:70rpx;
+  // display:inline-block;
+  // padding:10rpx 20rpx;
+  font-size: 72rpx;
+  text-align: center;
+  }
+  .shiting_content{
+    padding:20rpx;
+ 
+  }
+
 }
 </style>