junzitang/pagesT/components/coupon/CouponView.vue

<template>
	<view class="mask" :class="!maskState ? 'none' : maskState ? 'show' : ''">
		<view class="shadow-bg"></view>
		<view class="mask-content" @click.stop.prevent="stopPrevent">
			<view class="dont-use"><text @click="dontUse">不使用优惠券</text></view>

			<!-- 优惠券页面，仿mt -->
			<view class="coupon-item" v-for="(item, index) in discountList" :key="index" @click="selCoupon(item)">
				<view class="con">
					<view class="left">
						<text class="title">{{ item.name }}</text>
						<text class="time">有效期至{{ $_utils.formatDate(item.endTime, 'yyyy-MM-dd') }}</text>
					</view>
					<view class="right">
						<text class="price">{{ item.reducePrice }}</text>
						<text v-if="item.minPrice==='不限金额'||Number(item.minPrice)===0">无门槛使用</text>
						<text v-else>满{{item.minPrice}}元可用</text>
					</view>

					<view class="circle l"></view>
					<view class="circle r"></view>
				</view>
				<text class="tips">
					{{ item.applyRange === 10 ? '全店商品通用' : item.applyRange === 20 ? '指定分类商品可用' : item.applyRange === 30 ? '指定品牌商品可用' : '' }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			maskState: {
				type: Boolean,
				default: false
			},
			discountList: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		onLoad() {
			this.discountList()
		},
		data() {
			return {}
		},
		methods: {
			stopPrevent() {},
			//不使用优惠
			dontUse() {
				this.$emit('dontUse');
			},
			// 选择优惠券
			selCoupon(row) {
				this.$emit('selCoupon', row);
			}
		}
	};
</script>

<style lang="scss">
	/* 优惠券面板 */
	.mask {
		position: fixed;
		left: 0;
		top: 100%;
		// bottom: 0;
		width: 100%;
		// background: rgba(0, 0, 0, 0);
		z-index: 9995;
		height: 100vh;
		transition: 0.3s;

		.shadow-bg {
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.mask-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			z-index: 9995;
			// transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;

			.dont-use {
				text-align: right;
				color: #666;
				font-size: 24upx;
				padding: 20upx 30upx;
			}
		}

		&.none {
			top: 100%;

			.shadow-bg {
				display: none;
			}

			.mask-content {
				transform: translateY(100%);
			}
		}

		&.show {
			top: 0;

			.shadow-bg {
				display: block;
			}

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $price-color;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}
</style>