71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<page-meta :page-style="$theme.pageStyle">
|
|
<!-- #ifndef H5 -->
|
|
<navigation-bar
|
|
:front-color="$theme.navColor"
|
|
:background-color="$theme.navBgColor"
|
|
/>
|
|
<!-- #endif -->
|
|
</page-meta>
|
|
<z-paging
|
|
ref="paging"
|
|
v-model="collectData"
|
|
@query="queryList"
|
|
:fixed="false"
|
|
height="100%"
|
|
use-page-scroll
|
|
>
|
|
<u-swipe-action
|
|
:show="item.show"
|
|
:index="index"
|
|
v-for="(item, index) in collectData"
|
|
:key="item.id"
|
|
@click="handleCollect"
|
|
:options="options"
|
|
btn-width="120"
|
|
>
|
|
<news-card :item="item" :newsId="item.article_id"></news-card>
|
|
</u-swipe-action>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, shallowRef } from 'vue'
|
|
import { getCollect, cancelCollect } from '@/api/news'
|
|
|
|
const paging = shallowRef()
|
|
const options = reactive([
|
|
{
|
|
text: '取消收藏',
|
|
style: {
|
|
color: '#FFFFFF',
|
|
backgroundColor: '#FF2C3C'
|
|
}
|
|
}
|
|
])
|
|
const collectData: any = ref([])
|
|
|
|
const queryList = async (pageNo, pageSize) => {
|
|
const { lists } = await getCollect()
|
|
lists.forEach((item: any) => {
|
|
item.show = false
|
|
})
|
|
collectData.value = lists
|
|
paging.value.complete(lists)
|
|
}
|
|
|
|
const handleCollect = async (index: number): Promise<void> => {
|
|
try {
|
|
const article_id: number = collectData.value[index].article_id
|
|
await cancelCollect({ id: article_id })
|
|
uni.$u.toast('已取消收藏')
|
|
paging.value.reload()
|
|
} catch (err) {
|
|
//TODO handle the exception
|
|
console.log('取消收藏报错=>', err)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|