xcxFront/pages/investIntro/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="parks tn-flex tn-flex-center-around tn-mt-sm tn-p tn-shadow">
			<view class="item" v-for="(item,index) in parks" :key="index" @click="toPark(item.parkId)">
				<view class="tn-text-center">
					<TnAvatar :url="item.image" :border="true" :border-bold="false" size="lg"/>
					<view class="">
						{{item.title}}
					</view>
				</view>
			</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 class="loadmore tn-mt-lg tn-pb-lg">
				<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import dayjs from "dayjs";
	import baseUrl from '@/config/config';
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import onShare from '@/utils/share';
	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'
	
	const { onShareAppMessage, onShareTimeline } = onShare()
	
	const banner = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/28.jpg')
	
	const parks = ref([])
	
	const page = ref(1)
	
	const limit = ref(10)
	
	const articles = ref([])
	
	const shareTitle = ref('招商推介')
	
	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
	
	const getParks = () => {
		uni.request({
			url: baseUrl + '/front/park/list',
			method: 'GET',
			data: { id: 1 }
		}).then((res : any) => {
			if (res.data.code === 0) {
				parks.value = res.data.data
			} else {
				uni.showToast({
					icon: 'none',
					title: res.data.message
				})
			}
		})
	}
	
	const toPark = (id:number) => {
		uni.navigateTo({
			url:'/pages/investIntro/child/index?parkId='+id
		})
	}
	
	const toDetail = (id:number) => {
		uni.navigateTo({
			url:'/pages/investIntro/detail/index?id='+id
		})
	}
	
	const getArticles = () => {
		uni.request({
			url:baseUrl + '/front/article/tuijie',
			method:'GET',
			data:{
				departId:1,
				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:'数据获取失败！'
					})
				}
				
			}
		})
	}
	
	onShareAppMessage(() => {
		return {
			title: shareTitle.value,
			path: '/pages/investIntro/index'
		}
	})
	
	onShareTimeline(() => {
		return {
			title: shareTitle.value,
			path: '/pages/investIntro/index'
		}
	})
	
	onReachBottom(() => {
		loadmoreStatus.value = 'loading'
		page.value += 1
		getArticles()
	})
	
	getParks()
	
	getArticles()
</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>