book-shop/pages-mine/pages/discounts.vue

<template>
	<view class="pagecon">
		<NoData v-if="finish&&discountsList.length<1"></NoData>
		<view class="list">
			<discountsItem :select="selectIndex == index" :data="item" v-for="(item, index) in discountsList" :key="index" @click="changeDiscount(item, index)"></discountsItem>
			
		</view>
	</view>
</template>

<script>
import { formatDate } from '@/utils/tools.js'
import discountsItem from '../components/discounts-item.vue'
const app = getApp();
export default {
	components: {
		discountsItem
	},
	data() {
		return {
			topHeight:app.globalData.statusBarHeight + app.globalData.navBarHeight,
			selectIndex: -1,
			page:1,
			loading:false,
			finish:false,
			discountsList: [
				// {
				// 	"id": 1,
				// 	"user_id": 1,
				// 	"title": "新用户注册",
				// 	"amount": "5.00",
				// 	"limit_day": 5,
				// 	"limit_time": 1706600909,
				// 	"status": "2",
				// 	"createtime": 1706168909,
				// 	"updatetime": 1706168909
				// },
			]
		};
	},
	
	onLoad() {
		this.getUserCouponList();
	},
	onReachBottom(){
		console.log('滚动到底部')
		this.nextPage();
	},
	methods: {
		formatDateF(v){
			return formatDate(v);
		},
		changeDiscount(item, index) {
			this.selectIndex = index;
		},
		getUserCouponList(){
			if(this.loading)return false;
			this.$u.api.getUserCouponListAjax(this.page).then(({code,data})=>{
				console.log(code,data)
				this.loading = false;
				if(code==1){
					if(data.last_page<=data.current_page){
						this.finish = true;
					}
					if(data.current_page==1){
						this.discountsList = data.data;
					}else{
						this.discountsList=this.discountsList.concat(data.data);
					}
				}else{
					this.finish = true;
				}
			}).catch(()=>{
				this.loading = false;
				this.finish = true;
			})
		},
		nextPage(e){
			if(this.finish){
				/* 已滚动到底部，不继续加载 */
				return false;
			}
			console.log(e);
			this.page++;
			this.getUserCouponList();
		},
	},
};
</script>

<style lang="scss" scoped>
	.pagecon{
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: $app-theme-bg-gray-color;
	}
.list {
	// margin: 30rpx;
	.item {
		width: 100%;
		height: 174rpx;
		background-image: url('@/pages-mine/static/discounts-bg.png');
		background-size: cover;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding-bottom: 34rpx;
		position: relative;

		.left {
			margin-right: 60rpx;
			margin-left: 50rpx;
			.discount {
				text:nth-child(1) {
					font-size: 22rpx;
					color: $app-theme-text-money-color;
				}
				text:nth-child(2) {
					font-size: 64rpx;
					color: $app-theme-text-money-color;
				}
			}
			.standard {
				font-size: 20rpx;
				color: $app-theme-card-gray-color;
			}
		}
		.right {
			.title {
				font-size: 32rpx;
				color: $app-theme-text-black-color;
				margin-bottom: 32rpx;
			}
			.date {
				font-size: 20rpx;
				color: $app-theme-card-gray-color;
			}
		}

		.select {
			height: 60rpx;
			width: 60rpx;
			background-image: url('@/pages-mine/static/discounts-select.png');
			background-size: cover;
			position: absolute;
			top: 4rpx;
			right: 4rpx;
			z-index: $app-zIndex-absolute;
		}
	}
}
</style>