This commit is contained in:
@fawn-nine
2024-06-18 16:39:28 +08:00
parent dc2f278594
commit 93dd4dfd41
5 changed files with 547 additions and 290 deletions

View File

@@ -317,6 +317,14 @@
"navigationBarTitleText" : "课程学习页面",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/course/myCourse",
"style" :
{
"navigationBarTitleText" : "我的课程",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {

View File

@@ -53,16 +53,26 @@
<text>当前目录还未开始学习</text><uni-tag type="warning" text="去学习" @click="goToLearn()"></uni-tag>
</view>
<view class="flexbox" v-else>
<text >课程观看有效期截止到{{librayList[curIndex].endTime}} </text><uni-tag type="primary" @click="goToLearn()" text="继续学习"></uni-tag>
<text>课程观看有效期截止到{{librayList[curIndex].endTime}} </text><uni-tag type="primary"
@click="goToLearn()" text="继续学习"></uni-tag>
</view>
</view>
</view>
<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
<view class="item" v-for="(item, index) in courseList" :key="index" >
<view class="" @click.stop="chooseChapter(item, index)">
<text >{{item.title}}</text>
<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
size="mini" type="primary" />
</view>
<view class="flexbox shitingLIst" style="" v-if="item.tryListen.length > 0">
<view class="item flexbox" v-for="(item2,index2) in item.tryListen" :key="index2">
<u-icon name="play-circle-fill" color="#2979ff" size="28"></u-icon>
<text>试听{{index2+1}}</text>
</view>
</view>
</view>
<view class="showAll zhezhe" v-show="fold">
<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double"
color="#258feb" size="28"></u-icon></view>
@@ -231,7 +241,9 @@
<view class="upimgList flexbox">
<view class="item" v-for="(item, index) in uploadPicLIst" :key="index">
<view class="imgbox" style="overflow: hidden;">
<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
</view>
<span @click="deletePic(item,index)">×</span>
</view>
</view>
@@ -243,7 +255,7 @@
</emotion>
</view>
<view class="sbmitBox">
<button @click="submitSay" type="default"> </button>
<button @click="submitSay" type="default"> </button>
</view>
</view>
@@ -390,7 +402,9 @@
// 点赞
support(data) {
console.log(data, '父级收到值了吗?');
let _obj = {...data} // index,index1,val
let _obj = {
...data
} // index,index1,val
if (this.supportFlag) {
uni.showToast({
@@ -467,7 +481,6 @@
title: "取消失败",
icon: 'error'
})
// console.log('888888888888888');
this.supportFlag = false
})
}
@@ -492,15 +505,16 @@
// await console.log(this.getHtml())
let data = await this.getHtml()
this.htmlContent = data.html
console.log(this.htmlContent,'this.htmlContent--++++');
console.log(data, this.htmlContent, 'this.htmlContent--++++');
if (this.htmlContent == '' && this.uploadPicLIst.length == 0) {
if ((this.htmlContent == '' || this.htmlContent == '<p><br></p>') && this.uploadPicLIst.length == 0) {
uni.showToast({
icon: 'none',
title: '您未输入内容哦'
})
return
}
return false
let images = ''
if (this.uploadPicLIst.length > 0) {
let list = this.uploadPicLIst.map(item => item.url)
@@ -543,7 +557,9 @@
title: '提交成功'
})
}
let _obj = {...res.courseGuestbook}
let _obj = {
...res.courseGuestbook
}
_obj.children = []
_obj.Bchildren = []
if (_obj.images != '') {
@@ -679,11 +695,6 @@
console.log('insert image success')
}
})
// if (i.emotioni == '[em_98]') {
// } else {
// }
},
chooseImg() {
this.showImgType = true
@@ -812,62 +823,26 @@
choosePrice(item) {
console.log(item, 'choosePrice')
this.curProId = item.productId
// uni.showModal({
// title: '提示',
// cancelText: '再想想',
// content: `您正在购买 ${item.productName},价格是${item.price}元,是否继续?`,
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
},
chooseChapter(item, index) {
return false
// 检查课程是否已经购买了 是否为试听
async chooseChapter(item, index) {
console.log('获取试听内容')
if (item.isAudition == 1) {
// 未购买仅试听
// this.getPath(item, index)
uni.navigateTo({
url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
=${this.curId}&chapterId=${item.id}`
})
} else if (this.librayList[this.curIndex].isBuy == 1) {
uni.showModal({
title: '提示',
cancelText: '再看看',
confirmText: '去学习',
content: `当前操作即将跳转至学习页面,是否继续?`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
} else {
uni.showModal({
title: '提示',
cancelText: '知道了',
confirmText: '立即购买',
content: `本章节不支持试听,购买课程后即可观看`,
// let data = null
this.courseList[index].tryListen = await this.getPath(item, index)
console.log(this.courseList, '1*********')
// uni.navigateTo({
// url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
// =${this.curId}&chapterId=${item.id}`
// })
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
},
getPath(item, index) {
$http.request({
async getPath(item, index) {
var datas
await $http.request({
url: "sociology/course/getCourseCatalogueChapterDetail",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
@@ -875,19 +850,13 @@
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
// if (res.page.length > 0) {
// this.learnList = res.page
// } else {
// this.learnList = []
// }
}
// console.log(res,'-------------')
}).then((res) => {
datas = res.data.videos
console.log(res);
});
})
return datas
},
clicklib(item, index) {
if (item.id == this.curId) {
@@ -917,6 +886,9 @@
.then(res => {
if (res.code == 0) {
if (res.chapterList.length > 0) {
res.chapterList.map(item => {
item.tryListen = []
})
this.courseList = res.chapterList
// console.log('status', res)
} else {
@@ -940,14 +912,20 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.endBox {
// @include theme("vipbtnbg");
background-color: #d3f9e8;
// color: #fff;
font-size: 26rpx; margin: 20rpx 0;
font-size: 26rpx;
margin: 20rpx 0;
padding: 10rpx 20rpx;
.flexbox{justify-content: space-between;}
.flexbox {
justify-content: space-between;
}
}
::v-deep .contentBox {
.ql-editor {
@@ -965,22 +943,44 @@
margin: 0 auto;
}
}
.firstLeve{padding-bottom: 10rpx; border-bottom: 1px solid #f7f8f9;}
.loadMore{text-align: center; margin-bottom: 20rpx;
text{color: $themeColor; font-size: 26rpx;}
.firstLeve {
padding-bottom: 10rpx;
border-bottom: 1px solid #f7f8f9;
}
.boxB{margin-left: 60rpx; margin-top: 20rpx; background-color: #f7f8f9;
padding-top: 20rpx; padding-left:10rpx;
.loadMore {
text-align: center;
margin-bottom: 20rpx;
text {
color: $themeColor;
font-size: 26rpx;
}
}
.boxB {
margin-left: 60rpx;
margin-top: 20rpx;
background-color: #f7f8f9;
padding-top: 20rpx;
padding-left: 10rpx;
.imgbox {
width: 40rpx !important;
height: 40rpx !important;
}
.contentBox{width: calc(100% - 60rpx);}
.contentBox {
width: calc(100% - 60rpx);
}
// .img{ width: 60rpx;
// height: 60rpx;
// image{width:60rpx; height: 60rpx; border-radius: 100%;}
// }
}
.chooseImgType {
margin-top: 20rpx;
@@ -1036,7 +1036,12 @@
margin-right: 20rpx;
width: 100rpx;
height: 100rpx;
position: relative; overflow: hidden;
position: relative;
.imgbox {
height: 100rpx;
overflow: hidden;
}
image {
width: 100%;
@@ -1102,7 +1107,9 @@
margin-right: 20rpx;
}
.imagesList { margin-top: 20rpx;
.imagesList {
margin-top: 20rpx;
.item {
margin-right: 20rpx;
}
@@ -1114,12 +1121,17 @@
.liuyanBox {
padding: 0 20rpx;
margin-top: 20rpx;
.contentBoxfirstLeve {
width: calc(100% - 70rpx);
}
}
.vipSee{ @include theme("btn_bg"); color: #fff; padding: 20rpx;}
.vipSee {
@include theme("btn_bg");
color: #fff;
padding: 20rpx;
}
.leve {
@@ -1130,7 +1142,8 @@
margin-right: 10rpx;
width: 60rpx;
height: 60rpx;
border-radius: 100%; overflow: hidden;
border-radius: 100%;
overflow: hidden;
}
.contentBox {
@@ -1417,7 +1430,8 @@
.item {
padding: 0 20rpx;
font-size: 26rpx;
height: 96rpx;
// min-height: 96rpx;
overflow: hidden;
line-height: 96rpx;
border-bottom: 1px solid #ececec;
@@ -1523,14 +1537,28 @@
margin-bottom: 20rpx;
}
.courseTitle { justify-content: space-between;
.courseTitle {
justify-content: space-between;
overflow: hidden;
background-image: url(@/static/bg1.jpg);
background-size: cover;
background-repeat: no-repeat;
// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
padding: 0 20rpx;
.learnBtn{margin-bottom: 20rpx;width: 150rpx; ;text-align: center; border: 1px solid $themeColor; color: $themeColor; line-height:60rpx; height: 60rpx; font-size: 28rpx; margin-top: 40rpx;}
.learnBtn {
margin-bottom: 20rpx;
width: 150rpx;
;
text-align: center;
border: 1px solid $themeColor;
color: $themeColor;
line-height: 60rpx;
height: 60rpx;
font-size: 28rpx;
margin-top: 40rpx;
}
.price {
color: #ff582e;
font-size: 32rpx;
@@ -1567,7 +1595,9 @@
}
}
}
.shitingLIst{ background-color: #fff; padding:20rpx; margin-bottom: 20rpx;
.item{align-items: center; border: none !important; line-height: 30rpx !important; margin-right: 20rpx;}
}
.flexbox {
display: flex;
}

View File

@@ -6,23 +6,25 @@
<view class="container">
<view class="" v-if="courseList.length > 0">
<uni-collapse accordion>
<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.medical.title"
:thumb="item.medical.icon">
<view class="content">
<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
:thumb="item.courseMedicine.icon">
<view class="content" v-if="item.courseList.length > 1">
<!-- <pre>{{item}}</pre> -->
<view class="courseItemleve1" v-for="(item1, index1) in item.courseList" :key="index1">
<view class="text courseItem flexbox"><u-icon name="pushpin" color="#2979ff"
size="24"></u-icon><text>{{item1.title}}--</text></view>
size="24"></u-icon><text>{{item1.title}}</text></view>
<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
<view class="priceItem flexbox">
<view :class="['priceItem', item2.isBuy == 1 ? 'isBuy' : '']">
<text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1"
style="font-weight: bold; margin-right: 20rpx;">{{item2.title}}</text>
<!-- <view class="pbox flexbox"> -->
style="font-weight: bold; margin-right: 10rpx;">{{item2.title}}</text>
<view class="pbox flexbox">
<text class="text">半年{{item2.halfFee}} </text><text class="text"
style="margin-left: 20rpx;">整年{{item2.fee}} </text>
<!-- </view> -->
</view>
<i class="haveBuy" v-if="item2.isBuy == 1">已购买</i>
</view>
</view>
<view class="buyBox">
<view class="buyBox" v-if="!item1.allBuy">
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
<u-icon name="bag" color="#fff" size="24"></u-icon>
<text>立即购买</text>
@@ -36,6 +38,8 @@
<u-divider v-if="status == 1" text="暂无数据"></u-divider>
<u-divider v-if="status == 0" text="加载中..."></u-divider>
</view>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
@@ -54,6 +58,15 @@
playData: {},
courseList: [],
status:0,
scrollTop: 0,
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
};
},
//第一次加载
@@ -71,6 +84,10 @@
uni.hideTabBar();
this.getCoursePriceList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
@@ -83,8 +100,29 @@
this.$http
.post('medical/home/getMedicalCoursePrice')
.then(res => {
if (res.code == 0 && res.list.length > 0) {
this.courseList = res.list
if (res.code == 0 && res.res.length > 0) {
let _list = res.res
let _allBuy = false
_list.map(item => {
item.courseList.forEach(item2 => {
let _number = 0
item2.courseCatalogueEntityList.forEach(item3 => {
if(item3.isBuy == 1){
_number++
}
})
if(_number == item2.courseCatalogueEntityList.length){
_allBuy = true
}else{
_allBuy = false
}
item2.allBuy = _allBuy
})
})
this.courseList = res.res
this.status = 2
} else {
this.courseList = []
@@ -131,34 +169,43 @@
.courseItemleve1 {
padding: 20rpx;
border-radius: 20rpx;
border: 1px solid #eee;
// border: 1px solid #eee;
overflow: hidden;
margin-bottom: 20rpx;
margin-bottom: 30rpx;
@include mshadow(10px,8);
background: $containerColor;
}
.priceItem {justify-content: center;
.priceItem {
// justify-content: center;
margin-bottom: 20rpx;
font-size: 28rpx;
background-color: #82aee2;
// background-color: #82aee2;
border-radius: 20rpx; padding:10rpx;
// border: 1px solid #ff5500;
.pbox{ justify-content: center; width: 100%; text-align: center;}
border: 2px solid #82aee2;
.pbox{
justify-content: center;
width: 100%; text-align: center;}
text{
color: #fff;
// color: #fff;
}
.mname{padding: 2rpx 10rpx; background: #00e1ec ; border-radius: 20rpx;}
.mname{display: block; text-align: center; margin-bottom: 10rpx; color: #694bc6;}
}
.priceItem.isBuy{position: relative; border-color:#b3b3b3; overflow: hidden; background-color: #f3f3f3;}
.isBuy{
.haveBuy{position: absolute; padding:2rpx 6rpx; border-radius:0 0 0 20rpx ; right: 0; top: 0; z-index: 1; background-color: #e1e1e1; font-style: normal; font-size: 24rpx;}
.mname{color: inherit;}
}
.courseItem {
background: $containerColor; font-weight: bold; border-bottom: 1px dotted #e1e1e1;
border-radius: 20rpx;
// background: #b9d4f2;
font-weight: bold; border-bottom: 1px solid #e1e1e1;
// border-radius: 20rpx;
align-items: center;
margin-bottom: 20rpx;
display: block;
padding: 10rpx 0;
padding: 10rpx 10rpx;
width: 100%;
color: $themeColor;
.u-icon {
display: inline-block;
}
@@ -170,6 +217,7 @@
}
.container {
background-color: $containerColor;
.content {
padding: 0 20rpx;
}

171
pages/course/myCourse.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle ? pageTitle : '课程中心'"></z-nav-bar>
<view class="containerBg1">
<!-- <view class="containerBg"> -->
<view class="coursePart flexbox" v-if="tabList.length > 1">
<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in tabList"
: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',fold ? 'fold' : '']" v-if="courseList.length > 0">
<!-- 目录是否已经购买 -->
<!-- 0:普通 1超级 2医学 3国学 -->
<view class="endBox" v-if="tabList[curIndex].isBuy == 1 && userMsg.vip == '0'">
<view class="" >
<view class="flexbox" v-if="tabList[curIndex].startTime == null">
<text >当前目录还未开始学习</text><uni-tag type="warning" text="去学习" @click="goToLearn()"></uni-tag>
</view>
<view class="flexbox" v-else>
<text >课程观看有效期截止到{{tabList[curIndex].endTime}} </text><uni-tag type="primary" @click="goToLearn()" text="继续学习"></uni-tag>
</view>
</view>
</view>
<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
<text>{{item.title}}</text>
<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
size="mini" type="primary" />
</view>
</view>
<u-divider v-else text="暂无数据"></u-divider>
<view>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
<!-- </view> -->
<!-- 评论弹出 -->
<public-module></public-module>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
</view>
</template>
<script>
// import musicPlay from '@/components/music.vue'
import commentsList from '@/components/commentsList.vue'
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
// fixed: false,
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
userMsg: {}, // 用户信息
scrollTop: 0,
activeStyle: {
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.2)',
// backgroundColor: '#258feb'
},
scrollable: false,
pageTitle: null,
courseList: [],
tabList: [{id:1, name:'我的课程'},{id:2, name:'在学习'},{id:3, name:'已过期'}], // 目录列表
curId: null,
curIndex: 0,
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.windowWidth = uni.getSystemInfoSync().windowWidth;
// this.pageTitle = e.title
console.log(e, '传入分类id')
this.getUserInfo()
// this.courseId = e.id
// this.getCateList(this.courseId)
// this.getData(e.id)
// this.getSayList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
onReachBottom() {
console.log('触底');
if (this.status != 2) {
this.pPage++
this.getSayList()
}
},
components: {
// musicPlay
emotion,
// commentsList
},
//方法
methods: {
getUserInfo() {
// 用户详情
// if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMsg = res.user
});
// }
},
// 跳转
onPageJump(url,id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.flexbox {
display: flex;
}
.imgcontainer {
background-color: $imgBg;
}
</style>

View File

@@ -1,14 +1,14 @@
<template>
<view>
<view style="background-color: #f4f7ff;">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
<view class="containerBg1">
<!-- <view class="vipSee"> -->
<view :class="[userInfo.vip == 0 ? 'vipBox' : '']" style="padding:0 10px;">
<view :class="[userInfo.vip != 0 ? 'vipBox' : '']" style="padding:0 10px;">
<view class="courseTitle flexbox" v-if="course.id">
<view class="vipSee" v-if="userInfo.vip == 0">
<view class="vipSee" v-if="userInfo.vip != 0">
<text>VIP畅学权益生效中</text>
</view>
<view class="curseImg flexbox imgcontainer" style="align-items: center;">