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

课程说明

Browse Source
This commit is contained in:
@fawn-nine
2024-06-04 17:10:33 +08:00
parent 485e18e21d
commit ae7971a71e
50 changed files with 2892 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
pages/course/courseDetail.vue
View File

@@ -4,96 +4,69 @@
<public-module></public-module>
<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
<view class="curseImg">
<image src="../../static/video.jpg" mode="widthFix"></image>
<image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image>
<image v-else :src="course.image" mode="widthFix"></image>
</view>
<view class="containerBg1">
<view class="courseTitle">
<text class="title">桃源探秘•陶渊明的魔域桃源</text>
<view class="tags flexbox">
<view class="tagsBox">
<uni-tag style="margin-right: 10rpx;" :inverted="true" text="高级" type="primary" />
<uni-tag style="margin-right: 10rpx;" :inverted="true" text="选修" type="success" />
</view>
<view class="price">
<text>￥<i>299</i>起</text>
</view>
</view>
<view class="btnContainer flexbox">
<view class="saveBtn flexbox">
<!-- star-fill -->
<u-icon name="star" color="#fff" size="28"></u-icon>
<text>加入收藏</text>
</view>
<view class="saveBtn buybtn flexbox">
<!-- bag-fill -->
<u-icon name="bag" color="#fff" size="28"></u-icon>
<text>购买整套课程</text>
</view>
</view>
<view class="courseTitle" v-if="course.id">
<text class="title">{{course.title}}</text>
</view>
<view class="containerBg">
<view class="containerBg">
<view class="prof">
<uni-section style="background: transparent;" title="课程介绍" type="line"></uni-section>
<view class="">
需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 如果 uni-list-item
组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 uni-list-item提供了3个可扩展的插槽：
<view class="" v-html="course.content">
</view>
</view>
</view>
<!-- <view class="containerBg"> -->
<view class="coursePart flexbox">
<view class="active item flexbox">
<view class="">上部</view>
<!-- <u-icon name="lock" color="#2979ff" size="28"></u-icon> -->
</view>
<view class="item flexbox">
<!-- bag-fill -->
<u-icon name="lock" color="#fff" size="28"></u-icon>
<text>下部</text>
<view class="coursePart flexbox" v-if="librayList.length > 1">
<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in librayList"
:key="index" @click="clicklib(item,index)">
<u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon>
<u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon>
<view class="">{{item.title}}</view>
</view>
</view>
<view class="courseList">
<view class="item">
<text>一、概论</text>
<view class="courseList" v-if="courseList.length > 0">
<view class="item" v-for="(item, index) in courseList" :key="index">
<text>{{item.title}}</text>
</view>
<view class="item">
<text>二、阴阳应象大论（上）</text>
</view>
<view class="item">
<text>三、阴阳应象大论（下）</text>
</view>
<view class="item">
<text>四、阴阳离合论（一）</text>
</view>
<view class="item">
<text>一、概论</text>
</view>
<view class="item">
<text>二、阴阳应象大论（上）</text>
</view>
<view class="item">
<text>三、阴阳应象大论（下）</text>
</view>
<view class="item">
<text>四、阴阳离合论（一）</text>
</view>
<view class="item">
<text>一、概论</text>
</view>
<view class="item">
<text>二、阴阳应象大论（上）</text>
</view>
<view class="item">
<text>三、阴阳应象大论（下）</text>
</view>
<view class="item">
<text>四、阴阳离合论（一）</text>
<view class="buyBox flexbox" v-if="this.librayList[this.curIndex].isBuy == 0">
<!-- 普通未购买 -->
<view class="item">
<text>您还未购买此课程，开通 <text style="font-weight: bold;">超级VIP</text> 或 购买课程 均可观看课程</text>
</view>
<view class="item tbn flexbox">
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
<u-icon name="bag" color="#fff" size="28"></u-icon>
<text>立即购买</text>
</view>
<view class="saveBtn vipBtn flexbox" @click="goBuy('halfFee')">
<uni-icons type="vip" size="28" color="#fff"></uni-icons>
<text>开通超级VIP</text>
</view>
</view>
</view>
</view>
<!-- 购买位置 -->
<view class="buyBox">
</view>
<u-divider v-else text="暂无数据"></u-divider>
<u-popup :show="pricespop" :round="10" @close="closePup">
<view class="proListPrice" v-if="proPriceList.length > 0">
<view class="title">
请选择您的购买时长
</view>
<view class="list">
<view class="item" v-for="(item,index) in proPriceList"
:key="index"
@click="choosePrice(item)"
>
{{item.productName}} - ￥{{item.price}}
</view>
</view>
</view>
</u-popup>
<view>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
@@ -135,11 +108,16 @@
// backgroundColor: '#258feb'
},
pricespop:false,
subList: [],
scrollable: false,
pageTitle: null,
courseList: [],
// status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
course: {},
librayList: [], // 目录列表
curId: null,
curIndex: 0,
proPriceList:[],
};
},
@@ -147,11 +125,10 @@
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.courseId = e.id
this.pageTitle = e.title
// this.pageTitle = e.title
console.log(e, '传入分类id')
// this.getCateList(this.courseId)
// this.getData(this.courseId)
this.getData(e.id)
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
@@ -174,17 +151,13 @@
// musicPlay
},
//方法
methods: {
methods: {
getData(id) {
this.status = 1
this.flag = false
$http.request({
url: "medical/home/getMedicalCourseList",
url: "sociology/course/getCourseDetail",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": id,
"limit": 12,
"page": this.page
"id": id
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
@@ -192,26 +165,98 @@
})
.then(res => {
if (res.code == 0) {
if (res.courses.records.length > 0) {
var list = res.courses.records
this.courseList = this.courseList.concat(list)
if (res.courses.pages > this.page) {
this.status = 0
} else {
this.status = 2
}
} else if (this.page > 1) {
this.status = 2 // 加载完成
} else {
this.status = 3 // 暂无数据
this.course = res.data.course
this.pageTitle = this.course.title
this.librayList = res.data.catalogues
if (this.librayList.length > 0) {
this.courseId = this.librayList[0].id
this.curId = this.librayList[0].id
this.curIndex = 0
this.getChapterList(this.courseId)
}
console.log('status', this.status)
}
this.flag = true
}).catch(e => {
console.log(e, '数据报错')
console.log(e, '获取目录数据报错')
});
},
goBuy() {
$http.request({
url: "sociology/product/getProductListForCourse",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": this.curId
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.productList.length > 0) {
this.proPriceList = res.productList
} else {
this.proPriceList = []
}
}
}).catch(e => {
console.log(e, '获取商品列表报错')
});
this.pricespop = true
},
closePup(){
this.pricespop = false
this.proPriceList = []
},
choosePrice(item){
console.log(item,'choosePrice')
uni.showModal({
title: '提示',
cancelText: '再想想',
content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
clicklib(item, index) {
if (item.id == this.curId) {
return
}
this.curIndex = index
this.curId = item.id
this.getChapterList(item.id)
},
getChapterList(id) {
$http.request({
url: "sociology/course/getCourseCatalogueChapterList",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": id
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.chapterList.length > 0) {
this.courseList = res.chapterList
// console.log('status', res)
} else {
this.courseList = []
}
}
}).catch(e => {
console.log(e, '获取章节列表数据报错')
});
},
// 跳转
@@ -225,6 +270,34 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.proListPrice{text-align: center;
.title{font-size: 28rpx; margin: 10px 0; }
.list{padding-bottom: 20rpx;
.item{font-size: 26rpx;color: $themeColor; line-height: 80rpx; border-bottom: 1px solid #eee; }
.item:last-child{border-bottom: none}
}
}
.vipBtn{
@include theme("vipbtnbg");
border-radius: 100rpx; justify-content: center;
width: 150px; color:#fff;
margin: 10rpx auto;
}
.buyBox {
position: fixed;
z-index: 2;
bottom: 100rpx;
left: 0;
padding: 20rpx 10rpx;
width: 100%; font-size: 28rpx; flex-wrap: wrap;
background: rgba(255, 255, 255, 0.9);
.item{ width: 100%;
text-align: center;
}
.tbn{align-items: center;}
.buybtn{color: #fff;}
}
.curseImg {
image {
@@ -293,12 +366,10 @@
.item.active {
background-color: #fbfbff;
color: $themeColor
}
.item:nth-child(1) {
color: $themeColor;
border-radius: 20rpx 20rpx 0 0;
}
}
.btnContainer {
@@ -307,25 +378,46 @@
padding-top: 20rpx;
justify-content: space-between;
.buybtn {
@include theme("btn_bg")
}
margin-bottom: 20rpx;
}
.tags {
.buybtn {
border-radius: 100rpx; justify-content: center;
width: 150px;
margin: 10rpx auto;
@include theme("btn_bg")
}
.priceBox {
background: rgba(255, 255, 255, 0.8);
border-radius: 20rpx;
padding: 10px;
margin-bottom: 10px;
justify-content: space-between;
// border-top: 1rpx solid #e7e7e7;
// border-bottom: 1rpx solid #e7e7e7;
padding: 10px 0;
}
.prof {
font-size: 26rpx; line-height: 50rpx;
padding: 10rpx 0;
color: #333;
margin-bottom: 20rpx;
.price {
width: 100%;
text-align: center;
}
.price:first-child {
border-right: 1px solid #cac6e1;
}
}
.prof {
font-size: 26rpx;
line-height: 50rpx;
padding: 10rpx 0;
color: #333;
margin-bottom: 20rpx;
}
.courseTitle {
overflow: hidden;
background-image: url(@/static/bg1.jpg);
@@ -345,7 +437,7 @@
}
}
.title {
display: block;
@@ -359,9 +451,9 @@
justify-content: center;
height: 80rpx;
background-color: #00d8df;
width: 46%;
// width: 46%;
overflow: hidden;
border-radius: 20rpx;
border-radius: 30rpx;
text {
padding-left: 10rpx;