caimei-applets-caimei/pages/user/order/components/cm-coupon-tips.vue

<template name="alert">
	<view class="coupon-content-model">
		<view class="coupon-alert-content">
			<view class="coupon">
				<view class="coupon-list">
					<view class="list-cell-tags"
						><text>{{ coupon.couponType | TypeFormat }}</text></view
					>
					<view class="list-cell-le">
						<view class="coupon-maxMoney"> <text class="small">￥</text> {{ coupon.couponAmount }} </view>
						<view class="coupon-minMoney">
							<text class="txt">满{{ coupon.touchPrice }}可用</text>
						</view>
					</view>
					<view class="list-cell-ri">
						<view class="list-cell-top">
							<text v-if="coupon.couponType == 0">
								{{
									coupon.productType && coupon.productType == 1
										? '全商城商品通用'
										: coupon.couponName
								}}
							</text>
							<text v-if="coupon.couponType == 1">
								{{ coupon.categoryType == 1 ? coupon.couponName : coupon.couponName }}
							</text>
							<text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
							<text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
						</view>
						<view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
					</view>
				</view>
				<view class="coupon-btn" @click.stop="cancel">立即收下</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'alert',
	props: {
		coupon: {
			type: Object
		}
	},
	filters: {
		TypeFormat(value) {
			const map = {
				0:'活动券',
				1:'品类券',
				2:'用户专享券',
				3:'店铺券',
				4:'新用户券',
			}
            return map[value]
		}
	},
	data() {
		return {}
	},
	created() {},
	onLoad() {},
	methods: {
        cancel(){
             this.$emit('cancel')
        }
    },
	onShow() {}
}
</script>

<style lang="scss">
.coupon-content-model {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8888;
	transition: all 0.4s;
	.coupon-alert-content {
		width: 600rpx;
		height: 612rpx;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		box-sizing: border-box;
		padding-top: 92rpx;
		.coupon {
			width: 600rpx;
			height: 522rpx;
			background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbg@2x.png);
			background-size: cover;
			box-sizing: border-box;
			padding: 230rpx 40rpx 0 40rpx;
			.coupon-list {
				width: 100%;
				height: 147rpx;
				margin-bottom: 32rpx;
				box-sizing: border-box;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-bg@2x.png);
				background-size: cover;
				position: relative;
				.list-cell-tags {
					display: inline-block;
					padding: 0 10rpx;
					height: 32rpx;
					line-height: 32rpx;
					background-color: #f94b4b;
					color: #ffffff;
					font-size: 18rpx;
					border-radius: 16rpx 0 16rpx 0;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}
				.list-cell-le {
					width: 154rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 30rpx 0;
					float: left;
					.coupon-maxMoney {
						width: 100%;
						height: 54rpx;
						line-height: 54rpx;
						font-size: 42rpx;
						color: #f94b4b;
						text-align: center;
						margin-top: 10rpx;
						.small {
							font-size: $font-size-20;
						}
					}
					.coupon-minMoney {
						width: 100%;
						height: 28rpx;
						float: left;
						box-sizing: border-box;
						padding-left: 24rpx;
						.txt {
							display: block;
							height: 28rpx;
							line-height: 28rpx;
							font-size: 16rpx;
							color: #f94b4b;
							text-align: center;
							padding: 0 5rpx;
							background-color: #fff1eb;
							border-radius: 4rpx;
							float: left;
						}
					}
				}
				.list-cell-ri {
					width: 366rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 30rpx 20rpx;
					float: left;
					.list-cell-top {
						width: 100%;
						height: 64rpx;
						line-height: 64rpx;
						font-size: $font-size-26;
						color: #333333;
						float: left;
						text-overflow: ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.list-cell-time {
						width: 100%;
						height: 28rpx;
						line-height: 28rpx;
						text-align: left;
						font-size: $font-size-20;
						color: #999999;
					}
				}
			}
			.coupon-btn {
				width: 100%;
				height: 78rpx;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbtnbg@2x.png);
				background-size: cover;
				line-height: 78rpx;
				text-align: center;
				color: #ffffff;
				font-size: $font-size-36;
			}
		}
	}
}
</style>