hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-08 18:36:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页课程筛选

Browse Source
This commit is contained in:
zhaofang
2022-11-09 16:20:34 +08:00
parent 292c5dd515
commit a55bc83772
5 changed files with 139 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/course-list/course-list.vue
View File

@@ -95,7 +95,7 @@
bottom: -2upx;
color: #FFFFFF;
font-size: 28upx;
z-index: 99999;
z-index: 99;
width: 136upx;
height: 44upx;
background: #1767FF;

177
components/data-filter/data-filter.vue
View File

@@ -4,9 +4,13 @@
<!-- <text style="color: #666;font-size: 30rpx;">筛选</text> -->
<image src="../../static/images/filter.png" style="width: 36upx;height: 36upx;vertical-align: middle;"></image>
</view>
<u-popup :show="filterShow" mode="right" @close="closeFilter" :safeAreaInsetTop="true" :closeable="true">
<view :style="`width: ${filterWidth};padding-top: 5px;`" style="height: 100vh; overflow: auto;">
<!-- ${filterWidth} -->
<u-popup :show="filterShow" mode="center" @close="closeFilter" :safeAreaInsetTop="true" :closeable="false">
<view :style="{width:filterWidth}" style="height: 100vh;padding-top: 32upx; overflow: auto;position: relative;">
<view v-if="type==1" >
<view class="filter-title-top">
<u-icon @click="filterShow = false" class="icon" name="arrow-left" color="#333333" size="20"></u-icon>课程分类
</view>
<view class="filter-item">
<view v-if="noOrder" class="filter-title">排序</view>
<view v-if="noOrder" class="filter-body">
@@ -15,28 +19,28 @@
</view>
<view class="filter-title">授课方式</view>
<view class="filter-body">
<!-- <view class="filter-option" :class="{'filter-checked':course.courseType==10}" @click="setCourseFilter('courseType',10)">微课</view> -->
<view class="filter-option" :class="{'filter-checked':course.courseType==20}" @click="setCourseFilter('courseType',20)">录播课</view>
<view class="filter-option" :class="{'filter-checked':course.courseType==30}" @click="setCourseFilter('courseType',30)">线下课</view>
<view class="filter-option" :class="{'filter-checked':course.courseType==40}" @click="setCourseFilter('courseType',40)">学习项目</view>
</view>
<!-- <view class="filter-title">应用场景</view>
<view class="filter-body">
<view class="filter-option"
v-for="scence in courseScenceList"
:key="scence.id"
:class="{'filter-checked':checkScence(scence)}"
@click="setCourseFilter('scence',scence)">{{scence.name}}</view>
</view> -->
<view class="filter-title">内容分类</view>
<view class="filter-title" style="margin-top: 10upx;">内容分类</view>
<view class="filter-body">
<view class="filter-option"
v-for="sysType in courseSysTypeTree"
:key="sysType.id"
:class="{'filter-checked':course.sysType1.id==sysType.id}"
@click="setCourseFilter('sysType1',sysType)">{{sysType.name}}</view>
<!-- <view class="filter-option" @click="moreFilters('sysTypeMore',0)">更多</view> -->
<view class="filter-option" @click="toNewLink">U选小课堂</view>
<!-- <view class="filter-option" @click="toNewLink">U选小课堂</view> -->
</view>
<view class="sys-type" v-if="sysTypeTow.length > 0">
<text class="sys-type-name">{{course.sysType1.name}}</text>
<view class="sys-type-tow">
<text class="type-option" v-for="tow in sysTypeTow" :key="tow.id" :class="{'filter-checked':course.sysType2.id==tow.id}" @click="setCourseFilter('sysType2',tow)">{{tow.name}}</text>
</view>
<view class="sys-type-three">
<text class="type-option-three" v-for="three in sysTypeThree" :key="three.id" :class="{'filter-checked':course.sysType3.id==three.id}" @click="setCourseFilter('sysType3',three)">{{three.name}}</text>
</view>
</view>
</view>
</view>
@@ -69,8 +73,8 @@
</view>
</view>
<view class="filter-footer">
<view class="filter-footer-reset" @click="resetCourseFilter()"> 重 置 </view>
<view class="filter-footer-submit" @click="submit()"> 确 定 </view>
<!-- <view class="filter-footer-reset" @click="resetCourseFilter()"> 重 置 </view> -->
<view class="filter-footer-submit" @click="submit()"> 选择好了，返回课程列表页 </view>
</view>
</view>
</u-popup>
@@ -89,21 +93,27 @@
type: {
type: Number,
required:true
}
},
filterWidth:{
type:String,
default:'100%'
}
},
data(){
return{
courseSysTypeTree:[],
courseScenceList:[],
filterShow:false,//是否显示过虑器
filterWidth:'300px',
filterShow:true,//是否显示过虑器
// filterWidth:'300px',
sysTypeTow:[],
sysTypeThree:[],
course:{
orderType:-1,//表未选中，排序，最新，最热
courseType:-1,//表未选中
scenes:[],
sysType1:'',
sysType2:'',
sysType3:''
sysType1:{},
sysType2:{},
sysType3:{}
},
article:{
orderType:-1
@@ -116,7 +126,7 @@
}
},
mounted() {
this.filterWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
// this.filterWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
this.loadData();
},
computed:{
@@ -249,6 +259,15 @@
}else if(strType=='sysType1'){
this.course.sysType1=value;
this.sysTypeTow = value.children;
this.course.sysType2 = {};
this.course.sysType3={};
}else if(strType=='sysType2'){
this.course.sysType2=value;
this.sysTypeThree = value.children;
this.course.sysType3={};
}else if(strType=='sysType3'){
this.course.sysType3=value;
}
},
moreFilters(){
@@ -368,56 +387,117 @@
<style lang="scss" scoped>
/deep/ .u-popup__content{
border-radius: 17px 0 0rpx 17px;
width: 100%;
// border-radius: 17px 0 0rpx 17px;
}
/deep/ .u-icon__icon{
top: 0px !important;
}
.filter-title-top{
height: 150upx;
line-height: 150upx;
text-align: center;
font-size: 36upx;
font-weight: 600;
color: #333333;
position: relative;
.icon{
position: absolute;
top:50upx;
left:40upx;
}
}
.filter-item{
padding: 10upx;
.filter-title{
padding: 10upx 18upx;
color: #2d2d2d;
font-size: 28rpx;
color: #333333;
font-size: 32rpx;
font-weight: bold;
}
.sys-type{
margin: 20upx;
padding: 28upx 20upx;
background: #F7F7F7;
border-radius: 8upx;
.sys-type-name{
margin-left: 12upx;
font-size: 28upx;
color: #333333;
}
.filter-checked{
color: #387DF7 !important;
}
.sys-type-tow{
margin-top: 40upx;
.type-option{
display: inline-block;
height: 60upx;
background: #FFFFFF;
border-radius: 34upx;
line-height: 60upx;
text-align: center;
color: #666666;
font-size: 28upx;
padding: 6upx 36upx;
margin-right: 28upx;
margin-bottom: 28upx;
}
}
.sys-type-three{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.type-option-three{
font-size: 28upx;
color: #666666;
}
}
}
.filter-body{
padding: 10upx 55upx;
padding: 10upx 32upx;
// text-align: center;
//display: flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.filter-option{
// font-weight: 620;
// background-color: #000000;
background-color: #f9f9f9;
border-radius: 45rpx;
background-color: #F7F7F7;
border-radius: 34rpx;
// border: 1px solid #cacaca;
padding: 12upx 12upx;
padding: 12upx 50upx;
display: inline-block;
height: 64rpx;
height: 60rpx;
text-align: center;
width: 190rpx;
// width: 180rpx;
font-size: 26rpx;
color: #1d1d1d;
margin: 10upx ;
color: #666666;
margin-bottom: 10upx;
margin-top: 10upx;
box-sizing: border-box;
}
.filter-checked{
background-color:#feeae9;
color: #e2331e;
margin: 10upx ;
box-sizing: border-box;
height: 64rpx;
border: 1rpx solid #e2331e;
// background-color:#feeae9;
color: #387DF7;
// margin: 10upx ;
// box-sizing: border-box;
// height: 64rpx;
// border: 1rpx solid #e2331e;
}
}
}
.filter-footer{
display: flex;
justify-content: center;
margin-top: 84upx;
padding-bottom: 30upx;
padding-top: 20upx;
.filter-footer-reset{
margin: 10upx;
border: 1px solid #FFB30F;
color: #FFB30F;
@@ -427,13 +507,16 @@
border-radius: 40upx;
}
.filter-footer-submit{
margin: 10upx;
font-size: 24rpx;
background-color:#FFB30F;
color: #FFFFFF;
padding: 20upx 80upx;
padding: 0 68upx;
// width: 236px;
height: 96upx;
line-height: 96upx;
text-align: center;
border-radius: 40upx;
background: linear-gradient(112deg, #5491FD 0%, #2A58FA 100%);
border-radius: 48upx;
font-size: 28upx;
font-weight: 600;
color: #FFFFFF;
}
}
</style>

2
components/recommend-index/recommend-index.vue
View File

@@ -217,7 +217,7 @@
},
//推荐文章
getArtData() {
apiIndex.articlelist(2).then(res=>{
apiIndex.mobieArticle(2).then(res=>{
if(res.status == 200) {
let ids = [];
res.result.forEach(item=>{