tijian_BJRR/北京仁仁体检平台H5/pages/main/posts/posts.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年6月6日 10:04:57
	 */
	import {
		ref
	} from 'vue'
	import {
		$image,
		$response,
		PostListAction,
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		type: {
			type: String,
			default: '1'
		},
		hospital: {
			type: String,
			default: '0'
		}
	});
	const setTitle = () => {
		let title = '新闻列表'
		switch ($props.type) {
			case 1:
				title = '健康宣传'
				break;
			case 2:
				title = '常见问题'
				break;
		}
		uni.setNavigationBarTitle({
			title: title
		})
	}
	const post_list = ref([])
	const PostList = async () => {
		const response = await PostListAction({
			...$props
		})
		$response(response, () => {
			post_list.value = response.data.list
		})
	}
	const postClick = (info) => {
		uni.navigateTo({
			url: `/pages/main/post/post?id=${info.id}`
		})
	}
	onShow(() => {
		setTitle()
		PostList()
	})
</script>
<template>
	<view>
		<view v-if="!post_list.length" class="no_post_wrapper">
			<image :src="$image('/storage/assets/h5/posts/暂无文章.png')"></image>
			<view>暂无文章</view>
		</view>
		<view class="top_line_wrapper"></view>
		<view class="posts_wrapper">
			<view @click="postClick(i)" class="post_item_wrapper" v-for="(i,k) in post_list">
				<view class="post_title_wrapper">{{ i.title }}
				</view>
				<view v-if="Number($props.type) === 1" class="post_content_wrapper">
					<view class="post_cover_wrapper">
						<image :src="$image(i.cover)"></image>
					</view>
					<view class="post_text_wrapper">
						<view class="post_text_line_wrapper">
							<view class="post_author_wrapper">{{ i.author }}</view>
							<view class="post_break_wrapper"></view>
							<view class="post_date_wrapper">{{ i.date }}</view>
						</view>
						<view class="post_text_content_wrapper">
							{{ i.desc }}
						</view>
					</view>
				</view>
				<view class="post_break_line_wrapper"></view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.post_text_content_wrapper {
		font-size: 27rpx;
		font-weight: 400;
		color: #525252;
		line-height: 40rpx;
		margin-top: 36rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		overflow-wrap: break-word;
		word-wrap: break-word;
		width: 480rpx;
	}

	.post_break_wrapper {
		width: 2rpx;
		height: 22rpx;
		background: #DBDBDB;
		margin-left: 24rpx;
	}

	.post_date_wrapper {
		font-size: 21rpx;
		font-weight: 400;
		color: #AFAFAF;
		line-height: 1;
		margin-left: 18rpx;
	}

	.post_text_line_wrapper {
		display: flex;
		align-items: center;
		font-size: 23rpx;
		font-weight: 500;
		color: #6C6C6C;
		line-height: 1;
	}

	.post_cover_wrapper image {
		width: 180rpx;
		height: 127rpx;
		display: block;
	}

	.post_cover_wrapper {
		width: 180rpx;
		height: 127rpx;
	}

	.post_content_wrapper {
		display: flex;
		align-items: center;
		margin-top: 22rpx;
		margin-left: 20rpx;
	}

	.post_title_wrapper {
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
		line-height: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.post_item_wrapper {
		width: calc(750rpx - 60rpx);
		background: #FFFFFF;
		padding: 30rpx 30rpx 0 30rpx;
	}

	.post_break_line_wrapper {
		height: 14rpx;
		background: #f2f2f2;
		margin-top: 30rpx;
	}

	.no_post_wrapper image {
		width: 293rpx;
		height: 257rpx;
		display: block;
		margin-bottom: 26rpx;
	}

	.no_post_wrapper {
		width: 293rpx;
		margin: 138rpx auto 0;
		font-size: 28rpx;
		font-weight: 500;
		color: #CDCDCD;
		line-height: 1;
		text-align: center;
	}
</style>