point-app/components/discount/index.vue

<template>
	<view class="discount">
		<view class="pre_one">优惠劵({{total||couponList.length}}张)</view>
		<view class="pre_two">
			<view class="list" v-for="(item,index) in couponList" :key="index">
				<view class="l">
					<view class="l_1" v-if="item.discount_type=='min'">
						<view class="money">￥{{item.discount_config.min||'0'}}</view>
						<view v-if="item.discount_config.limit=='nolimit'" class="man">不限</view>
						<view v-else class="man">满{{item.discount_config.limit||'0'}}可用</view>
					</view>
					<view class="l_2" v-else-if="item.discount_type=='discount'">
						<view class="money">{{item.discount_config.min||'0'}}折</view>
						<view v-if="item.discount_config.limit=='nolimit'" class="man">不限</view>
						<view v-else class="man">
							满{{item.discount_config.limit||'0'}}可用,最多减{{item.discount_config.max||'0'}}元
						</view>
					</view>
				</view>
				<view class="c">
					<view class="type"><text>{{item.discount_type_label||'暂无'}}</text>
						{{item.name||'暂无'}}
					</view>
					<view v-if="item.expire_type=='days'" class="date">{{item.expire_time||'暂无'}}天内有效</view>
					<view v-if="item.expire_type=='fixed'" class="date">{{item.expire_time||'暂无'}}</view>
					<view v-if="item.get_limit=='max'" class="date">
						{{item.use_limit_label||'暂无'}}-{{item.expire_type_label}}-{{item.get_limit_label||'暂无'}}领取{{item.get_limit_config.max}}张
					</view>
					<view v-if="item.get_limit=='nolimit'" class="date">
						{{item.use_limit_label||'暂无'}}-{{item.expire_type_label}}-{{item.get_limit_label||'暂无'}}
					</view>
				</view>
				<view class="r">
					<button v-if="Style&&Style.btn||false" type="default" size="mini"
						@click="toDiscount(item)">确认</button>
					<button v-if="Style&&Style.status||false" type="default"
						size="mini">{{item.status=='0'?'未使用':item.status=='1'?'已使用':'已过期'}}</button>
					<button v-if="Style&&Style.receive==true&&item.canGet==true" type="default" size="mini"
						@click="toReceive(item)">领取</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			couponList: {
				type: Array,
			},
			total: {
				type: Number
			},
			Style: {
				type: Object,
			},
		},
		data() {
			return {

			};
		},
		methods: {
			// 选择优惠劵
			toDiscount(e) {
				const that = this;
				that.$emit('toDiscount', e)
			},
			// 领取优惠劵
			toReceive(e) {
				const that = this;
				that.$emit('toReceive', e)
			},
		}
	}
</script>

<style lang="scss">
	.discount {
		.pre_one {
			text-align: center;
			margin: 2vw 0;
		}

		.pre_two {
			display: flex;
			flex-direction: column;
			padding: 0 2vw;

			.list {
				background-color: var(--fffColor);
				margin: 0 0 2vw 0;
				display: flex;
				justify-content: space-between;
				border-radius: 5px;
				padding: 2vw;

				.l {
					width: 20vw;
					background-color: #FFFACD;
					text-align: center;
					font-size: var(--font14Size);
					padding: 1vw;
					border-radius: 5px;
				}

				.c {
					width: 52vw;

					.type {
						font-size: var(--font14Size);
						margin: 0 0 1vw 0;

						text {
							background-color: var(--fFB1Color);
							color: var(--fffColor);
							padding: 1vw;
							border-radius: 5px;
							display: inline-block;
							margin: 0 1vw 0 0;
						}
					}

					.date {
						font-size: var(--font12Size);
						margin: 0 0 1vw 0;
						color: var(--f85Color);
					}
				}

				.r {
					width: 16vw;
					text-align: right;

					button {
						background-color: #FFD700;
						font-weight: bold;
						padding: 2vw;
						font-size: var(--font14Size);
						line-height: 1;
					}
				}
			}

		}
	}
</style>