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

1.首页课程栏目选完之后再回来被重置的问题

Browse Source
This commit is contained in:
liuyuan
2025-01-23 14:09:03 +08:00
parent c043408e68
commit b24119a549
8 changed files with 995 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

558
pages/course/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view>
<view class="courseWrap">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle" @back='handleBack'><view class="curseSet" slot="right" @click="shuomingPage('/pages/course/courseSet',tagId,pid)"><uni-icons type="info" size="24"></uni-icons> 课程说明</view></z-nav-bar>
@@ -8,28 +8,14 @@
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; background-color:#fff; padding-right: 15px; height: 50px;"></u-tabs>
</view>
<view class="containerBg">
<view class="containerBg" v-if="tagId!='71'">
<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="buyItems flexbox">
<view class="txt555">
{{item.title}}
</view>
</view>
</view>
</view> -->
<view class="newBox">
<view class="item flexbox" v-for="(item, index) in courseList" :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>
@@ -57,263 +43,297 @@
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
<view>
<!-- <u-back-top scroll-top="100"></u-back-top> -->
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
:iconStyle="iconStyle"></u-back-top>
</view>
<public-module></public-module>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
<view class="formBlock" v-if="tagId=='71'">
<view v-for="(item,index) in formList" :key="index" class="form_item">
<text class="form_title">{{item.title}}</text>
<view class="form_solid">
<view class="form_des">{{item.des}}</view>
<u-button class="form_btn" @click="test(item)">进入测试</u-button>
</view>
</view>
<public-module></public-module>
<z-navigation></z-navigation>
</view>
</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,
pid:null,
fixed: false,
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: '',
tabList: [],
curTagId: 0,
courseList: [],
status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
page: 1,
flag: true, // 函数是否执行完
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.tagId = e.id
this.pageTitle = e.title
this.pid = e.pid
console.log(e, '传入分类id')
this.getCateList(this.tagId)
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
// console.log(this.scrollTop,'this.scrollTop')
},
onPullDownRefresh() {
console.log('下拉刷新')
this.status = 3
this.page = 1
this.courseList = []
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,
pid:null,
fixed: false,
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)'
},
subList: [],
scrollable: false,
pageTitle: '',
tabList: [],
curTagId: 0,
courseList: [],
status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
page: 1,
flag: true, // 函数是否执行完
//心身量表
formList: []
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.tagId = e.id
this.pageTitle = e.title
this.pid = e.pid
this.getCateList(this.tagId)
//如果是心身量表栏目
if(this.tagId=='71'){
this.getFormList();
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
},
onPullDownRefresh() {
this.status = 3
this.page = 1
this.courseList = []
this.getData(this.subTabId)
uni.stopPullDownRefresh()
},
onReachBottom() {
if (this.status != 2 && this.flag) {
this.page++
this.getData(this.subTabId)
uni.stopPullDownRefresh()
}
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
//隐藏原生的tabbar
uni.hideTabBar();
uni.removeStorageSync('data')
uni.removeStorageSync('selectedData')
uni.removeStorageSync('resList')
},
components: {
musicPlay
},
//方法
methods: {
handleBack(){
uni.setStorageSync('fixed',true)
},
onReachBottom() {
if (this.status != 2 && this.flag) {
this.page++
this.getData(this.subTabId)
}
console.log('触底加载', this.page)
surl(imageurl) {
return `url(${imageurl})`
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
components: {
musicPlay
},
//方法
methods: {
handleBack(){
uni.setStorageSync('fixed',true)
},
surl(imageurl) {
return `url(${imageurl})`
},
getCateList(id) {
$http.request({
url: "medical/home/getChildCourseMedicalTree",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": id,
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
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)
}
}else{
getCateList(id) {
$http.request({
url: "medical/home/getChildCourseMedicalTree",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": id,
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
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 = id
this.getData(id)
}
console.log(this.curTagId, '当前高亮')
}
}).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);
}
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
},
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
this.subList = []
this.subTabId = null
}
} else if (this.page > 1) {
this.status = 2 // 加载完成
} else {
this.status = 3 // 暂无数据
}
console.log('status', this.status)
this.flag = true
if (this.subTabId) {
// console.log(this.subTabId, this.subList[0].title, '初始进入')
this.courseList = []
this.status = 1
this.getData(this.subTabId)
}
}else{
this.subList = []
this.subTabId = id
this.getData(id)
}
}).catch(e => {
this.flag = true
console.log(e, '数据报错')
this.status = 3
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
});
},
// 跳转
onPageJump(url,id) {
uni.navigateTo({
url: `${url}?id=${id}`
console.log(this.curTagId, '当前高亮')
}
}).catch(e => {
console.log(e, '获取子分类报错')
});
},
shuomingPage(url,id,pid){
uni.navigateTo({
url: `${url}?id=${id}&pid=${pid}`
});
}
},
};
fatherClick(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) {
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 => {
this.flag = true
console.log(e, '数据报错')
this.status = 3
uni.showToast({
title:`获取数据失败`,
icon:'error'
})
});
},
// 跳转
onPageJump(url,id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
},
shuomingPage(url,id,pid){
uni.navigateTo({
url: `${url}?id=${id}&pid=${pid}`
});
},
//心身量表
getFormList() {
$http.request({
url: "common/selfEvaluationForm/formList",
method: "POST",
data: {},
header: {
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
this.formList = res.formList;
}
}).catch(e => {
});
},
//进入测试
test(item){
uni.setStorageSync('data',JSON.stringify(item))
uni.navigateTo({
url: '/pages/course/scale'
})
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.courseWrap{
height: 100vh;
background-color: #f4f7ff;
}
.containerBg {
background-color: $containerColor;
padding: 0 20rpx;
@@ -424,8 +444,8 @@
}
.learnBox {
// background-color: #fff;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
.learn {
flex-wrap: wrap;
@@ -458,4 +478,40 @@
}
}
}
.formBlock{
background-color: #f4f7ff;
padding: 20rpx;
}
.form_item{
margin-bottom: 50rpx;
}
.form_solid{
border-radius: 20rpx;
background-color: #fff;
padding: 20rpx 20rpx 50rpx;
box-shadow: 0px 0px 10px 0px #a7bbe4;
}
.form_title{
display: inline-block;
width: 100%;
font-size: 42rpx;
color: #333;
text-align: center;
padding: 30rpx 0 20rpx;
}
.form_des{
font-size: 30rpx;
line-height: 48rpx;
color: #666;
}
.form_btn{
width: 300rpx;
height: 70rpx;
margin: 40rpx auto 0;
color: #fff;
font-size: 30rpx;
background: #258feb;
border-radius: 10rpx;
}
</style>