teambuy-front/pages_order/mine/coupon.vue

<template>
	<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="loadMoreData">
		<!-- 导航栏 -->
		<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

		<!-- 优惠券筛选 -->
		<view class="tabs">
			<uv-tabs :list="filtrationMenu" @click="hadleFiltrationMenuEvent" lineColor="#E3441A"
				:activeStyle="{ color : '#E3441A' }"></uv-tabs>
		</view>

		<!-- 优惠券列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in coupons" @click="select(item)" :key="index">
				<image src="@/pages_order/static/coupon/coupon-bg.png" mode="widthFix" class="coupon-bg"></image>

				<view class="item-con">
					<view class="price-time">
						<view class="price">
							<view class="num">
								<view class="icon">
									￥
								</view>
								{{ item.money }}
							</view>
						</view>

						<view class="date-tiao">
							<view class="time">
								限{{ item.time || '不限' }}
							</view>
							<view class="tiao">
								{{ item.tiaojian }}
							</view>
						</view>
					</view>

					<view class="status">
						<view class="order-status">
							<image src="@/pages_order/static/coupon/status.png" mode="widthFix" class="status-img">
							</image>
							<view class="text">
								已领取
							</view>
						</view>

						<view class="surplus">
							剩余28天过期
						</view>
					</view>
				</view>
			</view>
		</view>

		<uv-empty v-if="coupons.length == 0" text="空空如也" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>
	</scroll-view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	export default {
		name: "couponList",
		mixins: [mixinList],
		props: {
			height: {
				default: 'auto'
				// default : 'calc(90vh - 180rpx)'
			},
			// 押金
			depositPrice: {},
			washPrice: { //水洗费
			},
			rentPrice: { //租金
			},
		},
		data() {
			return {
				mixinsListApi: 'couponPage',
				filtrationMenu: [{
					name: "全部优惠券"
				}, {
					name: "已使用优惠券"
				}, {
					name: "已过期优惠券"
				}],
				activefiltration: 0,
				coupons: [{
					id: 1,
					money: 20,
					time: "12月20日-1月20日",
					tiaojian: "无门槛使用",
					state: 0,
					ex: "28"
				}]
			};
		},
		methods: {
			select(item) {
				if (this.isSelect(item)) {
					return
				}
				this.$emit('select', item)
			},
			isSelect(item) {

				if (!this.depositPrice && !this.rentPrice && !this.washPrice) {
					return false
				}

				// 押金
				if (this.depositPrice &&
					item.useType == 0 &&
					this.depositPrice >= item.conditionPrice) {
					return false
				}

				// 租金
				if (this.rentPrice &&
					item.useType == 1 &&
					this.rentPrice >= item.conditionPrice) {
					return false
				}

				// 水洗
				if (this.washPrice &&
					item.useType == 2 &&
					this.washPrice >= item.conditionPrice) {
					return false
				}

				return true
			},

			//点击过滤菜单
			hadleFiltrationMenuEvent(event) {
				this.activefiltration = event.index
			}
		}
	}
</script>

<style scoped lang="scss">
	// 优惠券筛选
	.tabs {
		&::v-deep .uv-tabs__wrapper__nav {
			background: white;

			.uv-tabs__wrapper__nav__item {
				width: 33.33%;
				text-align: center;
				box-sizing: border-box;
			}
		}
	}

	.list {

		.item {
			color: #FDDFCD;
			position: relative;
			width: calc(100% - 40rpx);
			height: 220rpx;
			background-size: 100% 100%;
			margin: 20rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.coupon-bg {
				width: 100%;
				position: absolute;
				left: 0rpx;
				top: 0rpx;
			}

			.item-con {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: absolute;
				top: 50%;
				left: 0rpx;
				transform: translateY(-50%);
				z-index: 99;
				width: 100%;

				.price-time {
					display: flex;
					width: 65%;

					.price {
						display: flex;
						align-items: center;

						.num {
							color: #FFF8E9;
							font-weight: 900;
							font-size: 70rpx;
							display: flex;
							align-items: flex-end;

							.icon {
								color: #FFF8E9;
								width: 30rpx;
								height: 30rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 20rpx;
								border-radius: 14rpx;
								margin-bottom: 14rpx;
								margin-right: 10rpx;
							}
						}
					}

					.date-tiao {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 24rpx;
						box-sizing: border-box;
						padding-left: 20rpx;

						.time {}

						.tiao {
							display: flex;
							justify-content: center;
							background: #FDE5BA;
							border-radius: 40rpx;
							color: #FF2E34;
							padding: 5rpx 20rpx;
							margin-top: 15rpx;
						}
					}
				}

				.status {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 35%;
					color: #FD4231;
					padding-top: 30rpx;

					.order-status {
						position: relative;
						width: 180rpx;

						.status-img {
							position: absolute;
							left: 0;
							width: 100%;
						}
						
						.text {
							height: 90rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							position: relative;
							z-index: 100;
							font-size: 34rpx;
							font-weight: bold;
						}
					}

					.surplus {
						font-size: 22rpx;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
		}

		.del {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #ffffff99;
			z-index: 99;
		}
	}
</style>