job-pc/src/components/download/index.vue

<template>
	<div style="height: 100%;">
		<template v-if="detail">
			<a-page-header>
				<template #title>
					<a-button @click="back" type="link">
						<ArrowLeftOutlined />返回
					</a-button>
				</template>
				<a-card style="width: 100%">
					<a-card-meta :title="detail.title" :description="'发布时间：'+detail.created_at">
					</a-card-meta>
					<a-divider />
					<div v-html="detail.content"></div>
				</a-card>
			</a-page-header>
		</template>
		<template v-else>
			<a-list item-layout="horizontal" :data-source="articleList">
				<template #renderItem="{ item }">
					<a-list-item @click="toDetail(item)">
						<a-list-item-meta :title="item.title" :description="'发布时间：'+item.created_at">
						</a-list-item-meta>
					<template #extra>
						<image-container
							:imgObj="{src: imageprefix + item.cover_img,width: '153px',height:'100px'}"></image-container>
					</template>
					</a-list-item>
				</template>
			</a-list>
			<a-flex align="center" justify="center">
				<a-pagination hideOnSinglePage v-model:current="current" :total="total" @change="pageChange" />
			</a-flex>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineProps, watch } from 'vue';
	import { GetArticleList } from '@/apis/models';
	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 articleList = ref<object[]>([])
	let detail = ref<Object>(null)
	let key = ref<Number>(10)

	let current = ref<Number>(1)
	let total = ref<Number>(0)

	const pageChange = (page) => {
		current.value = page
		getArticleList(key.value)
	}

	const getArticleList = (val) => {
		GetArticleList({ section_id: val, page: current.value, sortby: 'desc' }).then(res => {
			articleList.value = res.data.articles;
			total.value = res.data.total;
		})
	}


	const toDetail = (data) => {
		detail.value = data
	}

	const back = (data) => {
		detail.value = null
	}

	// const download = (val) => {
	// 	let url = 'https://rcsc-test.jcjob.cn/img' + val;
	// 	window.open(url);
	// }


	watch(() => props.key_id, (newVal) => {
		key.value = newVal
		getArticleList(newVal)
	}, { immediate: true })
</script>

<style>
</style>