Skip to content

H
huamu
Commit 745f293c authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

filter-modal

parent 822d38f5
Show whitespace changes
Inline Side-by-side
Showing with 478 additions and 14 deletions
src/App.vue
View file @ 745f293c
...@@ -21,6 +21,9 @@ const themeOverrides: GlobalThemeOverrides = { ...@@ -21,6 +21,9 @@ const themeOverrides: GlobalThemeOverrides = {
borderFocus: '#FCF4F5', borderFocus: '#FCF4F5',
iconSize: '0.14rem', iconSize: '0.14rem',
}, },
Checkbox: {
textColor: '#6E798C',
},
} }
</script> </script>
...@@ -45,6 +48,7 @@ html, body ...@@ -45,6 +48,7 @@ html, body
user-select none user-select none
font-size 15.8vh font-size 15.8vh
line-height 1.5 line-height 1.5
overflow hidden
p p
margin 0 margin 0
#app #app
......
src/assets/images/dot.svg 0 → 100644
View file @ 745f293c
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.2" cx="4" cy="4" r="4" fill="#C4C9CE"/>
<circle cx="4" cy="4" r="2" fill="#C4C9CE"/>
</svg>
src/assets/images/export.svg 0 → 100644
View file @ 745f293c
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z" fill="#DD505E"/>
<path d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z" fill="#DD505E"/>
</svg>
src/components/MyComponent/main.styl
View file @ 745f293c
...@@ -59,6 +59,8 @@ $light-gray = rgba(0,0,0,.06) ...@@ -59,6 +59,8 @@ $light-gray = rgba(0,0,0,.06)
$bg = rgba(249,250,250,.75) $bg = rgba(249,250,250,.75)
$white-bg = #f7f7f7 $white-bg = #f7f7f7
$font = #6E798C
$flex-align() { $flex-align() {
display flex display flex
align-items center align-items center
......
src/main.ts
View file @ 745f293c
...@@ -13,6 +13,9 @@ import { ...@@ -13,6 +13,9 @@ import {
NTabPane, NTabPane,
NEmpty, NEmpty,
NButton, NButton,
NDrawer,
NDrawerContent,
NCheckbox,
} from 'naive-ui' } from 'naive-ui'
const naive = create({ const naive = create({
...@@ -27,6 +30,9 @@ const naive = create({ ...@@ -27,6 +30,9 @@ const naive = create({
NTabPane, NTabPane,
NEmpty, NEmpty,
NButton, NButton,
NDrawer,
NDrawerContent,
NCheckbox,
], ],
}) })
......
src/store/index.ts
View file @ 745f293c
...@@ -3,9 +3,8 @@ import state from './state' ...@@ -3,9 +3,8 @@ import state from './state'
import mutations from './mutations' import mutations from './mutations'
import actions from './actions' import actions from './actions'
export interface GlobalStateProps { export type GlobalStateProps = typeof state
showLoading: boolean
}
/** ------------------------------------- 分隔线 --------------------------------------- */ /** ------------------------------------- 分隔线 --------------------------------------- */
/** 去除tuple第一项 */ /** 去除tuple第一项 */
...@@ -25,7 +24,7 @@ export interface Commit { ...@@ -25,7 +24,7 @@ export interface Commit {
<T extends keyof CommitPayload>( <T extends keyof CommitPayload>(
type: T, type: T,
payload?: CommitPayload[T], payload?: CommitPayload[T],
options?: CommitOptions options?: CommitOptions,
): void ): void
} }
type ActionsType = typeof actions type ActionsType = typeof actions
...@@ -37,10 +36,9 @@ export interface Dispatch { ...@@ -37,10 +36,9 @@ export interface Dispatch {
<T extends keyof DispatchPayload>( <T extends keyof DispatchPayload>(
type: T, type: T,
payload?: DispatchPayload[T], payload?: DispatchPayload[T],
options?: DispatchOptions options?: DispatchOptions,
): Promise<any> ): Promise<any>
} }
/** 修改Store类型上的commit和dispatch方法类型， 使其在页面中使用store.commit等方法有约束和提示 */ /** 修改Store类型上的commit和dispatch方法类型， 使其在页面中使用store.commit等方法有约束和提示 */
const store = createStore<GlobalStateProps>({ const store = createStore<GlobalStateProps>({
state, state,
......
src/store/mutations.ts
View file @ 745f293c
import { GlobalStateProps } from './index' import { GlobalStateProps } from './index'
export default { export default {
SET_LOADING(state: GlobalStateProps, val: boolean): void { SET_LOADING(state: GlobalStateProps, val: boolean) {
state.showLoading = val state.showLoading = val
}, },
SET_FILTER_MODAL(state: GlobalStateProps, val: boolean) {
state.showFilterModal = val
},
} }
src/store/state.ts
View file @ 745f293c
import { GlobalStateProps } from './index'
export default { export default {
showLoading: false, showLoading: false,
} as GlobalStateProps showFilterModal: true,
}
src/view/components/basic-info.vue
View file @ 745f293c
...@@ -217,7 +217,7 @@ const clickTag = (key: string) => { ...@@ -217,7 +217,7 @@ const clickTag = (key: string) => {
position fixed position fixed
top .48rem top .48rem
left .05rem left .05rem
width 3.4rem width 3rem
#basic-info #basic-info
width 100% width 100%
background $bg background $bg
...@@ -300,11 +300,13 @@ const clickTag = (key: string) => { ...@@ -300,11 +300,13 @@ const clickTag = (key: string) => {
box-sizing border-box box-sizing border-box
>span >span
$flex-align() $flex-align()
$text-overflow()
justify-content center justify-content center
width 32% width 32%
background #fff background #fff
border-radius .03rem border-radius .03rem
cursor pointer cursor pointer
font-size .09rem
&:hover &:hover
&.on &.on
background $light-red background $light-red
......
src/view/components/filter-modal.vue 0 → 100644
View file @ 745f293c
<template>
<n-drawer
to="#app"
:show="show"
:on-update:show="close"
width="2.5rem"
:mask-closable="false"
>
<n-drawer-content title="筛选" closable>
<div class="content">
<div class="tabs">
<div :class="{ on: curTab === 'tag' }" @click="curTab = 'tag'">
标签筛选
</div>
<div :class="{ on: curTab === 'geo' }" @click="curTab = 'geo'">
地理筛选
</div>
</div>
<n-collapse v-show="curTab === 'tag'" id="tag-filter">
<template #arrow>
<n-icon>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512 512"
enable-background="new 0 0 512 512"
xml:space="preserve"
>
<g><polygon points="192,128 320,256 192,384 "></polygon></g>
</svg>
</n-icon>
</template>
<n-collapse-item title="党组织" name="1">
<div class="list">
<div
v-for="item in organization"
:key="item.name"
:title="item.name"
>
<n-checkbox v-model:checked="item.checked" size="small">{{
item.name
}}</n-checkbox>
<div v-show="item.checked" class="export">
导出详表
<n-icon size=".1rem">
<svg
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z"
fill="#DD505E"
/>
<path
d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z"
fill="#DD505E"
/>
</svg>
</n-icon>
</div>
</div>
</div>
</n-collapse-item>
<n-collapse-item title="党员" name="2">
<div class="list">
<div v-for="item in member" :key="item.name" :title="item.name">
<n-checkbox v-model:checked="item.checked" size="small">{{
item.name
}}</n-checkbox>
<div v-show="item.checked" class="export">
导出详表
<n-icon size=".1rem">
<svg
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z"
fill="#DD505E"
/>
<path
d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z"
fill="#DD505E"
/>
</svg>
</n-icon>
</div>
</div>
</div>
</n-collapse-item>
</n-collapse>
<div v-show="curTab === 'geo'" id="geo-filter">
<p class="nav">社区</p>
<n-tabs type="line" size="small">
<n-tab-pane name="社区" tab="社区" class="geo-list">
<div v-for="(item, i) in list1" :key="i">
<p>
<n-icon class="dot" size=".1rem">
<svg
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
opacity="0.2"
cx="4"
cy="4"
r="4"
fill="#C4C9CE"
/>
<circle cx="4" cy="4" r="2" fill="#C4C9CE" />
</svg>
</n-icon>
{{ item }}
</p>
<span class="next">
下一级
<n-icon class="icon" size=".1rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</span>
</div>
</n-tab-pane>
<n-tab-pane name="居委" tab="居委" class="geo-list">
<div v-for="(item, i) in list2" :key="i">
<p>
<n-icon class="dot" size=".1rem">
<svg
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
opacity="0.2"
cx="4"
cy="4"
r="4"
fill="#C4C9CE"
/>
<circle cx="4" cy="4" r="2" fill="#C4C9CE" />
</svg>
</n-icon>
{{ item }}
</p>
<span class="next">
下一级
<n-icon class="icon" size=".1rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</span>
</div>
</n-tab-pane>
<n-tab-pane name="小区" tab="小区" class="geo-list">
<div v-for="(item, i) in list3" :key="i">
<p>
<n-icon class="dot" size=".1rem">
<svg
width="8"
height="8"
viewBox="0 0 8 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
opacity="0.2"
cx="4"
cy="4"
r="4"
fill="#C4C9CE"
/>
<circle cx="4" cy="4" r="2" fill="#C4C9CE" />
</svg>
</n-icon>
{{ item }}
</p>
<span class="next">
下一级
<n-icon class="icon" size=".1rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
</n-icon>
</span>
</div>
</n-tab-pane>
</n-tabs>
</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.showFilterModal)
const close = () => store.commit('SET_FILTER_MODAL', false)
const curTab = ref('tag')
const organization = ref([
{ name: '荣获区级奖项党组织', key: '荣获区级奖项党组织', checked: false },
{
name: '荣获市级及以上奖项党组织',
key: '荣获市级及以上奖项党组织',
checked: false,
},
{ name: '某党组织标签', key: '某党组织标签', checked: false },
{ name: '某党组织标签', key: '某党组织标签', checked: false },
{ name: '某党组织标签', key: '某党组织标签', checked: false },
])
const member = ref([
{ name: '荣获区级奖项党员', key: '荣获区级奖项党员', checked: false },
{
name: '荣获市级及以上奖项党员',
key: '荣获市级及以上奖项党员',
checked: false,
},
{
name: '光荣在党50年',
key: '光荣在党50年',
checked: false,
},
{ name: '党心暖我心', key: '党心暖我心', checked: false },
{ name: '某党员标签', key: '某党员标签', checked: false },
])
const list1 = ['牡丹社区', 'XX社区', 'XX社区', 'XX社区', 'XX社区', 'XX社区']
const list2 = [
'某某居委',
'某某居委',
'某某居委',
'某某居委',
'某某居委',
'某某居委',
]
const list3 = [
'某某小区',
'某某小区',
'某某小区',
'某某小区',
'某某小区',
'某某小区',
]
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.content
.tabs
margin .05rem
$flex-align()
border-radius .03rem
border .01rem solid $light-gray
padding .02rem
>div
flex 1
border-radius inherit
color $gray
text-align center
cursor pointer
&:hover
&.on
background $light-red
color $red
.list
padding .05rem .1rem
background #f7f7f7
>div
border-bottom .01rem solid $light-gray
padding .08rem 0
$flex-align()
justify-content space-between
.export
color $red
cursor pointer
font-size .08rem
#geo-filter
.nav
font-family $font-ping-medium
padding .03rem .1rem
.geo-list
background #f7f7f7
>div
$flex-align()
justify-content space-between
border-bottom .01rem solid $light-gray
padding .06rem 0
color $font
.dot
margin 0 .08rem
.next
color $red
cursor pointer
font-size .09rem
&:hover
font-family $font-ping-medium
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.n-drawer-mask
display none
.n-drawer.n-drawer--right-placement
top .42rem
.n-drawer-header
font-family $font-ping-medium
.n-drawer-body-content-wrapper
padding 0
overflow-x hidden !important
overflow-y auto !important
.n-drawer-body
overflow-y auto
#tag-filter
.n-collapse-item__header
padding .05rem
border-top .01rem solid $light-gray
.n-collapse-item__content-inner
padding-top 0
.n-collapse-item
border-top none
.n-checkbox
width 75%
.n-checkbox__label
width 90%
font-size .09rem
$text-overflow()
&:hover
color #ec7281
.n-checkbox--checked
.n-checkbox__label
color $red
#geo-filter
.n-tabs
.n-tabs-wrapper
padding .03rem .1rem
.n-tabs-tab
color #a7afb7
font-size .1rem
padding 0
&:hover
&.n-tabs-tab--active
color $red
.n-tab-pane
padding .05rem .1rem
box-sizing border-box
</style>
src/view/components/nav-bar.vue
View file @ 745f293c
...@@ -22,7 +22,12 @@ ...@@ -22,7 +22,12 @@
</template> </template>
</n-input> </n-input>
<div class="align-center"> <div class="align-center">
<n-icon class="btn" size=".12rem"> <n-icon
class="btn"
:class="{ on: showFilterModal }"
size=".12rem"
@click="onClick('filter')"
>
<svg <svg
width="22" width="22"
height="20" height="20"
...@@ -184,12 +189,26 @@ ...@@ -184,12 +189,26 @@
<!-- <SearchModal :data="resultData" /> --> <!-- <SearchModal :data="resultData" /> -->
<SearchModal :visible="showResult" :data="resultData" /> <SearchModal :visible="showResult" :data="resultData" />
<FilterModal />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import useDebounce from '@/hooks/useDebounce' import useDebounce from '@/hooks/useDebounce'
import SearchModal from './search-modal.vue' import SearchModal from './search-modal.vue'
import FilterModal from './filter-modal.vue'
import store from '@/store'
const showFilterModal = computed(() => store.state.showFilterModal)
const onClick = (type: string) => {
switch (type) {
case 'filter':
store.commit('SET_FILTER_MODAL', true)
break
default:
break
}
}
const emit = defineEmits(['focus', 'blur']) const emit = defineEmits(['focus', 'blur'])
...@@ -315,6 +334,7 @@ watch( ...@@ -315,6 +334,7 @@ watch(
padding .04rem padding .04rem
border-radius .02rem border-radius .02rem
&:hover &:hover
&.on
color $red color $red
background $light-red background $light-red
.icon .icon
......
src/view/main.vue
View file @ 745f293c
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</n-icon> </n-icon>
</div> </div>
<InforModal class="info-modal" /> <InforModal class="info-modal" />
<listModal class="list-modal" /> <ListModal class="list-modal" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -26,7 +26,7 @@ import { ref } from 'vue' ...@@ -26,7 +26,7 @@ import { ref } from 'vue'
import NavBar from './components/nav-bar.vue' import NavBar from './components/nav-bar.vue'
import BasicInfo from './components/basic-info.vue' import BasicInfo from './components/basic-info.vue'
import InforModal from './components/info-modal.vue' import InforModal from './components/info-modal.vue'
import listModal from './components/list-modal.vue' import ListModal from './components/list-modal.vue'
const showTag = ref(true) const showTag = ref(true)
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment