high-mini/pages/user/mineCoupons/mineCoupons.vue

<template>
	<view>
		<view class="topTabBar">
			<view class="grid" v-for="(grid,tbIndex) in businType" :key="tbIndex" @click="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>

		<view v-if="productList == '' " class="mart60 fotct font14 fcor666">
			<image style="width: 100px;height: 100px;"
				src="data:image/png;base64,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">
			</image>
			<view class="mart10">暂无数据</view>
		</view>


		<view class="product-list mart20">
			<view class="product" v-for="product in productList" :key="product.id"
				@click="jumpMineCou(product.highCouponModel.id)">
				<image mode="widthFix" :src="imageUrl+product.highCouponModel.couponImg"></image>
				<view class="name">{{ product.highCouponModel.couponName }}</view>
				<view class="info">
					<view class="price">￥{{ product.highCouponModel.discountPrice}}</view>
					<view class="slogan"
						v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice">
						￥{{ product.highCouponModel.salesPrice}}</view>
				</view>
			</view>
		</view>
		<view class="loading-text" v-if="productList != '' ">{{ loadingText }}</view>
	</view>
</template>

<script>
	import {
		getUserCouponList
	} from "../../../Utils/Api.js"; //您的api路径
	let app = getApp();
	export default {
		data() {
			return {
				businType: ['未使用', '已使用'],
				tabbarIndex: 0,
				imageUrl: app.globalData.imgUrl,
				productList: [],
				pageNum: 1,
				pageSize: 10,
				isNoMoreData: false,
				loadingText: ''
			}
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		},

		onLoad() {
			this.getUserCouponList(1);
		},
		onReachBottom() {
			this.getUserCouponList();
		},
		methods: {
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				if (this.tabbarIndex === 0) {
					this.pageNum = 1;
					this.productList = []
					this.isNoMoreData = false;
					this.getUserCouponList(1);
				} else if (this.tabbarIndex === 1) {
					this.pageNum = 1;
					this.productList = []
					this.isNoMoreData = false;
					this.getUserCouponList(2);
				}
			},
			jumpMineCou(item) {
				uni.navigateTo({
					url: '../../goods/coupon-details/coupon-details?id=' + item
				})
			},
			//赠券卡券列表
			getUserCouponList(item) {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					this.loadingText = '到底了';
					return false;
				}
				let pagenum = this.pageNum;
				let params = {
					pageNum: pagenum,
					status: item,
					pageSize: this.pageSize
				}

				getUserCouponList(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list != '') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
						this.productList = this.productList.concat(res.return_data.list);
					} else {
						this.productList = [];
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.topTabBar {
		width: 100%;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					color: #f06c7a;
					border-bottom: solid 4upx #f06c7a;
				}
			}
		}
	}

	.product-list {
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 15px 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				border-radius: 20upx 20upx 0 0;
			}

			.name {
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;

				.price {
					color: #e65339;
					font-size: 30upx;
					font-weight: 600;
				}

				.slogan {
					color: #807c87;
					font-size: 24upx;
					text-decoration: line-through;
					margin-right: 50px;
				}
			}
		}
	}
</style>