building-drawer first page

src/store/mutations.ts

@@ -4,10 +4,13 @@ export default {
   SET_LOADING(state: GlobalStateProps, val: boolean) {
     state.showLoading = val
   },
-  SET_FILTER_MODAL(state: GlobalStateProps, val: boolean) {
-    state.showFilterModal = val
+  SET_FILTER_DRAWER(state: GlobalStateProps, val: boolean) {
+    state.showFilterDrawer = val
   },
-  SET_ACTIVITY_MODAL(state: GlobalStateProps, val: boolean) {
-    state.showActivityModal = val
+  SET_ACTIVITY_DRAWER(state: GlobalStateProps, val: boolean) {
+    state.showActivityDrawer = val
+  },
+  SET_BUILDING_DRAWER(state: GlobalStateProps, val: boolean) {
+    state.showBuildingDrawer = val
   },
 }

src/store/state.ts

 export default {
   showLoading: false,
-  showFilterModal: false,
-  showActivityModal: false,
+  showFilterDrawer: false,
+  showActivityDrawer: false,
+  showBuildingDrawer: false,
 }

src/view/components/activity-drawer.vue

@@ -72,8 +72,8 @@
 import store from '@/store'
 import { computed, ref } from 'vue'
 import { Checkmark, Close } from '@vicons/ionicons5'
-const show = computed(() => store.state.showActivityModal)
-const closeDrawer = () => store.commit('SET_ACTIVITY_MODAL', false)
+const show = computed(() => store.state.showActivityDrawer)
+const closeDrawer = () => store.commit('SET_ACTIVITY_DRAWER', false)
 const list = ref([
   { title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
   { title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },

src/view/components/building-drawer.vue

+<template>
+  <n-drawer
+    to="#main"
+    :show="show"
+    :on-update:show="closeDrawer"
+    width="2.8rem"
+    :mask-closable="false"
+  >
+    <n-drawer-content closable>
+      <template #header>
+        <div class="head">
+          <n-icon class="back" size=".2rem" @click="back">
+            <ArrowBack />
+          </n-icon>
+          楼宇
+        </div>
+      </template>
+      <p class="name">某某社区某某居委某某小区</p>
+      <div class="list">
+        <div
+          v-for="(item, i) in list"
+          :key="i"
+          :class="{ on: curBuilding === item }"
+          @click="setBuilding(item)"
+        >
+          <p>
+            <n-icon class="dot" size=".1rem">
+              <svg-icon :data="dot" />
+            </n-icon>
+            {{ item }}
+          </p>
+          <span class="next" @click="buildingNext(item)">
+            下一级
+            <n-icon class="icon" size=".1rem" color="#dd505E">
+              <ArrowForward />
+            </n-icon>
+          </span>
+        </div>
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import store from '@/store'
+import dot from '@images/dot.svg'
+import { ArrowForward, ArrowBack } from '@vicons/ionicons5'
+const show = computed(() => store.state.showBuildingDrawer)
+const back = () => store.commit('SET_BUILDING_DRAWER', false)
+const closeDrawer = () => {
+  back()
+  store.commit('SET_FILTER_DRAWER', false)
+}
+
+const curBuilding = ref<string | null>(null)
+const showBuildingDetail = ref(false)
+const setBuilding = (name: string) => (curBuilding.value = name)
+const buildingNext = (name: string) => {
+  setBuilding(name)
+  showBuildingDetail.value = true
+  // TODO
+}
+const list = [
+  'XX小区某1号楼',
+  'XX小区某2号楼',
+  'XX小区某3号楼',
+  'XX小区某4号楼',
+  'XX小区某5号楼',
+]
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.head
+  $flex-align()
+  .back
+    cursor pointer
+    margin-right .05rem
+    border-radius .03rem
+    &:hover
+      color $red
+      background $light-red
+.name
+  margin .1rem
+.list
+  padding 0 .1rem
+  background #f7f7f7
+  >div
+    $flex-align()
+    justify-content space-between
+    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
+      color $red
+      cursor pointer
+      font-size .09rem
+      &:hover
+        font-family $font-ping-medium
+</style>

src/view/components/filter-drawer.vue

@@ -155,8 +155,8 @@ import { computed, ref } from 'vue'
 import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
 import exportIcon from '@images/export.svg'
 import dot from '@images/dot.svg'
-const show = computed(() => store.state.showFilterModal)
-const close = () => store.commit('SET_FILTER_MODAL', false)
+const show = computed(() => store.state.showFilterDrawer)
+const close = () => store.commit('SET_FILTER_DRAWER', false)
 
 const curTab = ref('tag')
 
@@ -232,13 +232,9 @@ const committeeNext = (name: string) => {
 }
 const communityNext = (name: string) => {
   setCommunity(name)
-  curGeo.value = '楼宇'
+  store.commit('SET_BUILDING_DRAWER', true)
 }
 const toPreStep = () => {
-  if (curGeo.value === '楼宇') {
-    curGeo.value = '小区'
-    return
-  }
   if (curGeo.value === '小区') {
     curCommunity.value = null
     curGeo.value = '居委'

src/view/components/nav-bar.vue

@@ -24,7 +24,7 @@
       <div class="align-center">
         <n-icon
           class="btn"
-          :class="{ on: showFilterModal }"
+          :class="{ on: showFilterDrawer || showBuildingDrawer }"
           size=".12rem"
           @click="onClick('filter')"
         >
@@ -32,7 +32,7 @@
         </n-icon>
         <n-icon
           class="btn"
-          :class="{ on: showActivityModal }"
+          :class="{ on: showActivityDrawer }"
           size=".12rem"
           @click="onClick('activity')"
         >
@@ -65,19 +65,20 @@
     </div>
   </div>
 
-  <!-- <SearchModal :data="resultData" /> -->
   <SearchModal :visible="showResult" :data="resultData" />
   <FilterDrawer />
+  <BuildingDrawer />
   <ActivityDrawer />
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
+import store from '@/store'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
 import FilterDrawer from './filter-drawer.vue'
 import ActivityDrawer from './activity-drawer.vue'
-import store from '@/store'
+import BuildingDrawer from './building-drawer.vue'
 import { CaretDown } from '@vicons/ionicons5'
 import nav1 from '@images/nav1.svg'
 import nav2 from '@images/nav2.svg'
@@ -85,17 +86,18 @@ import nav3 from '@images/nav3.svg'
 import nav4 from '@images/nav4.svg'
 import nav5 from '@images/nav5.svg'
 
-const showFilterModal = computed(() => store.state.showFilterModal)
-const showActivityModal = computed(() => store.state.showActivityModal)
+const showFilterDrawer = computed(() => store.state.showFilterDrawer)
+const showBuildingDrawer = computed(() => store.state.showBuildingDrawer)
+const showActivityDrawer = computed(() => store.state.showActivityDrawer)
 const onClick = (type: string) => {
-  store.commit('SET_FILTER_MODAL', false)
-  store.commit('SET_ACTIVITY_MODAL', false)
+  store.commit('SET_FILTER_DRAWER', false)
+  store.commit('SET_ACTIVITY_DRAWER', false)
   switch (type) {
     case 'filter':
-      store.commit('SET_FILTER_MODAL', true)
+      store.commit('SET_FILTER_DRAWER', true)
       break
     case 'activity':
-      store.commit('SET_ACTIVITY_MODAL', true)
+      store.commit('SET_ACTIVITY_DRAWER', true)
       break
     default:
       break