课程详情页面

src/pages/course/index.vue

@@ -7,15 +7,15 @@
 				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
 				课程中心
 			</view>
-			<view class="input-view">
-			<uv-input shape="circle"
-				placeholderStyle='color:#999999;font-size:28rpx' 
-				placeholder="请输入课程名" 
-				suffixIcon="search"
-				:customStyle="customStyle"
-				:suffixIconStyle="suffixIconStyle" 
-				:readonly="true">
-			</uv-input>
+			<view class="input-view"  @click="toSearchPage">
+				<uv-input shape="circle"
+					placeholderStyle='color:#999999;font-size:28rpx' 
+					placeholder="请输入课程名" 
+					suffixIcon="search"
+					:customStyle="customStyle"
+					:suffixIconStyle="suffixIconStyle" 
+					:readonly="true">
+				</uv-input>
 			</view>
 			<view class="tabs-view">
 				<uv-tabs :list="tabList" @click="changeTab" :scrollable="false"
@@ -24,17 +24,87 @@
 				></uv-tabs>
 			</view>
 			<view class="list-view">
+				<view class="filter-btn" @click="showFilterList = true">筛选
+					<uv-icon class="filter-icon" name="list"/>
+				</view>
+				<view :class="['filter-list',showFilterList?'show':'']">
+					<view class="filter-type" v-for="item in tagsTree.filter(t=>(t.children||[]).length>0)" :key="item.value">
+						<view class="filter-type-title">{{item.label}}</view>
+						<view class="filter-type-list">
+							<view :class="['filter-type-item', activeTag===itemT.value?'is-active':'']" v-for="itemT in (item.children||[])" @click="chooseTag(itemT)">
+								{{itemT.label}}
+							</view>
+						</view>
+					</view>
+				</view>
 				<uv-scroll-list class="tags-view" :indicator="false">
-					<uv-tags text="全部" shape="circle" plain class="tags-item" size="mini"></uv-tags>
-					<uv-tags text="全部" v-for="item in 15" shape="circle" plain type="info" class="tags-item" size="mini"></uv-tags>
+					<uv-tags text="全部" 
+						shape="circle" 
+						plain 
+						class="tags-item" 
+						size="mini" 
+						:type="activeTag === ''?'primary':'info'"
+						@click="chooseTag({value:''})"
+					></uv-tags>
+					<uv-tags :text="item.label" 
+						v-for="item in tagsList" 
+						:key="item.value" 
+						shape="circle" 
+						plain 
+						:type="activeTag === item.value?'primary':'info'"
+						@click="chooseTag(item)"
+						class="tags-item" size="mini"
+					></uv-tags>
 				</uv-scroll-list>
 				<view class="course-list">
-					<view class="left-type-list">
-						<view  v-for="item in 6" :class="['type-item', item == 3 ?'is-active':'']">
-							课程分类
+					<view class="left-type-list" v-if="'全部' === activeTab">
+						<view 
+						 v-for="item in courseTypeList"
+						 :key="item.value"
+							:class="['type-item',activeCourseType == item.value ?'is-active':'']"
+							@click="changeCourseType(item)"
+						>
+							{{item.label}}
+						</view>
+					</view>
+					<view class="left-type-list" v-if="'生产线'===activeTab">
+						<view 
+						 v-for="item in coursePrdlineList"
+						 :key="item.value"
+							:class="['type-item', activePrdlineType == item.value ?'is-active':'']"
+							@click="changePrdLine(item)"
+						>
+							{{item.label}}
+						</view>
+					</view>
+					<view class="right-course-list">
+						<view 
+							class="type-list" 
+							v-for="item in courseListTreeShow" 
+							:key="item.value"
+						>
+							<view 
+								class="type-title" 
+								v-if="item.courseList.length > 0 && showTypeName"
+							>
+								<!-- v-if="itemT.courseList.length>0 && " -->
+								<view class="left-color"></view>
+								{{item.label}}
 							</view>
+							<CourseItem v-for="itemC in item.courseList" :key="itemC.crsNum" :itemInfo="itemC" @clickItem="toCourseDetail(itemC)"/>
+							<view 
+								class="type-list"
+								v-for="itemT in item.children"
+								:key="itemT.value"
+							>
+								<view class="type-title" v-if="itemT.courseList.length>0">
+									<view class="left-color"></view>
+										{{itemT.label}}
+								</view>
+								<CourseItem v-for="itemTC in itemT.courseList" :key="itemTC.crsNum" :itemInfo="itemTC" @clickItem="toCourseDetail(itemTC)"/>
+							</view>
+						</view>
 					</view>
-					<view class="right-course-list"></view>
 				</view>
 			</view>
 		</view>
@@ -42,13 +112,19 @@
 </template>
 
 <script setup>
+	import CourseItem from "@/components/course-item/course-item.vue"
 	import common from '@/common/common'
 	import {
 		getPrdLineTypeListApi,
 		getTraTagListApi,
-		getCourseTypeListApi
+		getCourseTypeListApi,
+		queryCrsInfoByCatalogApi,
+		queryCrsInfoByPrdLineApi,
+		queryCrsInfoByLastnewApi,
+		queryCrsInfoByPopularApi,
+		queryCrsInfoByRecmdApi
 } from "@/api/course.js"
-import { onMounted } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 	const customStyle = {
 		backgroundColor: "#ffffff",
 		paddingLeft: "40rpx",
@@ -63,24 +139,156 @@ import { onMounted } from 'vue'
 	}
 	const tabsCustomStyle ={
 		backgroundColor: "#ffffff",
-		marginTop: '23rpx',
 		borderRadius: '23rpx',
 	}
 	const tabList = [
-			{ name:'全部'},
-			{ name:'热门'},
-			{ name:'最新'},
-			{ name:'推荐'},
-			{ name:'生产线'},
-		]
-	const changeTab = (item) => {
-		console.log(item)
+		{ name:'全部'},
+		{ name:'热门'},
+		{ name:'最新'},
+		{ name:'推荐'},
+		{ name:'生产线'},
+	]
+	const activeTab = ref('全部')
+	const activeCourseType = ref('')
+	const activePrdlineType = ref('')
+	const activeTag = ref('')
+	const courseTypeList = ref([])
+	const coursePrdlineList = ref([])
+	const tagsTree = ref([])
+	
+	const showFilterList = ref(false)
+	
+	// 点击标签
+	const chooseTag = (item)=>{
+		activeTag.value = item.value
+		showFilterList.value = false
+	}
+	// 点击生产线分类
+	const changePrdLine = (item)=>{
+		activePrdlineType.value = item.value
+	}
+	// 点击课程分类
+	const changeCourseType =  (item)=>{
+		activeCourseType.value = item.value
+		
+		setTimeout(()=>{
+			console.log(courseListTreeShow.value)
+		})
 		
 	}
+	const showTypeName = computed(()=>{
+		return (activeTab.value === '全部' && activeCourseType.value === '') || (activeTab.value === '生产线' && activePrdlineType.value === '')
+	}) 
+	const tagsList = computed(()=>{
+		let _arr = []
+		tagsTree.value.forEach(t=>{
+			let _tarr = t.children || []
+			_arr = _arr.concat(_tarr)
+		})
+		return _arr.sort((a,b)=>{
+			a.required == "Y" && b.required === 'N'
+		})
+	})
+	const courseListBase = ref([])
+	const courseList = computed(()=>{
+		return activeTag.value
+		?courseListBase.value.filter(t=>t.tagCataList.map(k=>k.tagId).indexOf(activeTag.value)>=0)
+		:courseListBase.value
+	})
+	// 整理树形
+	const courseListTree =  computed(()=>{
+		let _arr = activeTab.value === '全部'? courseTypeList.value 
+		: activeTab.value === '生产线'? coursePrdlineList.value: []
+		let _idKey = activeTab.value === '全部'? 'tagId': 'prdLineId'
+		
+		let _tree = _arr.map(t=>{
+			let _children = t.children||[]
+			return {
+				label: t.label,
+				required: t.required,
+				value:t.value,
+				courseList: courseList.value.filter(k=>k[_idKey] === t.value),
+				children: _children.map(k=>{
+					return {
+						...k,
+						courseList: courseList.value.filter(m=>m[_idKey] === k.value),
+					}
+				})
+			}
+		})
+		return _tree
+	})
+	// 过滤树形
+	const courseListTreeShow =  computed(()=>{
+		let _type = activeTab.value === '全部'? activeCourseType.value : activePrdlineType.value
+		if(activeTab.value === '全部'|| activeTab.value === '生产线'){
+			if(_type){
+				return courseListTree.value.filter(t=> t.value === _type)
+			}else{
+				 return courseListTree.value
+			}
+		}else{
+			return [{
+				children: [],
+				courseList: courseList.value,
+				label: "",
+				value: "333"
+			}]
+		}
+	})
+	const changeTab = (item) => {
+		if(!item) return
+		activeTab.value = item.name
+		activeTag.value = ''
+		activeCourseType.value = ''
+		activePrdlineType.value = ''
+		switch (item.name){
+			case '全部':
+				queryCrsInfoByCatalogApi().then(res=>{
+					courseListBase.value = res.body || []
+				})
+			break;
+			case '热门':
+				queryCrsInfoByPopularApi().then(res=>{
+					courseListBase.value = res.body || []
+				})
+			break;
+			case '最新':
+				queryCrsInfoByLastnewApi().then(res=>{
+					courseListBase.value = res.body || []
+				})
+			break;
+			case '推荐':
+				queryCrsInfoByRecmdApi().then(res=>{
+					courseListBase.value = res.body || []
+				})
+			break;
+			case '生产线':
+				queryCrsInfoByPrdLineApi().then(res=>{
+					courseListBase.value = res.body || []
+				})
+			break;
+		}
+	}
+	// 跳转搜索页
+	const toSearchPage = () => {
+		common.navigateTo('/pages/search/search')
+	}
+	// 跳转 课程详情
+	const toCourseDetail = (item) => {
+		common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum)
+	}
 	onMounted(()=>{
-		// getPrdLineTypeListApi().then(res=>{
-		// 	console.log(res)
-		// })
+		getCourseTypeListApi().then(res=>{
+			courseTypeList.value = res.body||[]
+		})
+		getPrdLineTypeListApi().then(res=>{
+			coursePrdlineList.value = res.body||[]
+		})
+		getTraTagListApi().then(res=>{
+			tagsTree.value = res.body||[]
+		})
+		changeTab({name:'全部'})
 	})
 </script>
 
@@ -102,6 +310,7 @@ import { onMounted } from 'vue'
 		}
 		.course-center-body{
 			position: absolute;
+			overflow: hidden;
 			left:0;
 			top: 0;
 			height: 100%;
@@ -120,6 +329,7 @@ import { onMounted } from 'vue'
 				font-weight: 500;
 				color:#000;
 				position: relative;
+				// margin-bottom: 23rpx;
 				.arrow-icon{
 					position: absolute;
 					left:36rpx;
@@ -139,15 +349,99 @@ import { onMounted } from 'vue'
 			}
 			.list-view{
 				flex:1;
+				overflow: hidden;
 				margin-bottom: 80rpx;
 				background: #ffffff;
 				border-radius: 23rpx;
 				display: flex;
 				flex-direction: column;
+				position: relative;
+				.filter-list{
+					position: absolute;
+					top: 84rpx;
+					left:0;
+					width: 100%;
+					height: 508rpx;
+					overflow-y: auto;
+					z-index: 2;
+					background-color: #f9f9f9;
+					box-shadow: 0rpx 3.85rpx 38rpx rgba(0,0,0,.05);
+					padding: 0rpx 25rpx;
+					box-sizing: border-box;
+					.filter-type{
+						padding: 10rpx 0;
+						box-sizing: border-box;
+						.filter-type-title{
+							font-size: 29rpx;
+							line-height: 40rpx;
+							margin-bottom: 15rpx;
+							color: #000;
+						}
+						.filter-type-list{
+							overflow: hidden;
+							.filter-type-item{
+								width: calc(25% - 18rpx);
+								font-size: 29rpx;
+								box-sizing: border-box;
+								padding:0 20rpx;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+								overflow: hidden;
+								text-align: center;
+								float: left;
+								margin-right: 24rpx;
+								height: 65rpx;
+								line-height: 65rpx;
+								background-color: #f1f3f8;
+								border-radius: 6rpx;
+								margin-bottom: 20rpx;
+								&:nth-child(4n){
+									margin-right: 0;
+								}
+								&.is-active{
+									color: #06f;
+								}
+							}
+						}
+						&+.filter-type{
+							margin-top: 20rpx;
+						}
+					}
+				}
+				.filter-list{
+					display: none;
+					&.show{
+						display: block;
+					}
+				}
+				.filter-btn{
+					position: absolute;
+					right: 0;
+					top: 0;
+					height: 83rpx;
+					width: 120rpx;
+					line-height: 83rpx;
+					font-size: 26rpx;
+					background: #fff;
+					z-index: 2;
+					text-align: center;
+					box-shadow: -4rpx 0 6rpx rgba(0,0,0,.05);
+					white-space: nowrap;
+					padding-right: 30rpx;
+					box-sizing: border-box;
+					.filter-icon{
+						// display: inline-block;
+						font-size: 26rpx;
+						position: absolute;
+						right: 15rpx;
+						top: 50%;
+						transform: translateY(-50%);
+					}
+				}
 				.tags-view{
 					height: 84rpx;
 					display: block;
-					padding: 20rpx;
+					padding: 20rpx 120rpx 20rpx 20rpx;
 					box-sizing: border-box;
 					white-space: nowrap;
 					border-bottom: 2rpx solid #eee;
@@ -158,16 +452,21 @@ import { onMounted } from 'vue'
 							padding: 0 20rpx;
 							.uv-tags__text{
 								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								max-width: 200rpx;
 							}
 						}
 					}
 				}
 				.course-list{
 					display: flex;
-						flex:1;
+					flex:1;
+					overflow: hidden;
 					.left-type-list{
 						width: 152rpx;
 						border-right: 2rpx solid #eee;
+						overflow-y: auto;
 						.type-item{
 							height: 90rpx;
 							line-height: 90rpx;
@@ -185,6 +484,28 @@ import { onMounted } from 'vue'
 					}
 					.right-course-list{
 						flex:1;
+						overflow-y: auto;
+						.type-list{
+							.type-title{
+								font-size: 33rpx;
+								line-height: 43rpx;
+								margin: 20rpx 15rpx 5rpx;
+								height: 43rpx;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								white-space: nowrap;
+								font-weight: 600;
+								.left-color{
+									width: 8rpx;
+									height: 33rpx;
+									margin-top: 5rpx;
+									float: left;
+									overflow: hidden;
+									background-color: #06f;
+									margin-right: 8rpx;
+								}
+							}
+						}
 					}
 				}
 			}