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

<!-- 商城宣传页，列表页 -->
<template>
	<view class="page-body"  style="background: #f6f6f6;">
		<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" :text="t('common.no_data')" />
		<view v-if="state.pagination.total > 0 && type == 'articleCard'">
			<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 && type == 'activityCard'">
			<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>
		<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 props = defineProps({
		// 是否显示tabbar
		tabbar: {
			type: Boolean,
			default: true
		},
		// 是否显示tabbar
		categoryId: {
			type: Number,
			default: 0
		},
		type:{
			type:String,
			default:'articleCard'
		}
	});
	
	const tabbar = ref({
		"theme": "red",
		"style": {
			"bgType": "color",
			"bgColor": "#323b4e",
			"color": "#e6e6e5",
			"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: {
			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});
		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';
		}
	
	}
	// 加载更多
	function loadMore() {
		if (state.loadStatus !== 'noMore') {
			state.pagination.current_page += 1
			getArticleList(state.pagination.current_page);
		}
	}
	onLoad(async (option) => {
		if(option && option.categoryId){
			state.categoryId = option.categoryId
		}else{
			state.categoryId = props.categoryId
		}
		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>
	.page-body {
		width: 100%;
		position: relative;
		z-index: 1;
		flex: 1;
		padding-top:40rpx;
		box-sizing:border-box;

		.article {
			padding:16rpx;
			height: 170rpx;
			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: 200rpx;
			  height: 113rpx;
			  margin-right: 16rpx;
			}
			
			.image-content {
			  width: 100%;
			  height: 100%;
			  border-radius: 8rpx;
			}
			
			.desc {
			  flex: 1;
			  font-size: 28rpx;
			  color: #333;
			  line-height: 1.3;
			  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>