xcxFront/pages/article/index.vue

<template>
	<view class="article-page tn-gray-light_bg" v-if="flag">

		<view class="article-summary"
			:style="{'background':'url('+ menuData.pic +') no-repeat','backgroundPosition':'center center','backgroundSize':'100% 100%'}">
			<view class="summary-content">
				<view class="summary-info">
					<view class="title">{{ menuData.title }}</view>
					<view class="desc">{{ menuData.description }}</view>
				</view>
			</view>
		</view>

		<view class="article-list tn-ml tn-mr tn-radius">
			<view class="article-item tn-p-sm tn-radius tn-mb tn-shadow" v-for="item in articleList"
				:key="item.id" @click="toDetail(item.id)">
				<view class="tn-flex tn-w-full">
					<view
						:class="['left',item.image?'tn-w-3-4':'tn-w-full','tn-flex','tn-flex-colum','tn-flex-wrap','tn-flex-center-between','tn-pr-sm']">
						<view class="title tn-w-full tn-text-lg tn-text-ellipsis-1" style="color: black;">
							{{item.title}}
						</view>
						<view class="summary tn-w-full tn-text-ellipsis-2">
							{{item.summary}}
						</view>
						<view class="info tn-flex tn-w-full tn-flex-center-between tn-text-sm">
							<view class="origin">
								<TnIcon name="pushpin"></TnIcon>{{item.origin}}
							</view>
							<view class="time">
								<TnIcon name="clock"></TnIcon>{{dayjs(item.created_at).format('YYYY-MM-DD')}}
							</view>
						</view>
					</view>
					<view class="right tn-w-1-4" :style="{'display':item.image?'block':'none'}">
						<view class="image tn-radius tn-flex tn-flex-center-center">
							<image :src="item.image" mode="aspectFill"
								style="width:160rpx;height: 160rpx;display: block;"></image>
						</view>
					</view>
				</view>
			</view>
			<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
			<tab-bar :current="2"></tab-bar>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import baseUrl from '@/config/config';
	import { onLoad } from "@dcloudio/uni-app";
	import dayjs from "dayjs";
	import { onReachBottom } from "@dcloudio/uni-app"
	import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
	import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'
	import onShare from '@/utils/share';
	import TabBar from '@/pages/components/tab-bar.vue';

	const { onShareAppMessage, onShareTimeline } = onShare()

	const flag = ref(false)

	const menuId = ref();

	const articleList = ref([]);

	const page = ref(1);

	const limit = ref(10);

	const color = ref()

	const shareParam = ref()

	const shareTitle = ref()

	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')

	const menuData = reactive({
		pic: '',
		title: '',
		color: '',
		description: ''
	})

	const getMenuData = (id : number) => {
		uni.request({
			url: baseUrl + '/front/report/menu',
			method: 'GET',
			data: { menuId: id },
			success: (res : any) => {
				if (res.data.code === 0) {
					Object.assign(menuData, res.data.data)
					shareParam.value = res.data.data.menuId
					color.value = res.data.data.color
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message
					})
				}
			}
		})
	}

	const getArticleList = () => {
		loadmoreStatus.value = 'loading';
		uni.request({
			url: baseUrl + '/front/article/page',
			data: {
				page: page.value,
				limit: limit.value
			},
			method: 'GET',
			success: (res : any) => {
				if (res.data.code === 0) {
					if (res.data.data.list.length < 10) {
						loadmoreStatus.value = 'nomore'
					} else {
						loadmoreStatus.value = 'loadmore'
					}
					articleList.value = [...articleList.value, ...res.data.data.list]
				} else {
					loadmoreStatus.value = 'nomore'
				}
				flag.value = true
			}
		})
	}

	const toDetail = (id : number) => {
		uni.navigateTo({
			url: '/pages/article/detail/index?id=' + id
		})
	}

	onShareAppMessage(() => {
		return {
			title: shareTitle.value,
			path: '/pages/article/index'
		}
	})

	onShareTimeline(() => {
		return {
			title: shareTitle.value,
			path: '/pages/article/index'
		}
	})

	onLoad((option) => {
		getMenuData(option.id)
		menuId.value = option.id
	})

	onReachBottom(() => {
		loadmoreStatus.value = 'loading'
		page.value += 1
		getArticleList()
	})

	getArticleList()
</script>

<style scoped lang="scss">
	.article-summary {
		position: relative;
		width: 100%;
		height: 450rpx;
		z-index: 2;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg,
					rgba(0, 0, 0, 0.4) 0%,
					rgba(0, 0, 0, 0) 100%);
			z-index: 1;
		}

		.summary-content {
			position: absolute;
			left: 0;
			bottom: 80rpx;
			width: 100%;
			padding: 0rpx 30rpx;
			z-index: 2;

			display: flex;
			align-items: center;

			.summary-info {
				flex: 1;
				color: #fff;

				.title {
				  font-size: 52rpx;
				  font-weight: bold;
				  letter-spacing: 8rpx;
				  text-shadow: 4rpx 4rpx 10rpx #585858;
				}
				.desc {
				  font-size: 34rpx;
				  margin-top: 10rpx;
				  text-shadow: 4rpx 4rpx 10rpx #585858;
				}
			}
		}
	}

	.article-list {
		position: relative;
		top: -60rpx;
		z-index: 9;

		.article-item {
			min-height: 180rpx;
			background-color: #fff;

			.left {
				min-height: 180rpx;
			}

			.right {
				min-height: 180rpx;

				.image {
					height: 100%;
				}
			}
		}
	}
</style>