hy-app 0.5.2 → 0.5.3

package/components/hy-action-sheet/index.scss

@@ -121,8 +121,3 @@
     @include lineEllipsis;
   }
 }
-
-/* 去除原生按钮边框 */
-button:after {
-  border: none;
-}

package/components/hy-back-top/hy-back-top.vue

@@ -1,9 +1,10 @@
 <template>
-    <HyTransition mode="fade" :customStyle="backTopStyle" :show="show">
-        <!-- @slot 默认插槽 -->
-        <slot>
-            <view class="hy-back-top" :style="contentStyle" @click="backToTop">
-                <HyIcon
+    <hy-transition mode="fade" :customStyle="backTopStyle" :show="show">
+        <view class="hy-back-top" :style="contentStyle" @click="backToTop">
+            <!-- @slot 默认插槽 -->
+            <slot v-if="$slots.default"></slot>
+            <template v-else>
+                <hy-icon
                     :name="icon?.name || IconConfig.DOWNLOAD"
                     :color="icon?.color"
                     :size="icon?.size"
@@ -16,11 +17,11 @@
                     :stop="icon?.stop"
                     :round="icon?.round"
                     :customStyle="icon?.customStyle"
-                ></HyIcon>
+                ></hy-icon>
                 <text v-if="text" class="hy-back-top__text">{{ text }}</text>
-            </view>
-        </slot>
-    </HyTransition>
+            </template>
+        </view>
+    </hy-transition>
 </template>
 
 <script lang="ts">

package/components/hy-back-top/props.ts

@@ -50,10 +50,12 @@ const backTopProps = {
     /** 定义需要用到的外部样式 */
     customStyle: {
         type: Object as PropType<CSSProperties>,
-        default: {
+        default: () => ({
             transform: 'rotate(180deg)'
-        }
-    }
+        })
+    },
+    /** 自定义外部类名 */
+    customClass: String,
 }
 
 export default backTopProps

package/components/hy-badge/hy-badge.vue

@@ -6,7 +6,8 @@
             isDot ? 'hy-badge--dot' : 'hy-badge--not-dot',
             inverted && 'hy-badge--inverted',
             shape === 'horn' && 'hy-badge--horn',
-            `hy-badge--${type}${inverted ? '--inverted' : ''}`
+            `hy-badge--${type}${inverted ? '--inverted' : ''}`,
+            customClass
         ]"
         :style="[customStyle, badgeStyle]"
         @tap="onClick"

package/components/hy-badge/props.ts

@@ -54,8 +54,8 @@ const badgeProps = {
         type: String,
         default: 'overflow'
     },
-    /**  设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 */
-    offset: Array<number>,
+    /** 设置badge的位置偏移，格式为 \[x, y\]，也即设置的为top和right的值，absolute为true时有效 */
+    offset: Array,
     /** 是否反转背景和字体颜色 */
     inverted: {
         type: Boolean,
@@ -69,7 +69,9 @@ const badgeProps = {
     /** 自定义输入框外部样式 */
     customStyle: {
         type: Object as PropType<CSSProperties>
-    }
+    },
+    /** 自定义外部类名 */
+    customClass: String
 }
 
 export default badgeProps

package/components/hy-button/hy-button.vue

@@ -23,7 +23,7 @@
         :hover-class="!disabled && !loading ? 'hy-button--active' : ''"
         :style="[baseColor, customStyle]"
         @click="clickHandler"
-        :class="['hy-button', 'hy-reset-button', bemClass, customClass]"
+        :class="['hy-button', border ? '' : 'hy-button__no-border', bemClass, customClass]"
     >
         <template v-if="loading">
             <HyLoading :mode="loadingMode" :size="loadingSize" :color="loadingColor"></HyLoading>
@@ -32,7 +32,7 @@
             </text>
         </template>
         <template v-else>
-            <HyIcon
+            <hy-icon
                 v-if="icon?.name"
                 :name="icon?.name"
                 :color="iconColorCom"
@@ -46,7 +46,7 @@
                 :stop="icon?.stop"
                 :round="icon?.round"
                 :customStyle="icon?.customStyle || { marginRight: '2px' }"
-            ></HyIcon>
+            ></hy-icon>
             <!-- @slot 插入默认的值 -->
             <slot v-if="$slots.default"></slot>
             <text v-else class="hy-button__text" :style="[{ fontSize: textSize + 'px' }]">{{
@@ -83,7 +83,7 @@
             </text>
         </template>
         <template v-else>
-            <HyIcon
+            <hy-icon
                 v-if="icon?.name"
                 :name="icon?.name"
                 :color="iconColorCom"
@@ -97,7 +97,7 @@
                 :stop="icon?.stop"
                 :round="icon?.round"
                 :customStyle="icon?.customStyle || { marginRight: '2px' }"
-            ></HyIcon>
+            ></hy-icon>
             <text
                 class="hy-button__text"
                 :style="[

package/components/hy-button/index.scss

@@ -15,6 +15,11 @@
   /* #endif */
   flex-direction: row;
 
+  /* 去除原生按钮边框 */
+  &:after {
+    border: none !important;
+  }
+
   @include e(text) {
     font-size: 15px;
   }
@@ -59,6 +64,10 @@
     opacity: 0.5;
   }
 
+  @include e(no-border) {
+    border: none !important;
+  }
+
   @include themeColor(info,  $hy-info, $hy-info);
   @include themeColor(success,  $hy-success, $hy-success);
   @include themeColor(primary,  $hy-primary, $hy-primary);

package/components/hy-button/props.ts

@@ -5,7 +5,12 @@ const buttonProps = {
     /** 是否显示按钮的细边框 */
     hairline: {
         type: Boolean,
-        default: false
+        default: true
+    },
+    /** 是否显示按钮的边框 */
+    border: {
+        type: Boolean,
+        default: true
     },
     /**
      * 按钮的预置样式
@@ -116,15 +121,15 @@ const buttonProps = {
     icon: Object as PropType<HyIconProps>,
     /** 按钮颜色，支持传入linear-gradient渐变色 */
     color: String,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String,
     /** 阻止事件冒泡 */
     stop: {
         type: Boolean,
         default: true
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
+    }
 }
 
 export default buttonProps

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

@@ -1,180 +1,172 @@
 <template>
-  <view
-    :class="['hy-coupon', `hy-coupon--${status}`, `hy-coupon--${type}`, customClass]"
-    :style="customStyle"
-    @click="handleClick"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <!-- 顶部和底部波浪形装饰 -->
-    <view class="top-wave"></view>
-    <view class="bottom-wave"></view>
-
-    <!-- 左侧金额区域 -->
-    <view class="hy-coupon__left">
-      <!-- 背景纹理 -->
-      <view class="texture"></view>
-      <text class="amount">
-        <text class="amount-symbol">¥</text>
-        {{ amount }}
-      </text>
-      <text class="min-spend" v-if="minSpend > 0"> 满{{ minSpend }}可用 </text>
-    </view>
-
-    <!-- 优惠券左侧边框装饰 -->
-    <view v-if="showLeftBorder" class="coupon-border-left"></view>
-
-    <!-- 右侧内容区域 -->
-    <view class="hy-coupon__right">
-      <view class="content">
-        <text class="title">{{ title }}</text>
-        <text v-if="subTitle" class="subtitle">{{ subTitle }}</text>
-      </view>
-      <text class="validity">{{ validityText }}</text>
-
-      <!-- 限制标签 -->
-      <view class="limit-tags" v-if="limitTags.length > 0">
-        <text v-for="(tag, index) in limitTags" :key="index" class="limit-tag">
-          {{ tag }}
-        </text>
-      </view>
-
-      <!-- 立即领取按钮 -->
-      <view class="action-button" v-if="showActionButton">
-        <text class="action-button-text">{{ buttonText }}</text>
-      </view>
+    <view
+        :class="cardClass"
+        @click="handleClick"
+        :style="[
+            {
+                background: bgColor,
+                filter: boxShadow ? 'drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2))' : ''
+            },
+            customStyle
+        ]"
+    >
+        <!-- 优惠券主体 -->
+        <view class="hy-coupon__content">
+            <!-- 左侧金额/折扣信息 -->
+            <view class="hy-coupon__content--left">
+                <!-- @slot 自定义金额插槽 -->
+                <slot v-if="$slots.left" name="left"></slot>
+                <template v-else>
+                    <view class="hy-coupon__content--left__block">
+                        <view class="hy-coupon__content--left__value">
+                            <text>
+                                {{ amount || 0 }}
+                            </text>
+                        </view>
+                        <view class="hy-coupon__content--left__suffix">
+                            <text v-if="unit">{{ unit }}</text>
+                            <text v-else-if="type === 'discount'">折</text>
+                            <text v-else>元</text>
+                        </view>
+                    </view>
+
+                    <hy-tag
+                        :text="typeValue"
+                        size="mini"
+                        plain
+                        shape="circle"
+                        color="#FFFFFF"
+                    ></hy-tag>
+                </template>
+            </view>
+
+            <hy-line
+                :hairline="false"
+                direction="column"
+                dashed
+                color="#FFFFFF"
+                length="70%"
+            ></hy-line>
+
+            <!-- 右侧描述信息 -->
+            <view class="hy-coupon__content--right">
+                <!-- 自定义详情插槽 -->
+                <slot v-if="$slots.right" name="right"></slot>
+                <template v-else>
+                    <view class="hy-coupon__content--right__name">{{ title }}</view>
+                    <view class="hy-coupon__content--right__desc">{{ description }}</view>
+                    <view class="hy-coupon__content--right__validity">
+                        {{
+                            dateDesc
+                                ? dateDesc
+                                : `有效期: ${formatTime(startDate, format)} - ${formatTime(endDate, format)}`
+                        }}
+                    </view>
+                </template>
+            </view>
+        </view>
+
+        <!-- 右侧状态标签 -->
+        <view class="hy-coupon__btn">
+            <!-- 自定义按钮插槽 -->
+            <slot v-if="$slots.button" name="button"></slot>
+            <template v-else>
+                <view v-if="btnMode === 'text'" class="hy-coupon__tag">
+                    <text class="hy-coupon__tag--btn" @tap.stop="onUsed">{{ btnText }}</text>
+                </view>
+                <hy-button
+                    v-if="btnMode === 'button'"
+                    :text="btnText"
+                    plain
+                    :disabled="isDisable"
+                    :size="buttonProp?.size || 'small'"
+                    :shape="buttonProp?.shape || 'circle'"
+                    :color="buttonProp?.color || '#FFFFFF'"
+                    :custom-style="{ marginRight: '10px' }"
+                    @click="onUsed"
+                ></hy-button>
+            </template>
+        </view>
     </view>
-
-    <!-- 优惠券右侧边框装饰 -->
-    <view v-if="showRightBorder" class="coupon-border-right"></view>
-
-    <!-- 悬浮提示 -->
-    <view v-if="tooltip" class="coupon-tooltip" :class="{ show: showTooltip }">
-      {{ tooltip }}
-    </view>
-  </view>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from "vue";
-import type { CouponStatus } from "./typing";
-import { props } from "./props";
+export default {
+    name: 'hy-coupon',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ICouponEmits } from './typing'
+import { formatTime } from '../../libs'
+import couponProps from './props'
+
+// 组件
+import hyTag from '../hy-tag/hy-tag.vue'
+import hyLine from '../hy-line/hy-line.vue'
+import hyButton from '../hy-button/hy-button.vue'
 
 /**
- * 优惠券组件
+ * 用于商品优惠券的业务组件
  * @displayName hy-coupon
  */
-export default defineComponent({
-  name: "HyCoupon",
-  props,
-  emits: ["click", "receive", "hover"],
-  setup(props: any, { emit }) {
-
-    // 响应式数据
-    const showTooltip = ref(false);
-
-    // 计算有效性文本
-    const validityText = computed(() => {
-      if (!props.validity) return "";
-
-      // 根据状态显示不同的有效期文本
-      switch (props.status) {
-        case "used":
-          return props.usedDate ? `使用时间: ${props.usedDate}` : "已使用";
-        case "expired":
-          return props.expireDate ? `有效期至: ${props.expireDate}` : "已过期";
-        case "disabled":
-          return props.disabledReason || "已禁用";
-        default:
-          return props.validity;
-      }
-    });
-
-    // 计算限制标签
-    const limitTags = computed(() => {
-      const tags: string[] = [];
-
-      // 根据属性添加不同的标签
-      if (props.isExclusive) {
-        tags.push("专属");
-      }
-
-      if (props.limitPerUser > 0) {
-        tags.push(`限领${props.limitPerUser}张`);
-      }
-
-      if (props.minSpend > 0 && props.minSpend <= 1000) {
-        // 小额满减可以显示在标签中
-        tags.push(`满${props.minSpend}可用`);
-      }
-
-      return tags;
-    });
-
-    // 按钮文本
-    const buttonText = computed(() => {
-      return (
-        props.customButtonText || (props.status === "normal" ? "立即领取" : "")
-      );
-    });
-
-    // 是否显示操作按钮
-    const showActionButton = computed(() => {
-      return props.showActionButton && props.status === "normal";
-    });
-
-    // 是否显示左侧边框装饰
-    const showLeftBorder = computed(() => {
-      return true; // 默认显示左侧边框装饰
-    });
-
-    // 是否显示右侧边框装饰
-    const showRightBorder = computed(() => {
-      return true; // 默认显示右侧边框装饰
-    });
-
-    // 处理点击事件
-    const handleClick = () => {
-      if (props.status === "normal") {
-        emit("click", { status: props.status });
-
-        // 如果需要，可以同时触发receive事件
-        if (props.triggerReceiveOnClick) {
-          emit("receive");
+defineOptions({})
+
+const props = defineProps(couponProps)
+const emit = defineEmits<ICouponEmits>()
+
+// 禁用功能
+const isDisable = computed(() => props.disabledStatus.includes(props.status))
+
+const typeValue = computed(() => {
+    let text = ''
+    if (props.typeText) {
+        text = props.typeText
+    } else {
+        switch (props.type) {
+            case 'moneyOff':
+                text = '满减券'
+                break
+            case 'discount':
+                text = '折扣券'
+                break
+            case 'fixedAmount':
+                text = '无门槛券'
+                break
+            default:
+                text = '未知券'
+                break
         }
-      }
-    };
-
-    // 鼠标悬停处理
-    const handleMouseEnter = () => {
-      if (props.tooltip) {
-        showTooltip.value = true;
-      }
-      emit("hover", true);
-    };
-
-    // 鼠标离开处理
-    const handleMouseLeave = () => {
-      showTooltip.value = false;
-      emit("hover", false);
-    };
-
-    return {
-      showTooltip,
-      validityText,
-      limitTags,
-      buttonText,
-      showActionButton,
-      showLeftBorder,
-      showRightBorder,
-      handleClick,
-      handleMouseEnter,
-      handleMouseLeave,
-    };
-  }
-});
+    }
+    return text
+})
+
+const cardClass = computed(() => {
+    const baseClass = 'hy-coupon hy-coupon__card'
+    const typeClass = `hy-coupon--${props.type}`
+    const statusClass = isDisable.value && 'hy-coupon--disabled'
+    return `${baseClass} ${typeClass} ${statusClass} ${props.customClass}`
+})
+
+// 点击优惠券触发
+const handleClick = () => {
+    emit('click')
+}
+
+// 点击使用优惠券触发
+const onUsed = () => {
+    if (!isDisable.value) {
+        emit('used')
+    }
+}
 </script>
 
-<style lang="scss" scoped>
-@import "./index.scss";
+<style scoped lang="scss">
+@import './index.scss';
 </style>