You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.6 KiB
60 lines
1.6 KiB
<script setup>
|
|
|
|
const activityList = computed(() => res.value.data);
|
|
|
|
const page = ref(1)
|
|
const pageSize = ref(10)
|
|
|
|
// 取得活動資料
|
|
const { data: res } = await useMyFetch('/social/getActivityList', "POST", {
|
|
page: page.value,
|
|
pageSize: pageSize.value,
|
|
})
|
|
|
|
const handlePageChange = async (npage,npageSize) => {
|
|
page.value = npage
|
|
pageSize.value = npageSize
|
|
|
|
res.value = await useRequest('/social/getActivityList', "POST", {
|
|
page: page.value,
|
|
pageSize: pageSize.value,
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toolbar">
|
|
<div class="tTitle">公司活動</div>
|
|
</div>
|
|
<div class="content">
|
|
<div>
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6 col-xl-4" v-for="(item, index) in activityList.list" :key="index">
|
|
<NuxtLinkLocale class="card" :to="'/social/activity/detail/' + item.id">
|
|
<div class="card-body">
|
|
<div class="imgCnt lg"><img :src="'https://prodio.zltest.com.tw' + item.imageList[0].url" :alt="item.title">
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="clip">
|
|
<div class="title ellipsis">{{ item.title }}</div>
|
|
<div class="date ellipsis">{{ item.create_time }}</div>
|
|
</div>
|
|
</div>
|
|
</NuxtLinkLocale>
|
|
</div>
|
|
</div>
|
|
<div class="pagination-block">
|
|
<el-pagination layout="->, prev, pager, next" :total="activityList.total"
|
|
@change="handlePageChange"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
.pagination-block {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style> |