tire_parts_shop_applets/pages/tabBar/activity/index.vue

<template>
	<view class="widthBox">
		<view class="cardBox" v-for="item in data" :key="item.id" @click.stop="jumpDetails(item)">
			<view class="cardBox-img">
				<image style="width: 100%;height: 100%;" :src="item.url" mode=""></image>
			</view>
			<view class="cardBox-text">
				<view class="cardBox-textTitle">{{item.activityName}}</view>
				<view class="cardBox-textText">
					<u--text :lines="2" :text="item.activityDescription"></u--text>
				</view>
			</view>
		</view>
		<u-empty v-if="data.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		<u-loadmore v-if="page.total !== 0 && data.length != 0" :status="status" />
	</view>
</template>

<script>
	import {activityList} from '@/api/tabBar/activity.js'
	export default {
		data() {
			return {
				page: {
					current: 1,
					size: 10,
					total: 0,	
				},
				data:[],
				status: 'loadmore',
			}
		},
		onLoad() {
			this.activityListfun()
		},
		onShow() {
			
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.data.length < this.page.total) {
				this.page.current++
				this.activityListfun()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			// 跳转详情
			jumpDetails(row){
				uni.navigateTo({
					url:'/pages/tabBar/activity/details?id=' + row.id
				})
			},
			// 获取列表数据
			activityListfun(){
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				activityList({
					current:this.page.current,
					size:this.page.size,
					status:1
				}).then(res=>{
					this.data = this.data.concat(res.data.records)
					this.page.total = res.data.total
					if (this.data.length == res.data.total) {
						this.status = 'nomore'
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.widthBox {
		width: 94%;
		margin: 20rpx auto;
	}
	.cardBox {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		.cardBox-img {
			flex: 1;
			width: 200rpx;
			height: 180rpx;
		}
		.cardBox-text {
			flex: 2;
			margin-left: 10rpx;
			.cardBox-textTitle {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.cardBox-textText {
				font-size: 30rpx;
				color: #8b8b8b;
			}
		}
	}
</style>