修改样式

pages_order/mine/coupon.vue

@@ -0,0 +1,288 @@
+<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>