baiyuApp/pages_company/coupon.vue

<template>
	<view ref="container">
		<view class="top-fixed">
			<view class="cate-list">
				<!-- 关键字列表 -->
				<scroll-view scroll-x="true">
					<view class="inner" v-if="cates.length>0">
						<view v-for="(item,index) in cates" :key="index"
							:class="cateId == item.dictValue?'item active':'item'" @click="choseCate(item)">
							{{ item.dictLabel }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="tui-coupon-list">
			<view class="tui-coupon-item tui-top20" v-for="(item, index) in couponsList" :key="index">
				<image src="https://zkzh-2025.oss-cn-beijing.aliyuncs.com/shop/images/bg_coupon_3x.png"
					class="tui-coupon-bg" mode="widthFix"></image>
				<view class="tui-coupon-item-left">
					<view class="tui-coupon-price-box" :class="{ 'tui-color-grey': item.receiveCount>0 }">
						<view class="tui-coupon-price-sign">￥</view>
						<view class="tui-coupon-price" :class="{ 'tui-price-small': false }">{{ item.couponPrice }}
						</view>
					</view>
					<view class="tui-coupon-intro">满{{ item.useMinPrice }}元可用</view>
				</view>
				<view class="tui-coupon-item-right">
					<view class="tui-coupon-content">
						<view class="tui-coupon-title-box">
							<view class="tui-coupon-title">{{ item.couponName }}</view>
						</view>
						<view class="tui-coupon-rule">
							<view class="tui-rule-box tui-padding-btm">
								<view class="tui-coupon-circle"></view>
								<view class="tui-coupon-text">不可叠加使用</view>
							</view>
							<view class="tui-rule-box">
								<view class="tui-coupon-circle"></view>
								<view class="tui-coupon-text">{{ item.limitTime }} 到期</view>

							</view>
						</view>
					</view>
				</view>
				<view class="tui-btn-box">
					<view class="btn receive" @click="show(item)">查看</view>
				</view>
			</view>
		</view>
		<Loading :loaded="loadend" :loading="loading"></Loading>
		<!--暂无优惠券-->
		<view v-if="couponsList.length == 0 && page > 1" class="no-data-box">
			<image src="/static/images/empty.png" mode="aspectFit"></image>
			<view class="empty-title">暂无数据</view>
		</view>
	</view>
</template>
<script>
	import {
		getCompanyCouponIssueList,
		receive
	} from '@/api/coupon'
	import Loading from '@/components/Loading'
	export default {
		name: 'getCoupon',
		components: {
			Loading,
		},
		props: {},
		data: function() {
			return {
				cateId: 0,
				cates: [],
				page: 1,
				limit: 10,
				couponsList: [],
				loading: false,
				loadend: false,
			}
		},
		onLoad(options) {
			var cate = {
				dictLabel: "全部",
				dictValue: 0
			};
			this.cates.push(cate);
			const data = this.$getDict("storeProductPackageCate")
			if (data) {
				this.cates = this.cates.concat(data);
			}
		},
		mounted: function() {

		},

		onShow() {
			this.getCompanyCouponIssueList()
		},
		onReachBottom() {
			!this.loading && this.getCompanyCouponIssueList()
		},
		methods: {
			choseCate(item) {
				this.cateId = item.dictValue;
				this.couponsList = [];
				this.loading = false;
				this.loadend = false;
				this.page = 1;
				this.getCompanyCouponIssueList();

			},
			show(item) {
				uni.navigateTo({
					url: './couponDetails?id=' + item.id
				})
			},
			getCompanyCouponIssueList() {
				if (this.loading) return //阻止下次请求（false可以进行请求）；
				if (this.loadend) return //阻止结束当前请求（false可以进行请求）；
				this.loading = true
				let q = {
					couponType: 1,
					page: this.page,
					pageSize: this.limit,
					cateId: this.cateId
				}
				getCompanyCouponIssueList(q).then(res => {
					this.loading = false
					this.couponsList.push.apply(this.couponsList, res.data.list)
					this.loadend = res.data.list.length < this.limit //判断所有数据是否加载完成；
					this.page = this.page + 1
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f5f5f5;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.top-fixed {
		width: 100%;
		position: fixed;
		top: 88rpx;
		left: 0;
		z-index: 99999;

		.cate-list {
			box-sizing: border-box;
			background: #fff;
			padding: 10upx 27upx;
			height: 100upx;

			.inner {
				display: flex;
			}

			.item {
				flex-shrink: 0;
				padding: 0 24upx;
				height: 64upx;
				line-height: 64upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF233C;
				background: #F5FFFE;
				border: 1px solid #FF233C;
				border-radius: 32upx;
				margin: 0 20upx 20upx 0;

				&.active {
					color: #FFFFFF;
					background: #FF233C;
					border: 1px solid #FF233C;
				}
			}
		}
	}

	.tui-coupon-list {
		margin-top: 120upx;
		width: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.tui-coupon-banner {
		width: 100%;
	}

	.tui-coupon-item {
		width: 100%;
		height: 210rpx;
		position: relative;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		box-sizing: border-box;
		overflow: hidden;

	}

	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}

	.tui-coupon-item-left {
		width: 218rpx;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 70rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}

	.tui-coupon-intro {
		background: #f7f7f7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 6rpx;
		background: #ffebeb;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-color-grey {
		color: #888 !important;
	}

	.tui-bg-grey {
		background: #f0f0f0 !important;
		color: #888 !important;
	}

	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-coupon-rule {
		padding-top: 52rpx;
	}

	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}

	.tui-padding-btm {
		padding-bottom: 6rpx;
	}

	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}

	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}

	.tui-top20 {
		margin-top: 20rpx;
	}

	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}

	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-btn-box {
		position: absolute;
		right: 20rpx;
		bottom: 40rpx;
		z-index: 10;

		.btn {
			width: 155upx;
			height: 64upx;
			line-height: 64upx;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			border-radius: 32upx;
			margin-left: 15upx;

			&.cancel {
				border: 1px solid red;
				color: red;
			}

			&.receive {
				background: red;
				color: #FFFFFF;
			}
		}
	}
</style>