mall-front-app/pages/index/FirstList.vue

<!-- 商城宣传页，列表页 -->
<template>
	
	<view class="page-body"  style="background: #f6f6f6;">
		<s-search-block  :data="searchData" style="position: fixed;top: 0;left: 0;right: 0;z-index: 999;background-color: #fff;height: 80rpx;background-color: #f6f6f6;" :navbar="false"   @input="onSearch" />
		<view v-if="state.pagination.total > 0 && cardType == 'activityCard'">
			<view class="article ss-r-10" v-for="item in state.pagination.list"   @click="sheep.$router.go('/pages/public/richtext', {title:item.title});">
				<view class="title" >
					{{item.title}}
				</view>
				<view class="content">
					<view class="image " v-if="item.picUrl.trim()">
						<image :src="item.picUrl"  mode="aspectFit"  class="image-content"></image>
					</view>
					<view class="desc" >
						{{item.introduction}}
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="state.pagination.total > 0 && cardType == 'articleCard'">
			
			<view class="activity ss-r-10" v-for="item in state.pagination.list" :style="{ backgroundImage: `url(${item.picUrl})` }"  @click="sheep.$router.go('/pages/public/richtext', {title:item.title});">
				<view class="activity-bottom">
					<text>{{item.title}}</text>
					<view class=""><image src="@/static/firstIndex/youjiantou.png" mode="aspectFit" /></view>
				</view>
			
			</view>
		</view>
		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" :text="t('common.no_data')" />
		
		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多'}" @tap="loadmore" />
		
		<s-tabbar path="/pages/index/FirstIndex" :tabbar="tabbar" />
	</view>


</template>

<script setup>
	import {
		computed,
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	import _ from 'lodash';
	import {
		isAndroid,
		getAndroidJiGuangId
	} from '@/sheep/hooks/useApp'
	import {
		showWalletModal,
		colseWalletModal
	} from '@/sheep/hooks/useModal';
	import { t } from '@/locale'
	import ArticleApi from '@/sheep/api/promotion/article';
	// 隐藏原生tabBar
	uni.hideTabBar();
	const appInfo = computed(() => sheep.$store('app').info);
	const {
		safeArea
	} = sheep.$platform.device;
	const pageHeight = computed(() => safeArea.height - 45);
	const searchData = ref({
		"height": 30,
		"showScan": false,
		"borderRadius": 0,
		"placeholder": "搜索文章",
		"placeholderPosition": "left",
		"backgroundColor": "rgb(238, 238, 238)",
		"textColor": "rgb(150, 151, 153)",
		"hottitles": [],
		"style": {
			"bgType": "color",
			"bgColor": "#fff",
			"marginBottom": 8,
			"paddingTop": 8,
			"paddingRight": 8,
			"paddingBottom": 8,
			"paddingLeft": 8
		}

	})
	const props = defineProps({
		// 是否显示tabbar
		tabbar: {
			type: Boolean,
			default: true
		},
		// 是否显示tabbar
		categoryId: {
			type: Number,
			default: 0
		},
		type:{
			type:String,
			default:'articleCard'
		}
	});
	const cardType = ref('articleCard');
	if(props.type){
		cardType.value = props.type
	}
	const tabbar = ref({
		"theme": "red",
		"style": {
			"bgType": "color",
			"bgColor": "#ffffff",
			"color": "#3c3c3c",
			"activeColor": "#1fa380"
		},
		"items": [{
				"text": t('common.home'),
				"url": "/pages/index/FirstIndex",
				"iconUrl": sheep.$url.static('/static/firstIndex/index.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/index-active.svg')
			},
			{
				"text": t('common.activities'),
				"url": "/pages/index/FirstActivity",
				"iconUrl": sheep.$url.static('/static/firstIndex/activity.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/activity-active.svg')
			},
			{
				"text": t('common.videos'),
				"url": "/pages/index/FirstVideo",
				"iconUrl": sheep.$url.static('/static/firstIndex/video.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/video-active.svg')
			},
			{
				"text": t('common.mall'),
				"url": "/pages/index/index",
				"iconUrl": sheep.$url.static('/static/firstIndex/shop.svg'),
				"activeIconUrl": sheep.$url.static('/static/firstIndex/shop-active.svg')
			}
		]
	});
	
	// 数据
	const state = reactive({
		categoryId: 0,
		pagination: {
			title:'',
			list: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: ''
	});
	async function getArticleList(page = 1, list_rows = 5) {
		state.loadStatus = 'loading';
		let { code, data } = await ArticleApi.getArticleByCategory({pageNo: page,pageSize: list_rows,categoryId: state.categoryId,title:state.pagination.title});
		if (code !== 0) {
			return;
		}
		let articleList = _.concat(state.pagination.list, data.list);
		state.pagination.list = articleList
		state.pagination.total = data.total;
		state.pagination.last_page = Math.ceil(data.total / 5)
		if (state.pagination.current_page < state.pagination.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
		console.log(state.pagination.list,state.pagination.total)
	
	}
	
	// 加载更多
	function loadMore() {
		if (state.loadStatus !== 'noMore') {
			state.pagination.current_page += 1
			getArticleList(state.pagination.current_page);
		}
	}

	// 搜索处理函数 (使用防抖)
	let searchTimer = null
	const onSearch = (e) => {
		if (searchTimer) clearTimeout(searchTimer)
		searchTimer = setTimeout(() => {
			// 搜索时重置分页数据
			state.pagination = {
			...state.pagination,
			list: [],          // 清空列表
			current_page: 1,   // 重置到第一页
			total: 0,          // 重置总数
			last_page: 1,      // 重置最后一页
			title: e           // 设置搜索关键词
			}
			getArticleList(1)    // 从第一页开始搜索
		}, 300)
	}
	onLoad(async (option) => {
		if(option && option.categoryId){
			state.categoryId = option.categoryId
		}else{
			state.categoryId = props.categoryId
		}
		if(option && option.type){
			cardType.value = option.type
		}
		await getArticleList();
	});
	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
	// 下拉刷新
	onPullDownRefresh(() => {
		state.pagination.list = []
		state.pagination.current_page = 1
		state.pagination.total = 1
		state.pagination.last_page = 1
		getArticleList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});
</script>

<style scoped>
.search-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    padding: 20rpx;
    /* 可选: 添加阴影效果 */
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
  }

  .list-content {
    /* search-wrapper 的高度 + padding */
    margin-top: calc(72rpx + 40rpx);
  }
	.page-body {
		width: 100%;
		position: relative;
		z-index: 1;
		flex: 1;
		padding-top:90rpx;
		box-sizing:border-box;

		.article {
			padding:16rpx;
			height: 230rpx;
			position: relative;
			width: 90%;
			margin: 0 auto;
			color:#000;
			margin-bottom: 40rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
			background-color: #fff;
			overflow: hidden;
			.title {
			  font-size: 34rpx;
			  /* font-weight: bold; */
			  margin-bottom: 8px;
			}
			.content {
			  display: flex;
			  flex-direction: row;
			}
			.image {
			  width: 300rpx;
			  height: 169rpx;
			  margin-right: 16rpx;
			  background-color: #999;
			}
			
			.image-content {
			  width: 100%;
			  height: 100%;
			  border-radius: 8rpx;
			}
			
			.desc {
			  flex: 1;
			  font-size: 32rpx;
			  color: #333;
			  line-height: 1.6;
			  padding-top: 10rpx;
			  overflow: hidden;
			  display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 3;
			  text-overflow: ellipsis;
			}
		}
		
		.activity {
			height: 300rpx;
			position: relative;
			width: 90%;
			margin: 0 auto;
			color:#fff;
			margin-bottom: 40rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
			background-color: #fff;
			overflow: hidden;
			.activity-bottom{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50rpx;
				background: rgba(0,0,0,0.5);
				padding:10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				text{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				};
				image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
	
</style>