zyejMAll-mobile/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="isDisable ? 'disabled-bg-color' : 'info-bg-color'">
				{{ data.discountType === 1 ? '满减券' : '折扣券' }}
			</view>
			<view class="title  ss-flex">
				
				<view class="ss-flex new-title new-left">
					<view style="width:100%;">
						<view class="ss-flex ss-col-bottom new-left-center" :class="isDisable ? 'disabled-color' : 'price-text'">
							<view class="value-reduce " v-if="data.discountType === 1">￥</view>
							<view class="value-price">
								{{
							  data.discountType === 1
								? fen2yuan(data.discountPrice)
								: data.discountPercent / 10.0
							}}
							</view>
							<view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.discountType === 2">折</view>
						</view>
					</view>
					<view class="value-enough new-left-center" :class="isDisable ? 'disabled-color' : 'subtitle-color'">
						满 {{ fen2yuan(data.usePrice) }} 可用
					</view>
					
					
				</view>
				<view class="ss-flex ss-row-between ss-m-t-16 new-title new-con-ww">
					<view class="value-text ss-flex-1 ss-m-r-10 new-ww" :class="isDisable ? 'disabled-color' : 'info-color'">
						{{ data.name }}
					</view>
					<view class="sellby-text new-ww" :class="isDisable ? 'disabled-color' : 'subtitle-color'"
						v-if="data.validityType === 2">
						<!-- 有效期：领取后第{{ data.fixedStartTerm }}天开始至第{{ data.fixedEndTerm }}天内有效 -->
						有效期：领取{{ data.fixedEndTerm }}天内有效
					</view>
					<view class="sellby-text" :class="isDisable ? 'disabled-color' : 'subtitle-color'" v-else>
						有效期: {{ sheep.$helper.timeFormat(data.validStartTime, 'yyyy-mm-dd') }} 至
						{{ sheep.$helper.timeFormat(data.validEndTime, 'yyyy-mm-dd') }}
					</view>
					
				</view>
				<slot />
			</view>
		</view>

		<!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
		<!-- <view class="desc ss-flex ss-row-between">
			<view>
				<view class="desc-title">{{ data.description }}</view>
				<view>
					<slot name="reason" />
				</view>
			</view>
			<view>
				<slot />
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		fen2yuan
	} from '../../hooks/useGoods';
	import sheep from '../../index';

	const state = reactive({});

	const isDisable = computed(() => {
		if (props.type === 'coupon') {
			return false;
		}
		return props.data.status !== 1;
	});

	// 接受参数
	const props = defineProps({
		data: {
			type: Object,
			default: {},
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: 'coupon', // coupon 优惠劵模版；user 用户优惠劵
		},
	});
</script>

<style lang="scss" scoped>
	.new-title{
		flex-wrap: wrap;
	}
	.content{
		position:relative;
		.tag{
			position:absolute;
			top:0;
			left:0;
		}
	}
	.new-ww{
		width:100%;
	}
	.new-con-ww{
		width:42%;
		padding-left: 13px;
	}
	.new-left{
		padding: 30px 0px;
		background: rgba(255, 241, 241);
		width: 32%;
		.new-left-center{
			width:100%;
			justify-content: center;
			text-align: center;
			color: #ff0000;
		}
	}
	.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;
		// -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: 40rpx;
				font-weight: 700;
				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>