This commit is contained in:
@fawn-nine
2024-06-21 11:25:19 +08:00
parent f3b576a06a
commit 5287358bd5
5 changed files with 608 additions and 87 deletions

179
components/tagTree.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<view>
<uni-drawer ref="showRight" mode="right" :width="320" @change="changeD($event,'showRight')">
<view class="close">
<view class="zhan" style="width: 100%;"></view>
<u-icon name="close" @click="closeDrawer('showRight')" color="#2979ff" size="28"></u-icon>
</view>
<view class="proTitle">
<text>请选择课程分类</text>
</view>
<uni-collapse accordion v-if="treeList.length > 0" @change="collapseChange">
<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" @click.stop="clickCourseInfo(item)">
<text class="textss"> 本目录下全部课程</text>
</view>
<view :class="['item', 'leve2']"
v-for="(item1, index1) in item.children" :key="index1"
@click.stop="clickCourseInfo(item1)">
<text class="textss"> {{item1.title}}</text>
<view class="sub2List" v-if="item1.children">
<view :class="['item', 'leve3']"
v-for="(item2, index2) in item1.children" :key="index2"
@click.stop="clickCourseInfo(item2)">
<text class="textss">{{item2.title}}</text>
<view class="sub3List" v-if="item2.children">
<view :class="['item', 'leve4']"
v-for="(item3, index3) in item2.children" :key="index3"
@click.stop="clickCourseInfo(item3)">
<text class="textss">{{item3.title}}33</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</uni-drawer>
</view>
</template>
<script>
export default {
name:"tagTree",
// props:['treeList'],
data() {
return {
treeList:[]
};
},methods:{
showDrawer(e) {
this.$refs[e].open()
// this.videoContext.pause()
// this.showTemp = true
console.log('打开抽屉')
},
getData() {
this.$http
.post('medical/home/getCourseMedicalTree')
.then(res => {
if (res.code == 0 && res.labels.length > 0) {
this.treeList = res.labels
} else {
this.treeList = []
}
this.showDrawer('showRight')
}).catch(e => {
console.log(e, '报错')
uni.showToast({
title:"获取课程分类失败",
icon:"none"
})
});
},
clickCourseInfo(val){
this.$emit('clickCourseInfo',val)
this.closeDrawer('showRight')
},
closeDrawer(e) {
this.$refs[e].close()
},
changeD(e, type) {
// console.log((type === 'showRight' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
this[type] = e
if (!e) {
console.log('关闭弹窗')
}
},
collapseChange(e) {
// console.log(e, '折叠面板点击');
// if (e) {
// this.tagId = this.treeList[e].id
// }
},
}
}
</script>
<style lang="scss" scoped>
.sub1List {
background-color: #f7f7f7;
// padding-left: 20rpx;
}
.content {
.item {
background-color: #fff;
line-height: 80rpx;
font-size: 26rpx;
color: #497387;
// border-bottom: 1px solid #dae8f0;
text {
padding-left: 20rpx;
}
.item:last-child {
border-bottom: 0;
}
}
.item.active {
// background-color: #aed1ec;
color: #fff;
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
}
.textss {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ebeef5;
}
.leve2 {
.textss {
padding-left: 20rpx;
}
}
.leve2 {
.textss {
padding-left: 40rpx;
}
}
.leve3 {
.textss {
padding-left: 60rpx;
}
}
.leve4 {
.textss {
padding-left: 80rpx;
}
}
}
.proTitle {
text-align: center;
padding: 20rpx 0;
margin-top: 60rpx;
// margin-bottom: 20rpx;
color: #666;
font-size: 26rpx;
}
.close {
display: flex;
justify-content: right;
padding-top: 60rpx;
padding-right: 20px;
}
</style>

View File

@@ -9,9 +9,20 @@
itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
</view>
<view class="containerBg1">
<view class="search" style="margin-top: 20rpx;">
<u-search placeholder="请输入课程名" @clear="clear" v-model="searchValue"
@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="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" v-for="(item, index) in MyCourseList.list" :key="index"
@click="onPageJump('/pages/course/courseDetail',item.id)">
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
@@ -24,9 +35,12 @@
</view>
<view class="tag-view">
<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 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="warning" />
<uni-tag v-if="item.selective != 0 && item.selective == 2" 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 && item.selective == 1" style="margin-right: 10rpx;"
text="必修" 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>
@@ -47,6 +61,8 @@
<!-- </view> -->
<!-- 评论弹出 -->
<public-module></public-module>
<tree-list ref="treeList" v-if="treeListVisible" @clickCourseInfo="clickCourseInfo"></tree-list>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
@@ -55,6 +71,7 @@
<script>
// import musicPlay from '@/components/music.vue'
import treeList from '@/components/tagTree.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';
@@ -66,8 +83,9 @@
export default {
data() {
return {
curTagId:0,
curTagId: 0,
playData: {},
searchValue:'',
// fixed: false,
bgiStyle: {
background: '#fff'
@@ -88,27 +106,38 @@
},
scrollable: false,
pageTitle: null,
fixed:false,
tabList: [{id:1, name:'我的课程'},{id:2, name:'在学习'},{id:3, name:'已过期'}], // 目录列表
fixed: false,
medicalId:'',
tabList: [{
id: 1,
name: '我的课程'
}, {
id: 2,
name: '我收藏的'
}, {
id: 3,
name: '已过期'
}], // 目录列表
curId: null,
curIndex: 0,
MyCourseList:{
list:[],
status:88,
page:1,
flag:false
treeListVisible:false,
MyCourseList: {
list: [],
status: 88,
page: 1,
flag: false
},
LearningCourseList:{
list:[],
status:88,
page:1,
flag:false
LearningCourseList: {
list: [],
status: 88,
page: 1,
flag: false
},
ExpiredCourseList:{
list:[],
status:88,
page:1,
flag:false
ExpiredCourseList: {
list: [],
status: 88,
page: 1,
flag: false
}
};
@@ -121,10 +150,10 @@
// this.pageTitle = e.title
console.log(e, '传入分类id')
this.getUserInfo()
this.fatherClick()
// this.fatherClick()
this.getMyCourseList()
this.getLearningCourseList()
this.getExpiredCourseList()
// this.getLearningCourseList()
// this.getExpiredCourseList()
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
@@ -145,34 +174,62 @@
},
onReachBottom() {
console.log('触底');
// if (this.status != 2) {
// this.pPage++
// this.getSayList()
// }
if (this.curTagId == 0) {
if(this.MyCourseList.status != 2){
}
}else if(this.curTagId == 1){
}else if(this.curTagId == 2){
}
},
components: {
// musicPlay
emotion,
treeList
// commentsList
},
//方法
methods: {
fatherClick(){},
getMyCourseList(){
search(res){
console.log('点了搜索')
},
cancel(res){},
clear(){
this.searchValue = ''
},
clickCourseInfo(val){
console.log(val,'选择的分类数据');
if(val && val.id){
this.medicalId = val.id
}
},
fatherClick(e) {
console.log(e,'tabitem')
},
showDrawer(){
this.treeListVisible = true
this.$nextTick( ()=> {
this.$refs['treeList'].getData()
})
},
getMyCourseList() {
this.MyCourseList.status = 1
if (!this.MyCourseList.flag) {
if (this.MyCourseList.flag) {
console.log('正在执行,未完成')
return
}
this.MyCourseList.flag = false
$http.request({
url: "medical/home/getMedicalCourseList",
url: "medical/course/getUserCourseBuy",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"id": id,
"limit": 12,
"limit": 10,
"title": this.searchValue,
"medicalId": this.medicalId,
"page": this.MyCourseList.page
},
header: { //默认 无 说明:请求头
@@ -181,16 +238,15 @@
})
.then(res => {
if (res.code == 0) {
if (res.courses.records.length > 0) {
var list = res.courses.records
this.courseList = this.MyCourseList.list.concat(list)
if (res.courses.pages > this.MyCourseList.page) {
if (res.courseList.records.length > 0) {
var list = res.courseList.records
this.MyCourseList.list = this.MyCourseList.list.concat(list)
if (res.courseList.pages > this.MyCourseList.page) {
this.MyCourseList.status = 0
} else {
this.MyCourseList.status = 2
}
}
else {
} else {
this.MyCourseList.status = 3 // 暂无数据
}
@@ -201,8 +257,82 @@
console.log(e, '数据报错')
});
},
getLearningCourseList(){},
getExpiredCourseList(){},
getLearningCourseList() {
if (!this.pObj.pFlag) {
return
}
this.pObj.pFlag = false
this.pObj.status = 1
$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
} else {
// 加载完毕
this.pObj.status = 2
}
} else {
this.pObj.status = 3
}
}
this.pObj.pFlag = true
}).catch(e => {
console.log(e, '商品列表')
this.pObj.status = 88
this.pObj.pFlag = true
});
},
getExpiredCourseList() {
if (!this.pObj.pFlag) {
return
}
this.pObj.pFlag = false
this.pObj.status = 1
$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
} else {
// 加载完毕
this.pObj.status = 2
}
} else {
this.pObj.status = 3
}
}
this.pObj.pFlag = true
}).catch(e => {
console.log(e, '商品列表')
this.pObj.status = 88
this.pObj.pFlag = true
});
},
getUserInfo() {
// 用户详情
// if (this.userInfo.id != undefined) {
@@ -215,7 +345,7 @@
},
// 跳转
onPageJump(url,id) {
onPageJump(url, id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
@@ -226,8 +356,98 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.search{background-color: $containerColor; padding: 10rpx; }
.containerBg1{padding:0 10px;}
.containerBg {
background-color: $containerColor;
padding: 0 20rpx;
}
.curseSet{margin-right: 20rpx; font-size: 28rpx; display: flex; align-items: center;}
.fixed {
position: fixed;
z-index: 1; width: 100%; background-color: #fff;
}
.newBox {
.item {
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1) .imgcontainer {
display: block;
width: 110rpx;
margin-right: 20rpx;
// background-size: cover;
// background-position: center;
height: 200rpx;
flex-grow: 1;
// @include ptop_bottm(10px);
overflow: hidden;
// @include pleft_right(10px);
image {
width: 100%;
height: 200rpx;
}
}
.btn_box{ text-align: right;
text{
border-radius: 20rpx;
padding: 3px 5px; @include theme("btn_bg");
font-size: 28rpx; color: #fff;
}
}
.buyItems {
width: 60%;
}
.jianjie {
margin-top: 10rpx;
font-size: 24rpx;
@include bov();
color: #9c9c9c;
}
.txt555 {
font-size: 30rpx;
color: #000;
@include bov()
}
}
}
.subCate {
padding-top:10px;
padding-bottom: 10px;
.item {
font-size: 26rpx;
background-color: #fff;
border-radius: 10px;
color: #333;
margin-right: 16rpx;
padding: 14rpx 30rpx;
}
.item:last-child() {
margin-right: 0;
}
.item.active {
background-color: $themeColor;
color: #fff;
}
}
.tabList {
text-align: center;
}
.tabsBox{background-color: #e4eefa;}
.flexbox {
display: flex;
}
@@ -235,4 +455,45 @@
.imgcontainer {
background-color: $imgBg;
}
.box {
// background-color: #fff;
min-height: calc(100vh - 270rpx);
}
.learnBox {
// background-color: #fff;
margin-top: 10px;
.learn {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
.item {
width: 48%;
margin-bottom: 16px;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 {
display: block;
text-align: center;
height: 40rpx;
width: 100%;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}
</style>

View File

@@ -198,7 +198,24 @@
<view>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
</view>
<view class="appJump ">
<view class="everhealth item flexbox" @click="appjumpfun('nuttyreading')">
<view class="img">
<image src="@/static/f40x40.png" mode="widthFix"></image>
</view>
<view class="text">
<text>疯子读书</text>
</view>
</view>
<view class="zmzm item flexbox" @click="appjumpfun('zmzm')">
<view class="img">
<image src="@/static/40x40.png" mode="widthFix"></image>
</view>
<view class="text">
<text>众妙之门</text>
</view>
</view>
</view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-navigation></z-navigation>
@@ -586,6 +603,57 @@
url: '../bookShop/bookShopType?type=' + e
});
},
appjumpfun(name){
let bagName = ''
let schemes = ''
if(name == 'zmzm'){
bagName = 'com.cn.zmzm'
schemes = 'zmzm'
}
if(name == 'nuttyreading'){
bagName = 'com.cn.nuttyreading'
schemes = 'nuttyreading'
}
// if(name == 'everhealth'){
if (plus.os.name == "Android") { //安卓
if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app
pname: bagName, //B款app云打包的包名
})) { //安装了app
plus.runtime.launchApplication({ //打开app
pname: bagName, //B款app云打包的包名
extra: {
url: `${schemes}://${bagName}` //B款app配置的schemes+云打包的包名
},
function(e) {
console.log("Open system default browser failed: " + e.message);
}
})
}
else { //未安装app
plus.runtime.openURL(`https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`, function(res) {
//进入后台小哥哥给我的应用宝下载链接,让你们后台给你
//这链接会判断你手机是ios还是AndroidAndroid进入应用宝下载app
//跟下面的是一个链接
console.log(res);
});
}
} else if (plus.os.name == "iOS") { //苹果
//因为ios查不到B款app在ios系统手机里面其实下载了也是检测不到所以就不检测了
//直接打开B款appB款app没有的话会进入回调报错我们在回调去打开下载链接
plus.runtime.launchApplication({
action: "${schemes}://"
}, function(e) {
plus.runtime.openURL(`https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`, function(res) {
//进入后台小哥哥给我的appStore下载app链接让你们后台给你
//这链接会判断你手机是ios还是Androidios进入应用宝下载app
//跟上面的是一个链接
console.log(res);
});
});
// }
}
},
// 三个列表跳页
onBookMore(e) {
@@ -603,6 +671,19 @@
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.appJump{position: fixed; right: 0; top: 8%; z-index: 1;
.item{background: rgba(255, 255, 255, .6); margin-bottom: 20rpx; border: 1px solid #fff;
align-items: center; padding-right: 10rpx;
overflow: hidden; border-radius: 50rpx 0 0 50rpx;
text{font-size: 20rpx;}
.img{
// width: 60rpx; height: 60rpx;
padding: 6rpx; overflow: hidden;
image{width: 36rpx; height: 36rpx; border-radius: 100%;}
}
}
}
.newsBox {
justify-content: space-between;
background-color: #fff;

BIN
static/40x40.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/f40x40.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB