61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
||
<div v-if="isMobile()" class="mobile-common-query card-item">
|
||
<div class="query-item">
|
||
<span>分类：</span>
|
||
<el-segmented v-model="anniversaryStore.queryInfo.category"
|
||
:options="queryCategoryList"
|
||
@change="anniversaryStore.queryAnniversaryList()"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="common-query">
|
||
<el-select v-model="anniversaryStore.queryInfo.category"
|
||
placeholder="请选择纪念日类别" clearable
|
||
@change="anniversaryStore.queryAnniversaryList()"
|
||
style="width: 180px">
|
||
<el-option
|
||
v-for="(item, index) in queryCategoryList"
|
||
:key="index" :label="item.label" :value="item.value"
|
||
/>
|
||
</el-select>
|
||
|
||
<el-button :icon="Refresh" circle @click="refreshClick"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import { useAnniversaryStore } from '@/store/anniversary.ts'
|
||
import { Refresh } from '@element-plus/icons-vue'
|
||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
||
import { ICategory } from '@/types'
|
||
|
||
const anniversaryStore = useAnniversaryStore()
|
||
|
||
const queryCategoryList = ref([] as ICategory[])
|
||
|
||
onMounted(async () => {
|
||
await anniversaryStore.queryAnniversaryCategory()
|
||
initCategoryList()
|
||
})
|
||
|
||
const refreshClick = async () => {
|
||
anniversaryStore.queryInfo.category = ''
|
||
await anniversaryStore.queryAnniversaryList()
|
||
}
|
||
|
||
const initCategoryList = () => {
|
||
queryCategoryList.value = []
|
||
queryCategoryList.value.push({
|
||
label: '全部',
|
||
value: ''
|
||
})
|
||
anniversaryStore.categoryStats.forEach((item) => {
|
||
queryCategoryList.value.push({
|
||
label: item.name,
|
||
value: item.name
|
||
})
|
||
})
|
||
}
|
||
</script>
|