|  |  |  |  |  |  | 
													
												
													
														|  |  | <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> |