cosmos-explorer/src/modules/[chain]/gov/index.vue
2023-05-16 18:20:31 +08:00

55 lines
1.2 KiB
Vue

<script lang="ts" setup>
import { useGovStore } from '@/stores';
import ProposalListItem from '@/components/ProposalListItem.vue';
import { ref, onMounted } from 'vue';
const tab = ref('2');
const store = useGovStore();
onMounted(() => {
store.fetchProposals('2').then((x) => {
if (x?.proposals?.length === 0) {
tab.value = '3';
store.fetchProposals('3');
}
});
});
const changeTab = (val: '2' | '3' | '4') => {
tab.value = val;
store.fetchProposals(val);
};
</script>
<template>
<div>
<div class="tabs tabs-boxed bg-transparent mb-4">
<a
class="tab text-gray-400 uppercase"
:class="{ 'tab-active': tab === '2' }"
@click="changeTab('2')"
>Voting</a
>
<a
class="tab text-gray-400 uppercase"
:class="{ 'tab-active': tab === '3' }"
@click="changeTab('3')"
>Passed</a
>
<a
class="tab text-gray-400 uppercase"
:class="{ 'tab-active': tab === '4' }"
@click="changeTab('4')"
>Rejected</a
>
</div>
<ProposalListItem :proposals="store?.proposals[tab]" :votable="tab === '2'" />
</div>
</template>
<route>
{
meta: {
i18n: 'governance',
order: 2
}
}
</route>