From a28f134234277cbf21a44728ecadb589be7aafbf Mon Sep 17 00:00:00 2001 From: yanghang Date: Thu, 19 Jun 2025 18:47:01 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E4=B8=AD=E5=BF=83=E8=81=94?= =?UTF-8?q?=E8=B0=83=E5=AE=8C=E6=88=90=2095%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- src/api/course.js | 73 +++++-- src/components/course-item/course-item.vue | 64 +++++-- src/pages/course/index.vue | 210 ++++++++++++++++++--- 4 files changed, 290 insertions(+), 61 deletions(-) diff --git a/.env.development b/.env.development index 3044d9b9..9a12f629 100644 --- a/.env.development +++ b/.env.development @@ -3,5 +3,5 @@ ENV = 'development' # 'development' # base api -VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786' -# VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786' +# VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786' +VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786' diff --git a/src/api/course.js b/src/api/course.js index 9130365b..a24eedf7 100644 --- a/src/api/course.js +++ b/src/api/course.js @@ -1,27 +1,68 @@ import request from '@/api/request' +const base_url = '/traapp' // 获取课程分类树接口 export const getCourseTypeListApi = (data) => { - return request({ - url: '/traapp/app/traCrsCatalogInfo/courseQueryTraCrsCatalogInfoList', - method: 'post', - data - }); + return request({ + url: base_url + '/app/traCrsCatalogInfo/courseQueryTraCrsCatalogInfoList', + method: 'post', + data + }); }; // 获取生产线分类树接口 export const getPrdLineTypeListApi = (data) => { - return request({ - url: '/traapp/app/traPrdLineInfo/courseQueryTraPrdLineInfoList', - method: 'post', - data - }); + return request({ + url: base_url + '/app/traPrdLineInfo/courseQueryTraPrdLineInfoList', + method: 'post', + data + }); }; // 获取标签分类树 接口 export const getTraTagListApi = (data) => { - return request({ - url: '/traapp/app/traTagCatalogInfo/queryTraTagCatalogInfoList', - method: 'post', - data - }); -}; \ No newline at end of file + return request({ + url: base_url + '/app/traTagCatalogInfo/queryTraTagCatalogInfoList', + method: 'post', + data + }); +}; +// 全部模块 +export const queryCrsInfoByCatalogApi = (data) => { + return request({ + url: base_url + '/crsInfo/queryCrsInfoByCatalog', + method: 'post', + data + }); +}; +// 生产线模块- +export const queryCrsInfoByPrdLineApi = (data) => { + return request({ + url: base_url + '/crsInfo/queryCrsInfoByPrdLine', + method: 'post', + data + }); +}; +// 最新 +export const queryCrsInfoByLastnewApi = (data) => { + return request({ + url: base_url + '/crsInfo/queryCrsInfoByLastnew', + method: 'post', + data + }); +}; +// 最热 +export const queryCrsInfoByPopularApi = (data) => { + return request({ + url: base_url + '/crsInfo/queryCrsInfoByPopular', + method: 'post', + data + }); +}; +// 推荐 +export const queryCrsInfoByRecmdApi = (data) => { + return request({ + url: base_url + '/crsInfo/queryCrsInfoByRecmd', + method: 'post', + data + }); +}; diff --git a/src/components/course-item/course-item.vue b/src/components/course-item/course-item.vue index 882441ef..e802af0c 100644 --- a/src/components/course-item/course-item.vue +++ b/src/components/course-item/course-item.vue @@ -1,13 +1,18 @@ @@ -37,7 +42,7 @@ }, methods:{ clickItem(){ - this.$emit('clickItem') + this.$emit('clickItem', this.itemInfo) } } } @@ -47,10 +52,29 @@ .course-item-box{ padding: 15rpx; overflow: hidden; - .img-box{ + .img-box-view{ width: 170rpx; height: 170rpx; float: left; + position: relative; + .img-box{ + width: 170rpx; + height: 170rpx; + } + .item-grade{ + position: absolute; + right: 0; + width: 60rpx; + height: 46rpx; + background-color: #ff581c; + top:20rpx; + border-radius: 8rpx 0 0 8rpx; + color:#fff; + text-align: center; + // padding-right: 10rpx; + font-size: 28rpx; + line-height: 46rpx; + } } .cont-box{ width: calc(100% - 170rpx); @@ -68,15 +92,25 @@ } .item-tags{ padding-bottom: 0 !important; - .item-tag{ - height: 32rpx; - line-height: 32rpx; - font-size: 20rpx; - background-color: #eee; - color: rgb(51, 51, 51); - padding: 0 20rpx; - border-radius: 16rpx; - margin-right: 20rpx; + .item-tag-view{ + white-space: nowrap; + height: 34rpx; + .item-tag{ + height: 32rpx; + line-height: 32rpx; + font-size: 20rpx; + background-color: #eee; + color: rgb(51, 51, 51); + padding: 0 20rpx; + border-radius: 16rpx; + margin-right: 20rpx; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200rpx; + box-sizing: border-box; + } } } .item-publish, diff --git a/src/pages/course/index.vue b/src/pages/course/index.vue index 8a226f86..97440569 100644 --- a/src/pages/course/index.vue +++ b/src/pages/course/index.vue @@ -7,15 +7,15 @@ 课程中心 - - - + + + - - + + @@ -34,7 +49,7 @@ v-for="item in courseTypeList" :key="item.value" :class="['type-item',activeCourseType == item.value ?'is-active':'']" - @click="activeCourseType = item.value" + @click="changeCourseType(item)" > {{item.label}} @@ -44,13 +59,38 @@ v-for="item in coursePrdlineList" :key="item.value" :class="['type-item', activePrdlineType == item.value ?'is-active':'']" - @click="activePrdlineType = item.value" + @click="changePrdLine(item)" > {{item.label}} - + + + + + {{item.label}} + + + + + + {{itemT.label}} + + + + @@ -64,7 +104,12 @@ import { getPrdLineTypeListApi, getTraTagListApi, - getCourseTypeListApi + getCourseTypeListApi, + queryCrsInfoByCatalogApi, + queryCrsInfoByPrdLineApi, + queryCrsInfoByLastnewApi, + queryCrsInfoByPopularApi, + queryCrsInfoByRecmdApi } from "@/api/course.js" import { onMounted, ref, computed } from 'vue' const customStyle = { @@ -93,41 +138,130 @@ import { onMounted, ref, computed } from 'vue' const activeTab = ref('全部') const activeCourseType = ref('') const activePrdlineType = ref('') + const activeTag = ref('') const courseTypeList = ref([]) const coursePrdlineList = ref([]) const tagsTree = ref([]) + // 点击标签 + const chooseTag = (item)=>{ + activeTag.value = item.value + } + // 点击生产线分类 + 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=>{ - t.required == "y" && b.required === 'N' + 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.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 + activeCourseType.value = '' + activePrdlineType.value = '' switch (item.name){ case '全部': - console.log(item.name) + queryCrsInfoByCatalogApi().then(res=>{ + courseListBase.value = res.body || [] + }) break; case '热门': - console.log(item.name) + queryCrsInfoByPopularApi().then(res=>{ + courseListBase.value = res.body || [] + }) break; case '最新': - console.log(item.name) + queryCrsInfoByLastnewApi().then(res=>{ + courseListBase.value = res.body || [] + }) break; case '推荐': - console.log(item.name) + queryCrsInfoByRecmdApi().then(res=>{ + courseListBase.value = res.body || [] + }) break; case '生产线': - console.log(item.name) + queryCrsInfoByPrdLineApi().then(res=>{ + courseListBase.value = res.body || [] + }) break; } } + // 跳转搜索页 + const toSearchPage = () => { + common.navigateTo('/pages/search/search') + } + // 跳转 课程详情 + const toCourseDetail = (item) => { + console.log(item.crsNum) + // common.navigateTo('/pages/course/detail/' + item.crsNum) + } onMounted(()=>{ getCourseTypeListApi().then(res=>{ courseTypeList.value = res.body||[] @@ -138,6 +272,7 @@ import { onMounted, ref, computed } from 'vue' getTraTagListApi().then(res=>{ tagsTree.value = res.body||[] }) + changeTab({name:'全部'}) }) @@ -218,6 +353,9 @@ import { onMounted, ref, computed } from 'vue' padding: 0 20rpx; .uv-tags__text{ white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200rpx; } } } @@ -248,11 +386,27 @@ import { onMounted, ref, computed } from 'vue' .right-course-list{ flex:1; overflow-y: auto; - // .course-box{ - // width: 100%; - // height: 100%; - // 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; + } + } + } } } }