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

2022年5月29日 从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:59:24 +08:00
parent 9580ff8c9b
commit faa7afb65f
897 changed files with 171836 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

439
components/data-filter/data-filter.vue Normal file
View File

@@ -0,0 +1,439 @@
<template>
<view>
<view @click="showFilter()" style="line-height: 34upx;height: 35upx;padding-right: 20upx;font-size: 32upx;">
<text style="color: #666;font-size: 30rpx;">筛选</text>
<image src="../../static/images/filter.png" style="width: 38upx;height: 38upx;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;">
<view v-if="type==1" >
<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==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-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>
</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
}
},
data(){
return{
courseSysTypeTree:[],
courseScenceList:[],
filterShow:false,//是否显示过虑器
filterWidth:'300px',
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();
},
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:{
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;
}
},
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);
}
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .u-popup__content{
border-radius: 17px 0 0rpx 17px;
}
/deep/ .u-icon__icon{
top: 0px !important;
}
.filter-item{
padding: 10upx;
.filter-title{
padding: 10upx 18upx;
color: #2d2d2d;
font-size: 28rpx;
font-weight: bold;
}
.filter-body{
padding: 10upx 55upx;
// text-align: center;
//display: flex;
.filter-option{
// font-weight: 620;
// background-color: #000000;
background-color: #f9f9f9;
border-radius: 45rpx;
// border: 1px solid #cacaca;
padding: 12upx 12upx;
display: inline-block;
height: 64rpx;
text-align: center;
width: 190rpx;
font-size: 26rpx;
color: #1d1d1d;
margin: 10upx ;
box-sizing: border-box;
}
.filter-checked{
background-color:#feeae9;
color: #e2331e;
margin: 10upx ;
box-sizing: border-box;
height: 64rpx;
border: 1rpx solid #e2331e;
}
}
}
.filter-footer{
display: flex;
justify-content: center;
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{
margin: 10upx;
font-size: 24rpx;
background-color:#FFB30F;
color: #FFFFFF;
padding: 20upx 80upx;
text-align: center;
border-radius: 40upx;
}
}
</style>