hy-app 0.5.9 → 0.5.11

package/components/hy-coupon/index.scss

@@ -1,172 +1,172 @@
-@use '../../libs/css/mixin' as *;
-@use '../../libs/css/theme.scss' as *;
-
-$hy-box-width: 180rpx;
-@include b(coupon) {
-  width: 100%;
-  min-height: 190rpx;
-  max-height: 220rpx;
-
-  /* 已使用/过期状态的置灰效果 */
-  @include m(disabled) {
-    filter: grayscale(0.4) !important;
-    opacity: 0.6;
-  }
-
-  /* 优惠券卡片主体 */
-  @include e(card) {
-    position: relative;
-    display: flex;
-    border-radius: 16rpx;
-    overflow: hidden;
-    transition: transform 0.3s ease;
-    transform-style: preserve-3d; /* 子元素将保持 3D 位置 */
-
-    .status-unused:hover {
-      transform: translateY(-4rpx) rotateX(5deg);
-    }
-  }
-
-  /* 不同类型优惠券的背景色 */
-  @include m(moneyOff) {
-    background:
-            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #ff7d00 0) top / 100% 60px
-            no-repeat,
-            radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, #ff7d00 0) bottom / 100%
-            51px no-repeat;
-    //background:
-    //        radial-gradient(circle at left center, transparent 15rpx, #ff7d00 0) left center / 30rpx 100% no-repeat,
-    //        radial-gradient(circle at right center, transparent 15rpx, #ff7d00 0) right center / 30rpx 100% no-repeat;
-
-
-  }
-  @include m(discount) {
-    background:
-            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #00c6ff 0) top / 100% 60px
-            no-repeat,
-            radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, #00c6ff 0) bottom / 100%
-            51px no-repeat;
-  }
-  @include m(fixedAmount) {
-    background:
-            radial-gradient(circle at $hy-box-width top, transparent 15rpx, $hy-error 0) top / 100% 60px
-            no-repeat,
-            radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, $hy-error 0) bottom / 100%
-            51px no-repeat;
-  }
-
-  /* 优惠券内容区域 */
-  @include e(content) {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    color: #ffffff;
-    position: relative;
-
-    /* 左侧金额 */
-    @include m(left) {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      width: $hy-box-width;
-      padding: $hy-border-margin-padding-base;
-      box-sizing: border-box;
-
-      @include e(block) {
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: $hy-border-margin-padding-sm;
-      }
-
-      @include e(value) {
-        font-size: 64rpx;
-        font-weight: 800;
-        line-height: 1;
-        display: inline-block;
-        vertical-align: baseline; /* 关键：基线对齐 */
-      }
-      @include e(suffix) {
-        font-size: 28rpx;
-        font-weight: 500;
-        display: inline-block;
-        vertical-align: baseline; /* 关键：基线对齐 */
-      }
-    }
-
-    /* 右侧描述 */
-    @include m(right) {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      text-align: start;
-      padding: $hy-border-margin-padding-base;
-
-      @include e(name) {
-        font-size: 30rpx;
-        font-weight: 600;
-        margin-bottom: 8rpx;
-        @include lineEllipsis;
-      }
-
-      @include e(desc) {
-        @include multiEllipsis(2);
-      }
-
-      @include e(validity) {
-        @include lineEllipsis;
-      }
-
-      @include e(desc, validity) {
-        font-size: 22rpx;
-        opacity: 0.9;
-        line-height: 1.4;
-        @include lineEllipsis;
-      }
-    }
-  }
-
-  /* 右侧状态标签 */
-  @include e(btn) {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  @include e(tag) {
-    height: 100%;
-    margin-left: 60rpx;
-    width: 120rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ffd16d;
-    color: #d43c33;
-    font-size: 26rpx;
-    font-weight: bold;
-    z-index: 2;
-    transform-origin: top right;
-    transform: skewX(-15deg) translateX(15rpx); /* 倾斜标签 */
-
-    /* 标签文字反向倾斜，使其看起来是正的 */
-    @include m(btn) {
-      transform: skewX(15deg);
-    }
-
-    /* 标签与主体之间的白色分隔线 */
-    @include pseudo(before) {
-      content: '';
-      position: absolute;
-      left: -2px;
-      top: 0;
-      height: 100%;
-      width: 2px;
-      background-color: rgba(255, 255, 255, 0.3);
-    }
-  }
+@use '../../libs/css/mixin' as *;
+@use '../../libs/css/theme.scss' as *;
+
+$hy-box-width: 180rpx;
+@include b(coupon) {
+  width: 100%;
+  min-height: 190rpx;
+  max-height: 220rpx;
+
+  /* 已使用/过期状态的置灰效果 */
+  @include m(disabled) {
+    filter: grayscale(0.4) !important;
+    opacity: 0.6;
+  }
+
+  /* 优惠券卡片主体 */
+  @include e(card) {
+    position: relative;
+    display: flex;
+    border-radius: 16rpx;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+    transform-style: preserve-3d; /* 子元素将保持 3D 位置 */
+
+    .status-unused:hover {
+      transform: translateY(-4rpx) rotateX(5deg);
+    }
+  }
+
+  /* 不同类型优惠券的背景色 */
+  @include m(moneyOff) {
+    background:
+            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #ff7d00 0) top / 100% 60px
+            no-repeat,
+            radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, #ff7d00 0) bottom / 100%
+            51px no-repeat;
+    //background:
+    //        radial-gradient(circle at left center, transparent 15rpx, #ff7d00 0) left center / 30rpx 100% no-repeat,
+    //        radial-gradient(circle at right center, transparent 15rpx, #ff7d00 0) right center / 30rpx 100% no-repeat;
+
+
+  }
+  @include m(discount) {
+    background:
+            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #00c6ff 0) top / 100% 60px
+            no-repeat,
+            radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, #00c6ff 0) bottom / 100%
+            51px no-repeat;
+  }
+  @include m(fixedAmount) {
+    background:
+            radial-gradient(circle at $hy-box-width top, transparent 15rpx, $hy-error 0) top / 100% 60px
+            no-repeat,
+            radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, $hy-error 0) bottom / 100%
+            51px no-repeat;
+  }
+
+  /* 优惠券内容区域 */
+  @include e(content) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    position: relative;
+
+    /* 左侧金额 */
+    @include m(left) {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      width: $hy-box-width;
+      padding: $hy-border-margin-padding-base;
+      box-sizing: border-box;
+
+      @include e(block) {
+        display: flex;
+        align-items: flex-end;
+        margin-bottom: $hy-border-margin-padding-sm;
+      }
+
+      @include e(value) {
+        font-size: 64rpx;
+        font-weight: 800;
+        line-height: 1;
+        display: inline-block;
+        vertical-align: baseline; /* 关键：基线对齐 */
+      }
+      @include e(suffix) {
+        font-size: 28rpx;
+        font-weight: 500;
+        display: inline-block;
+        vertical-align: baseline; /* 关键：基线对齐 */
+      }
+    }
+
+    /* 右侧描述 */
+    @include m(right) {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      text-align: start;
+      padding: $hy-border-margin-padding-base;
+
+      @include e(name) {
+        font-size: 30rpx;
+        font-weight: 600;
+        margin-bottom: 8rpx;
+        @include lineEllipsis;
+      }
+
+      @include e(desc) {
+        @include multiEllipsis(2);
+      }
+
+      @include e(validity) {
+        @include lineEllipsis;
+      }
+
+      @include e(desc, validity) {
+        font-size: 22rpx;
+        opacity: 0.9;
+        line-height: 1.4;
+        @include lineEllipsis;
+      }
+    }
+  }
+
+  /* 右侧状态标签 */
+  @include e(btn) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  @include e(tag) {
+    height: 100%;
+    margin-left: 60rpx;
+    width: 120rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffd16d;
+    color: #d43c33;
+    font-size: 26rpx;
+    font-weight: bold;
+    z-index: 2;
+    transform-origin: top right;
+    transform: skewX(-15deg) translateX(15rpx); /* 倾斜标签 */
+
+    /* 标签文字反向倾斜，使其看起来是正的 */
+    @include m(btn) {
+      transform: skewX(15deg);
+    }
+
+    /* 标签与主体之间的白色分隔线 */
+    @include pseudo(before) {
+      content: '';
+      position: absolute;
+      left: -2px;
+      top: 0;
+      height: 100%;
+      width: 2px;
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
 }

package/components/hy-coupon/props.ts

@@ -1,103 +1,103 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { HyButtonProps } from '../hy-button/typing'
-
-const couponProps = {
-    /** 优惠券标题 */
-    title: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 优惠券类型：moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
-     * @values moneyOff,discount,fixedAmount
-     * */
-    type: {
-        type: String,
-        default: ''
-    },
-    /** 金额底部优惠券类型文字描述 */
-    typeText: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券状态 */
-    status: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券禁用状态 */
-    disabledStatus: {
-        type: Array,
-        default: () => ['']
-    },
-    /** 优惠券描述备注 */
-    description: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券金额 */
-    amount: {
-        type: [String, Number],
-        default: ''
-    },
-    /** 优惠券单位，没有就用默认值 */
-    unit: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券开始时间 */
-    startDate: {
-        type: String,
-        default: ''
-    },
-    /** 优惠券结束时间 */
-    endDate: {
-        type: String,
-        default: ''
-    },
-    /** 时间格式 */
-    format: {
-        type: String,
-        default: 'yyyy-MM-dd'
-    },
-    /** 日期描述，没有日期描述就用开始时间到结束时间 */
-    dateDesc: {
-        type: String,
-        default: ''
-    },
-    /** 背景色 */
-    bgColor: {
-        type: String,
-        default: ''
-    },
-    /** 是否显示阴影 */
-    boxShadow: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 按钮类型
-     * @values text,button,none
-     * */
-    btnMode: {
-        type: String,
-        default: 'button'
-    },
-    /** 按钮文字 */
-    btnText: {
-        type: String,
-        default: '立即领取'
-    },
-    buttonProp: {
-        type: Object as PropType<HyButtonProps>,
-        default: () => ({})
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default couponProps
+import type { CSSProperties, PropType } from 'vue'
+import type { HyButtonProps } from '../hy-button/typing'
+
+const couponProps = {
+    /** 优惠券标题 */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 优惠券类型：moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
+     * @values moneyOff,discount,fixedAmount
+     * */
+    type: {
+        type: String,
+        default: ''
+    },
+    /** 金额底部优惠券类型文字描述 */
+    typeText: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券状态 */
+    status: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券禁用状态 */
+    disabledStatus: {
+        type: Array,
+        default: () => ['']
+    },
+    /** 优惠券描述备注 */
+    description: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券金额 */
+    amount: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 优惠券单位，没有就用默认值 */
+    unit: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券开始时间 */
+    startDate: {
+        type: String,
+        default: ''
+    },
+    /** 优惠券结束时间 */
+    endDate: {
+        type: String,
+        default: ''
+    },
+    /** 时间格式 */
+    format: {
+        type: String,
+        default: 'yyyy-MM-dd'
+    },
+    /** 日期描述，没有日期描述就用开始时间到结束时间 */
+    dateDesc: {
+        type: String,
+        default: ''
+    },
+    /** 背景色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 是否显示阴影 */
+    boxShadow: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 按钮类型
+     * @values text,button,none
+     * */
+    btnMode: {
+        type: String,
+        default: 'button'
+    },
+    /** 按钮文字 */
+    btnText: {
+        type: String,
+        default: '立即领取'
+    },
+    buttonProp: {
+        type: Object as PropType<HyButtonProps>,
+        default: () => ({})
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default couponProps

package/components/hy-coupon/typing.d.ts

@@ -1,14 +1,14 @@
-import type { CSSProperties } from 'vue'
-
-export type CouponStatus = 'unused' | 'used' | 'expired' | 'redeemed'
-/**
- * moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
- * */
-export type CouponType = 'moneyOff' | 'discount' | 'fixedAmount'
-
-export interface ICouponEmits {
-    /** 点击优惠券 */
-    (e: 'click'): void
-    /** 点击使用优惠券 */
-    (e: 'used'): void
-}
+import type { CSSProperties } from 'vue'
+
+export type CouponStatus = 'unused' | 'used' | 'expired' | 'redeemed'
+/**
+ * moneyOff：满减券，discount：折扣券，fixedAmount：无门槛券
+ * */
+export type CouponType = 'moneyOff' | 'discount' | 'fixedAmount'
+
+export interface ICouponEmits {
+    /** 点击优惠券 */
+    (e: 'click'): void
+    /** 点击使用优惠券 */
+    (e: 'used'): void
+}