406 lines
8.2 KiB
Vue
406 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="up-coupon" :class="[`up-coupon--${shape}`, `up-coupon--${type}`, `up-coupon--${size}`, {'up-coupon--disabled': disabled}]"
|
|||
|
|
:style="[couponStyle]" @click="handleClick">
|
|||
|
|
<view class="up-coupon__content">
|
|||
|
|
<!-- 左侧金额区域 -->
|
|||
|
|
<view class="up-coupon__amount">
|
|||
|
|
<slot name="unit" :unit="unit" :unitPosition="unitPosition" v-if="unitPosition === 'left'">
|
|||
|
|
<text class="up-coupon__amount-unit" v-if="unitPosition === 'left'">{{ unit }}</text>
|
|||
|
|
</slot>
|
|||
|
|
<slot name="amount" :amount="amount">
|
|||
|
|
<text class="up-coupon__amount-value">{{ amount }}</text>
|
|||
|
|
</slot>
|
|||
|
|
<slot name="unit" :unit="unit" :unitPosition="unitPosition" v-if="unitPosition === 'right'">
|
|||
|
|
<text class="up-coupon__amount-unit" v-if="unitPosition === 'right'">{{ unit }}</text>
|
|||
|
|
</slot>
|
|||
|
|
<slot name="limit" :limit="limit">
|
|||
|
|
<text class="up-coupon__amount-limit" v-if="limit">{{ limit }}</text>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 中间描述区域 -->
|
|||
|
|
<view class="up-coupon__info">
|
|||
|
|
<slot name="title" :title="title">
|
|||
|
|
<text class="up-coupon__info-title">{{ title }}</text>
|
|||
|
|
</slot>
|
|||
|
|
<slot name="desc" :desc="desc">
|
|||
|
|
<text class="up-coupon__info-desc" v-if="desc">{{ desc }}</text>
|
|||
|
|
</slot>
|
|||
|
|
<slot name="time" :time="time">
|
|||
|
|
<text class="up-coupon__info-time" v-if="time">{{ time }}</text>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 右侧操作区域 -->
|
|||
|
|
<view class="up-coupon__action u-padding-right-20">
|
|||
|
|
<slot name="action" :actionText="actionText" :circle="circle">
|
|||
|
|
<up-tag type="error" :bgColor="type ? 'transparent' : '#eb433d'"
|
|||
|
|
:borderColor="type ? '#eee' : '#eb433d'" borderRadius="6px"
|
|||
|
|
size="medium" class="up-coupon__action-text"
|
|||
|
|
:shape="circle ? 'circle': 'circle'">{{ actionText }}</up-tag>
|
|||
|
|
</slot>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 红包绳子效果 -->
|
|||
|
|
<view v-if="shape === 'envelope'" class="up-coupon__rope"></view>
|
|||
|
|
|
|||
|
|
<!-- 默认插槽，可用于添加额外内容 -->
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'up-coupon',
|
|||
|
|
props: {
|
|||
|
|
// 金额
|
|||
|
|
amount: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 金额单位
|
|||
|
|
unit: {
|
|||
|
|
type: String,
|
|||
|
|
default: '￥'
|
|||
|
|
},
|
|||
|
|
// 单位位置
|
|||
|
|
unitPosition: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'left'
|
|||
|
|
},
|
|||
|
|
// 使用限制
|
|||
|
|
limit: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 标题
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: '优惠券'
|
|||
|
|
},
|
|||
|
|
// 描述
|
|||
|
|
desc: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 有效期
|
|||
|
|
time: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 操作按钮文字
|
|||
|
|
actionText: {
|
|||
|
|
type: String,
|
|||
|
|
default: '使用'
|
|||
|
|
},
|
|||
|
|
// 形状：coupon-优惠券, envelope-红包, card-卡片
|
|||
|
|
shape: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'coupon'
|
|||
|
|
},
|
|||
|
|
// 尺寸：small, medium, large
|
|||
|
|
size: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'medium'
|
|||
|
|
},
|
|||
|
|
// 是否圆形按钮
|
|||
|
|
circle: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 是否禁用
|
|||
|
|
disabled: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 背景颜色
|
|||
|
|
bgColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 文字颜色
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// 内置背景类型
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
couponStyle() {
|
|||
|
|
const style = {};
|
|||
|
|
if (this.bgColor) style.background = this.bgColor;
|
|||
|
|
if (this.color) style.color = this.color;
|
|||
|
|
return style;
|
|||
|
|
},
|
|||
|
|
dotCount() {
|
|||
|
|
// 根据尺寸计算锯齿数量
|
|||
|
|
const map = {
|
|||
|
|
small: 8,
|
|||
|
|
medium: 10,
|
|||
|
|
large: 12
|
|||
|
|
};
|
|||
|
|
return map[this.size] || 10;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleClick() {
|
|||
|
|
if (this.disabled) return;
|
|||
|
|
this.$emit('click');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.up-coupon {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background: #ffebf0;
|
|||
|
|
color: $u-main-color;
|
|||
|
|
|
|||
|
|
&--coupon {
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: -24rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
right: -24rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--envelope {
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 20rpx;
|
|||
|
|
background: repeating-linear-gradient(-45deg, #ffd000, #ffd000 10rpx, #ffa000 10rpx, #ffa000 20rpx);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--card {
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
&--small {
|
|||
|
|
// width: 520rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--medium {
|
|||
|
|
// width: 600rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--large {
|
|||
|
|
// width: 700rpx;
|
|||
|
|
height: 220rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__amount {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding-left: 10rpx;
|
|||
|
|
padding-right: 30rpx;
|
|||
|
|
border-right: 1px dashed #ccc;
|
|||
|
|
|
|||
|
|
&-unit {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-value {
|
|||
|
|
font-size: 56rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: red;
|
|||
|
|
line-height: 1;
|
|||
|
|
margin: 10rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-limit {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding-left: 30rpx;
|
|||
|
|
|
|||
|
|
&-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-desc {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-time {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__action {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__dots {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__dot {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin: 0 -16rpx;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__rope {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -40rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: linear-gradient(to right, #ffd000, #ffa000);
|
|||
|
|
border-radius: 40rpx 40rpx 0 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: -20rpx;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background: linear-gradient(to bottom, #ffd000, #ffa000);
|
|||
|
|
border-radius: 10rpx 0 0 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: -20rpx;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background: linear-gradient(to bottom, #ffd000, #ffa000);
|
|||
|
|
border-radius: 0 10rpx 10rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 不同主题样式
|
|||
|
|
&--primary {
|
|||
|
|
background: linear-gradient(90deg, #43afff, #3b8cff);
|
|||
|
|
color: #fff;
|
|||
|
|
.up-coupon__amount {
|
|||
|
|
border-right: 1px dashed #eee;
|
|||
|
|
}
|
|||
|
|
.up-coupon__amount-value {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--success {
|
|||
|
|
background: linear-gradient(90deg, #67dda9, #19be6b);
|
|||
|
|
color: #fff !important;
|
|||
|
|
.up-coupon__amount {
|
|||
|
|
border-right: 1px dashed #eee;
|
|||
|
|
}
|
|||
|
|
.up-coupon__amount-value {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--warning {
|
|||
|
|
background: linear-gradient(90deg, #ff9739, #ff6a39);
|
|||
|
|
color: #fff;
|
|||
|
|
.up-coupon__amount {
|
|||
|
|
border-right: 1px dashed #eee;
|
|||
|
|
}
|
|||
|
|
.up-coupon__amount-value {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--error {
|
|||
|
|
background: linear-gradient(90deg, #ff7070, #ff4747);
|
|||
|
|
color: #fff;
|
|||
|
|
.up-coupon__amount {
|
|||
|
|
border-right: 1px dashed #eee;
|
|||
|
|
}
|
|||
|
|
.up-coupon__amount-value {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|