hy-app 0.4.12 → 0.4.15

package/components/hy-card/index.scss

@@ -34,7 +34,7 @@
       align-items: center;
       flex: 1;
 
-      @include e(thumb) {
+      @include edeep(thumb) {
         margin-right: $hy-border-margin-padding-base;
         flex-shrink: 0
       }

package/components/hy-coupon/README.md

@@ -0,0 +1,133 @@
+# HyCoupon 优惠券组件
+
+市场上常用的优惠券组件，支持多种状态展示和丰富的功能配置。
+
+## 引入方式
+
+```js
+// 全局引入
+import { createApp } from 'vue'
+import HyDesignUni from '@/package'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(HyDesignUni)
+app.mount('#app')
+
+// 局部引入
+import { HyCoupon } from '@/package'
+
+export default {
+  components: {
+    HyCoupon
+  }
+}
+```
+
+## 基本用法
+
+```html
+<hy-coupon 
+  amount="50" 
+  title="新人专享优惠券" 
+  subtitle="全场通用，无门槛使用" 
+  validity="2023.10.01-2023.12.31" 
+  @click="onCouponClick"
+/>
+```
+
+## 状态展示
+
+```html
+<!-- 已使用状态 -->
+<hy-coupon 
+  amount="30" 
+  title="已使用优惠券" 
+  status="used" 
+  used-date="2023-10-15 14:30"
+/>
+
+<!-- 已过期状态 -->
+<hy-coupon 
+  amount="15" 
+  title="已过期优惠券" 
+  status="expired" 
+  expire-date="2023-10-01"
+/>
+
+<!-- 已禁用状态 -->
+<hy-coupon 
+  amount="25" 
+  title="已禁用优惠券" 
+  status="disabled" 
+  disabled-reason="账户等级不足"
+/>
+```
+
+## 增强功能
+
+```html
+<!-- 专属优惠券 -->
+<hy-coupon 
+  amount="40" 
+  title="专属优惠券" 
+  is-exclusive
+  limit-per-user="1"
+/>
+
+<!-- 显示操作按钮 -->
+<hy-coupon 
+  amount="60" 
+  title="限时优惠券" 
+  show-action-button
+  @receive="onCouponReceive"
+/>
+
+<!-- 自定义按钮文本 -->
+<hy-coupon 
+  amount="100" 
+  title="大额优惠券" 
+  show-action-button
+  custom-button-text="立即兑换"
+/>
+```
+
+## Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| amount | string/number | - | 优惠券金额 |
+| title | string | - | 优惠券标题 |
+| subtitle | string | '' | 优惠券副标题 |
+| status | string | 'normal' | 优惠券状态：normal/disabled/used/expired |
+| minSpend | string/number | 0 | 最低消费金额 |
+| validity | string | '' | 有效期文本 |
+| customStyle | Object | {} | 自定义样式 |
+| showRightBorder | boolean | true | 是否显示右侧边框装饰 |
+| tooltip | string | '' | 提示文本 |
+| showActionButton | boolean | false | 是否显示操作按钮 |
+| customButtonText | string | '' | 自定义按钮文本 |
+| isExclusive | boolean | false | 是否为专属优惠券 |
+| limitPerUser | number | 0 | 每用户限领数量 |
+| usedDate | string | '' | 使用日期（已使用状态时显示） |
+| expireDate | string | '' | 过期日期（已过期状态时显示） |
+| disabledReason | string | '' | 禁用原因（已禁用状态时显示） |
+| triggerReceiveOnClick | boolean | true | 点击时是否触发receive事件 |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|-------|------|--------|
+| click | 点击优惠券时触发（仅正常状态） | event: { status: CouponStatus } |
+| receive | 领取优惠券时触发 | - |
+| hover | 鼠标悬停状态改变时触发 | value: boolean |
+
+## 示例页面
+
+请查看 `pages/coupon-demo/index.vue` 了解更多使用示例。
+
+## 注意事项
+
+1. 在移动端环境下，`hover` 相关效果可能表现不同，请根据实际情况调整。
+2. 当优惠券金额较大时，建议使用 `customStyle` 调整字体大小以保证显示效果。
+3. 在小屏幕设备上，长文本可能会被截断，建议优化文本内容或调整组件宽度。

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

@@ -0,0 +1,175 @@
+<template>
+  <view
+    :class="['hy-coupon', `hy-coupon--${status}`, 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>
+
+    <!-- 优惠券右侧边框装饰 -->
+    <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 { props } from "./props";
+import type { CouponStatus } from "./typing";
+
+export default defineComponent({
+  name: "HyCoupon",
+  props,
+  emits: ["click", "receive", "hover"],
+  setup(props, { 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");
+        }
+      }
+    };
+
+    // 鼠标悬停处理
+    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,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>