功能补充

.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' 

src/components/image-preview/image-preview.vue

@@ -15,13 +15,14 @@
 		},
 		data() {
 			return {
-				imgUrlShow:''
+				imgUrlShow:'',
+				watching:false
 			};
 		},
 		watch: {
 			imgId: {
 				handler(newval, oldval) {
-					if (newval) {
+					if (newval && this.watching) {
 						this.getPreviewUrlBlob(newval);
 					}
 				},
@@ -55,6 +56,7 @@
 			if (this.imgId) {
 				this.getPreviewUrlBlob(this.imgId);
 			}
+			this.watching = true
 		},
 		beforeDestroy() {
 			URL.revokeObjectURL(this.imgUrlShow);

src/pages/course/index.vue

@@ -24,6 +24,19 @@
 				></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" 
@@ -143,9 +156,12 @@ import { onMounted, ref, computed } from 'vue'
 	const coursePrdlineList = ref([])
 	const tagsTree = ref([])
 	
+	const showFilterList = ref(false)
+	
 	// 点击标签
 	const chooseTag = (item)=>{
 		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;