caimei-applets-caimei/h5/pages/activity/activity-list.vue

<template>
	<view class="activity-container">
		<scroll-view scroll-y="true" >
			<view class="list" v-for="(item, index) in list" :key="index" @click="NavigateToActivity(item)">
				<image class="list-image" :src="item.image" mode="scaleToFill"></image>
				<view class="title">{{item.title}}</view>
				<view class="time" v-if="item.status!=3">
					<view class="text">{{ item.detail }}</view>
				</view>
				<view class="mack" v-if="item.status == 3">
					<view class="mack-text">活动已经结束</view>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
			<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
			<!--加载loadding-->
		</scroll-view>
	</view>
</template>

<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	export default {
		components:{
			tuiLoadmore,
			tuiNomore,
		},
	    data() {
	        return {
				isEmpty:false,
				nomoreText: '上拉显示更多',
				listQuery:{
					source:2,
					pageNum:1,
					pageSize:10,
				},
				hasNextPage:false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				allowDataStatus:true,
				wrapperHeight:'100%',
				scrollHeight:'',
			    list:[],
	        }
	    },
		onLoad(option) {
			
		},
		methods:{
			GetPromotionsrList(){//获取专题列表
				this.ProductService.GetPromotionsrList(this.listQuery).then(response =>{
					let responseData = response.data
					if(responseData.list&&responseData.list.length > 0){
						this.isEmpty = false
						this.hasNextPage = responseData.hasNextPage
						this.list = responseData.list
						this.pullFlag = false;
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = true
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}else{
						this.isEmpty = true
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPromotionsrListBottomData(){
				this.listQuery.pageNum+=1
				this.ProductService.GetPromotionsrList(this.listQuery).then(response =>{
					let responseData = response.data
					if(responseData.list&&responseData.list.length > 0){
						this.hasNextPage = response.data.hasNextPage
						this.list = this.list.concat(responseData.list) 
						this.pullFlag = false;// 防上拉暴滑
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			NavigateToActivity(item){//跳转活动详情
				if(item.status!=3){
					this.$api.navigateTo(`/h5/pages/activity/activity?title=${item.title}&link=${item.crmLink}`)
				}else{
					this.$util.msg('活动已经结束',2000)
				}
			}
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.GetPromotionsrListBottomData()
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.listQuery.pageNum = 1
			this.GetPromotionsrList()
			uni.stopPullDownRefresh()
		},
		onShow() {
			this.GetPromotionsrList()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.activity-container{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.list{
		width: 100%;
		height: 318rpx;
		float: left;
		margin-bottom: 20rpx;
		position: relative;
		.list-image{
			width: 100%;
			height: 318rpx;
			display: block;
		}
		.title{
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: rgba(254,246,243,0.8);
			color: $color-system;
			position: absolute;
			bottom: 0;
			left: 0;
			font-size: $font-size-26;
			text-overflow:ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.time{
			width: 100%;
			height: 48rpx;
			position: absolute;
			top: 0;
			left: 0;
			.text{
				width: 475rpx;
				height: 48rpx;
				font-size: $font-size-24;
				margin: 0 auto;
				line-height: 48rpx;
				background:  linear-gradient(315deg, #f94b4b 0%, #bc3cff 100%);
				color: #FFFFFF;
				text-align: center;
			}
		}
		.mack{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
			background: rgba(0,0,0,.1);
			border-radius: 2rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.mack-text{
				width: 220rpx;
				height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				background: rgba(0,0,0,.4);
				color: #FFFFFF;
				line-height: 70rpx;
				font-size: $font-size-26;
			}
		}
	}
</style>