1

src/components/navs/city-category-mobile.vue

-<style>
-</style>
+<style></style>
 <style scoped>
 .area-item {
   border-radius: 4px;
@@ -86,30 +85,32 @@
             </div></template
           >
           <q-tabs v-model="areaType" class="text-primary area-navs" :dense="true">
-            <q-tab @click="goScrollHandler(item.Id)"
+            <q-tab
+              @click="goScrollHandler(item.Id)"
               v-for="item in areas"
               :key="item.Id"
               :name="item.Id"
               :label="item.Name"
             />
           </q-tabs>
-          <div :style="showPadding ?'padding-top: 100px' : ''">
-          <div :id="`el${item.Id}`" v-for="item in areas" :key="item.Id">
-            <div class="q-mt-md" ref="content" v-for="el in item.SubList" :key="el.Id">
-              <div class="flex justify-between items-end">
-                <span class="f18 bold">{{ el.Name }}</span>
-                <span class="navigate" @click="handleSelectArea(el)">探索</span>
-              </div>
-              <div
-                class="area-item"
-                v-for="area in el.SubList"
-                :key="area.Id"
-                @click="handleSelectArea(area)"
-              >
-                {{ area.Name }}
+          <div :style="showPadding ? 'padding-top: 100px' : ''">
+            <div :id="`el${item.Id}`" v-for="item in areas" :key="item.Id">
+              <div class="q-mt-md" ref="content" v-for="el in item.SubList" :key="el.Id">
+                <div class="flex justify-between items-end">
+                  <span class="f18 bold">{{ el.Name }}</span>
+                  <span class="navigate" @click="handleSelectArea(el)">探索</span>
+                </div>
+                <div
+                  class="area-item"
+                  v-for="area in el.SubList"
+                  :key="area.Id"
+                  @click="handleSelectArea(area)"
+                >
+                  {{ area.Name }}
+                </div>
               </div>
             </div>
-          </div></div>
+          </div>
         </div>
       </div>
     </div>
@@ -117,31 +118,20 @@
     <div v-else>
       <div class="padding">
         <div>
-          <!-- <q-tabs v-model="areaType" class="text-primary"  :dense="true">
-            <q-tab
-              v-for="(item, i) in dataList.CategoryList"
-              :key="i"
-              :name="i"
-              :label="item.CategoryName"
-            />
-          </q-tabs> -->
           <div v-for="(item, i) in dataList.CategoryList" :key="i">
-            <!-- <div class="category-item" @click="handleCategoryChage(item)">
-                <span>{{ item.CategoryName }}</span>
-        <i class="iconfont iconpreviewright"></i></div> -->
             <div v-for="el in item.SubList" :key="el.Id">
-              <div class="category-item"
-                @click="handleCategoryChage(el)">
+              <div class="category-item" @click="handleCategoryChage(el)">
                 <span>{{ el.CategoryName }}</span>
-        <i class="iconfont iconpreviewright"></i>
+                <i class="iconfont iconpreviewright"></i>
               </div>
-              <div class="category-item"
+              <div
+                class="category-item"
                 v-for="area in el.SubList"
                 :key="area.Id"
                 @click="handleCategoryChage(area)"
               >
                 <span>{{ area.CategoryName }}</span>
-        <i class="iconfont iconpreviewright"></i>
+                <i class="iconfont iconpreviewright"></i>
               </div>
             </div>
           </div>
@@ -152,7 +142,7 @@
 </template>
 
 <script>
-import {throttle} from 'lodash';
+import { throttle } from "lodash";
 export default {
   props: {
     baseData: {
@@ -209,62 +199,63 @@ export default {
     this.searchEndDate = newEndDateStr;
   },
   beforeDestroy() {
-      window.removeEventListener('scroll', this.throttleGetScrollTop, true)
+    window.removeEventListener("scroll", this.throttleGetScrollTop, true);
   },
   methods: {
     initScroll() {
-      this.isSlide = true // 平滑滚动前
-      setTimeout(() => { // 点击时平滑滚动完成前不监听滚动
-        this.isSlide = false
-      }, 600)
+      this.isSlide = true; // 平滑滚动前
+      setTimeout(() => {
+        // 点击时平滑滚动完成前不监听滚动
+        this.isSlide = false;
+      }, 600);
       // 收集收集滚动元素的高度
       this.slotsTopList = this.$refs.content?.map((item, index) => {
-        return item.offsetTop
-      })
-      this.slotsTopList = this.slotsTopList || []
-      console.log('this.slotsTopList', this.slotsTopList)
+        return item.offsetTop;
+      });
+      this.slotsTopList = this.slotsTopList || [];
       // 初始化滚动监听
-      this.scrollInit()
+      this.scrollInit();
     },
-     // 监听滚动高度
-    scrollInit () {
-      this.throttleGetScrollTop = throttle(this.getScrollTop, 100)
-      this.throttleGetScrollTop()
-      window.addEventListener('scroll', this.throttleGetScrollTop, true)
+    // 监听滚动高度
+    scrollInit() {
+      this.throttleGetScrollTop = throttle(this.getScrollTop, 100);
+      this.throttleGetScrollTop();
+      window.addEventListener("scroll", this.throttleGetScrollTop, true);
     },
     // 监听滚动距离
-    async getScrollTop () {
-      if (this.isSlide) return
-      const scrollTop = document.getElementById('privilage-list').scrollTop
+    async getScrollTop() {
+      if (this.isSlide) return;
+      const scrollTop = document.getElementById("privilage-list").scrollTop;
       // 获取当前滚动内容对应的tabIndex
       let currentIndex = this.slotsTopList.findIndex((top, index) => {
-        return scrollTop >= this.slotsTopList[index + 1] && scrollTop < this.slotsTopList[index + 2]
-      })
-      // this.clickedIndex = currentIndex + 1
-      if(currentIndex + 1 > -1) {
-        // this.showPadding = true
-      this.areaType = this.areas[currentIndex + 1].Id
+        return (
+          scrollTop >= this.slotsTopList[index + 1] &&
+          scrollTop < this.slotsTopList[index + 2]
+        );
+      });
+      if (currentIndex + 1 > -1) {
+        this.areaType = this.areas[currentIndex + 1].Id;
       } else {
-        this.showPadding = false
+        this.showPadding = false;
       }
     },
     goScrollHandler(id) {
-      this.isSlide = true // 平滑滚动前
-      setTimeout(() => { // 点击时平滑滚动完成前不监听滚动
-        this.isSlide = false
-      }, 600)
-      console.log("scrollIntoView",`el${id}`, id);
-      const ele = `#el${id}`
-      document.querySelector(ele).scrollIntoView({ behavior: "smooth", block: 'end' });
+      this.isSlide = true; // 平滑滚动前
+      setTimeout(() => {
+        // 点击时平滑滚动完成前不监听滚动
+        this.isSlide = false;
+      }, 600);
+      const ele = `#el${id}`;
+      document.querySelector(ele).scrollIntoView({ behavior: "smooth", block: "end" });
     },
     handleSelectArea(item) {
-      this.$emit('close', false)
+      this.$emit("close", false);
       this.CommonJump("/city/" + item.Id, {
         id: item.Id,
       });
     },
     handleCategoryChage(item) {
-      this.$emit('close', false)
+      this.$emit("close", false);
       this.CommonJump("/search", {
         qsearchKey: this.searchKey,
         qsearchDate: this.searchDate,
@@ -278,11 +269,9 @@ export default {
       this.selectedArea = hotArr;
       this.areas = this.baseData.AreaList;
       this.hotAreas = hotArr;
-      console.log("hotArea", this.hotAreas, this.areas);
       this.$nextTick(() => {
-        
-    this.initScroll();
-      }) 
+        this.initScroll();
+      });
     },
     getHotList(arr) {
       let hotArr = [];
@@ -336,7 +325,6 @@ export default {
 }
 .nav-items:hover {
   background: #eee;
-
   color: var(--q-color-primary);
 }
 .nav-items:hover::after {

src/components/navs/city-category.vue

@@ -68,7 +68,6 @@
 .city3 {
   height: 32px;
   line-height: 32px;
-  /* display: inline-block; */
   margin: 0 20px 4px 0;
   cursor: pointer;
   font-weight: bold;
@@ -110,7 +109,7 @@
   margin: 0 10px 0 44px;
 }
 .address-btn:hover {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 .all-type {
   margin-left: 10px;
@@ -173,7 +172,7 @@
   background: #fff;
 }
 .category-btn:hover {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 .category-icon {
   width: 16px;
@@ -181,12 +180,13 @@
 }
 </style>
 <template>
-<div>
+  <div>
     <q-separator color="grey-2" v-if="isHome" />
     <div class="header-box flex q-py-sm" v-if="isHome">
       <q-tabs align="center" shrink>
         <div
-          flat unelevated
+          flat
+          unelevated
           class="address-btn"
           @mouseenter="mouseenterAddress"
           @mouseleave="mouseeleaveAddress"
@@ -201,7 +201,7 @@
           <q-menu
             ref="address"
             @mouseenter="addressMenuEnter"
-          @mouseleave="addressMenuLeave"
+            @mouseleave="addressMenuLeave"
             class="light-shadow"
           >
             <div class="address-box flex">
@@ -286,15 +286,13 @@
         <q-separator style="height: 16px; margin: auto 0" vertical />
         <div
           class="all-type category-btn"
-          flat unelevated
+          flat
+          unelevated
           @mouseenter="typeHoverAll(true)"
           @mouseleave="typeHoverAll(false)"
-        >全部分類
-          <q-menu
-            ref="menu0"
-            @mouseenter="menuFocusAll = 2"
-            @mouseleave="menuLeaveAll"
-          >
+        >
+          全部分類
+          <q-menu ref="menu0" @mouseenter="menuFocusAll = 2" @mouseleave="menuLeaveAll">
             <div class="all-menu">
               <div class="flex">
                 <div
@@ -302,7 +300,16 @@
                   :key="i"
                   v-for="(x, i) in dataList.CategoryList"
                 >
-                <img class="category-icon"  :src="require(`../../assets/img/home/${['guanguang','jindian','hotel','car'][i]}.png`)"/>
+                  <template v-if="i <= 3">
+                    <img
+                      class="category-icon"
+                      :src="
+                        require(`../../assets/img/home/${
+                          ['guanguang', 'jindian', 'hotel', 'car'][i]
+                        }.png`)
+                      "
+                    />
+                  </template>
                   {{ x.CategoryName }}
                 </div>
               </div>
@@ -347,11 +354,13 @@
             class="category-btn"
             :key="i"
             :label="x.CategoryName"
-            flat unelevated
+            flat
+            unelevated
             :content-style="{ hover: '#ff0000' }"
             @mouseenter="typeHover(i, true)"
             @mouseleave="typeHover(i, false)"
-          >{{x.CategoryName}}
+          >
+            {{ x.CategoryName }}
             <q-menu
               ref="menu"
               :key="i"
@@ -388,7 +397,8 @@
           </div>
         </template>
       </q-tabs>
-    </div></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -456,10 +466,7 @@ export default {
     this.isHome =
       this.$router.history.current.path === "/" ||
       this.$router.history.current.path === "/index";
-    console.log(
-      'JSON.parse(window.localStorage.getItem("b2bUser"))',
-      JSON.parse(window.localStorage.getItem("b2bUser"))
-    );
+
     if (localStorage.b2bUser) {
       this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
     }
@@ -477,13 +484,10 @@ export default {
     );
     this.searchDate = newStartDateStr;
     this.searchEndDate = newEndDateStr;
-    // this.initAreas()
-    // this.initNavs();
-    // this.getCategoryList();
   },
   methods: {
     avatarClick() {
-      if (this.LoginUser.token && 1=== 2) {
+      if (this.LoginUser.token && 1 === 2) {
         this.CommonJump("/userCenter");
       } else {
         // 展示登录弹窗
@@ -589,7 +593,6 @@ export default {
       if (this.baseData.nav.navs) {
         this.baseData.nav.navs.forEach((x) => {
           if (x.title.indexOf("^") != -1) {
-            console.log("in....");
             let t = x.title.split("^");
             let c = t[1].split(",");
             x.childs = [];
@@ -605,7 +608,6 @@ export default {
           this.navs.push(x);
         });
       }
-
       this.navsStyle = this.navs.findIndex((x) => x.childs) != -1 ? 2 : 1;
     },
     initAreas() {