|
|
|
|
|
|
|
|
<a-list-item @click="toDetail(item)"> |
|
|
<a-list-item @click="toDetail(item)"> |
|
|
<a-list-item-meta :title="item.title" :description="'发布时间:'+item.created_at"> |
|
|
<a-list-item-meta :title="item.title" :description="'发布时间:'+item.created_at"> |
|
|
</a-list-item-meta> |
|
|
</a-list-item-meta> |
|
|
|
|
|
<template #extra> |
|
|
|
|
|
<image-container |
|
|
|
|
|
:imgObj="{src: imageprefix + item.cover_img,width: '153px',height:'100px'}"></image-container> |
|
|
|
|
|
</template> |
|
|
</a-list-item> |
|
|
</a-list-item> |
|
|
</template> |
|
|
</template> |
|
|
</a-list> |
|
|
</a-list> |
|
|
<a-flex align="center" justify="center"> |
|
|
<a-flex align="center" justify="center"> |
|
|
<a-pagination hideOnSinglePage v-model:current="current" |
|
|
|
|
|
:total="total" @change="pageChange" /> |
|
|
|
|
|
|
|
|
<a-pagination hideOnSinglePage v-model:current="current" :total="total" @change="pageChange" /> |
|
|
</a-flex> |
|
|
</a-flex> |
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
import { ref, computed, onMounted, defineProps, watch, onBeforeUnmount } from 'vue'; |
|
|
import { ref, computed, onMounted, defineProps, watch, onBeforeUnmount } from 'vue'; |
|
|
import { GetArticleList } from '@/apis/models'; |
|
|
import { GetArticleList } from '@/apis/models'; |
|
|
import { ArrowLeftOutlined } from '@ant-design/icons-vue'; |
|
|
import { ArrowLeftOutlined } from '@ant-design/icons-vue'; |
|
|
|
|
|
import { useCommon } from '@/hooks/useCommon'; |
|
|
|
|
|
let { store, dayjs, richOption, ExclamationCircleOutlined, Modal, imageprefix, disabledDateFront } = useCommon(); |
|
|
let props = defineProps(['key_id']); |
|
|
let props = defineProps(['key_id']); |
|
|
let articleList = ref<object[]>([]) |
|
|
let articleList = ref<object[]>([]) |
|
|
let detail = ref<Object>(null) |
|
|
let detail = ref<Object>(null) |
|
|
let key = ref<Number>(3) |
|
|
let key = ref<Number>(3) |
|
|
let current = ref<Number>(1) |
|
|
let current = ref<Number>(1) |
|
|
let total = ref<Number>(0) |
|
|
let total = ref<Number>(0) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
if(sessionStorage.getItem('article_data')) { |
|
|
|
|
|
detail.value = JSON.parse(sessionStorage.getItem('article_data')) |
|
|
|
|
|
GetArticleList({page: current.value, hot: 2}).then(res => { |
|
|
|
|
|
|
|
|
if (sessionStorage.getItem('article_data')) { |
|
|
|
|
|
detail.value = JSON.parse(sessionStorage.getItem('article_data')) |
|
|
|
|
|
GetArticleList({ page: current.value, hot: 2 }).then(res => { |
|
|
articleList.value = res.data.articles; |
|
|
articleList.value = res.data.articles; |
|
|
total.value = res.data.total; |
|
|
total.value = res.data.total; |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => { |
|
|
onBeforeUnmount(() => { |
|
|
sessionStorage.removeItem('article_data') |
|
|
sessionStorage.removeItem('article_data') |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const pageChange = (page) => { |
|
|
const pageChange = (page) => { |
|
|
current.value = page |
|
|
current.value = page |
|
|
getArticleList(key.value) |
|
|
getArticleList(key.value) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const getArticleList = (val) => { |
|
|
const getArticleList = (val) => { |
|
|
if(val == 1) { |
|
|
|
|
|
GetArticleList({page: current.value, hot: 2}).then(res => { |
|
|
|
|
|
|
|
|
if (val == 1) { |
|
|
|
|
|
GetArticleList({ page: current.value, hot: 2 }).then(res => { |
|
|
articleList.value = res.data.articles; |
|
|
articleList.value = res.data.articles; |
|
|
total.value = res.data.total; |
|
|
total.value = res.data.total; |
|
|
}) |
|
|
}) |
|
|
} else { |
|
|
} else { |
|
|
GetArticleList({section_id: val, page: current.value}).then(res => { |
|
|
|
|
|
|
|
|
GetArticleList({ section_id: val, page: current.value }).then(res => { |
|
|
articleList.value = res.data.articles; |
|
|
articleList.value = res.data.articles; |
|
|
total.value = res.data.total; |
|
|
total.value = res.data.total; |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const toDetail = (data) => { |
|
|
const toDetail = (data) => { |
|
|
detail.value = data |
|
|
detail.value = data |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const back = (data) => { |
|
|
const back = (data) => { |
|
|
detail.value = null |
|
|
detail.value = null |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(() => props.key_id, (newVal) => { |
|
|
watch(() => props.key_id, (newVal) => { |
|
|
if(sessionStorage.getItem('article_data')) { |
|
|
|
|
|
|
|
|
if (sessionStorage.getItem('article_data')) { |
|
|
key.value = 1 |
|
|
key.value = 1 |
|
|
} else { |
|
|
|
|
|
|
|
|
} else { |
|
|
key.value = newVal; |
|
|
key.value = newVal; |
|
|
detail.value = null |
|
|
detail.value = null |
|
|
} |
|
|
} |
|
|
getArticleList(key.value) |
|
|
getArticleList(key.value) |
|
|
}, { immediate: true }) |
|
|
}, { immediate: true }) |
|
|
|
|
|
|
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style> |
|
|
<style> |