12.10提交

pages_app/zhinan/zhinan.vue

@@ -16,17 +16,17 @@
     <!-- 固定搜索栏 -->
     <view class="search-container-fixed filter-bar">
       <view class="search-box" @click="goSearch">
-        <uni-icons type="search" size="16" color="#999"></uni-icons>
+        <uni-icons type="search" size="22" color="#999"></uni-icons>
         <text class="search-text">搜索</text>
       </view>
 
       <view class="divider"></view>
       <view class="filter-item" @click="showFilterPopup">
-        <text>筛选</text>
+        <text :class="{active: keywords}">筛选</text>
         <up-image
-          :src="isFilterActive ? filterOn : filter"
-          width="30rpx"
-          height="30rpx"
+          :src="keywords ? filterOn : filter"
+          width="36rpx"
+          height="36rpx"
         ></up-image>
       </view>
     </view>
@@ -40,11 +40,23 @@
         @click="enterCategory(item)"
       >
         <view class="item-image">
-          <image
+          <up-image
             :src="docUrl + item.imgs"
             mode="widthFix"
+            width="100%"
+            height="320rpx"
             class="category-icon"
-          ></image>
+            :loadingIcon="lazyImg"
+            :errorIcon="lazyImg"
+            :lazy-load="true"
+          >
+          <template #error>
+            <image :src="lazyImg" class="category-icon" mode="widthFix"></image>
+          </template>
+          <template v-slot:loading>
+            <image :src="lazyImg" class="category-icon" mode="widthFix"></image>
+          </template>
+          </up-image>
         </view>
         <view class="item-content">
           <text class="category-title">{{ item.name }}</text>
@@ -280,7 +292,7 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { onShow, onBackPress } from "@dcloudio/uni-app";
+import { onShow, onBackPress,onLoad} from "@dcloudio/uni-app";
 import upImg from "@/static/cb_up.png";
 import downImg from "@/static/cb_up.png";
 import filter from "@/static/cb_screen_no.png";
@@ -298,6 +310,8 @@ import api from "@/api/api.js";
 import docUrl from "@/utils/docUrl.js";
 import navTo from "@/utils/navTo.js";
 import navBar from "@/components/navBar/navBar.vue";
+import lazyImg from "@/static/zhinanLazy.png";
+import throttle from "@/utils/throttle.js";
 const total = ref(0);
 const tab = ref("zhinan");
 // 响应式数据
@@ -327,9 +341,7 @@ onBackPress(() => {
 });
 // 页面加载
 onMounted(() => {
-  loadGuideTypes();
-  loadSearchLibrary();
-  loadGuideTags();
+  
 });
 const showFilter = ref(false);
 // 筛选弹窗相关方法
@@ -340,7 +352,7 @@ const goSearch = () => {
   uni.sendNativeEvent(
     "goHomeSearch",
     {
-      msg: "goHomeSearch",
+      msg: "zhinan",
     },
     (ret) => {
       console.log(ret);
@@ -352,8 +364,17 @@ const hideFilterPopup = () => {
 };
 
 const toggleTag = (index) => {
-  filterTags.value[index].selected = !filterTags.value[index].selected;
-  isFilterActive.value = filterTags.value.some((tag) => tag.selected);
+  const tag = filterTags.value[index];
+  // 限制最多选择3个标签
+  if (!tag.selected && filterTags.value.filter((t) => t.selected).length >= 3) {
+    uni.showToast({
+      title: "最多选择3个标签",
+      icon: "none",
+    });
+    return;
+  }
+  tag.selected = !tag.selected;
+  isFilterActive.value = filterTags.value.some((item) => item.selected);
 };
 
 const resetFilter = () => {
@@ -369,29 +390,35 @@ const resetFilter = () => {
   //loadVideoData(true);
 };
 
-const confirmFilter = () => {
-  const selectedTags = filterTags.value.filter((tag) => tag.selected);
-  console.log("选中的筛选标签:", selectedTags);
-  for (var i = 0; i < selectedTags.length; i++) {
-    if (keywords.value) {
-      keywords.value += "," + selectedTags[i].NAME;
-    } else {
-      keywords.value = selectedTags[i].NAME;
-    }
-
-    navTo({
-      url: "/pages_app/hot/hot?keywords=" + encodeURIComponent(keywords.value),
-    });
-  }
+const confirmFilter = throttle(() => {
   isFilterActive.value = true;
   hideFilterPopup();
+  const selectedTags = filterTags.value.filter((tag) => tag.selected);
+   let words="";
+  console.log("选中的筛选标签:", selectedTags);
+  for (let i = 0; i < selectedTags.length; i++) {
+    if (words) {
+      words += "," + selectedTags[i].NAME;
+    } else {
+      words= selectedTags[i].NAME;
+    }
+  }
+    keywords.value=words;
+    console.log(1111111);
+   console.log('看看执行了几次');
+   navTo({
+      url: "/pages_app/hot/hot?keywords="+encodeURIComponent(keywords.value)
+    });
+ 
   // 根据选中的标签重新加载数据
-};
-
-onShow(() => {
-  // 页面显示时可以刷新数据
+},1000);
+onLoad(() => {
+  loadGuideTypes();
+  loadSearchLibrary();
   loadGuideTags();
 });
+onShow(() => {
+});
 
 // 加载指南分类（guideType）
 const loadGuideTypes = async () => {
@@ -429,14 +456,14 @@ const loadGuideTags = async () => {
     const res = await api.guideTag({
       type: 3,
     });
-    console.log("指南标签API响应:", res);
+    
     if (res && res.code === 200 && res.data) {
       // 将API返回的标签数据转换为筛选标签格式
       filterTags.value = res.data.map((tag) => ({
         ...tag,
         selected: false,
       }));
-      console.log("指南标签加载成功:", filterTags.value);
+      
     }
   } catch (e) {
     console.error("加载指南标签失败:", e);
@@ -641,7 +668,7 @@ $accent-color: #4a90e2;
     gap: 5px;
 
     .search-text {
-      font-size: 14px;
+      font-size:36rpx;
       color: $gray-medium;
     }
   }
@@ -659,8 +686,15 @@ $accent-color: #4a90e2;
     align-items: center;
     justify-content: center;
     gap: 3px;
-    font-size: 14px;
+    font-size: 36rpx;
     color: #999;
+    text{
+      margin-top:-1rpx;
+      &.active {
+      color: #8b2316;
+    }
+    }
+   
   }
 }
 
@@ -1112,7 +1146,7 @@ $accent-color: #4a90e2;
     .filter-tags {
       display: flex;
       flex-wrap: wrap;
-      gap: 20rpx;
+    
       margin-bottom: 60rpx;
       max-height: 65vh;
       overflow-y: auto;
@@ -1123,6 +1157,7 @@ $accent-color: #4a90e2;
         padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
         border-radius: 30rpx;
         font-size: 26rpx;
+        margin:8rpx 5rpx;
         border: 2rpx solid #efefef;
         transition: all 0.3s ease;
         width: 152rpx; /* 固定宽度 */