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">
				<image class="list-image" :src="item.image" mode="scaleToFill"></image>
				<view class="title">{{item.title}}</view>
				<view class="time">
					<view class="text">{{item.detail}}</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>
	export default {
	    data() {
	        return {
				isEmpty:false,
				nomoreText: '上拉显示更多',
				pageNum:1,
				pageSize:10,
				hasNextPage:false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				allowDataStatus:true,
				wrapperHeight:'100%',
				scrollHeight:'',
			    list:[
				   {
					   "id":997,
					   "status":2,
					   "title":"采美优惠：双11第二波惊喜福利来袭！！！",
					   "detail":"2020-10-29～2020-11-30",
					   "link":"https://www.caimei365.com/page.html?id=274",
					   "image":"https://img.caimei365.com/group1/M00/03/C2/Cmis2F-bzCOATrdjAAQxN7DRfks231.jpg",
					   "beginTime":"2020-10-28T16:00:00.000+00:00",
					   "endTime":"2020-11-30T15:59:59.000+00:00"
				   },
				   {
					   "id":996,
					   "status":2,
					   "title":"采美优惠 | 别让心爱的产品/仪器躺在购物车里让它躺在你的店里！",
					   "detail":"2020-10-22～2020-11-30",
					   "link":"https://www.caimei365.com/page.html?id=273",
					   "image":"https://img.caimei365.com/group1/M00/03/C1/Cmis2F-SlLiAC2lgAAVioC57lLw433.jpg",
					   "beginTime":"2020-10-21T16:00:00.000+00:00",
					   "endTime":"2020-11-30T15:59:59.000+00:00"
				   },
				   {
					   "id":995,
					   "status":2,
					   "title":"采美优惠 | 德玛莉澎湃系列买十送二有了它们秋季护肤一点都不难",
					   "detail":"2020-10-15～2020-11-15",
					   "link":"https://www.caimei365.com/page.html?id=272",
					   "image":"https://img.caimei365.com/group1/M00/03/CE/Cmis21-H8OSAGDhVAAMGgZ2d6vA013.jpg",
					   "beginTime":"2020-10-14T16:00:00.000+00:00",
					   "endTime":"2020-11-15T15:59:59.000+00:00"
				   },
				   {
					   "id":983,
					   "status":3,
					   "title":"采美优惠 | 晓宫主系列买三送一畅饮秋天里的N杯奶茶",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-271.html",
					   "image":"https://img.caimei365.com/group1/M00/03/BC/Cmis2F9y9CuAGyhqAELYh8rIUkQ318.jpg",
					   "beginTime":"2019-09-28T16:00:00.000+00:00",
					   "endTime":"2020-10-29T15:59:59.000+00:00"
				   },
				   {
					   "id":982,
					   "status":3,
					   "title":"采美优惠 | 塑欣填充玻尿酸满十就送货比三家还是这里的风景独好",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-270.html",
					   "image":"https://img.caimei365.com/group1/M00/03/BA/Cmis2F9sXoCAMew_AAVnnTEnzjs592.jpg",
					   "beginTime":"2020-09-23T16:00:00.000+00:00",
					   "endTime":"2020-10-24T15:59:59.000+00:00"
				   },
				   {
					   "id":981,
					   "status":3,
					   "title":"采美临期 | 点斗临期产品史上最低价格 1.9折 数量有限 欲购从先",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-269.html",
					   "image":"https://img.caimei365.com/group1/M00/03/CA/Cmis219kIu6Ac7oqAAhfDhDakds337.jpg",
					   "beginTime":"2020-09-17T16:00:00.000+00:00",
					   "endTime":"2020-10-18T15:59:59.000+00:00"
				   },
				   {
					   "id":980,
					   "status":3,
					   "title":"9月10美博会仪器延期",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-268.html",
					   "image":"https://img.caimei365.com/group1/M00/03/B5/Cmis2F9bLrGAG5UyAAMbOsIEo1I083.jpg",
					   "beginTime":"2020-09-09T16:00:00.000+00:00",
					   "endTime":"2020-09-18T15:59:59.000+00:00"
				   },
				   {
					   "id":979,
					   "status":3,
					   "title":"	采美优惠 | 瑞恺迪小气泡 美博会线上一口价11000元/台 代理商都拿不到的",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-267.html",
					   "image":"https://img.caimei365.com/group1/M00/03/B4/Cmis2F9Z2NOAH7nUAANj_11D4Jo019.jpg",
					   "beginTime":"2020-09-02T16:00:00.000+00:00",
					   "endTime":"2020-10-02T15:59:59.000+00:00"
				   },
				   {
					   "id":955,
					   "status":3,
					   "title":"采美优惠 | 购买冷风机赠送价值5000元的口罩。",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-266.html",
					   "image":"https://img.caimei365.com/group1/M00/03/B0/Cmis2F9HcJuAExCdAAT1g6O9xwM704.jpg",
					   "beginTime":"2020-08-26T16:00:00.000+00:00",
					   "endTime":"2020-09-27T15:59:59.000+00:00"
				   },
				   {
					   "id":954,
					   "status":3,
					   "title":"采美优惠 | 买伯纳赫送点斗 买一送一送完为止！",
					   "detail":"",
					   "link":"https://www.caimei365.com/cmpage/info-4-265.html",
					   "image":"https://img.caimei365.com/group1/M00/03/AF/Cmis2F8_K9-APOEpAANFhTKvw1A467.jpg",
					   "beginTime":"2020-08-19T16:00:00.000+00:00",
					   "endTime":"2020-09-20T15:59:59.000+00:00"
				   }
			   ],
	        }
	    },
		onLoad(option) {
			
		},
		methods:{
			
			navToDetailPage() {//跳转商品详情页
				this.$api.navigateTo(`/pages/goods/product?id=${this.productID}`)
			},
		}
	}
</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;
		}
		.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;
			}
		}
	}
</style>