cloudflare_temp_email/frontend/src/views/admin/UserAddressManagement.vue

<script setup>
import { ref, h, onMounted } from 'vue';
import { useScopedI18n } from '@/i18n/app'
import { NBadge } from 'naive-ui'

import { api } from '../../api'

const props = defineProps({
    user_id: {
        type: Number,
        required: true
    }
});

const message = useMessage()

const { locale, t } = useScopedI18n('views.admin.UserAddressManagement')

const data = ref([])

const fetchData = async () => {
    try {
        const { results } = await api.fetch(
            `/admin/users/bind_address/${props.user_id}`,
        );
        data.value = results;
    } catch (error) {
        console.log(error)
        message.error(error.message || "error");
    }
}

const columns = [
    {
        title: t('emailAddress'),
        key: "name"
    },
    {
        title: t('mail_count'),
        key: "mail_count",
        render(row) {
            return h(NBadge, {
                value: row.mail_count,
                'show-zero': true,
                max: 99,
                type: "success"
            })
        }
    },
    {
        title: t('send_count'),
        key: "send_count",
        render(row) {
            return h(NBadge, {
                value: row.send_count,
                'show-zero': true,
                max: 99,
                type: "success"
            })
        }
    }
]

onMounted(async () => {
    await fetchData()
})
</script>

<template>
    <div class="address-table-scroll">
        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
    </div>
</template>

<style scoped>
.n-data-table {
    min-width: 640px;
}

.address-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}
</style>