地理筛选点击事件

src/view/components/filter-modal.vue

@@ -99,10 +99,39 @@
           </n-collapse-item>
         </n-collapse>
         <div v-show="curTab === 'geo'" id="geo-filter">
-          <p class="nav">社区</p>
-          <n-tabs type="line" size="small">
+          <p class="nav">
+            <span v-if="curPath.length > 1" class="pre" @click="toPreStep">
+              <n-icon size=".08rem">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z"
+                    fill="currentColor"
+                  ></path>
+                </svg>
+              </n-icon>
+              上一级 |
+            </span>
+            <template v-if="curPath.length > 0">
+              <span v-for="(n, i) in curPath" :key="n">
+                <span v-if="i !== 0">/</span>
+                <b v-if="i === curPath.length - 1">{{ n }}</b>
+                <template v-else>{{ n }}</template>
+              </span>
+            </template>
+            <b v-else>社区</b>
+          </p>
+          <n-tabs v-model:value="curGeo" type="line" size="small">
             <n-tab-pane name="社区" tab="社区" class="geo-list">
-              <div v-for="(item, i) in list1" :key="i">
+              <div
+                v-for="(item, i) in list1"
+                :key="i"
+                :class="{ on: curArea === item }"
+                @click="setArea(item)"
+              >
                 <p>
                   <n-icon class="dot" size=".1rem">
                     <svg
@@ -119,12 +148,12 @@
                         r="4"
                         fill="#C4C9CE"
                       />
-                      <circle cx="4" cy="4" r="2" fill="#C4C9CE" />
+                      <circle cx="4" cy="4" r="2" fill="currentColor" />
                     </svg>
                   </n-icon>
                   {{ item }}
                 </p>
-                <span class="next">
+                <span class="next" @click="areaNext(item)">
                   下一级
                   <n-icon class="icon" size=".1rem" color="#dd505E">
                     <svg
@@ -154,7 +183,12 @@
               </div>
             </n-tab-pane>
             <n-tab-pane name="居委" tab="居委" class="geo-list">
-              <div v-for="(item, i) in list2" :key="i">
+              <div
+                v-for="(item, i) in list2"
+                :key="i"
+                :class="{ on: curCommittee === item }"
+                @click="setCommittee(item)"
+              >
                 <p>
                   <n-icon class="dot" size=".1rem">
                     <svg
@@ -171,12 +205,12 @@
                         r="4"
                         fill="#C4C9CE"
                       />
-                      <circle cx="4" cy="4" r="2" fill="#C4C9CE" />
+                      <circle cx="4" cy="4" r="2" fill="currentColor" />
                     </svg>
                   </n-icon>
                   {{ item }}
                 </p>
-                <span class="next">
+                <span class="next" @click="committeeNext(item)">
                   下一级
                   <n-icon class="icon" size=".1rem" color="#dd505E">
                     <svg
@@ -206,7 +240,12 @@
               </div>
             </n-tab-pane>
             <n-tab-pane name="小区" tab="小区" class="geo-list">
-              <div v-for="(item, i) in list3" :key="i">
+              <div
+                v-for="(item, i) in list3"
+                :key="i"
+                :class="{ on: curCommunity === item }"
+                @click="setCommunity(item)"
+              >
                 <p>
                   <n-icon class="dot" size=".1rem">
                     <svg
@@ -223,12 +262,12 @@
                         r="4"
                         fill="#C4C9CE"
                       />
-                      <circle cx="4" cy="4" r="2" fill="#C4C9CE" />
+                      <circle cx="4" cy="4" r="2" fill="currentColor" />
                     </svg>
                   </n-icon>
                   {{ item }}
                 </p>
-                <span class="next">
+                <span class="next" @click="communityNext(item)">
                   下一级
                   <n-icon class="icon" size=".1rem" color="#dd505E">
                     <svg
@@ -299,23 +338,81 @@ const member = ref([
   { name: '某党员标签', key: '某党员标签', checked: false },
 ])
 
-const list1 = ['牡丹社区', 'XX社区', 'XX社区', 'XX社区', 'XX社区', 'XX社区']
+const list1 = [
+  '牡丹社区',
+  'XX社区1',
+  'XX社区2',
+  'XX社区3',
+  'XX社区4',
+  'XX社区5',
+]
 const list2 = [
-  '某某居委',
-  '某某居委',
-  '某某居委',
-  '某某居委',
-  '某某居委',
-  '某某居委',
+  '某某居委1',
+  '某某居委2',
+  '某某居委3',
+  '某某居委4',
+  '某某居委5',
+  '某某居委6',
 ]
 const list3 = [
-  '某某小区',
-  '某某小区',
-  '某某小区',
-  '某某小区',
-  '某某小区',
-  '某某小区',
+  '某某小区1',
+  '某某小区2',
+  '某某小区3',
+  '某某小区4',
+  '某某小区5',
+  '某某小区6',
 ]
+
+const curGeo = ref('社区')
+const curArea = ref<string | null>(null)
+const curCommittee = ref<string | null>(null)
+const curCommunity = ref<string | null>(null)
+const setArea = (name: string) => {
+  curArea.value = name
+  console.log(name, curArea.value)
+}
+const setCommittee = (name: string) => (curCommittee.value = name)
+const setCommunity = (name: string) => (curCommunity.value = name)
+const areaNext = (name: string) => {
+  setArea(name)
+  curGeo.value = '居委'
+}
+const committeeNext = (name: string) => {
+  setCommittee(name)
+  curGeo.value = '小区'
+}
+const communityNext = (name: string) => {
+  setCommunity(name)
+  curGeo.value = '楼宇'
+}
+const toPreStep = () => {
+  if (curGeo.value === '楼宇') {
+    curGeo.value = '小区'
+    return
+  }
+  if (curGeo.value === '小区') {
+    curCommunity.value = null
+    curGeo.value = '居委'
+    return
+  }
+  if (curGeo.value === '居委') {
+    curCommittee.value = null
+    curGeo.value = '社区'
+    return
+  }
+}
+const curPath = computed(() => {
+  let result = ''
+  curArea.value && (result += curArea.value)
+  curArea.value &&
+    (result +=
+      curGeo.value === '社区' ? '' : `/${curCommittee.value || '居委'}`)
+  curCommittee.value &&
+    (result +=
+      curGeo.value === '居委' ? '' : `/${curCommunity.value || '小区'}`)
+  if (!result) return []
+  return result.split('/')
+})
 </script>
 
 <style lang="stylus" scoped>
@@ -351,8 +448,15 @@ const list3 = [
         font-size .08rem
 #geo-filter
   .nav
-    font-family $font-ping-medium
     padding .03rem .1rem
+    color #a7afb7
+    .pre
+      cursor pointer
+      &:hover
+        color $red
+    b
+      color #000
+
   .geo-list
     background #f7f7f7
     >div
@@ -361,6 +465,15 @@ const list3 = [
       border-bottom .01rem solid $light-gray
       padding .06rem 0
       color $font
+      cursor pointer
+      >p
+        flex 1
+        $text-overflow()
+      &.on
+      &:hover
+        color $red
+        .dot
+          color $red
       .dot
         margin 0 .08rem
       .next

src/view/main.vue

@@ -38,7 +38,7 @@ const showTag = ref(true)
   border-radius .02rem
   position fixed
   top .48rem
-  left 3.5rem
+  left 3.1rem
   background $white-bg
   box-sizing border-box
   $center()