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;

115
pages/course/courseSet.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="课程设置"></z-nav-bar>
<public-module></public-module>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
tagId: null,
// status:0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
// page:1,
// flag:true, // 函数是否执行完
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// this.tagId = e.id
// this.pageTitle = e.title
// console.log(e, '传入分类id')
this.getData();
},
onReachBottom() {
if(this.status != 2){
this.page ++
this.getData() }
console.log('触底加载',this.page)
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
components: {
musicPlay
},
//方法
methods: {
getData() {
if(!this.flag){
console.log('正在执行，未完成')
return
}
this.status = 1
this.flag = false
$http.request({
url: "medical/home/getMarketCourseList",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": this.tagId,
"limit": 12,
"page": this.page
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.courseList.records.length > 0) {
var list = res.courseList.records
this.courseList = this.courseList.concat(list)
if(res.courseList.pages > this.page){
this.status = 0
}else{
this.status = 2
}
} else if(this.page > 1){
this.status = 2 // 加载完成
}else{
this.status = 3 // 暂无数据
}
console.log('status',this.status)
}
this.flag = true
}).catch(e => {
console.log(e,'数据报错')
});
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.flexbox{display: flex; }
.imgcontainer {
background-color: $imgBg;
}
</style>

226
pages/course/illustrate.vue Normal file
View File

@@ -0,0 +1,226 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="课程说明"></z-nav-bar>
<view class="containerBg">
<view class="proTitle">
<text>点击课程名称即可查看对应的课程说明</text>
</view>
<uni-collapse accordion v-model="accordionVal" @change="change" v-if="treeList.length > 0">
<uni-collapse-item v-for="(item, index) in treeList" :key="index" :title="item.title"
:show-animation="true">
<view class="content">
<!-- <text class="text">{{item.title}}</text> -->
<view class="sub1List">
<view class="item leve2" v-for="(item1, index1) in item.children" :key="index1"
@click="courseInfo(item1)">
<text> --- {{item1.title}}</text>
<view class="sub2List" v-if="item1.children">
<view class="item leve3" v-for="(item2, index2) in item1.children" :key="index2"
@click="courseInfo(item2)">
--- --- {{item2.title}}
<view class="sub3List" v-if="item2.children">
<view class="item leve4" v-for="(item3, index3) in item2.children"
:key="index3" @click="courseInfo(item3)">
--- --- --- {{item3.title}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<u-popup :show="infopop" :round="10" @close="closePup">
<!-- {{pupContent}} -->
<view class="infoBox">
<text>超强树选择器、树组件、树插件、无限级联树、单选树、多选树、自定义样式树、树形选择 </text>
<view class="audio">
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
:author="current.author" :action="audioAction" controls></audio>
<!-- <view class="audiobox">
<view class="audioinfo">
<image class="audioimg" :src="bookInfo.images" mode="aspectFit"></image>
<image class="audioimgstart" v-if="!this.paused" mode="aspectFit"
src="../../static/audiostart.png" @click="start"></image>
<image class="audioimgstart" v-else mode="aspectFit" src="../../static/audiostop.png"
@click="start"></image>
<view>
<view class="audiotitle">talkBookDetail.title</view>
<view class="audioauthor">bookInfo.author.authorName</view>
<view class="audioauthor">currentTime+'/'+duration秒</view>
<slider class="audioslider" block-size="12" v-model="currentTime" :max="duration"
@change="changeTime"></slider>
<!-- <view @click="start">点击播放/暂停</view> -->
<!-- </view>
</view>
</view> -->
</view>
<view>
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
enable-danmu danmu-btn controls></video>
</view>
</view>
</u-popup>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
</template>
<script>
// import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
value: ['0'],
accordionVal: '0',
// extraIcon:{
// color: '#4cd964',
// size: '100',
// }
treeList: [],
pid: null,
infopop: false,
pupContent: {},
current: {
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
},
audioAction: {
method: 'pause'
}
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.pid = e.pid
console.log(e, '------')
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getData()
},
components: {
// musicPlay
},
//方法
methods: {
change() {},
getData() {
this.$http
.post('medical/home/getCourseMedicalTree')
.then(res => {
if (res.code == 0 && res.labels.length > 0) {
this.treeList = res.labels
} else {
this.treeList = []
}
}).catch(e => {
console.log(e, '报错')
});
},
closePup() {
this.infopop = false
},
courseInfo(item) {
this.$http
.post('medical/home/getCourseMedicalDetail', {
"id": item.id
})
.then(res => {
if (res.code == 0 && res.course.id) {
this.pupContent = res.course
} else {
this.pupContent = {}
}
}).catch(e => {
console.log(e, '报错')
});
this.infopop = true
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
::v-deep .containerBg {
.uni-collapse-item__title-box {
background-color: transparent !important;
}
.uni-collapse-item__title {
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
text {
color: #fff !important;
font-size: 28rpx !important;
}
}
}
.infoBox {
padding: 20rpx;
font-size: 26rpx;
}
// .leve2{background-color: #71a5ff; }
// .leve3{background-color: #9bbeff; }
// .leve4{background-color: #b6d0ff; }
.containerBg {
// background-color: $containerColor;
background-color: #fff;
padding: 0 20rpx;
min-height: calc(100vh - 270rpx);
}
.uni-collapse-item__title-text {
font-size: 30rpx;
}
.proTitle{text-align: center; padding:20rpx 0 ; margin-bottom: 20rpx; color: #666; font-size: 28rpx;}
.sub1List {
background-color: #f7f7f7;
padding-left: 20rpx;
}
.content {
.item {
line-height: 80rpx;
font-size: 28rpx;
color: #497387;
border-bottom: 1px solid #dae8f0;
}
}
#myVideo {
width: 100%;
}
audio {
width: 100% !important;
}
</style>

20
pages/course/index.vue
View File

@@ -2,7 +2,7 @@
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle"></z-nav-bar>
<z-nav-bar :title="pageTitle"><view class="curseSet" slot="right" @click="shuomingPage('/pages/course/illustrate',tagId,pid)">课程说明</view></z-nav-bar>
<view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
@@ -41,8 +41,8 @@
</view>
<view class="tag-view">
<uni-tag style="margin-right: 10rpx;" text="高级" type="primary" size="small" />
<uni-tag style="margin-right: 10rpx;" text="选修" size="small" type="success" />
<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
<uni-tag v-if="item.selective != 0" style="margin-right: 10rpx;" :text="item.selective == 1 ? '必修':'选修'" size="small" type="success" />
</view>
<view class="btn_box">
<text>了解课程</text>
@@ -79,6 +79,7 @@
return {
playData: {},
tagId: null,
pid:null,
fixed: false,
fatherTabId: null,
subTabId: null, //
@@ -115,6 +116,7 @@
uni.hideTabBar();
this.tagId = e.id
this.pageTitle = e.title
this.pid = e.pid
console.log(e, '传入分类id')
this.getCateList(this.tagId)
},
@@ -193,6 +195,10 @@
}
}else{
this.subList = []
this.subTabId = id
this.getData(id)
}
console.log(this.curTagId, '当前高亮')
}
@@ -278,6 +284,12 @@
url: `${url}?id=${id}`
});
},
shuomingPage(url,id,pid){
uni.navigateTo({
url: `${url}?id=${id}&pid=${pid}`
});
}
},
};
</script>
@@ -289,7 +301,7 @@
padding: 0 20rpx;
}
.curseSet{margin-right: 20rpx; font-size: 26rpx;}
.fixed {
position: fixed;
z-index: 1; width: 100%; background-color: #fff;