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

11

Browse Source
This commit is contained in:
@fawn-nine
2024-05-30 16:37:36 +08:00
parent a91d21553a
commit 195ab86c8a
3 changed files with 112 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
pages/course/index.vue
View File

@@ -3,16 +3,18 @@
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle"></z-nav-bar>
<u-tabs v-if="tabList.length > 0" class="tabList" @click="fatherClick" :current="curTagId" :activeStyle="activeStyle"
:scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; background-color:#fff; padding-right: 15px; height: 50px;"></u-tabs>
<view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
: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="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="learn flexbox shiting">
<view class="item" v-for="(item, index) in courseList" :key="index">
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
@@ -23,6 +25,30 @@
</view>
</view>
</view>
</view> -->
<view class="newBox">
<view class="item flexbox" v-for="(item, index) in courseList" :key="index">
<!-- <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 style="margin-right: 10rpx;" text="高级" type="primary" size="small" />
<uni-tag style="margin-right: 10rpx;" text="选修" size="small" type="success" />
</view>
<view class="btn_box">
<text>课程详情</text>
</view>
</view>
</view>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
@@ -30,7 +56,8 @@
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle'
<!-- <u-back-top scroll-top="100"></u-back-top> -->
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
<public-module></public-module>
@@ -52,6 +79,7 @@
return {
playData: {},
tagId: null,
fixed: false,
fatherTabId: null,
subTabId: null, //
bgiStyle: {
@@ -73,13 +101,10 @@
subList: [],
scrollable: false,
pageTitle: '',
tabList: [{
name: 111,
id: 1
}],
curTagId:0,
tabList: [],
curTagId: 0,
courseList: [],
status: 0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
page: 1,
flag: true, // 函数是否执行完
};
@@ -93,6 +118,15 @@
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')
},
onReachBottom() {
if (this.status != 2) {
this.page++
@@ -115,6 +149,9 @@
},
//方法
methods: {
surl(imageurl) {
return `url(${imageurl})`
},
getCateList(id) {
$http.request({
url: "medical/home/getChildCourseMedicalTree",
@@ -156,7 +193,7 @@
}
}
}
console.log(this.curTagId, '当前高亮')
}
}).catch(e => {
@@ -253,6 +290,63 @@
}
.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 {
margin-top: 10px;
margin-bottom: 5px;
@@ -289,16 +383,13 @@
}
.box {
background-color: #fff;
@include pleft_right(10px);
// background-color: #fff;
min-height: calc(100vh - 270rpx);
}
.learnBox {
background-color: #fff;
// background-color: #fff;
margin-top: 10px;
@include ptop_bottm(10px);
@include pleft_right(10px);
.learn {
flex-wrap: wrap;