@@ -9,42 +9,51 @@
itemStyle = "padding-left: 15px; padding-right: 15px; height: 50px;" > < / u-tabs >
< / view >
< view class = "containerBg1" >
<!-- 我的课程 -- >
< view class = "MyCourseBox" v-show = "this.curTagId == 0" >
< view class = "search" style = "margin-top: 20rpx;" >
< u-search placeholder = "请输入课程名" @clear ="clear" v-model = "searchValue"
< u-search placeholder = "请输入课程名" @focus ="focus" @clear ="clear" v-model = "searchValue" @blur="blur"
@search ="search" @custom ="search" > < / u -search >
< / view >
< uni-section class = "mb-10" title = "课程列表" type = "line " >
< template v -slot : right >
< u-icon name = "grid" color = "#2979ff" size = "28 " @click ="showDrawer" > < / u -icon >
< / template >
< / uni-section >
< view class = "sectionTitle flexbox " >
< view class = "selectCateText" >
< view class = "" >
< text v-if = "selectCat == ''" > 已显示全部课程 < / text >
< text v-else > 已选中分类 ： {{ selectCat }} < / text >
< text class = "del" @click ="delselectCat" v-if = "selectCat != ''" > 清除 < / text >
< / view >
< / view >
< view class = "flexbox rightIcon" @click ="showDrawer" >
< u -icon name = "grid" color = "#2979ff" size = "28" > < / u-icon > < text > 按分类筛选 < / text >
< / view >
< / view >
<!-- < view class = "containerBg" > -- >
< view class = "newBox" >
< view class = "item flexbox" v-for = "(item, index) in MyCourseList.list" :key="index"
@click ="onPageJump('/pages/course/courseDetail',item.id)" >
< view : class = "[' item',' flexbox', userMsg.vip != '0'&& item.isBuy != 1 ? 'blueBorder':''] " v-for = "(item, index) in MyCourseList.list" :key="index"
>
< view class = "vipTag" v-if = "userMsg.vip != '0' && item.isBuy != 1" >
VIP畅学
< / view >
< ! - - < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "imgcontainer" >
< view class = "imgcontainer" @click ="onPageJump('/pages/course/myCourseLearn',item.id)" >
< image :src = "item.image" mode = "aspectFit" > < / image >
< / view >
< view class = "buyItems" >
< view class = "txt555" >
{ { item . title } }
< / view >
< view class = "" @click ="onPageJump('/pages/course/myCourseLearn',item.id)" >
{{ item.title }}
< / view >
< / view >
< view class = "jianjie" v-html = "item.content" >
< / view >
< view class = "tag-view " >
< uni-tag v-if = "item.level != 0" style="margin-right: 10rpx;"
: = "item.level == 1 ? '初级':'高级'" type = "primary" size = "small" / >
< uni-tag v-if = "item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;"
= "必修" size = "small" type = "warning" / >
< uni-tag v-if = "item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;"
text = "选修" size = "small" type = "success" / >
< / view >
< view class = "btn_box" >
< text > 了解课程 < / text >
< / view >
< view class = "collection " >
<!-- 收藏状态 { { item . isStudying } } -- >
< class = "add citem" v-if = "item.isStudying == 0" @click="addCollection(item,index)" > 加入在学习 < / text >
< text class = "del citem" v-else @click ="delCollection(item,index)" > 取消在学习 < / text >
< class = "citem btn_box" @click ="onPageJump('/pages/course/myCourseLearn',item.id)" > 去学习 < / text >
< / view >
< / view >
< / view >
@@ -52,6 +61,69 @@
< u -divider v-show = "MyCourseList.status == 2" text="已加载全部" > < / u -divider >
< u-divider v-show = "MyCourseList.status == 3" text="暂无数据" > < / u -divider >
< u-divider v-show = "MyCourseList.status == 1" text="加载中..." > < / u -divider >
< / view >
<!-- 在学习 -- >
< view class = "LearningCourseBox" v-show = "this.curTagId == 1" >
< ! - - < view class = "containerBg" > -- >
< view class = "newBox" >
< view : class = "['item','flexbox', userMsg.vip != '0' && item.isBuy != 1 ? 'blueBorder':'']" v-for = "(item, index) in LearningCourseList.list" :key="index"
>
< view class = "vipTag" v-if = "userMsg.vip != '0' && item.isBuy != 1" >
VIP畅学
< / view >
< ! - - {{ userMsg }} - - >
<!-- < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "imgcontainer" @click ="onPageJump('/pages/course/myCourseLearn',item.id)" >
< image :src = "item.image" mode = "aspectFit" > < / image >
< / view >
< view class = "buyItems" >
< view class = "txt555" @click ="onPageJump('/pages/course/myCourseLearn',item.id)" >
{{ item.title }}
< / view >
< view class = "jianjie" v-html = "item.content" >
< / view >
< view class = "collection" >
<!-- < text class = "add citem" v-if = "item.isStudying == 0" @click="addCollection(item,index)" > 加入在学习 < / text > - - >
< text class = "del citem" @click ="delCollection(item,index)" > 取消在学习 < / text >
< text class = "citem btn_box" @click ="onPageJump('/pages/course/myCourseLearn',item.id)" > 去学习 < / text >
< / view >
< / view >
< / view >
< / view >
< u -divider v-show = "LearningCourseList.status == 2" text="已加载全部" > < / u -divider >
< u-divider v-show = "LearningCourseList.status == 3" text="暂无数据" > < / u -divider >
< u-divider v-show = "LearningCourseList.status == 1" text="加载中..." > < / u -divider >
< / view >
<!-- 已过期 -- >
< view class = "ExpiredCourseBox" v-show = "this.curTagId == 2" >
< ! - - < view class = "containerBg" > -- >
< view class = "newBox" >
< view class = "item flexbox" v-for = "(item, index) in ExpiredCourseList.list" :key="index"
>
<!-- < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "imgcontainer" @click ="onPageJump('/pages/course/courseDetail',item.id)" >
< image :src = "item.image" mode = "aspectFit" > < / image >
< / view >
< view class = "buyItems" >
< view class = "txt555" @click ="onPageJump('/pages/course/courseDetail',item.id)" >
{{ item.title }} - {{ item.catalogueTitle }}
< / view >
< view class = "jianjie" v-html = "item.content" >
< / view >
< view class = "btn_box" @click ="xufei(item)" >
< text > 续费课程 < / text >
< / view >
< / view >
< / view >
< / view >
< u-divider v-show = "ExpiredCourseList.status == 2" text="已加载全部" > < / u -divider >
< u-divider v-show = "ExpiredCourseList.status == 3" text="暂无数据" > < / u -divider >
< u-divider v-show = "ExpiredCourseList.status == 1" text="加载中..." > < / u -divider >
< / view >
< / view >
< view >
@@ -62,7 +134,7 @@
<!-- 评论弹出 -- >
< public-module > < / public-module >
< tree-list ref = "treeList" v-if = "treeListVisible" @clickCourseInfo="clickCourseInfo" > < / tree -list >
< buy-pup v-if = "pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate" > < / buy -pup >
< z-navigation > < / z-navigation >
<!-- < music-play :playData = "playData" > < / music-play > -- >
< / view >
@@ -71,6 +143,7 @@
< script >
// import musicPlay from '@/components/music.vue'
import buyPup from '@/components/buyPup.vue'
import treeList from '@/components/tagTree.vue'
import commentsList from '@/components/commentsList.vue'
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
@@ -83,9 +156,12 @@
export default {
data ( ) {
return {
proPriceList : [ ] ,
pricespop : false ,
curTagId : 0 ,
playData : { } ,
searchValue : '' ,
searchValue : '' ,
selectCat : '' , // 选中的分类名称
// fixed: false,
bgiStyle : {
background : '#fff'
@@ -113,7 +189,7 @@
name : '我的课程'
} , {
id : 2 ,
name : '我收藏的 '
name : '正在学习 '
} , {
id : 3 ,
name : '已过期'
@@ -138,7 +214,9 @@
status : 88 ,
page : 1 ,
flag : false
}
} ,
oldValue : '' ,
cartList : [ ]
} ;
} ,
@@ -151,9 +229,7 @@
console . log ( e , '传入分类id' )
this . getUserInfo ( )
// this.fatherClick()
this . getMyCourseList ( )
// this.getLearningCourseList()
// this.getExpiredCourseList()
this . getMyCourseList ( )
} ,
onPageScroll ( e ) {
this . scrollTop = e . scrollTop ;
@@ -163,6 +239,15 @@
this . fixed = false
}
} ,
onPullDownRefresh ( ) {
this . selectCat = ''
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . getMyCourseList ( )
this . getLearningCourseList ( )
this . getExpiredCourseList ( )
uni . stopPullDownRefresh ( )
} ,
computed : {
... mapState ( [ 'userInfo' ] )
} ,
@@ -176,40 +261,207 @@
console . log ( '触底' ) ;
if ( this . curTagId == 0 ) {
if ( this . MyCourseList . status != 2 ) {
if ( ! this . MyCourseList . flag ) {
this . MyCourseList . page ++
this . getMyCourseList ( )
}
}
} else if ( this . curTagId == 1 ) {
} else if ( this . curTagId == 2 ) {
}
}
} ,
components : {
// musicPlay
emotion ,
treeList
treeList ,
buyPup
// commentsList
} ,
//方法
methods : {
oprate ( data ) {
console . log ( data , '得到的内容' )
if ( data . name == 'buy' ) {
this . buy ( data . item )
} else if ( data . name == 'gouwuche' ) {
this . addCart ( data . item )
}
} ,
// 购物车
addCart ( val ) {
console . log ( val )
if ( val . productStock == 0 ) {
uni . showToast ( {
title : '商品库存不足' ,
icon : "none"
} ) ;
} else {
console . log ( this . userInfo , '222' )
this . $http
. post ( ` book/ordercart/getCartList?userId= ${ this . userInfo . id } ` )
. then ( res => {
// console.log(
this . cartList = res . cartList
// this.isAddLink(val)
} )
}
} ,
// 加入购物车
isAddLink ( item ) {
// 统计商品信息
let data = {
"userId" : this . userInfo . id ,
"productId" : item . productId ,
"productAmount" : this . productAmount ,
"price" : item . price
}
// 判断列表是否为空
if ( this . cartList . length > 0 ) {
let flag = ''
let shagnpin = { }
// 循环购物车列表
flag = this . cartList . some ( ( item , index ) => {
if ( item . productId == data . productId ) {
shagnpin = item
shagnpin . productAmount = item . productAmount + 1
return true
}
} )
if ( flag ) {
// 已在购物车中添加
$http . request ( {
url : "book/ordercart/update" ,
method : "POST" , // POST、GET、PUT、DELETE，
data : shagnpin ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} ) . then ( res => {
if ( res . code == 0 ) {
this . upoShow = false
uni . showToast ( {
title : '加入购物车成功' ,
duration : 1000 ,
} ) ;
}
} )
} else {
// 加入购物车
$http . request ( {
url : "book/ordercart/save" ,
method : "POST" , // POST、GET、PUT、DELETE，
data ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} ) . then ( res => {
if ( res . code == 0 ) {
this . upoShow = false
uni . showToast ( {
title : '加入购物车成功' ,
duration : 1000 ,
} ) ;
}
} )
}
} else {
// 购物车列表为空时直接加入购物车
$http . request ( {
url : "book/ordercart/save" ,
method : "POST" , // POST、GET、PUT、DELETE，
data ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} ) . then ( res => {
if ( res . code == 0 ) {
uni . showToast ( {
title : '加入购物车成功' ,
duration : 1000 ,
} ) ;
}
} )
}
} ,
// 直接购买
buy ( val ) {
var mynavData = JSON . stringify ( {
goods : [
{
productImages : val . productImages ,
productId : val . productId ,
productName : val . productName ,
price : val . activityPrice && val . activityPrice != 0 ? val . activityPrice : val . price ,
goodsType : val . goodsType ,
} ,
] ,
navTitle : this . options . navTitle ,
title : this . options . title ,
typeId : 0 ,
} ) ; // 这里转换成 字符串
uni . navigateTo ( {
url : ` /pages/goods/order/index?data= ${ mynavData } ` ,
} ) ;
// uni.navigateTo({
// url:`/pages/bookShop/settlement?type=2&list=${val.id}`
// })
} ,
closePup ( e ) {
this . pricespop = false
} ,
delselectCat ( ) {
this . selectCat = ''
this . medicalId = ''
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . getMyCourseList ( )
} ,
search ( res ) {
console . log ( '点了搜索' )
// if (this.curTagId == 0) {
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . getMyCourseList ( )
console . log ( this . searchValue , 'searchValue' )
} ,
focus ( res ) {
this . oldValue = res
// console.log(res,this.oldValue,'聚焦');
} ,
blur ( res ) {
// console.log(res,this.searchValue,'res');
if ( this . oldValue != res ) { // 重新请求
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . getMyCourseList ( )
this . oldValue = ''
}
} ,
cancel ( res ) { } ,
clear ( ) {
// console.log('++++++++++++++++++++++')
this . searchValue = ''
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . getMyCourseList ( )
} ,
clickCourseInfo ( val ) {
console . log ( val , '选择的分类数据' ) ;
if ( val && val . id ) {
this . medicalId = val . id
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . selectCat = val . title
this . getMyCourseList ( )
}
} ,
fatherClick ( e ) {
console . log ( e , 'tabitem' )
this . curTagId = e . index
} ,
showDrawer ( ) {
showDrawer ( ) {
this . treeListVisible = true
this . $nextTick ( ( ) => {
this . $refs [ 'treeList' ] . getData ( )
@@ -218,11 +470,11 @@
} ,
getMyCourseList ( ) {
this . MyCourseList . status = 1
if ( this . MyCourseList . flag ) {
. log ( )
}
this . MyCourseList . flag = fals e
// if (this.MyCourseList.flag) {
// console.log( '正在执行，未完成')
// return
// }
this . MyCourseList . flag = tru e
$http . request ( {
url : "medical/course/getUserCourseBuy" ,
method : "POST" , // POST、GET、PUT、DELETE，
@@ -247,91 +499,84 @@
this . MyCourseList . status = 2
}
} else {
this . MyCourseList . status = 3 // 暂无数据
}
console . log ( 'status' , this . MyCourseList . status )
}
this . MyCourseList . flag = tru e
this . MyCourseList . flag = fals e
} ) . catch ( e => {
console . log ( e , '数据报错' )
} ) ;
} ,
getLearningCourseList ( ) {
if ( ! this . pObj . pFlag ) {
return
}
this . pObj . pFlag = false
this . pObj . status = 1
this . LearningCourseList . status = 1
// this.LearningCourseList.flag = true
$http . request ( {
url : "common/taihuWelfare/getTaihuWelfareProductList " ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
"page ": this . pObj . page ,
"limit" : 14
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} ) . then ( res => {
if ( res . code == 0 ) {
if ( res . page . records . length > 0 ) {
var _list = res . page . records
this . productList = this . productList . concat ( _list )
if ( res . page . pages > this . pObj . page ) {
this . pObj . status = 88
url : "medical/course/getUserCourseStudying " ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
"userId " : this . userMsg . id
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
if ( res . code == 0 ) {
if ( res . courseList . length > 0 ) {
this . LearningCourseList . list = res . courseList
// if (res.courseList.pages > this.LearningCourseList.page) {
// this.LearningCourseList.status = 0
// } else {
this . LearningCourseList . status = 2
// }
} else {
// 加载完毕
this . pObj . status = 2
this . LearningCourseList . status = 3 // 暂无数据
}
} else {
this . pObj . status = 3
console . log ( 'status' , this . LearningCourseList . status )
}
}
this . pObj . pFlag = true
} ) . catch ( e => {
console . log ( e , '商品列表' )
this . pObj . status = 88
this . pObj . pFlag = true
} ) ;
// this.LearningCourseList.flag = false
} ) . catch ( e => {
console . log ( e , '数据报错' )
} ) ;
} ,
getExpiredCourseList ( ) {
if ( ! this . pObj . pFlag ) {
return
}
this . pObj . pFlag = false
this . pObj . status = 1
this . ExpiredCourseList . status = 1
// if (this.ExpiredCourseList.flag) {
// console.log('正在执行，未完成')
// return
// }
// this.ExpiredCourseList.flag = true
$http . request ( {
url : "common/taihuWelfare/getTaihuWelfareProductList " ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
"page " : this . pObj . page ,
"limit" : 14
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} ) . then ( res => {
if ( res . code == 0 ) {
if ( res . page . records . length > 0 ) {
var _list = res . page . records
this . productList = this . productList . concat ( _list )
if ( res . page . pages > this . pObj . page ) {
this . pObj . status = 88
url : "medical/course/getCourseExpire " ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
"userId " : this . userMsg . id
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
if ( res . code == 0 && res . courseList != null ) {
if ( res . courseList . length > 0 ) {
this . ExpiredCourseList . list = res . courseList
// if (res.courseList.pages > this.ExpiredCourseList.page) {
// this.ExpiredCourseList.status = 0
// } else {
this . ExpiredCourseList . status = 2
// }
} else {
// 加载完毕
this . pObj . status = 2
this . ExpiredCourseList . status = 3 // 暂无数据
}
} else {
this . pObj . status = 3
console . log ( 'status-------------------' , this . ExpiredCourseList . status )
} else {
this . ExpiredCourseList . status = 3 // 暂无数据
}
}
this . pObj . pFlag = true
} ) . catch ( e => {
console . log ( e , '商品列表' )
this . pObj . status = 88
this . pObj . pFlag = true
} ) ;
// this.ExpiredCourseList.flag = false
} ) . catch ( e => {
console . log ( e , '数据报错' )
} ) ;
} ,
getUserInfo ( ) {
// 用户详情
@@ -340,10 +585,111 @@
. post ( 'book/user/info/' + this . userInfo . id )
. then ( res => {
this . userMsg = res . user
// this.userInfo = res.user
this . getLearningCourseList ( )
this . getExpiredCourseList ( )
} ) ;
// }
} ,
addCollection ( val , index ) {
$http . request ( {
url : "medical/course/addUserCourseStudying" ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
"userId" : this . userInfo . id ,
"courseId" : val . id
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
if ( res . code == 0 ) {
uni . showToast ( {
title : '加入成功' ,
icon : 'success'
} )
if ( this . curTagId == 0 ) {
console . log ( this . MyCourseList . list [ index ] , 'this.MyCourseList[index]' )
this . MyCourseList . list [ index ] . isStudying = 1
this . getLearningCourseList ( ) // 刷新收藏列表
}
}
} )
. catch ( e => {
console . log ( '加入在学习' , e )
} )
} ,
delCollection ( val , index ) {
// console.log(val,'val');
$http . request ( {
url : "medical/course/delUserCourseStudying" ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
// "userId": this.userInfo.id,
"courseId" : val . id
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
if ( res . code == 0 ) {
uni . showToast ( {
title : '取消成功' ,
icon : 'success'
} )
if ( this . curTagId == 0 ) {
console . log ( this . MyCourseList . list [ index ] , 'this.MyCourseList[index]' )
this . MyCourseList . list [ index ] . isStudying = 0
this . getLearningCourseList ( ) // 刷新收藏列表
} else if ( this . curTagId == 1 ) {
this . LearningCourseList . list . splice ( index , 1 )
this . MyCourseList . page = 1
this . MyCourseList . list = [ ]
this . getMyCourseList ( )
}
}
} )
. catch ( e => {
console . log ( '取消收藏报错' , e )
uni . showToast ( {
title : '取消失败' ,
icon : 'error'
} )
} )
} ,
xufei ( val ) {
console . log ( '去续费,获取商品列表' )
$http . request ( {
url : "sociology/product/getProductListForCourse" ,
method : "POST" , // POST、GET、PUT、DELETE，
data : {
"id" : val . catalogueId
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
if ( res . code == 0 ) {
if ( res . productList . length > 0 ) {
this . proPriceList = res . productList
// this.curProId = this.proPriceList[0].productId
} else {
this . proPriceList = [ ]
}
}
} ) . catch ( e => {
console . log ( e , '获取商品列表报错' )
} ) ;
this . pricespop = true
} ,
// 跳转
onPageJump ( url , id ) {
uni . navigateTo ( {
@@ -356,6 +702,29 @@
< / script >
< style lang = "scss" scoped >
@ import '@/style/mixin.scss' ;
. LearningCourseBox , . ExpiredCourseBox { margin - top : 20 rpx ; }
. collection { margin - top : 20 rpx ; overflow : hidden ; text - align : right ;
. btn _box { border : 1 px solid $themeColor ! important ; color : $themeColor ! important ; margin - left : 20 rpx ; }
. citem { display : inline - block ;
border - radius : 10 rpx ;
// background-color: #ff7446;
border : 1 px solid # ff7446 ;
padding : 10 rpx ; font - size : 24 rpx ;
color : # ff7446 ;
}
. del {
background - color : # ffe6db ; color : # ff7446 ;
}
}
. sectionTitle {
justify - content : space - between ; margin - bottom : 20 rpx ; margin - top : 20 rpx ;
. rightIcon { color : # 2979 ff ; align - items : center ; }
}
. selectCateText { min - width : 20 rpx ;
. del { color : # ff7446 ; padding - left : 20 rpx ; }
}
. search { background - color : $containerColor ; padding : 10 rpx ; }
. containerBg1 { padding : 0 10 px ; }
. containerBg {
@@ -366,12 +735,23 @@
. curseSet { margin - right : 20 rpx ; font - size : 28 rpx ; display : flex ; align - items : center ; }
. fixed {
position : fixed ;
z - index : 1 ; width : 100 % ; background - color : # fff ;
z - index : 2 ; width : 100 % ; background - color : # fff ;
}
. newBox {
. item {
. blueBorder { border : 1 px solid # 2979 ff ! important ; }
. item { overflow : hidden ;
border : # fff 1 px solid ;
. vipTag { position : absolute ; padding : 10 rpx 80 rpx ;
left : - 60 rpx ; top : 10 rpx ;
transform : rotate ( - 30 deg ) ;
- o - transform : rotate ( - 30 deg ) ;
- webkit - transform : rotate ( - 30 deg ) ;
- moz - transform : rotate ( - 30 deg ) ;
z - index : 1 ;
@ include theme ( "btn_bg" ) ;
color : # fff ; }
position : relative ;
margin - bottom : 20 rpx ;
background - color : # fff ;
border - radius : 20 rpx ;
@@ -394,6 +774,7 @@
width : 100 % ;
height : 200 rpx ;
}
}
. btn _box { text - align : right ;
text {
