From f0015d5ea46c4904ce35c5ec4a03028d9ec6d5b4 Mon Sep 17 00:00:00 2001 From: yanghang Date: Thu, 19 Jun 2025 20:18:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- .../image-preview/image-preview.vue | 8 +- src/pages/course/index.vue | 104 +++++++++++++++++- 3 files changed, 109 insertions(+), 7 deletions(-) diff --git a/.env.development b/.env.development index 101171d8..2911866d 100644 --- a/.env.development +++ b/.env.development @@ -3,6 +3,6 @@ ENV = 'development' # 'development' # base api -VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786' +# 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.64.16.133:9786' diff --git a/src/components/image-preview/image-preview.vue b/src/components/image-preview/image-preview.vue index e9c9a36b..9ae86165 100644 --- a/src/components/image-preview/image-preview.vue +++ b/src/components/image-preview/image-preview.vue @@ -15,14 +15,15 @@ }, data() { return { - imgUrlShow:'' + imgUrlShow:'', + watching:false }; }, watch: { imgId: { handler(newval, oldval) { - if (newval) { - this.getPreviewUrlBlob(newval); + if (newval && this.watching) { + this.getPreviewUrlBlob(newval); } }, immediate: true, @@ -55,6 +56,7 @@ if (this.imgId) { this.getPreviewUrlBlob(this.imgId); } + this.watching = true }, beforeDestroy() { URL.revokeObjectURL(this.imgUrlShow); diff --git a/src/pages/course/index.vue b/src/pages/course/index.vue index 634fa709..49e853b5 100644 --- a/src/pages/course/index.vue +++ b/src/pages/course/index.vue @@ -24,6 +24,19 @@ > + 筛选 + + + + + {{item.label}} + + + {{itemT.label}} + + + + { activeTag.value = item.value + showFilterList.value = false } // 点击生产线分类 const changePrdLine = (item)=>{ @@ -176,7 +192,7 @@ import { onMounted, ref, computed } from 'vue' const courseListBase = ref([]) const courseList = computed(()=>{ return activeTag.value - ?courseListBase.value.filter(t=>t.tagCataList.indexOf(activeTag.value)>=0) + ?courseListBase.value.filter(t=>t.tagCataList.map(k=>k.tagId).indexOf(activeTag.value)>=0) :courseListBase.value }) // 整理树形 @@ -223,6 +239,7 @@ import { onMounted, ref, computed } from 'vue' const changeTab = (item) => { if(!item) return activeTab.value = item.name + activeTag.value = '' activeCourseType.value = '' activePrdlineType.value = '' switch (item.name){ @@ -338,10 +355,93 @@ import { onMounted, ref, computed } from 'vue' 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;