point-app/components/discount/index.vue

<template>
	<view class="main">
		<view class="pre_one">优惠劵({{couponList.length}}张)</view>
		<view class="pre_two" v-for="(item,index) in couponList" :key="index">
			<view class="left">
				<view class="money">￥{{item.money||'0'}}</view>
				<view class="man">满{{item.discount_money||'0'}}可以</view>
			</view>
			<view class="right">
				<view class="other">
					<view class="type"><text>{{item.discount_type_label||'暂无'}}</text>
						{{item.name||'暂无'}}
					</view>
					<view class="date">{{item.expire_time||'暂无'}}</view>
					<view class="date">{{item.use_limit_label||'暂无'}}-{{item.get_limit_label||'暂无'}}</view>
				</view>
				<view class="btn">
					<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||false" type="default" size="mini"
						@click="toReceive(item)">领取</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			couponList: {
				type: Array,
			},
			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">
	.main {
		.pre_one {
			text-align: center;
			padding: 2vw 0;
		}

		.pre_two {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 96vw;
			margin: 0 2vw 2vw 2vw;
			border-radius: 3vw;

			.left {
				text-align: center;
				border-radius: 3vw;
				padding: 6vw 3vw;
				background-color: #FFFACD;
				color: #8B4513;
				border-right: 0.5vw dashed var(--fcColor);

				.money {
					font-size: var(--font18Szie);
					font-weight: bold;
				}

				.man {
					font-size: var(--font14Size);
				}
			}

			.right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-grow: 1;
				border-radius: 3vw;
				padding: 1.5vw 3vw;
				background-color: var(--mainColor);

				.other {
					display: flex;
					flex-direction: column;
					width: 50vw;

					.type {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						line-height: 6vw;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						font-size: var(--font14Size);
						margin: 0 1vw 1vw 0;

						text {
							margin: 0 1vw 0 0;
							border: 0.5vw solid red;
							color: red;
							padding: 0 1vw;
							border-radius: 1vw;
							font-size: var(--font12Size);
						}
					}

					.date {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: var(--font12Size);
						color: var(--f99Color);
					}
				}

				.btn {
					width: 20vw;

					button {
						background-color: #FFD700;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>