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-05-30 14:24:41 +08:00
parent 97b70afa01
commit 629c59989c
4 changed files with 434 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages.json
View File

@@ -234,6 +234,13 @@
"enablePullDownRefresh": false
}
},
{
"path" : "pages/course/tryListen",
"style" :
{
"navigationBarTitleText" : "试听列表"
}
},
{
"path" : "pages/course/index",
"style" :

282
pages/course/index.vue
View File

@@ -3,31 +3,40 @@
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle"></z-nav-bar>
<view class="learnBox box" v-if="courseList.length > 0">
<view class="learn flexbox shiting">
<view class="item" v-for="(item, index) in courseList" :key="index">
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems flexbox">
<view class="txt555">
{{item.title}}
<u-tabs v-if="tabList.length > 0" class="tabList" @click="fatherClick" :activeStyle="activeStyle"
:scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; background-color:#fff; padding-right: 15px; height: 50px;"></u-tabs>
<view class="containerBg">
<view class="subCate flex" v-if="subList.length> 0">
<text :class="['item',subTabId == item.id ? 'active' : '']" v-for="(item, index) in subList"
@click="curseClick(item)" :key="index">{{item.title}}</text>
</view>
<view class="learnBox box">
<view class="learn flexbox shiting">
<view class="item" v-for="(item, index) in courseList" :key="index">
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
</view>
<!-- <view class="buybtn" @click="onPageJump()">
<span>购买</span>
</view> -->
<view class="buyItems flexbox">
<view class="txt555">
{{item.title}}
</view>
</view>
</view>
</view>
</view>
<u-divider text="已加载全部"></u-divider>
<u-divider text="暂无数据"></u-divider>
<u-divider text="加载中..."></u-divider>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
<public-module></public-module>
<z-navigation></z-navigation>
<music-play :playData="playData"></music-play>
</view>
<public-module></public-module>
<z-navigation></z-navigation>
<music-play :playData="playData"></music-play>
</view>
</template>
@@ -43,8 +52,35 @@
return {
playData: {},
tagId: null,
fatherTabId: null,
subTabId: null, //
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
scrollTop: 0,
activeStyle: {
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.2)',
// backgroundColor: '#258feb'
},
subList: [],
scrollable: false,
pageTitle: '',
courseList: []
tabList: [{
name: 111,
id: 1
}],
courseList: [],
status: 0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
page: 1,
flag: true, // 函数是否执行完
};
},
//第一次加载
@@ -54,6 +90,14 @@
this.tagId = e.id
this.pageTitle = e.title
console.log(e, '传入分类id')
this.getCateList(this.tagId)
},
onReachBottom() {
if (this.status != 2) {
this.page++
this.getData(this.subTabId)
}
console.log('触底加载', this.page)
},
computed: {
...mapState(['userInfo'])
@@ -62,7 +106,7 @@
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getData();
},
components: {
@@ -70,14 +114,12 @@
},
//方法
methods: {
getData() {
getCateList(id) {
$http.request({
url: "medical/home/getMarketCourseList",
url: "medical/home/getChildCourseMedicalTree",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": this.tagId,
"limit": 12,
"page": 1
"id": id,
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
@@ -85,24 +127,165 @@
})
.then(res => {
if (res.code == 0) {
if (res.courseList.records.length > 0) {
this.courseList = res.courseList.records
} else {
this.courseList = []
if (res.labels.length > 0) {
var list = []
res.labels.forEach(item => {
item.name = item.title
})
this.tabList = res.labels
// this.fatherTabId = this.tabList[0].id
if (this.tabList[0].isLast == 1) { // 终极
this.subList = []
this.subTabId = this.tabList[0].id
} else { //非终极
if (this.tabList[0].children.length > 0) {
this.subList = this.tabList[0].children
this.subTabId = this.subList[0].id
} else {
this.subList = []
this.subTabId = null
}
}
if (this.subTabId) {
console.log(this.subTabId, this.subList[0].title, '初始进入')
this.courseList = []
this.status = 1
this.getData(this.subTabId)
}
}
}
}).catch(e => {
console.log(e, '获取子分类报错')
});
}
},
fatherClick(e) {
// console.log(e, '点击')
this.page = 1
var item = e
if (item.isLast == 1) { // 终极
this.subList = []
this.subTabId = item.id
} else {
if (item.children.length > 0) { // 非终极
this.subList = item.children
this.subTabId = item.children[0].id
} else {
this.subList = []
this.subTabId = null
}
}
if (this.subTabId) {
this.status = 1
this.courseList = []
this.getData(this.subTabId);
}
},
curseClick(item) {
this.subTabId = item.id
this.courseList = []
this.page = 1
this.getData(this.subTabId);
},
getData(id) {
if (!this.flag) {
console.log('正在执行，未完成')
return
}
this.status = 1
this.flag = false
$http.request({
url: "medical/home/getMedicalCourseList",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": id,
"limit": 12,
"page": this.page
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.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 // 暂无数据
}
console.log('status', this.status)
}
this.flag = true
}).catch(e => {
console.log(e, '数据报错')
});
},
// 跳转
onPageJump(url) {
uni.navigateTo({
url: `${url}`
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.flexbox{display: flex; }
.containerBg {
background-color: $containerColor;
padding: 0 20rpx;
}
.subCate {
margin-top: 10px;
margin-bottom: 5px;
.item {
font-size: 28rpx;
background-color: #fff;
border-radius: 10px;
color: #333;
margin-right: 30rpx;
padding: 10rpx 12rpx;
}
.item:last-child() {
margin-right: 0;
}
.item.active {
background-color: $themeColor;
color: #fff;
}
}
.tabList {
text-align: center;
}
.flexbox {
display: flex;
}
.imgcontainer {
background-color: $imgBg;
}
.box {
background-color: #fff;
@include pleft_right(10px);
@@ -114,30 +297,35 @@
margin-top: 10px;
@include ptop_bottm(10px);
@include pleft_right(10px);
.learn { flex-wrap: wrap;
.learn {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
margin-top: 20rpx;
.item {
width: 48%;margin-bottom: 16px;
width: 48%;
margin-bottom: 16px;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 { display: block; text-align: center;
height: 40rpx; width: 100%;
.txt555 {
display: block;
text-align: center;
height: 40rpx;
width: 100%;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}

173
pages/course/tryListen.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle"></z-nav-bar>
<view class="learnBox box" >
<view class="learn flexbox shiting">
<view class="item" v-for="(item, index) in courseList" :key="index">
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems flexbox">
<view class="txt555">
{{item.title}}
</view>
<!-- <view class="buybtn" @click="onPageJump()">
<span>购买</span>
</view> -->
</view>
</view>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
<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,
pageTitle: '',
courseList: [],
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;
}
.box {
background-color: #fff;
@include pleft_right(10px);
min-height: calc(100vh - 270rpx);
}
.learnBox {
background-color: #fff;
margin-top: 10px;
@include ptop_bottm(10px);
@include pleft_right(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>

28
pages/peanut/home.vue
View File

@@ -12,6 +12,7 @@
</view>
</view>
</view>
<button type="default" @click="curseClickJump">去课程中心</button>
<view class="fourBox">
<view class="fourIcon flexbox" style="justify-content: space-around;">
<div class="item flexbox" @click="onPageJump()">
@@ -43,7 +44,7 @@
</view>
<view class="fourBox" v-if="sbuMedicalTagsList && sbuMedicalTagsList.length > 0">
<view class="childrenBox fourIcon flexbox" style="justify-content: space-around;">
<div class="item flexbox" @click="onPageJump()" v-for="(item, index) in sbuMedicalTagsList"
<div class="item flexbox" @click="curseClickJump(item)" v-for="(item, index) in sbuMedicalTagsList"
:key="index">
<image :src="item.icon" mode="aspectFit"></image>
<text>{{item.title}}</text>
@@ -165,8 +166,10 @@
</view>
</view>
</view>
<view class="fourBox" v-if="tryListenList.length > 0">
<view class="learnBox" v-if="tryListenList.length > 0">
<view class="learnBox" >
<view class="titleBox flexbox">
<image src="../../static/try_listen.png" mode="aspectFit"></image>
<text>精彩试听</text>
@@ -188,10 +191,10 @@
</view>
</view>
<view class="moreBox shiting">
<text @click="onPageJump('/pages/course/index',26,'精彩试听')">更多试听</text>
<text @click="onPageJump('/pages/course/tryListen',26,'精彩试听')">更多试听</text>
</view>
</view>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
</view>
@@ -494,7 +497,7 @@
},
curseClick(item) {
this.tabsid = item.id
if (item.isLast == 1) { // 终极
if (item.isLast == 1) { // 非终极
if (item.children && item.children.length > 0) {
this.sbuMedicalTagsList = item.children
} else {
@@ -502,10 +505,16 @@
}
} else {
uni.navigateTo({
url: 'url'
})
url: `/pages/course/index?id=${this.tabsid}&title=${item.title}`
});
}
},
curseClickJump(item){
uni.navigateTo({
url: `/pages/course/index?id=33&title=中医学`
// url: `/pages/course/index?id=${item.id}&title=${item.title}`
});
},
// 获取用户详情
getUserInfo() {
// 用户详情
@@ -523,7 +532,7 @@
uni.navigateTo({
url: `${url}?id=${thatId}&title=${title}`
});
},
},
onPageJumpData(url, data) {
uni.navigateTo({
@@ -853,9 +862,10 @@
.learnBox {
background-color: #fff;
margin-top: 10px;
margin-top: 10px; border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1);margin-bottom: 10px;
.learn {
justify-content: space-between;