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

33

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

431
pages/course/myCourse.vue
View File

@@ -8,53 +8,70 @@
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
</view>
<view class="containerBg1">
<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="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="txt555">
{{item.title}}
</view>
<view class="jianjie" v-html="item.content">
</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" />
</view>
<view class="btn_box">
<text>了解课程</text>
</view>
</view>
<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>
</view>
<view class="buyItems">
<view class="txt555">
{{item.title}}
</view>
<view class="jianjie" v-html="item.content">
</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" />
</view>
<view class="btn_box">
<text>了解课程</text>
</view>
</view>
</view>
<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>
<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> -->
<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>
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
<!-- </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>
</view>
</template>
<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,
playData: {},
curTagId: 0,
playData: {},
searchValue:'',
// fixed: false,
bgiStyle: {
background: '#fff'
@@ -76,7 +94,7 @@
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
},
userMsg: {}, // 用户信息
scrollTop: 0,
activeStyle: {
@@ -87,30 +105,41 @@
},
scrollable: false,
pageTitle: null,
fixed:false,
tabList: [{id:1, name:'我的课程'},{id:2, name:'在学习'},{id:3, name:'已过期'}], // 目录列表
pageTitle: null,
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,17 +238,16 @@
})
.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 // 暂无数据
}
console.log('status', this.MyCourseList.status)
@@ -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) {
@@ -213,21 +343,111 @@
});
// }
},
// 跳转
onPageJump(url,id) {
onPageJump(url, id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
},
},
};
</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>