<!-- 优惠券图标 -->
<template>
	<view class="container">
		<view class="icon icon1" v-if="props.item.couponType == 1">
			<view class="top">
				<text class="i" >￥</text>
				<text class="num" >{{ props.item.discountAmount }}</text>
			</view>
			<view class="intro">
				<text class="t">满{{ props.item.fullAmount }}可用</text>
			</view>
		</view>
		<view class="icon icon2" v-if="props.item.couponType == 2">
			<view class="top">
				<text class="i" >{{ props.item.discountNum }}件</text>
				<text class="num" >商品兑换</text>
			</view>
			<view class="intro">
				<text class="t">满{{ props.item.fullAmount }}可用</text>
			</view>
		</view>
		<view class="icon icon3" v-if="props.item.couponType == 3">
			<view class="top">
				<text class="num" >{{ props.item.discountRate/10 }}折</text>
			</view>
			<view class="intro">
				<text class="t">满{{ props.item.fullAmount }}可用</text>
			</view>
		</view>
		<view class="icon icon2" v-if="props.item.couponType == 4">
			<view class="top">
				<text class="i" >第二件</text>
				<text class="num" >半价券</text>
			</view>
		</view>
		<view class="icon icon2" v-if="props.item.couponType == 6">
			<view class="top">
				<text class="i" >买一送</text>
				<text class="num" >一券</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item: {
			type: Object,
			default: {}
		},
	
	});
</script>

<style scoped lang="scss">
	$color: #ff1c1c;

	.container {
		width: 100%;
		height: 100%;
		padding: 0;

		.icon {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.icon1 {
				.top {
					.i {
						color: $color;
						font-size: 24upx;
						font-weight: bold;
					}

					.num {
						color: $color;
						font-size: 72upx;
						font-weight: bold;
					}
				}
			}

			&.icon2 {
				.top {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.i {
						color: $color;
						font-size: 34upx;
						font-weight: bold;
					}

					.num {
						color: $color;
						font-size: 34upx;
						font-weight: bold;
					}
				}
			}

			&.icon3 {
				.top {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.i {
						color: $color;
						font-size: 34upx;
						font-weight: bold;
					}

					.num {
						color: $color;
						font-size: 52upx;
						font-weight: bold;
					}
				}
			}

			.intro {
				display: flex;
				justify-content: center;

				.t {
					font-size: 22upx;
					color: #999;
				}
			}
		}
	}
</style>