hy-app 0.4.15 → 0.5.0

package/components/hy-count-to/typing.d.ts

@@ -1,51 +1,51 @@
 export default interface HyCountToProps {
-  /**
-   * @description 开始的数值，默认从0增长到某一个数（默认 0 ）
-   * */
-  startVal?: number;
-  /**
-   * @description 要滚动的目标数值，必须 （默认 0 ）
-   * */
-  endVal: number;
-  /**
-   * @description 滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认
-   * */
-  duration?: number;
-  /**
-   * @description 设置数值后是否自动开始滚动 （默认 true ）
-   * */
-  autoplay?: boolean;
-  /**
-   * @description 要显示的小数位数，见官网说明（默认 0 ）
-   * */
-  decimals?: number;
-  /**
-   * @description 滚动结束时，是否缓动结尾，见官网说明（默认 true ）
-   * */
-  useEasing?: boolean;
-  /**
-   * @description 十进制分割 （ 默认 "." ）
-   * */
-  decimal?: string;
-  /**
-   * @description 字体颜色（ 默认 '#606266' )
-   * */
-  color?: string;
-  /**
-   * @description 字体大小，单位px（ 默认 22 ）
-   * */
-  fontSize?: number | string;
-  /**
-   * @description 字体是否加粗（默认 false ）
-   * */
-  bold?: boolean;
-  /**
-   * @description 千位分隔符，见官网说明
-   * */
-  separator?: string;
+    /**
+     * @description 开始的数值，默认从0增长到某一个数（默认 0 ）
+     * */
+    startVal?: number
+    /**
+     * @description 要滚动的目标数值，必须 （默认 0 ）
+     * */
+    endVal: number
+    /**
+     * @description 滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认
+     * */
+    duration?: number
+    /**
+     * @description 设置数值后是否自动开始滚动 （默认 true ）
+     * */
+    autoplay?: boolean
+    /**
+     * @description 要显示的小数位数，见官网说明（默认 0 ）
+     * */
+    decimals?: number
+    /**
+     * @description 滚动结束时，是否缓动结尾，见官网说明（默认 true ）
+     * */
+    useEasing?: boolean
+    /**
+     * @description 十进制分割 （ 默认 "." ）
+     * */
+    decimal?: string
+    /**
+     * @description 字体颜色（ 默认 '#606266' )
+     * */
+    color?: string
+    /**
+     * @description 字体大小，单位px（ 默认 22 ）
+     * */
+    fontSize?: number | string
+    /**
+     * @description 字体是否加粗（默认 false ）
+     * */
+    bold?: boolean
+    /**
+     * @description 千位分隔符，见官网说明
+     * */
+    separator?: string
 }
 
 export interface ICountToEmits {
-  /** 结束执行函数 */
-  (e: "end"): void;
+    /** 结束执行函数 */
+    (e: 'end'): void
 }

package/components/hy-coupon/hy-coupon.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :class="['hy-coupon', `hy-coupon--${status}`, customClass]"
+    :class="['hy-coupon', `hy-coupon--${status}`, `hy-coupon--${type}`, customClass]"
     :style="customStyle"
     @click="handleClick"
     @mouseenter="handleMouseEnter"
@@ -9,7 +9,7 @@
     <!-- 顶部和底部波浪形装饰 -->
     <view class="top-wave"></view>
     <view class="bottom-wave"></view>
-    
+
     <!-- 左侧金额区域 -->
     <view class="hy-coupon__left">
       <!-- 背景纹理 -->
@@ -57,14 +57,19 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from "vue";
-import { props } from "./props";
 import type { CouponStatus } from "./typing";
+import { props } from "./props";
 
+/**
+ * 优惠券组件
+ * @displayName hy-coupon
+ */
 export default defineComponent({
   name: "HyCoupon",
   props,
   emits: ["click", "receive", "hover"],
-  setup(props, { emit }) {
+  setup(props: any, { emit }) {
+
     // 响应式数据
     const showTooltip = ref(false);
 
@@ -166,7 +171,7 @@ export default defineComponent({
       handleMouseEnter,
       handleMouseLeave,
     };
-  },
+  }
 });
 </script>
 

package/components/hy-coupon/index.scss

@@ -2,52 +2,113 @@
 @use "../../libs/css/theme" as *;
 
 // 优惠券主题颜色变量
-$coupon-primary-bg: $hy-primary !default;
-$coupon-disabled-bg: $hy-info !default;
-$coupon-used-bg: $hy-info !default;
-$coupon-expired-bg: $hy-warning !default;
-$coupon-content-bg: $hy-background--2 !default;
-$coupon-light-bg: $hy-primary-light !default;
+$coupon-primary-bg: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !default;
+$coupon-secondary-bg: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 100%) !default;
+$coupon-tertiary-bg: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%) !default;
+$coupon-disabled-bg: linear-gradient(135deg, #c8d6e5 0%, #a5b1c2 100%) !default;
+$coupon-used-bg: linear-gradient(135deg, #778beb 0%, #f8a5c2 100%) !default;
+$coupon-expired-bg: linear-gradient(135deg, #e17055 0%, #d63031 100%) !default;
+$coupon-content-bg: #ffffff !default;
+$coupon-light-bg: #f8f9fa !default;
 
 @include b(coupon) {
   position: relative;
   background-color: $coupon-light-bg;
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
-  height: 96px;
+  height: 110px;
   display: flex;
   align-items: stretch;
-  margin: 10px 0;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
+  margin: 12px 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   
   // 点击交互效果
   &:active {
-    transform: scale(0.98);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transform: scale(0.97);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
   
   // 正常状态悬浮效果
   &:not(.hy-coupon--disabled):not(.hy-coupon--used):not(.hy-coupon--expired) {
     &:hover {
-      box-shadow: 0 4px 12px rgba(41, 121, 255, 0.15);
+      box-shadow: 0 8px 20px rgba(255, 107, 107, 0.2);
+      transform: translateY(-2px);
+    }
+  }
+  
+  // 不同类型的优惠券样式
+  &--secondary {
+    @include e(left) {
+      background: $coupon-secondary-bg;
+    }
+    
+    &:not(.hy-coupon--disabled):not(.hy-coupon--used):not(.hy-coupon--expired) {
+      &:hover {
+        box-shadow: 0 8px 20px rgba(78, 205, 196, 0.2);
+      }
+    }
+    
+    .limit-tag {
+      background-color: rgba(78, 205, 196, 0.15);
+      color: #4ecdc4;
+      box-shadow: 0 2px 4px rgba(78, 205, 196, 0.1);
+    }
+    
+    .action-button {
+      background: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 100%);
+      box-shadow: 0 3px 8px rgba(78, 205, 196, 0.2);
+      
+      &:active {
+        background: linear-gradient(135deg, #45b7d1 0%, #4ecdc4 100%);
+        box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
+      }
+    }
+  }
+  
+  &--tertiary {
+    @include e(left) {
+      background: $coupon-tertiary-bg;
+    }
+    
+    &:not(.hy-coupon--disabled):not(.hy-coupon--used):not(.hy-coupon--expired) {
+      &:hover {
+        box-shadow: 0 8px 20px rgba(254, 202, 87, 0.2);
+      }
+    }
+    
+    .limit-tag {
+      background-color: rgba(254, 202, 87, 0.15);
+      color: #feca57;
+      box-shadow: 0 2px 4px rgba(254, 202, 87, 0.1);
+    }
+    
+    .action-button {
+      background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
+      box-shadow: 0 3px 8px rgba(254, 202, 87, 0.2);
+      
+      &:active {
+        background: linear-gradient(135deg, #ff9ff3 0%, #feca57 100%);
+        box-shadow: 0 2px 6px rgba(254, 202, 87, 0.3);
+      }
     }
   }
   
   // 左侧金额区域
   @include e(left) {
     position: relative;
-    width: 96px;
-    background-color: $coupon-primary-bg;
+    width: 110px;
+    background: $coupon-primary-bg;
     color: white;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 12px 0;
+    padding: 16px 0;
     box-sizing: border-box;
     overflow: hidden;
+    border-radius: 12px 0 0 12px;
     
     // 装饰圆点 - 右侧
     &::after {
@@ -85,64 +146,69 @@ $coupon-light-bg: $hy-primary-light !default;
       right: 0;
       bottom: 0;
       background-image: 
-        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
-        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
-        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
+      background-size: 100% 100%;
       z-index: 0;
     }
     
     // 金额样式
     .amount {
-      font-size: 26px;
-      font-weight: bold;
+      font-size: 32px;
+      font-weight: 800;
       line-height: 1;
       z-index: 1;
       position: relative;
+      letter-spacing: -1px;
     }
     
     .amount-symbol {
-      font-size: 14px;
+      font-size: 16px;
       vertical-align: top;
       margin-right: 2px;
       opacity: 0.9;
+      font-weight: 600;
     }
     
     .min-spend {
-      font-size: 11px;
-      opacity: 0.85;
-      margin-top: 6px;
+      font-size: 12px;
+      opacity: 0.9;
+      margin-top: 8px;
       z-index: 1;
       position: relative;
+      background: rgba(255, 255, 255, 0.2);
+      padding: 2px 8px;
+      border-radius: 10px;
+      backdrop-filter: blur(5px);
     }
   }
   
   // 右侧内容区域
   @include e(right) {
     flex: 1;
-    padding: 14px 20px 14px 24px;
+    padding: 16px 24px 16px 28px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
     position: relative;
     background-color: $coupon-content-bg;
     min-width: 0; // 防止内容溢出
+    border-radius: 0 12px 12px 0;
     
     .content {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
+      margin-bottom: 8px;
     }
     
     .title {
-      font-size: 15px;
-      font-weight: 600;
+      font-size: 17px;
+      font-weight: 700;
       color: $hy-text-color;
       line-height: 1.3;
-      margin-bottom: 4px;
+      margin-bottom: 6px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
@@ -151,7 +217,7 @@ $coupon-light-bg: $hy-primary-light !default;
     }
     
     .subtitle {
-      font-size: 12px;
+      font-size: 13px;
       color: $hy-text-color--2;
       line-height: 1.4;
       overflow: hidden;
@@ -159,7 +225,7 @@ $coupon-light-bg: $hy-primary-light !default;
       display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
     }
     
     .validity {
@@ -302,11 +368,11 @@ $coupon-light-bg: $hy-primary-light !default;
   // 装饰性的虚线边框效果 - 更美观的实现
   .coupon-border-left {
     position: absolute;
-    left: 96px;
-    top: 0;
-    bottom: 0;
+    left: 110px;
+    top: 10px;
+    bottom: 10px;
     width: 1px;
-    background-image: linear-gradient(transparent 50%, $hy-border-color 50%);
+    background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3) 50%);
     background-size: 1px 8px;
     z-index: 1;
   }
@@ -314,8 +380,8 @@ $coupon-light-bg: $hy-primary-light !default;
   .coupon-border-right {
     position: absolute;
     right: 0;
-    top: 0;
-    bottom: 0;
+    top: 10px;
+    bottom: 10px;
     width: 1px;
     background-image: linear-gradient(transparent 50%, $hy-border-color 50%);
     background-size: 1px 8px;
@@ -372,26 +438,39 @@ $coupon-light-bg: $hy-primary-light !default;
 // 响应式适配
 @media (max-width: 375px) {
   @include b(coupon) {
-    height: 90px;
+    height: 100px;
     
     @include e(left) {
-      width: 85px;
+      width: 95px;
       
       .amount {
-        font-size: 22px;
+        font-size: 28px;
+      }
+      
+      .min-spend {
+        font-size: 11px;
       }
     }
     
     @include e(right) {
-      padding: 12px 16px 12px 20px;
+      padding: 14px 20px 14px 24px;
       
       .title {
-        font-size: 14px;
+        font-size: 16px;
+      }
+      
+      .subtitle {
+        font-size: 12px;
       }
     }
     
     .coupon-border-left {
-      left: 85px;
+      left: 95px;
+    }
+    
+    .action-button {
+      font-size: 12px;
+      padding: 5px 14px;
     }
   }
 }
@@ -399,38 +478,43 @@ $coupon-light-bg: $hy-primary-light !default;
 .hy-coupon {
   .limit-tags {
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: 10px;
+    right: 10px;
     display: flex;
-    gap: 4px;
+    gap: 6px;
     flex-wrap: wrap;
   }
 
   .limit-tag {
-    background-color: rgba(41, 121, 255, 0.1);
-    color: $hy-primary;
-    font-size: 10px;
-    padding: 2px 6px;
-    border-radius: 4px;
+    background-color: rgba(255, 107, 107, 0.15);
+    color: #ff6b6b;
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 6px;
     white-space: nowrap;
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.1);
   }
 
   .action-button {
     position: absolute;
-    bottom: 8px;
-    right: 8px;
-    background-color: $hy-primary;
+    bottom: 10px;
+    right: 10px;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
     color: white;
-    font-size: 12px;
-    padding: 4px 12px;
-    border-radius: 12px;
+    font-size: 13px;
+    padding: 6px 16px;
+    border-radius: 16px;
     white-space: nowrap;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: 600;
+    box-shadow: 0 3px 8px rgba(255, 107, 107, 0.2);
   }
 
   .action-button:active {
-    background-color: $hy-primary;
+    background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%);
     transform: scale(0.95);
+    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
   }
 
   .coupon-tooltip {

package/components/hy-coupon/props.ts

@@ -1,141 +1,126 @@
 import type { HyCouponProps } from "./typing";
 import type { CSSProperties, PropType } from "vue";
-import type { CouponStatus } from "./typing";
+import type { CouponStatus, CouponType } from "./typing";
 
-export const defaultProps: HyCouponProps = {
-  amount: '',
-  title: '',
-  subTitle: '',
-  status: 'normal' as CouponStatus,
+export const defaultProps = {
+  amount: "",
+  title: "",
+  subTitle: "",
+  type: "primary",
+  status: "normal",
   minSpend: 0,
-  validity: '',
-  showLeftBorder: true,
-  showRightBorder: true,
+  validity: "",
   customStyle: {} as CSSProperties,
-  customClass: '',
-  tooltip: '',
+  customClass: "",
+  tooltip: "",
   showActionButton: false,
-  customButtonText: '',
+  customButtonText: "",
   isExclusive: false,
   limitPerUser: 0,
-  usedDate: '',
-  expireDate: '',
-  disabledReason: '',
+  usedDate: "",
+  expireDate: "",
+  disabledReason: "",
   triggerReceiveOnClick: true
 };
 
 export const props = {
   /** 优惠券金额 */
   amount: {
-    type: String,
+    type: [String, Number],
     required: true
   },
-  
   /** 优惠券标题 */
   title: {
     type: String,
     required: true
   },
-  
   /** 优惠券副标题 */
   subTitle: {
     type: String,
     default: defaultProps.subTitle
   },
-  
-  /** 优惠券状态 */
+  /**
+   * 优惠券主题类型
+   * @values primary,secondary,tertiary
+   */
+  type: {
+    type: String as PropType<CouponType>,
+    default: defaultProps.type,
+    validator: (value: CouponType) => {
+      return ["primary", "secondary", "tertiary"].includes(value);
+    }
+  },
+  /**
+   * 优惠券状态
+   * @values normal,disabled,used,expired
+   */
   status: {
     type: String as PropType<CouponStatus>,
     default: defaultProps.status,
-    validator: (v: string): boolean => {
-      return ['normal', 'disabled', 'used', 'expired'].includes(v);
+    validator: (value: CouponStatus) => {
+      return ["normal", "disabled", "used", "expired"].includes(value);
     }
   },
-  
   /** 最小消费金额限制 */
   minSpend: {
-    type: Number,
+    type: [String, Number],
     default: defaultProps.minSpend
   },
-  
-  /** 有效期 */
+  /** 有效期文本 */
   validity: {
     type: String,
     default: defaultProps.validity
   },
-  
-  /** 是否显示左边界装饰 */
-  showLeftBorder: {
-    type: Boolean,
-    default: defaultProps.showLeftBorder
-  },
-  
-  /** 是否显示右边界装饰 */
-  showRightBorder: {
-    type: Boolean,
-    default: defaultProps.showRightBorder
-  },
-  
   /** 自定义样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
-    default: () => ({})
+    default: () => defaultProps.customStyle
   },
-  
   /** 自定义类名 */
   customClass: {
     type: String,
     default: defaultProps.customClass
   },
-  
   /** 提示文本 */
   tooltip: {
     type: String,
     default: defaultProps.tooltip
   },
-  
   /** 是否显示操作按钮 */
   showActionButton: {
     type: Boolean,
     default: defaultProps.showActionButton
   },
-  
   /** 自定义按钮文本 */
   customButtonText: {
     type: String,
     default: defaultProps.customButtonText
   },
-  
   /** 是否为专属优惠券 */
   isExclusive: {
     type: Boolean,
     default: defaultProps.isExclusive
   },
-  
   /** 每用户限领数量 */
   limitPerUser: {
     type: Number,
     default: defaultProps.limitPerUser
   },
-  
   /** 使用日期（已使用状态时显示） */
   usedDate: {
     type: String,
     default: defaultProps.usedDate
   },
-  
   /** 过期日期（已过期状态时显示） */
   expireDate: {
     type: String,
     default: defaultProps.expireDate
   },
-  
   /** 禁用原因（已禁用状态时显示） */
   disabledReason: {
     type: String,
     default: defaultProps.disabledReason
   },
-  
   /** 点击时是否触发receive事件 */
   triggerReceiveOnClick: {
     type: Boolean,