mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
583 lines
16 KiB
Vue
583 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<view style="line-height: 34upx;height: 35upx;padding-right: 40upx;font-size: 32upx;">
|
||
<!-- <text style="color: #666;font-size: 30rpx;">筛选</text> -->
|
||
<image @click="showFilter()" src="../../static/images/filter.png" style="width: 36upx;height: 36upx;vertical-align: middle;"></image>
|
||
<text v-if="clearswitch" class="clearsift" @click="clearsf()">清除筛选</text>
|
||
</view>
|
||
<!-- ${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" style="margin-bottom: 400upx;">
|
||
<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">
|
||
<view class="filter-option" :class="{'filter-checked':course.orderType==1}" @click="setCourseFilter('orderType',1)">最新</view>
|
||
<view class="filter-option" :class="{'filter-checked':course.orderType==2}" @click="setCourseFilter('orderType',2)">最热</view>
|
||
</view>
|
||
<view class="filter-title">授课方式</view>
|
||
<view class="filter-body">
|
||
<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="">
|
||
|
||
</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="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>
|
||
<view v-if="type==2">
|
||
<view class="filter-item">
|
||
<view v-if="noOrder" class="filter-title">排序</view>
|
||
<view v-if="noOrder" class="filter-body">
|
||
<view class="filter-option" :class="{'filter-checked':article.orderType==1}" @click="setArticleFilter('orderType',1)">最新</view>
|
||
<view class="filter-option" :class="{'filter-checked':article.orderType==2}" @click="setArticleFilter('orderType',2)">最热</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="type==4">
|
||
<view class="filter-item">
|
||
<view v-if="noOrder" class="filter-title">排序</view>
|
||
<view v-if="noOrder" class="filter-body">
|
||
<view class="filter-option" :class="{'filter-checked':qa.orderType==1}" @click="setQaFilter('orderType',1)">最新</view>
|
||
<view class="filter-option" :class="{'filter-checked':qa.orderType==2}" @click="setQaFilter('orderType',2)">最热</view>
|
||
</view>
|
||
<view class="filter-title">是否解决</view>
|
||
<view class="filter-body">
|
||
<view class="filter-option" :class="{'filter-checked':qa.isResolve==0}" @click="setQaFilter('isResolve',0)">待解决</view>
|
||
<view class="filter-option" :class="{'filter-checked':qa.isResolve==1}" @click="setQaFilter('isResolve',1)">已解决</view>
|
||
</view>
|
||
<view class="filter-title">是否精华问题</view>
|
||
<view class="filter-body">
|
||
<view class="filter-option" :class="{'filter-checked':qa.isEssence==1}" @click="setQaFilter('isEssence',true)">精华问题</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="filter-footer">
|
||
<!-- <view class="filter-footer-reset" @click="resetCourseFilter()"> 重 置 </view> -->
|
||
<view class="filter-footer-submit" @click="submit()"> 选择好了，返回课程列表页 </view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import apiSysType from '@/api/modules/type.js'
|
||
import apiScence from '@/api/modules/scene.js'
|
||
export default{
|
||
props:{
|
||
noOrder:{
|
||
type: Boolean,
|
||
default:true
|
||
},
|
||
type: {
|
||
type: Number,
|
||
required:true
|
||
},
|
||
filterWidth:{
|
||
type:String,
|
||
default:'100%'
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
clearswitch:false,
|
||
courseSysTypeTree:[],
|
||
courseScenceList:[],
|
||
filterShow:false,//是否显示过虑器
|
||
// filterWidth:'300px',
|
||
sysTypeTow:[],
|
||
sysTypeThree:[],
|
||
course:{
|
||
orderType:-1,//表未选中，排序，最新，最热
|
||
courseType:-1,//表未选中
|
||
scenes:[],
|
||
sysType1:{},
|
||
sysType2:{},
|
||
sysType3:{}
|
||
},
|
||
article:{
|
||
orderType:-1
|
||
},
|
||
qa:{
|
||
orderType:-1,
|
||
isResolve:-1,
|
||
isEssence:-1
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.filterWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
|
||
this.loadData();
|
||
this.clswitch();
|
||
|
||
},
|
||
computed:{
|
||
filterTags(){ //过滤标签
|
||
let tags=[];
|
||
if(this.type==1){ //课程
|
||
let filters=this.course;
|
||
if(filters.orderType==1){
|
||
tags.push({type:'orderType',text:'最新',value:1})
|
||
}else if(filters.orderType==2){
|
||
tags.push({type:'orderType',text:'最新',value:2})
|
||
}
|
||
if(filters.courseType>-1){
|
||
if(filters.courseType==10){
|
||
tags.push({type:'courseType',text:'微课',value:10})
|
||
}else if(filters.courseType==20){
|
||
tags.push({type:'courseType',text:'录播课',value:20})
|
||
}else if(filters.courseType==30){
|
||
tags.push({type:'courseType',text:'面授课',value:30})
|
||
}else if(filters.courseType==40){
|
||
tags.push({type:'courseType',text:'学习项目',value:40})
|
||
}
|
||
}
|
||
if(filters.scenes.length>0){
|
||
filters.scenes.forEach(sc=>{
|
||
tags.push({type:'scenes',text:sc.name,value:sc.id})
|
||
})
|
||
}
|
||
|
||
if(!filters.sysType1){
|
||
tags.push({type:'sysType1',text:filters.sysType1.name,value:filters.sysType1.id})
|
||
}
|
||
if(!filters.sysType2){
|
||
tags.push({type:'sysType2',text:filters.sysType2.name,value:filters.sysType2.id})
|
||
}
|
||
if(!filters.sysType3){
|
||
tags.push({type:'sysType3',text:filters.sysType3.name,value:filters.sysType3.id})
|
||
}
|
||
}else if(this.type==2){
|
||
if(this.article.orderType==1){
|
||
tags.push({type:'orderType',text:'最新',value:1})
|
||
}else if(this.article.orderType==2){
|
||
tags.push({type:'orderType',text:'最新',value:2})
|
||
}
|
||
}else if(this.type==4){
|
||
if(this.qa.orderType==1){
|
||
tags.push({type:'orderType',text:'最新',value:1})
|
||
}else if(this.qa.orderType==2){
|
||
tags.push({type:'orderType',text:'最新',value:2})
|
||
}
|
||
if(this.qa.isResolve==0){
|
||
tags.push({type:'isResolve',text:'待解决',value:false})
|
||
}else if(this.qa.isResolve==1){
|
||
tags.push({type:'isResolve',text:'已解决',value:true})
|
||
}
|
||
if(this.qa.isEssence==1){
|
||
tags.push({type:'isEssence',text:'精华问题',value:true})
|
||
}
|
||
}
|
||
return tags;
|
||
}
|
||
},
|
||
methods:{
|
||
clswitch(){
|
||
if(this.filterTags.length == 3 || this.filterTags.length == 0){
|
||
console.log(this.filterTags.length)
|
||
this.clearswitch = false;
|
||
}else{
|
||
this.clearswitch = true;
|
||
}
|
||
},
|
||
// 清除筛选
|
||
clearsf(){
|
||
console.log(this.filterTags);
|
||
if(this.type==1){//生成课程查询条件
|
||
let params={
|
||
pageIndex:1,
|
||
pageSize:20,
|
||
name:'',
|
||
keyword:'',
|
||
publish:true,
|
||
device:2,
|
||
type:'',
|
||
sysType1:'',
|
||
sysType2:'',
|
||
sysType3:'',
|
||
scenes:'',
|
||
orderField:'',
|
||
orderAsc:false,
|
||
cateName:''
|
||
}
|
||
this.$emit('submit',this.filterTags,params);
|
||
this.clearswitch = false;
|
||
}
|
||
this.course.sysType1 = '';
|
||
this.course.sysType2 = '';
|
||
this.course.sysType3 = '';
|
||
this.course.orderType = -1;
|
||
this.course.courseType = -1;
|
||
this.course.scenes = [];
|
||
|
||
console.log('清除成功')
|
||
},
|
||
stopRoll(){},
|
||
toNewLink(){
|
||
location.href='https://m.qingxuetang.com/x/?appId=qxtcorp306130';
|
||
},
|
||
loadData(){
|
||
apiSysType.tree(1).then(rs=>{
|
||
this.courseSysTypeTree=rs.result;
|
||
});
|
||
apiScence.list(1).then(rs=>{
|
||
this.courseScenceList=rs.result;
|
||
});
|
||
},
|
||
showFilter(){
|
||
this.filterShow=true;
|
||
},
|
||
closeFilter(){
|
||
this.filterShow=false;
|
||
},
|
||
checkScence(scence){
|
||
return this.course.scenes.some((sc,scIdx)=>{
|
||
return sc.id==scence.id;
|
||
})
|
||
},
|
||
setArticleFilter(strType,value){
|
||
if(strType=='orderType'){
|
||
this.article.orderType=value;
|
||
}
|
||
},
|
||
setQaFilter(strType,value){
|
||
if(strType=='orderType'){
|
||
this.qa.orderType=value;
|
||
}
|
||
if(strType=='isResolve'){
|
||
this.qa.isResolve=value;
|
||
}
|
||
if(strType=='isEssence'){
|
||
if(this.qa.isEssence==-1){
|
||
this.qa.isEssence=1;
|
||
}else{
|
||
if(this.qa.isEssenc==1){
|
||
this.qa.isEssence=0;
|
||
}else{
|
||
this.qa.isEssence=1;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
setCourseFilter(strType,value){
|
||
if(strType=='orderType'){
|
||
this.course.orderType=value;
|
||
}else if(strType=='courseType'){
|
||
this.course.courseType=value;
|
||
}else if(strType=='scence'){
|
||
//检查是否已存在，如果已存 就去掉，如果不存在就添加
|
||
let hasIdx=-1;
|
||
this.course.scenes.some((sc,scIdx)=>{
|
||
if(sc.id==value.id){
|
||
hasIdx=scIdx;
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
if(hasIdx>-1){
|
||
this.course.scenes.splice(hasIdx,1);
|
||
}else{
|
||
this.course.scenes.push({id:value.id,name:value.name});
|
||
}
|
||
|
||
}else if(strType=='sysType1'){
|
||
this.course.sysType1=value;
|
||
this.sysTypeTow = value.children;
|
||
this.course.sysType2 = {};
|
||
this.course.sysType3={};
|
||
this.sysTypeThree = [];
|
||
}else if(strType=='sysType2'){
|
||
this.course.sysType2=value;
|
||
this.sysTypeThree = value.children;
|
||
this.course.sysType3={};
|
||
}else if(strType=='sysType3'){
|
||
this.course.sysType3=value;
|
||
}
|
||
},
|
||
moreFilters(){
|
||
//转向更多
|
||
},
|
||
resetCourseFilter(){
|
||
if(this.type==1){
|
||
this.course.orderType=-1;
|
||
this.course.courseType=-1;
|
||
this.course.scenes=[];
|
||
this.course.sysType1='';
|
||
this.course.sysType2='';
|
||
this.course.sysType3='';
|
||
}else if(this.type==2){
|
||
this.article.orderType=-1;
|
||
}else if(this.type==4){
|
||
this.qa.orderType=-1;
|
||
this.qa.isResolve=-1;
|
||
this.qa.isEssence=-1;
|
||
}
|
||
this.filterShow=false;
|
||
this.$emit('reset');
|
||
},
|
||
submit(){
|
||
this.filterShow=false;
|
||
if(this.type==1){//生成课程查询条件
|
||
let params={
|
||
pageIndex:1,
|
||
pageSize:20,
|
||
name:'',
|
||
keyword:'',
|
||
publish:true,
|
||
device:2,
|
||
type:'',
|
||
sysType1:'',
|
||
sysType2:'',
|
||
sysType3:'',
|
||
scenes:'',
|
||
orderField:'',
|
||
orderAsc:false,
|
||
cateName:''
|
||
}
|
||
if(this.course.orderType==1){
|
||
params.orderField='id';
|
||
}else if(this.course.orderType==2){
|
||
params.orderField='studys';
|
||
}
|
||
if(this.course.courseType>-1){
|
||
params.type=this.course.courseType;
|
||
}
|
||
if(this.course.sysType1!=''){
|
||
params.sysType1=this.course.sysType1.id;
|
||
params.cateName=this.course.sysType1.name;
|
||
}
|
||
if(this.course.sysType2!=''){
|
||
params.sysType2=this.course.sysType2.id;
|
||
}
|
||
if(this.course.sysType3!=''){
|
||
params.sysType3=this.course.sysType3.id;
|
||
}
|
||
if(this.course.scenes.length>0){
|
||
let scids=[];
|
||
this.course.scenes.forEach(sc=>{
|
||
scids.push(sc.id);
|
||
})
|
||
params.scenes=scids.join();
|
||
}
|
||
//let tags=this.getFilterTags();
|
||
|
||
this.$emit('submit',this.filterTags,params);
|
||
}else if(this.type==2){//生成文章查询条件
|
||
let params={
|
||
pageIndex:1,
|
||
pageSize:20,
|
||
order:''
|
||
}
|
||
if(this.article.orderType>-1){
|
||
params.order=this.article.orderType;
|
||
}
|
||
this.$emit('submit',this.filterTags,params);
|
||
}else if(this.type==4){
|
||
let params={
|
||
pageIndex:1,
|
||
pageSize:20,
|
||
keyword:'',
|
||
isEssence:'',
|
||
isResolve:'',
|
||
orderField:'',
|
||
orderAsc:false,
|
||
status:1
|
||
}
|
||
if(this.qa.orderType==1){
|
||
params.orderField='id';
|
||
}else if(this.qa.orderType==2){
|
||
params.orderField='views';
|
||
}
|
||
if(this.qa.isResolve==0){
|
||
params.isResolve=false;
|
||
}else if(this.qa.isResolve==1){
|
||
params.isResolve=true;
|
||
}
|
||
|
||
if(this.qa.isEssence==0){
|
||
params.isEssence=false;
|
||
}else if(this.qa.isEssence==1){
|
||
params.isEssence=true;
|
||
}
|
||
|
||
this.$emit('submit',this.filterTags,params);
|
||
}
|
||
console.log(this.filterTags.length,'llll')
|
||
this.clswitch();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.clearsift{
|
||
font-size: 24upx;
|
||
color: #666;
|
||
margin-left: 10upx;
|
||
}
|
||
|
||
/deep/ .u-popup__content{
|
||
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: #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 32upx;
|
||
// text-align: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.filter-option{
|
||
// font-weight: 620;
|
||
// background-color: #000000;
|
||
background-color: #F7F7F7;
|
||
border-radius: 34rpx;
|
||
// border: 1px solid #cacaca;
|
||
padding: 12upx 50upx;
|
||
display: inline-block;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
// width: 180rpx;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-bottom: 10upx;
|
||
margin-top: 10upx;
|
||
box-sizing: border-box;
|
||
}
|
||
.filter-checked{
|
||
// background-color:#feeae9;
|
||
color: #387DF7;
|
||
// margin: 10upx ;
|
||
// box-sizing: border-box;
|
||
// height: 64rpx;
|
||
// border: 1rpx solid #e2331e;
|
||
}
|
||
}
|
||
}
|
||
.filter-footer{
|
||
position: fixed;
|
||
bottom: 126upx;
|
||
left: 0;
|
||
right:0;
|
||
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;
|
||
padding: 20upx 80upx;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
border-radius: 40upx;
|
||
}
|
||
.filter-footer-submit{
|
||
padding: 0 68upx;
|
||
// width: 236px;
|
||
height: 96upx;
|
||
line-height: 96upx;
|
||
text-align: center;
|
||
background: linear-gradient(112deg, #5491FD 0%, #2A58FA 100%);
|
||
border-radius: 48upx;
|
||
font-size: 28upx;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
</style>
|