xcxFront/pages/investIntro/child/index.vue

<template>
	<view class="tuijie">
		<view class="banner">
			<image class="tn-image" :src="banner" mode="aspectFill" style="width: 100%;height: 100%;"/>
			<view class="banner-text tn-text-bold tn-text-4xl">
				招商推介
			</view>
		</view>
		
		<view class="list tn-m">
			<view class="item tn-p-sm tn-radius tn-mb tn-shadow" v-for="(item,index) in articles" :key="index" @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>
		</view>
		
		<view class="loadmore tn-m-lg">
			<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import dayjs from "dayjs";
	import { onLoad,onReachBottom } from "@dcloudio/uni-app";
	import baseUrl from '@/config/config';
	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';
	
	const { onShareAppMessage, onShareTimeline } = onShare()
	
	const banner = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/28.jpg')
	
	const page = ref(1)
	
	const limit = ref(10)
	
	const parkId = ref()
	
	const articles = ref([])
	
	const shareTitle = ref('招商推介')
	
	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
	
	const toDetail = (id:number) => {
		uni.navigateTo({
			url:'/pages/investIntro/detail/index?id='+id
		})
	}
	
	const getArticles = (id:number) => {
		uni.request({
			url:baseUrl + '/front/article/tuijie',
			method:'GET',
			data:{
				departId:id,
				page:page.value,
				limit:limit.value
				},
			success: (res:any) => {
				if(res.data.code == 0){
					if (res.data.data.list.length < 10) {
						loadmoreStatus.value = 'nomore'
					} else {
						loadmoreStatus.value = 'loadmore'
					}
					articles.value = [...articles.value,...res.data.data.list]
				}else{
					loadmoreStatus.value = 'nomore'
					uni.showToast({
						icon:'none',
						title:'数据获取失败！'
					})
				}
				
			}
		})
	}
	
	onLoad((option)=>{
		parkId.value = option.parkId
	})
	
	onMounted(()=>{
		getArticles(parkId.value)
	})

	onShareAppMessage(() => {
		return {
			title: shareTitle.value,
			path: '/pages/investIntro/child/index?parkId='+parkId.value
		}
	})
	
	onShareTimeline(() => {
		return {
			title: shareTitle.value,
			path: '/pages/investIntro/child/index?parkId='+parkId.value
		}
	})
	
	onReachBottom(() => {
		loadmoreStatus.value = 'loading'
		page.value += 1
		getArticles(parkId.value)
	})

</script>

<style scoped lang="scss">
	.tuijie{
		.banner{
			position: relative;
			// margin-top: 88rpx;
			height: 300rpx;
			.banner-text{
				position: absolute;
				color: #fff;
				top:110rpx;
				left:80rpx;
				letter-spacing: 10rpx;
			}
		}
		.list{
			.item {
				min-height: 180rpx;
				background: linear-gradient(-45deg, rgba(0, 150, 255, 0.4), rgba(0, 150, 255, 0.05));
			
				.left {
					min-height: 180rpx;
				}
			
				.right {
					min-height: 180rpx;
			
					.image {
						height: 100%;
					}
				}
			}
		}
	}
</style>