zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程简介页面

Browse Source
This commit is contained in:
始于初见
2024-06-25 13:13:37 +08:00
parent 5043b64901
commit 2fccb6d77c
2 changed files with 184 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
pages/course/courseDetail.vue
View File

@@ -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,48 +106,65 @@
</view>
<view style="padding:10rpx">
<view v-for="(v, i) in librayList" style="margin-bottom:40rpx;">
<view class="containerBg2">
<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>
<!-- 普通用户或者国学Vip -->
<text
class="not_purchased"
v-if="v.isBuy != 1 && (vip.type == 0 || vip.type == 3)"
>
<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
v-if="v.isBuy != 1 && (vip.type == 0 || vip.type == 3)"
>未购买
</text>
<!-- -->
<text
class="not_purchased"
v-if="
v-if="
v.isBuy == 1 &&
(vip.type == 0 || vip.type == 3) &&
v.endTime
"
>有效期至{{ v.endTime }}
</text>
</view>
<!-- -->
<view class="right">
<u-icon
v-if="goBuyType!=1"
>有效期至{{ v.endTime }}2024:06:25 00:00:00
</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"
class="item"
@@ -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,8 +2333,7 @@ export default {
justify-content: space-between;
}
.commonDetailPage {
background: linear-gradient(108deg, #D2E7FC 0%, #EAEDF8 50%) !important;
}
}
.course_info_box {
margin-bottom:10rpx;
@@ -2290,25 +2349,93 @@ margin-bottom:10rpx;
.catalogue_title{
background-image: linear-gradient(108deg, #8BBDFE 0%, #0261ffd6 50%);
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;
background: linear-gradient(130deg,#162A4F 0%, #1E4C7D 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 42rpx;
font-weight: bold;
letter-spacing: 4rpx;
// 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;
}
.chapter_content {
padding: 20rpx;
padding-top:60rpx;
margin-top:-40rpx;
// padding-top:60rpx;
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);
box-shadow: 0px 0px 3px 0px rgba(0, 82, 79, 0.2) !important;
border-radius:20rpx;
// 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: 0 2px 12px 0 rgba(255,255,255,.1);
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>