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="center">
				<view class="type"><text>{{item.type||'暂无'}}</text> {{item.name||'暂无'}}</view>
				<view class="date">有效期{{item.start_time||'暂无'}}-{{item.end_time||'暂无'}}</view>
			</view>
			<view class="right">
				<button type="default" size="mini" @click="toDiscount(item)">确认</button>
			</view>
		</view>
	</view>
</template>

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

			};
		},
		methods: {
			// 选择优惠劵
			toDiscount(e) {
				const that = this;
				that.$emit('toDiscount', {
					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: 94vw;
			margin: 0 2vw 1vw 2vw;
			border-radius: 3vw;

			.left {
				text-align: center;
				border-radius: 3vw;
				padding: 5vw 3vw;
				background-color: #FFFACD;
				color: #8B4513;

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

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

			.center {
				flex-grow: 1;
				border-radius: 3vw;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				padding: 5vw 2vw;
				background-color: var(--mainColor);

				.type {
					margin: 0 0 1vw 0;

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

					font-size: var(--font16Size);
				}

				.date {
					font-size: var(--font12Size);
					color: var(--f99Color);
				}
			}

			.right {
				padding: 7vw 3vw;
				border-radius: 3vw;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				background-color: var(--mainColor);

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