app/sheep/components/s-coupon-list/s-coupon-list.vue

<template>
	<view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }">
		<view class="content">
			<view class="tag ss-flex ss-row-center" :class="
          data.status == 'expired' || data.status == 'used' ? 'disabled-bg-color' : 'info-bg-color'
        ">{{ data.type_text }}</view>
			<view class="title ss-m-x-30 ss-p-t-18">
				<view class="ss-flex ss-row-between">
					<view class="value-text ss-flex-1 ss-m-r-10" :class="
              data.status == 'expired' || data.status == 'used' ? 'disabled-color' : 'info-color'
            ">{{ data.name }}</view>
					<view>
						<view class="ss-flex ss-col-bottom" :class="
                data.status != 'expired' && data.status != 'used' ? 'price-text' : 'disabled-color'
              ">
							<view class="value-reduce ss-m-b-10" v-if="data.type === 'reduce'">￥</view>
							<view class="value-price">{{ data.amount }}</view>
							<view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.type === 'discount'">折</view>
						</view>
					</view>
				</view>
				<view class="ss-flex ss-row-between ss-m-t-16">
					<view class="sellby-text" :class="
              data.status == 'expired' || data.status == 'used'
                ? 'disabled-color'
                : 'subtitle-color'
            ">
						{{'有效期：' + data.use_start_time.substring(0, 11) }}至
						{{ data.use_end_time.substring(0, 11)  }}
						<!-- 				{{
              type === 'user'
                ? '有效期：' + data.use_start_time.substring(0, 11)
                : '领取时间：' + data.get_start_time.substring(0, 11)
            }}至
						{{
              type === 'user'
                ? data.use_end_time.substring(0, 11)
                : data.get_end_time.substring(0, 11)
            }} -->
					</view>
					<view class="value-enough" :class="
              data.status == 'expired' || data.status == 'used'
                ? 'disabled-color'
                : 'subtitle-color'
            ">满{{ data.enough }}可用</view>
				</view>
			</view>
		</view>

		<view class="desc ss-flex ss-row-between">
			<view>
				<view class="desc-title">
					{{ data.description }}
				</view>
				<view>
					<slot name="reason">
					</slot>
				</view>
			</view>
			<view>
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	const state = reactive({
		stateMap: {
			0: '立即领取',
			1: '去使用',
		},
	});
	// 接受参数
	const props = defineProps({
		data: {
			type: Object,
			default: {},
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: 'coupon',
		},
	});
</script>

<style lang="scss" scoped>
	.info-bg-color {
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	}

	.disabled-bg-color {
		background: #999;
	}

	.info-color {
		color: #333;
	}

	.subtitle-color {
		color: #666;
	}

	.disabled-color {
		color: #999;
	}

	.content {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		-webkit-mask: radial-gradient(circle at 12rpx 100%, #0000 12rpx, red 0) -12rpx;
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);

		.tag {
			width: 100rpx;

			color: #fff;
			height: 40rpx;
			font-size: 24rpx;
			border-radius: 20rpx 0 20rpx 0;
		}

		.title {
			padding-bottom: 22rpx;
			border-bottom: 2rpx dashed #d3d3d3;

			.value-text {
				font-size: 32rpx;
				font-weight: 600;
			}

			.sellby-text {
				font-size: 24rpx;
				font-weight: 400;
			}

			.value-price {
				font-size: 64rpx;
				font-weight: 500;
				line-height: normal;
				font-family: OPPOSANS;
			}

			.value-reduce {
				line-height: normal;
				font-size: 32rpx;
			}

			.value-discount {
				line-height: normal;
				font-size: 28rpx;
			}

			.value-enough {
				font-size: 24rpx;
				font-weight: 400;
				font-family: OPPOSANS;
			}
		}
	}

	.desc {
		width: 100%;
		background: #fff;
		-webkit-mask: radial-gradient(circle at 12rpx 0%, #0000 12rpx, red 0) -12rpx;
		box-shadow: rgba(#000, 0.1);
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
		border-radius: 0 0 20rpx 20rpx;

		.desc-title {
			font-size: 24rpx;
			color: #999;
			font-weight: 400;
		}
	}

	.price-text {
		color: #ff0000;
	}
</style>