activity-modal first stage

src/App.vue

 <template>
-  <n-config-provider :theme-overrides="themeOverrides">
+  <n-config-provider
+    :theme-overrides="themeOverrides"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+  >
+    <div id="main">
       <Main />
+    </div>
     <m-loader v-if="showLoading" />
   </n-config-provider>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'
+import { NConfigProvider, GlobalThemeOverrides, zhCN, dateZhCN } from 'naive-ui'
 import Main from './view/main.vue'
 import store from '@/store'
 

src/main.ts

@@ -16,6 +16,8 @@ import {
   NDrawer,
   NDrawerContent,
   NCheckbox,
+  NDatePicker,
+  NSwitch,
 } from 'naive-ui'
 
 const naive = create({
@@ -33,6 +35,8 @@ const naive = create({
     NDrawer,
     NDrawerContent,
     NCheckbox,
+    NDatePicker,
+    NSwitch,
   ],
 })
 

src/store/mutations.ts

@@ -7,4 +7,7 @@ export default {
   SET_FILTER_MODAL(state: GlobalStateProps, val: boolean) {
     state.showFilterModal = val
   },
+  SET_ACTIVITY_MODAL(state: GlobalStateProps, val: boolean) {
+    state.showActivityModal = val
+  },
 }

src/store/state.ts

 export default {
   showLoading: false,
-  showFilterModal: true,
+  showFilterModal: false,
+  showActivityModal: false,
 }

src/view/components/activity-modal.vue

+<template>
+  <n-drawer
+    to="#main"
+    :show="show"
+    :on-update:show="close"
+    width="2.8rem"
+    :mask-closable="false"
+  >
+    <n-drawer-content title="党建活动" closable>
+      <div class="content">
+        <div class="head">
+          <p>活动日期</p>
+          <n-button color="#dd505e" text-color="#fff" size="tiny">
+            活动录入
+          </n-button>
+        </div>
+        <div class="date">
+          <div class="name">
+            <p>起始日期</p>
+            <p>截止日期</p>
+          </div>
+          <n-date-picker
+            start-placeholder="请选择日期"
+            end-placeholder="请选择日期"
+            size="small"
+            separator="至"
+            type="daterange"
+          />
+        </div>
+        <div class="list">
+          <div v-for="(item, i) in list" :key="i">
+            <div class="title">
+              <p>{{ item.title }}</p>
+              <span>
+                地图显示
+                <n-switch v-model:value="item.onMap" size="small" />
+              </span>
+            </div>
+            <div class="sum">
+              <div>
+                <m-count class="count" :value="item.count" /> <span>次</span>
+                <p>举办次数</p>
+              </div>
+              <div>
+                <m-count class="count" :value="item.people" /> <span>人次</span>
+                <p>参与人次</p>
+              </div>
+              <div>
+                <m-count class="count" :value="item.ratio" /> <span>%</span>
+                <p>出席率</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import store from '@/store'
+import { computed, ref } from 'vue'
+const show = computed(() => store.state.showActivityModal)
+const close = () => store.commit('SET_ACTIVITY_MODAL', false)
+const list = ref([
+  { title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
+  { title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },
+  {
+    title: '楼组党建相关会议',
+    count: 35,
+    people: 890,
+    ratio: 50,
+    onMap: false,
+  },
+  { title: '党课', count: 35, people: 890, ratio: 50, onMap: false },
+  { title: '主题党日活动', count: 35, people: 890, ratio: 50, onMap: false },
+])
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.content
+  display flex
+  flex-direction column
+  .head
+    padding 0 .12rem
+    $flex-align()
+    justify-content space-between
+    font-family $font-ping-medium
+    margin .1rem 0
+  .date
+    padding 0 .1rem .1rem
+    border-bottom .01rem solid $light-gray
+    .name
+      display flex
+      >p
+        flex 1
+        color $font
+        padding-left .02rem
+  .list
+    flex 1
+    background #f7f7f7
+    padding .08rem
+    >div
+      border-radius .04rem
+      background #fff
+      box-shadow 0 .02rem .06rem 0 rgba(0,0,0,0.1)
+      padding .05rem .08rem
+      box-sizing border-box
+      margin-bottom .1rem
+      .title
+        $flex-align()
+        justify-content space-between
+        margin .05rem 0
+        p
+          font-family $font-ping-medium
+        span
+          font-size .08rem
+          color $font
+      .sum
+        $flex-align()
+        justify-content space-between
+        margin .03rem 0
+        >div
+          width 32%
+          border .01rem solid $light-gray
+          border-radius .04rem
+          padding .03rem .01rem .03rem .08rem
+          box-sizing border-box
+          .count
+            color $red
+            font-family $font-din
+            font-size .14rem
+            margin-right .03rem
+          span
+            font-size .08rem
+          p
+            color $font
+            font-size .09rem
+</style>
+<style lang="stylus">
+.n-date-picker
+  .n-input
+    background #f9fafb
+</style>

src/view/components/filter-modal.vue

 <template>
   <n-drawer
-    to="#app"
+    to="#main"
     :show="show"
     :on-update:show="close"
-    width="2.5rem"
+    width="2.8rem"
     :mask-closable="false"
   >
     <n-drawer-content title="筛选" closable>

src/view/components/nav-bar.vue

@@ -43,7 +43,12 @@
             />
           </svg>
         </n-icon>
-        <n-icon class="btn" size=".12rem">
+        <n-icon
+          class="btn"
+          :class="{ on: showActivityModal }"
+          size=".12rem"
+          @click="onClick('activity')"
+        >
           <svg
             width="24"
             height="24"
@@ -190,6 +195,7 @@
   <!-- <SearchModal :data="resultData" /> -->
   <SearchModal :visible="showResult" :data="resultData" />
   <FilterModal />
+  <ActivityModal />
 </template>
 
 <script lang="ts" setup>
@@ -197,14 +203,21 @@ import { computed, ref, watch } from 'vue'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
 import FilterModal from './filter-modal.vue'
+import ActivityModal from './activity-modal.vue'
 import store from '@/store'
 
 const showFilterModal = computed(() => store.state.showFilterModal)
+const showActivityModal = computed(() => store.state.showActivityModal)
 const onClick = (type: string) => {
+  store.commit('SET_FILTER_MODAL', false)
+  store.commit('SET_ACTIVITY_MODAL', false)
   switch (type) {
     case 'filter':
       store.commit('SET_FILTER_MODAL', true)
       break
+    case 'activity':
+      store.commit('SET_ACTIVITY_MODAL', true)
+      break
     default:
       break
   }