首页课程样式

components/course-image/course-image.vue

@@ -7,10 +7,10 @@
 		    mode="aspectFit	" 
 			:src="imageUrl"
 		    @error="imageError"></image>
-			<text v-if="textShow && isTextShow == 1" class="text mid" style="color: #fff !important;" v-html="name"></text>
+			<!-- <text v-if="textShow && isTextShow == 1" class="text mid" style="color: #fff !important;" v-html="name"></text>
 			<text v-if="textShow && isTextShow ==2" class="text mini" style="color: #fff !important;" v-html="name"></text>
-			<text v-if="textShow && isTextShow ==3" class="text max" style="color: #fff !important;" v-html="name"></text>
+			<text v-if="textShow && isTextShow ==3" class="text max" style="color: #fff !important;" v-html="name"></text> -->
-			<!-- <text v-if="textShow && isTextShow ==4" class="text end" style="color: #fff !important;" v-html="name"></text> -->
+			<text class="text" style="color: #fff !important;" v-html="name"></text>
 	</view>
 </template>
 
@@ -118,31 +118,35 @@
 			display: -webkit-box;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			font-size: 1em;
+			top: 36%;
+			left: 7%;
+			-webkit-line-clamp: 2;
 		
 		}
-		.mid{
+		// .mid{
-			font-size: 16upx;
+		// 	font-size: 3em;
-			top: 36%;
+		// 	top: 36%;
-			left: 7%;
+		// 	left: 7%;
-			-webkit-line-clamp: 1;
+		// 	-webkit-line-clamp: 1;
-		}
+		// }
-		.mini{
+		// .mini{
-			font-size: 12upx;
+		// 	font-size: 3em;
-			top: 36%;
+		// 	top: 36%;
-			left: 7%;
+		// 	left: 7%;
-			-webkit-line-clamp: 2;
+		// 	-webkit-line-clamp: 2;
-		}
+		// }
-		.max{
+		// .max{
-			font-size: 38upx;
+		// 	font-size: 3em;
-			top: 36%;
+		// 	top: 36%;
-			left: 7%;
+		// 	left: 7%;
-			-webkit-line-clamp: 3;
+		// 	-webkit-line-clamp: 3;
-		}
+		// }
-		.end{
+		// .end{
-			font-size: 12upx;
+		// 	font-size: 3em;
-			top: 36%;
+		// 	top: 36%;
-			left: 7%;
+		// 	left: 7%;
-			-webkit-line-clamp: 2;
+		// 	-webkit-line-clamp: 2;
-		}
+		// }
 	}
 </style>

components/data-filter/data-filter.vue

@@ -1,8 +1,8 @@
 <template>
 	<view>
-		<view  @click="showFilter()" style="line-height: 34upx;height: 35upx;padding-right: 20upx;font-size: 32upx;">
+		<view  @click="showFilter()" style="line-height: 34upx;height: 35upx;padding-right: 40upx;font-size: 32upx;">
-			<text style="color: #666;font-size: 30rpx;">筛选</text>
+			<!-- <text style="color: #666;font-size: 30rpx;">筛选</text> -->
-			<image src="../../static/images/filter.png" style="width: 38upx;height: 38upx;vertical-align: middle;"></image>
+			<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;">

pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view style="background-color: #fff;">
 		<u-toast ref="messager"></u-toast>
 		<!--页面头部-->
 		<view class="top" style="padding-top: 6px;">
@@ -37,9 +37,9 @@
 					</view>
 				</view>
 			</view>
-			<!-- <view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
+			<view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
-				<data-filter v-if="conType!=2" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
+				<data-filter v-if="conType == 1" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
-			</view> -->
+			</view>
 		</view>
 		<view class="" v-show="conType == 0">
 			<recommend-index></recommend-index>
@@ -47,15 +47,15 @@
 		
 		<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
 	    <view v-if="conType == 1">
-				<view class="tags" v-if="dataFilter.courseTags.length>0">
+				<!-- <view class="tags" v-if="dataFilter.courseTags.length>0">
 					 <u-scroll-list :indicator="false">
 						<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
 							<view class="tag-item">{{tag.text}} </view>
 						</view>
 					</u-scroll-list>
-				</view>
+				</view> -->
 				<!-- u 选小课堂 -->
-				<view class="uxclass" @click="toNewLink">
+			<!-- 	<view class="uxclass" @click="toNewLink">
 					<view class="ux_tab">
 						<view class="ux-image">
 							<image src="../../static/images/utop-course.png" mode=""></image>
@@ -67,46 +67,32 @@
 							<view class="ux-cont">千门U选好课,涵盖：前沿趋势、商业财经、职场技能、专业提升，免费持续开放中！BOEer,快来学习吧！</view>
 						</view>
 					</view>
-				</view>
+				</view> -->
 	    		<!-- 课程列表 -->
-	    		<view v-for="(c,cidx) in courseList" :key="cidx" class="con_box">
+				<view class="course-re-list">
-	    			<view class="course" @click="toCourseDetail(c)">
+					<view v-for="(c,cidx) in courseList" :key="cidx" class="course-re-index" @click="toCourseDetail(c)">
-	    				<view class="course-img">
+						<!-- <view @click="toCourseDetail(c)"> -->
-							<view class="course-left">
+							<view class="course-img">
-								<text v-if="c.type==10" class="course-type">录播</text>
+									<text class="img-score">
-								<text v-if="c.type==20" class="course-type">录播</text>
+										<image style="width:28upx;height:28upx;margin-right: 6upx;" src="../../static/images/icon/index-start.png" mode=""></image>
-								<text v-if="c.type=='online-course'" class="course-type">录播</text>
+										{{converToScore(c.score)}}分</text>
-								<text v-if="c.type=='face-course'" class="course-type">线下课</text>
+									<course-image :course="c" width="332upx" height="192upx"></course-image>
-								<text v-if="c.type=='project'" class="course-type">学习项目</text>
-								<course-image :course="c" width="265upx" height="144upx"></course-image>
 							</view>
-	    					<view class="coures-conent">
+							<view class="course-title">
-								<view class="conent-title" v-html="c.name">
+								<view v-html="c.name">
-									<!-- <u-parse :content="c.name"></u-parse> -->
-								</view>
-	    						<view class="con-au">
-									<view v-if="c.type==10 || c.type==20" class="item-author" style="display: flex;">
-										<text style="font-size: 28upx; color: #666666;">{{c.teacher}}</text>
-									</view>
-									<view v-else style="font-size: 28upx; color: #666666;padding-top: 10upx;">
-									</view>
-	    						</view>
-								<view class="statuy-ren">
-									<view class="">
-										<text style="color: #FF8E00;">
-										{{c.studies}}
-										</text>
-										人学习
-									</view>
-									<view class="statuy-score">
-										<text >{{converToScore(c.score)}}分</text>
-									</view>
 								</view>
+							</view>
+							<view class="course-text">
+								{{c.teacher}} | {{c.studies}}人已学
+							</view>
+							<view class="course-type">
+								<text class="type-index" v-if="sysTypeName(c.sysType1) != ''">{{sysTypeName(c.sysType1)}}</text>
+								<text class="type-tow" v-if="sysTypeName(c.sysType2) != ''">{{sysTypeName(c.sysType2)}}</text>
+							</view>
+						<!-- </view> -->
+					</view>
+				</view>
 	    		
-	    					</view>
-	    				</view>
-	    			</view>
-	    		</view>
 		</view>
 	    <!-- 文章 -->
 	    <view>
@@ -215,6 +201,7 @@
 	import apiMessage from '@/api/system/message.js'
 	import {toScore} from '@/utils/tools.js'
 	import apiBoeCourse from '@/api/boe/course.js'
+	import { mapGetters,mapActions} from 'vuex';
 	export default {
 		data(){
 			return {
@@ -258,6 +245,9 @@
 				totalPages:1,
 			}	
 		},
+		computed: {
+		    ...mapGetters(['userInfo','sysTypeMap'])
+		},
 		onPullDownRefresh() {
 			this.onReachBottom();
 		},
@@ -340,9 +330,21 @@
 			    }
 			
 			}
+			this.getSysTypeTree();
 			this.findCourseData();
+			this.loadSysTypes();
 		},
 		methods: {
+			...mapActions({
+			      // getResOwnerTree:'resOwner/getResOwnerTree',
+			      // loadResOwners:'resOwner/loadResOwners',
+			      getSysTypeTree:'sysType/getSysTypeTree',
+			      loadSysTypes:'sysType/loadSysTypes'
+			    }),
+			sysTypeName(code){
+			  if(code=='' || code==0){return '';}
+			  return this.sysTypeMap.get(code);
+			},
 			closeSignDlg(){
 				 this.signInShow=false;
 			},
@@ -774,6 +776,83 @@
 		font-size: 32rpx;
 		text-align: center;
 		padding: 5upx 10upx 0upx 0upx;
+	}
+	.course-re-list{
+		padding: 30upx;
+		display: flex;
+		flex-wrap: wrap;
+		.course-re-index{
+			width: 335upx;
+			min-width: 335upx;
+			padding: 15upx 0;
+			&:nth-child(2n-1){
+				margin-right: 20upx;
+			}
+			.course-img{
+				width: 335upx;
+				height: 188upx;
+				border-radius: 16upx;
+				position: relative;
+				/deep/ uni-image {
+					border-radius: 8upx;
+				}
+				.img-score{
+					display: inline-block;
+					padding: 7upx 15upx;
+					box-sizing: border-box;
+					position: absolute;
+					right:2upx;
+					bottom: -2px;
+					color: #FFFFFF;
+					font-size: 28upx;
+					z-index: 99;
+					width: 136upx;
+					height: 44upx;
+					background: #1767FF;
+					// background: rgba($color: #1767FF, $alpha: 0.2);
+					border-radius: 24upx 0px 4upx 0px;
+					backdrop-filter: blur(20px);
+				}
+			}
+			.course-title{
+				margin-top: 20upx;
+				font-size: 28upx;
+				color: #39424C;
+				display: -webkit-box;
+				word-break:break-all;
+				// white-space:pre-wrap;
+				overflow: hidden;
+				// text-overflow:ellipsis;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				box-sizing: border-box;
+			}
+			.course-text{
+				margin-top: 20upx;
+				font-size: 28upx;
+				color: #6E7B84;
+			}
+			.course-type{
+				margin-top: 20upx;
+				.type-index{
+					font-size: 22upx;
+					color: #6E7B84;
+					background: rgba($color: #387DF7, $alpha: 0.1);
+					border-radius: 8upx;
+					margin-right: 12upx;
+					padding: 4upx 12upx;
+				}
+				.type-tow{
+					font-size: 22upx;
+					color: #D98135;
+					background: rgba($color: #FF7900, $alpha: 0.1);
+					border-radius: 8upx;
+					margin-right: 12upx;
+					padding: 4upx 12upx;
+				}
+			}
+		}
+		
 	}
 	.con_box {
 		margin-bottom: 10px;
@@ -786,125 +865,6 @@
 			font-weight: 35upx;
 			margin-bottom: 10upx;
 		}
-	}
-	.course {
-		.course-img {
-			display: flex;
-			align-items: center;
-			/deep/ .course-left{
-			    width: 262upx;
-			    height: 147upx;
-				margin-top: 4upx;
-				position: relative;
-				margin-right: 10rpx;
-				uni-image {
-					// width: 152upx;
-					// height: 88upx;
-					border-radius: 16upx;
-				}
-			}
-			.con-con {
-				// display: flex;
-				flex-direction: column;
-				font-size: 14px;
-	            color: #444444;
-				padding-left: 10upx;
-				margin-top: 3px;
-				margin-bottom: 6px;
-				 display: -webkit-box;
-				  // white-space:pre-wrap;
-				  overflow: hidden;
-				  // text-overflow:ellipsis;
-				  -webkit-box-orient: vertical;
-				  -webkit-line-clamp: 2;
-				  box-sizing: border-box;
-				
-			}
-			.con-au {
-				display: flex;
-	            justify-content: space-between;
-				// padding-top: 20upx;
-				
-				image {
-					border-radius: 50%;
-				}
-				/deep/ .item-author{
-					>view:nth-of-type(1){
-						display:none
-					}
-					>view:nth-of-type(2){
-						padding-left:0!important;
-					}
-				}
-			}
-			.im {
-				width: 50upx;
-				height: 50upx;
-				margin-right: 8upx;
-			}
-			.tet {
-				font-size: 12px;
-	            color: #666666;
-				padding-top: 10upx;
-			}
-			.coures-conent{
-				margin-left: 10px;
-				// padding: 10upx 10upx 0 15upx;
-				display: flex;
-				flex-direction:column;
-				justify-content: space-between;
-				flex: 1;
-				// overflow: hidden;
-				height: 147upx;
-				.conent-title{
-					width: 199px;
-					font-size: 32upx;
-					color: #333;
-					font-weight: bold;
-					white-space:nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-				.stu-f {
-					font-size: 28upx;
-					color: #FFB30F;
-					font-weight: 500;
-					// margin-top: 5upx;
-				}
-				.statuy-ren{
-					font-size: 24upx;
-					color: #999999;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					// font-size: 25upx;
-					.statuy-score{
-						color: #FFB30F;
-						font-weight: 500;
-					}	
-				}
-				// height: 100%;
-			}
-			
-		}
-		.stu_c {
-			display:flex;
-		justify-content: space-between;
-			.stu_e {
-				margin-top: 10upx;
-			    display: flex;
-				font-size: 12px;
-				color: #666666;
-			}
-			.stu_e :nth-child(2) {
-				margin-left: 40upx;
-			}
-			.stu-f {
-				font-size: 20upx;
-				color: #FFB30F;
-				font-weight: 500;
-			}
-		}
 	}
 	.article {
 		// height: 264upx;
@@ -1181,20 +1141,6 @@
 				}
 			}
 		}
-	}
-	.course-type{
-		position:absolute;
-		bottom: 8px;
-		right: -1px;
-		text-align: center;
-		line-height: 15px;
-		background-color: #7f7f7f;
-		font-size: 10px;
-		opacity: 0.7;
-		color: #FFFFFF;
-		z-index: 88;
-		padding: 1px 5px;
-		border-radius: 10px 0px 0px 10px;
 	}
 	.empty{
 		text-align: center;

store/getters.js

@@ -4,5 +4,6 @@ const getters = {
   studyTab: state => state.study.studyTab,
   userMsg:state => state.user.msg,
   isOneStady:state => state.user.isOneStady,
+  sysTypeMap:state => state.sysType.sysTypeMap,
 }
 export default getters

store/index.js

@@ -4,6 +4,7 @@ import user from './modules/user'
 import resource from './modules/resource'
 import study from './modules/study'
 import getters from './getters'
+import sysType from './modules/sysType'
 
 Vue.use(Vuex)
 
@@ -12,7 +13,8 @@ const store = new Vuex.Store({
   modules: {
     user,
 	resource,
-	study
+	study,
+	sysType
   },
   getters
 })

store/modules/sysType.js

@@ -0,0 +1,94 @@
+import {getToken} from '@/utils/token'
+import apiType from '../../api/modules/type.js'
+
+const state={
+        sysTypeTree: [], //内容类型
+        sysTypeMap:null
+    }
+
+const  mutations={
+        setSysTypeTree: (state, tree) => {
+            state.sysTypeTree = tree
+        },
+        setSysTypeMap: (state, map) => {
+            state.sysTypeMap = map
+        },
+    }
+ const  actions={
+    getSysTypeTree({commit}) {
+      return new Promise((resolve,reject)=>{
+          if(state.sysTypeTree.length>0){
+              resolve(state.sysTypeTree);
+          }else{
+              let hasData = sessionStorage.getItem('sysTypeTree');
+              if(hasData){
+                 let treeData = JSON.parse(hasData);
+                 commit('setSysTypeTree', treeData);
+                 resolve(treeData);
+              }else{
+                apiType.tree(1).then(res=>{
+                  if(res.status === 200) {
+                      sessionStorage.setItem('sysTypeTree',JSON.stringify(res.result));
+                      commit('setSysTypeTree', res.result);
+                      //转化为map放到状态中
+                      let map=new Map();
+                      res.result.forEach(item=>{
+                         map.set(item.id, item.name);
+                         if(item.children && item.children!=''){
+                            item.children.forEach(child=>{
+                              map.set(child.id, child.name);
+                              if(child.children && child.children!=''){
+                                 child.children.forEach(last=>{
+                                   map.set(last.id, last.name);
+                                 })
+                              }
+                            })
+                         }
+                      });
+                      commit('setSysTypeMap', map);
+                      resolve(res.result)
+                  } else {
+                      reject('资源归属获取失败！');
+                  }
+                })
+              }
+          }
+      });
+    },
+    loadSysTypes(context){
+      if(state.sysTypeMap==null){
+          let hasData = sessionStorage.getItem('sysTypeMap');
+          if(hasData){
+            hasData=JSON.parse(hasData);
+          }
+          if(hasData && hasData.length>10){
+             let map=new Map();
+             hasData.forEach(item=>{
+                map.set(item.id, item.name);
+             });
+             context.commit('setSysTypeMap',map);
+          }else{
+              apiType.list(1,'').then(res=>{
+                if(res.status === 200) {
+                    let map=new Map();
+                    res.result.forEach(item=>{
+                       map.set(item.id, item.name);
+                    });
+                    //console.log(map,map);
+                    sessionStorage.setItem('sysTypeMap',JSON.stringify(res.result));
+                    context.commit('setSysTypeMap', map);
+                } else {
+                    console.log('内容分类获取失败！');
+                }
+              });
+          }
+      }
+    }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}