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-07-03 10:14:07 +08:00
parent f24fdf5e43
commit 1fbbb1685c
1 changed files with 301 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

587
pages/course/courseDetail.vue
View File

@@ -6,11 +6,11 @@
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<!-- <z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"> -->
<z-nav-bar title="课程介绍">
<!-- <view class="curseSet" slot="right" @click="newOnShare">
<z-nav-bar title="课程介绍">
<!-- <view class="curseSet" slot="right" @click="newOnShare">
<uni-icons type="redo" size="26"></uni-icons><text style="font-size: 26rpx;"></text> 分享课程
</view> -->
</z-nav-bar>
</view> -->
</z-nav-bar>
<view class="contentBox commonPageContentBox">
<u-alert
@@ -42,10 +42,7 @@
</template>
</u-alert>
<scroll-view
scroll-y="true"
class="scroll-Y"
>
<scroll-view scroll-y="true" class="scroll-Y">
<!-- <u-sticky bgColor="#fff" >
<view style="height: 80rpx;">精彩试听</view>
</u-sticky
@@ -65,33 +62,41 @@
</u-sticky> -->
<view class="containerBg1">
<view class="course_info_box">
<view class="course_info">
<view class="flexbox course_title" v-if="course.id">
<text class="courseTitle title">{{ course.title }}</text>
<view class="course_info">
<view class="flexbox course_title" v-if="course.id">
<text class="courseTitle title">{{ course.title }}</text>
<view class="start_learn_btn PM_font" @click="onPageJump('/pages/course/myCourseLearn',course.id)">进入学习</view>
</view>
<view
class="containerBg"
v-if="course.content && course.content != ''"
>
<view class="prof">
<!-- <uni-section
<view
class="start_learn_btn PM_font"
@click="onPageJump('/pages/course/myCourseLearn', course.id)"
>进入学习</view
>
</view>
<view
class="containerBg"
v-if="course.content && course.content != ''"
>
<view class="prof">
<!-- <uni-section
style="background: transparent; padding-top: 0"
title="课程介绍"
type="line"
></uni-section> -->
<view
style="position: relative; display: flex; align-items: center"
@click="isHideCourseInfo = !isHideCourseInfo"
>
<view
:class="`${isHideCourseInfo ? 'hidden2' : ''}`"
style="width: calc(100% - 50rpx)"
v-html="course.content"
style="
position: relative;
display: flex;
align-items: center;
"
@click="isHideCourseInfo = !isHideCourseInfo"
>
</view>
<!-- <text
<view
:class="`${isHideCourseInfo ? 'hidden2' : ''}`"
style="width: calc(100% - 50rpx)"
v-html="course.content"
>
</view>
<!-- <text
style="
position: absolute;
bottom: 0;
@@ -101,124 +106,131 @@
>
{{ isHideCourseInfo ? "展开" : "收起" }}
</text> -->
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<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 -->
</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
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.type!=0"
@click="handleClickGetGoodsList(v)"
class="editIcon"
name="shopping-cart-fill"
color="#FF2B57"
size="30"
style="display: inline-block; margin-left: 10rpx"
></u-icon
>
<text v-if="goBuyType != 1&&v.type==0&&!v.endTime" style="color: #fff; font-size: 12px;" class="fdButtonBox aui-text-success" @click="handleClickGetGoodsList(v)">开始学习</text>
</view>
</view>
<!-- -->
</view>
<view class="chapter_content">
<view
v-if="courseList[i].length > 0"
class="item"
v-for="(item, index) in courseList[i]"
:key="index"
>
<view
class="item_videoList"
>
<view style="display: flex;width: calc(100% - 140rpx); align-items: center">
<text
class="hidden1"
style="display: inline-block;color: #1E2F3E; width: calc(100% - 100rpx);font-weight: bold;"
>{{ item.title }}</text
>
<!-- <uni-tag
v-if="item.isAudition == 1"
style="margin-left: 10rpx"
:inverted="true"
text="试听"
size="mini"
type="primary"
/> -->
<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 -->
</view>
<text style="color: #b0b0b0; font-size: 24rpx"
>【共{{ item.videoList.length }}课时】</text
<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
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.type != 0"
@click="handleClickGetGoodsList(v)"
class="editIcon"
name="shopping-cart-fill"
color="#FF2B57"
size="30"
style="display: inline-block; margin-left: 10rpx"
></u-icon>
<text
v-if="goBuyType != 1 && v.type == 0 && !v.endTime"
style="color: #fff; font-size: 12px"
class="fdButtonBox aui-text-success"
@click="handleClickGetGoodsList(v)"
>开始学习</text
>
</view>
</view>
<!-- -->
</view>
<view class="chapter_content">
<view
@click.stop="item.isAudition == 1 ? gotoDetail(item, i) : ''"
v-if="courseList[i].length > 0"
class="item"
v-for="(item, index) in courseList[i]"
:key="index"
>
<view class="item_videoList">
<view
style="
display: flex;
width: calc(100%);
align-items: center;
"
>
<text
class="hidden1"
style="
display: inline-block;
color: #1e2f3e;
width: calc(100% - 100rpx);
font-weight: bold;
"
>{{ item.title }}</text
>
<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> -->
</view>
<view v-else> 暂无文章</view>
</view>
</view></view>
<view v-else> 暂无文章</view>
</view>
</view></view
>
</view>
<view class="linkPro" v-if="tjProList.length > 0">
@@ -258,34 +270,38 @@
</scroll-view>
</view>
</view>
<view style="background:rgba(255, 255, 255, 0.85) !important;">
<uni-section
style="padding: 0 20rpx"
class="mb-10 graybg"
title="留言板"
type="line"
>
<template v-slot:right>
<view class="flexbox" style="align-items: center" @click="addSay()">
<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
<text>发布留言</text>
<view style="background: rgba(255, 255, 255, 0.85) !important">
<uni-section
style="padding: 0 20rpx"
class="mb-10 graybg"
title="留言板"
type="line"
>
<template v-slot:right>
<view
class="flexbox"
style="align-items: center"
@click="addSay()"
>
<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
<text>发布留言</text>
</view>
</template>
</uni-section>
<view class="liuyanBox">
<view class="" v-if="sayList.length > 0">
<commentsList
:sayList="sayList"
@support="support"
@showSayModule="showSayModule"
></commentsList>
</view>
</template>
</uni-section>
<view class="liuyanBox">
<view class="" v-if="sayList.length > 0">
<commentsList
:sayList="sayList"
@support="support"
@showSayModule="showSayModule"
></commentsList>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
</view>
<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
<view class="proListPrice" v-if="proPriceList.length > 0">
<view class="title"> 请选择 </view>
@@ -498,10 +514,9 @@
</view>
</view>
</u-popup>
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
<uni-popup-share @select="haveSelected"></uni-popup-share>
</uni-popup>
<z-navigation></z-navigation>
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
<uni-popup-share @select="haveSelected"></uni-popup-share>
</uni-popup>
</view>
</template>
@@ -647,7 +662,7 @@ export default {
},
computed: {
...mapState(["userInfo"]),
},
},
//页面显示
onShow() {
// 隐藏原生的tabbar
@@ -682,47 +697,47 @@ export default {
},
//方法
methods: {
haveSelected(data) {
console.log(data, " 选择的是");
if (data.index == 0) {
// 分享到好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.$apkUrl,
title: `${this.course.title}这门课程讲的不错，快来围观吧-吴门医述app`,
summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
imageUrl: "static/icon/home_icon_logo.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
} else if (data.index == 1) {
// 分享到朋友圈
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: this.$apkUrl,
title: `${this.course.title}这门课程讲的不错，快来围观吧-吴门医述app`,
summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
imageUrl: "static/icon/home_icon_logo.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
newOnShare() {
this.$refs.share.open();
},
haveSelected(data) {
console.log(data, " 选择的是");
if (data.index == 0) {
// 分享到好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.$apkUrl,
title: `${this.course.title}这门课程讲的不错，快来围观吧-吴门医述app`,
summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
imageUrl: "static/icon/home_icon_logo.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
} else if (data.index == 1) {
// 分享到朋友圈
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: this.$apkUrl,
title: `${this.course.title}这门课程讲的不错，快来围观吧-吴门医述app`,
summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
imageUrl: "static/icon/home_icon_logo.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
newOnShare() {
this.$refs.share.open();
},
goToGoodsList(data) {
if (data.delFlag == -1) {
this.$commonJS.showToast("商品已下架");
@@ -746,12 +761,22 @@ export default {
}
},
//课程详情
async gotoDetail(v, videoIndex) {
console.log("v at line 668:", v);
async gotoDetail(v, courseIndex) {
console.log("v at line 668:", v);
this.currentCateIndex = courseIndex;
// if (
// this.courseList[this.currentCateIndex].isBuy == 1 ||
// v.isAudition == 1 ||
// this.vip.type != "0"
// ) {
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&videoIndex=${videoIndex}`,
});
url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}`,
});
// } else {
// this.$commonJS.showToast("请先购买课程");
// }
},
handleClickSelectGoods(data) {
this.selectGoodsData = data;
@@ -1308,12 +1333,12 @@ export default {
var list = await that.getChapterList(that.librayList[i]);
console.log("list at line 1224:", list);
list.map(async (item, index) => {
console.log("item at line 1239:", item);
item.videoList = [];
var data = await that.getPath(item);
item.videoList = [...data];
});
// list.map(async (item, index) => {
// console.log("item at line 1239:", item);
// item.videoList = [];
// var data = await that.getPath(item);
// item.videoList = [...data];
// });
console.log("list at line 1222:", list);
that.courseList[i] = [...list];
@@ -1451,9 +1476,7 @@ export default {
// item.tryListen = [];
// });
list = JSON.parse(
JSON.stringify(res.chapterList.filter((e) => e.isAudition == 1))
);
list = res.chapterList;
console.log("at line 1343:", list);
// console.log('status', res)
@@ -1682,7 +1705,6 @@ export default {
//
.liuyanBox {
padding: 0 20rpx;
margin-top: 20rpx;
@@ -1762,8 +1784,8 @@ export default {
}
.linkPro {
margin-bottom:20rpx;
background:rgba(255, 255, 255, 0.85) !important;
margin-bottom: 20rpx;
background: rgba(255, 255, 255, 0.85) !important;
// padding:0 20rpx;
.more {
font-size: 24rpx;
@@ -1952,7 +1974,7 @@ export default {
.supermarketBox {
@include pleft_right(5px);
.borderbb {
.borderbb {
background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
@include pleft_right(10px);
border-radius: 20rpx;
@@ -2123,8 +2145,6 @@ export default {
// padding: 0 20rpx;
font-size: 40rpx;
.learnBtn {
margin-bottom: 20rpx;
width: 150rpx;
@@ -2172,7 +2192,9 @@ export default {
}
}
}
.curseSet{margin-right: 10px;}
.curseSet {
margin-right: 10px;
}
.shitingLIst {
background-color: #fff;
padding: 20rpx;
@@ -2231,7 +2253,7 @@ export default {
color: #fff !important;
}
/deep/.uni-section {
background:transparent !important;
background: transparent !important;
}
/deep/.uni-section .uni-section-header {
padding-top: 10rpx !important;
@@ -2242,7 +2264,6 @@ export default {
// padding-bottom: 10rpx !important;
}
.chapter_title {
width: 100%;
font-size: 28rpx;
@@ -2251,15 +2272,15 @@ export default {
position: relative;
// justify-content: space-between;
.top{
.top {
width: 100%;
display: flex;
align-items: center;
.left{
.left {
display: flex;
align-items: center;
}
.right{
.right {
// float: right;
position: absolute;
right: 0;
@@ -2267,21 +2288,21 @@ export default {
}
.not_purchased {
position: relative;
.spot{
width: 8rpx;
height: 8rpx;
position: absolute;
right: -4rpx;
border-radius: 8rpx;
background-color: #33435D;
bottom: -4rpx;
}
color: #33435D;
.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{
padding: 0 20rpx;
border-bottom: 2rpx dotted #33435d;
text {
margin: 0 10rpx;
letter-spacing: 1rpx;
}
@@ -2380,29 +2401,27 @@ export default {
justify-content: space-between;
}
.commonDetailPage {
}
.course_info_box {
margin-bottom:10rpx;
// padding:20rpx;
.course_info{
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
background:#F2F8FF;
// border-radius:20rpx;
overflow:hidden;
}
}
.course_info_box {
margin-bottom: 10rpx;
// padding:20rpx;
.course_info {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: #f2f8ff;
// border-radius:20rpx;
overflow: hidden;
}
}
.catalogue_title{
background: linear-gradient(130deg,#162A4F 0%, #1E4C7D 100%);
.catalogue_title {
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;
@@ -2411,78 +2430,74 @@ margin-bottom:10rpx;
// height:70rpx;
// display:inline-block;
// padding:10rpx 20rpx;
}
.chapter_content {
padding: 20rpx;
// padding-top:60rpx;
margin-top:40rpx;
border:4rpx solid #FFFFFC;
background-image: linear-gradient(52deg, #E8F6FF 0%, #E3F2FE 50%);
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{
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{
.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);
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
border-radius: 10rpx;
padding: 10rpx 20rpx;
margin-right: 1%;
color: #333;
letter-spacing: 2rpx;
}
}
}
.line{
.line {
width: 16rpx;
height: 50rpx;
border-top-right-radius:12rpx ;
border-bottom-right-radius:12rpx ;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
margin-right: 20rpx;
background-image: linear-gradient(108deg, #2786EB 0%, #35A6FF 100%);
background-image: linear-gradient(108deg, #2786eb 0%, #35a6ff 100%);
}
.containerBg2{
.containerBg2 {
padding-top: 40rpx;
// margin-top: 100rpx;
background: linear-gradient(108deg, #C3E7FF 0%, #59BAFE 100%) !important;
background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%) !important;
.shiting{
.shiting {
line-height: 100rpx;
background: linear-gradient(130deg, #4FA1FD 0%, #12F3FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
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;
// 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;
.shiting_content {
padding: 20rpx;
}
}
</style>