hy-app 0.4.12 → 0.4.15

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

@@ -0,0 +1,136 @@
+import type { CSSProperties } from "vue";
+
+export type CouponStatus = 'normal' | 'disabled' | 'used' | 'expired';
+
+export interface HyCouponProps {
+  /**
+   * 优惠券金额
+   * @type {string}
+   */
+  amount: string;
+  
+  /**
+   * 优惠券标题
+   * @type {string}
+   */
+  title: string;
+  
+  /**
+   * 优惠券副标题
+   * @type {string}
+   * @default ''
+   */
+  subTitle?: string;
+  
+  /**
+   * 优惠券状态
+   * @type {'normal' | 'disabled' | 'used' | 'expired'}
+   * @default 'normal'
+   */
+  status?: CouponStatus;
+  
+  /**
+   * 最小消费金额限制
+   * @type {number}
+   * @default 0
+   */
+  minSpend?: number;
+  
+  /**
+   * 有效期
+   * @type {string}
+   * @default ''
+   */
+  validity?: string;
+  
+  /**
+   * 是否显示左边界装饰
+   * @type {boolean}
+   * @default true
+   */
+  showLeftBorder?: boolean;
+  
+  /**
+   * 是否显示右边界装饰
+   * @type {boolean}
+   * @default true
+   */
+  showRightBorder?: boolean;
+  
+  /**
+   * 自定义样式
+   * @type {CSSProperties}
+   * @default {}
+   */
+  customStyle?: CSSProperties;
+  
+  /**
+   * 自定义类名
+   * @type {string}
+   * @default ''
+   */
+  customClass?: string;
+  
+  /**
+   * 提示文本
+   * @type {string}
+   * @default ''
+   */
+  tooltip?: string;
+  
+  /**
+   * 是否显示操作按钮
+   * @type {boolean}
+   * @default false
+   */
+  showActionButton?: boolean;
+  
+  /**
+   * 自定义按钮文本
+   * @type {string}
+   * @default ''
+   */
+  customButtonText?: string;
+  
+  /**
+   * 是否为专属优惠券
+   * @type {boolean}
+   * @default false
+   */
+  isExclusive?: boolean;
+  
+  /**
+   * 每用户限领数量
+   * @type {number}
+   * @default 0
+   */
+  limitPerUser?: number;
+  
+  /**
+   * 使用日期（已使用状态时显示）
+   * @type {string}
+   * @default ''
+   */
+  usedDate?: string;
+  
+  /**
+   * 过期日期（已过期状态时显示）
+   * @type {string}
+   * @default ''
+   */
+  expireDate?: string;
+  
+  /**
+   * 禁用原因（已禁用状态时显示）
+   * @type {string}
+   * @default ''
+   */
+  disabledReason?: string;
+  
+  /**
+   * 点击时是否触发receive事件
+   * @type {boolean}
+   * @default true
+   */
+  triggerReceiveOnClick?: boolean;
+}

package/components/hy-folding-panel/hy-folding-panel.vue

@@ -1,397 +1,149 @@
 <template>
   <view class="hy-folding-panel">
-    <!-- 容器模式 - 通过 slot 支持自定义内容 -->
-    <view class="hy-folding-panel__wrapper">
-      <!-- 头部标题 -->
-      <view v-if="title" class="hy-folding-panel__title">
-        <text class="hy-folding-panel__title-text">{{ title }}</text>
-      </view>
-      
-      <!-- 面板内容区域 -->
-      <view class="hy-folding-panel__body">
-        <!-- 列表模式 -->
-        <view v-if="list && list.length" class="hy-folding-panel__list">
-          <view
-            v-for="(item, index) in panelItems"
-            :key="index"
-            class="hy-folding-panel__item"
-            :class="{
-              'hy-folding-panel__item--disabled': disabled || item.disabled,
-              'hy-folding-panel__item--active': item.expanded,
-              'hy-folding-panel__item--border': border,
-              [`hy-folding-panel__item--${size}`]: true
-            }"
-          >
-            <!-- 面板头部 -->
-            <view class="hy-folding-panel__item-header" @click="toggleItem(index)">
-              <view class="hy-folding-panel__item-left">
-                <!-- 图标 -->
-                <view v-if="item.icon" class="hy-folding-panel__item-icon">
-                  <image :src="item.icon" mode="aspectFit" />
-                </view>
-                <!-- 标题 -->
-                <text class="hy-folding-panel__item-title">{{ item.title }}</text>
-              </view>
-              <view class="hy-folding-panel__item-right">
-                <!-- 右侧值 -->
-                <text v-if="item.value" class="hy-folding-panel__item-value">{{ item.value }}</text>
-                <!-- 箭头 -->
-                <view class="hy-folding-panel__item-arrow" :class="{ 'hy-folding-panel__item-arrow--up': item.expanded }">
-                  <text>{{ item.expanded ? '↑' : '↓' }}</text>
-                </view>
-              </view>
-            </view>
-            
-            <!-- 面板内容 -->
-            <view 
-              class="hy-folding-panel__item-content"
-              :style="[
-                customStyle,
-                {
-                  height: item.expanded ? (contentHeight ? addUnit(contentHeight) : 'auto') : '0px',
-                  overflow: 'hidden'
-                }
-              ]"
-            >
-              <slot name="item-content" :item="item" :index="index">
-                <text>{{ item.content || '' }}</text>
-              </slot>
-            </view>
-          </view>
-        </view>
-        
-        <!-- 自定义内容 -->
-        <slot v-else></slot>
-      </view>
-    </view>
+    <slot></slot>
   </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-folding-panel"
+  name: "hy-folding-panel",
 };
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import type { IFoldingPanel, PanelVo } from "./typing";
-import { addUnit } from "../../libs";
-
-/**
- * 折叠面板组件
- * 用于展示可展开/折叠的内容区域
- * @displayName hy-folding-panel
- */
+import { provide, ref, watch, toRefs } from "vue";
+import type { PropType } from "vue";
+import type { HyFoldingPanelGroupEmits } from "./typing";
 
+// Props定义
 const props = defineProps({
   /**
-   * 数据集
+   * 当前激活的面板索引，支持v-model
    */
-  list: {
-    type: Array as PropType<PanelVo[]>,
-    default: () => []
+  modelValue: {
+    type: [Number, String],
+    default: -1,
   },
   /**
-   * 是否手风琴模式
+   * 是否手风琴模式，默认false
    */
   accordion: {
     type: Boolean,
-    default: false
+    default: false,
   },
   /**
-   * 面板标题
+   * 是否禁用整个折叠面板组
    */
-  title: {
-    type: String,
-    default: ''
+  disabled: {
+    type: Boolean,
+    default: false,
   },
   /**
    * 是否显示边框
    */
   border: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /**
-   * 是否禁用
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 面板大小 large, medium, small
+   * 面板头部大小 large, medium, small
+   * @values large, medium, small
    */
   size: {
-    type: String as PropType<'large' | 'medium' | 'small'>,
-    default: 'medium'
+    type: String as PropType<HyApp.SizeType>,
+    default: "medium",
   },
-  /**
-   * 内容区域高度
-   */
-  contentHeight: {
-    type: [Number, String],
-    default: 150
-  },
-  /**
-   * 自定义样式
-   */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => ({})
-  }
 });
 
 // 事件定义
-const emit = defineEmits<IFoldingPanel>();
+const emit = defineEmits<HyFoldingPanelGroupEmits>();
 
-// 内部面板状态
-interface PanelItem extends PanelVo {
-  expanded: boolean;
-}
+// 内部激活索引
+const activeIndex = ref(props.modelValue);
 
-// 计算的面板项，包含展开状态
-const panelItems = ref<PanelItem[]>([]);
+// 监听v-model变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    activeIndex.value = newVal;
+  },
+);
 
-// 初始化面板数据
-const initializePanels = () => {
-  panelItems.value = props.list.map(item => ({
-    ...item,
-    expanded: !!item.spread
-  }));
-};
+// 监听内部激活索引变化
+watch(activeIndex, (newVal) => {
+  emit("update:modelValue", newVal);
+  emit("change", newVal);
+});
 
-// 监听列表数据变化
-watch(() => props.list, () => {
-  initializePanels();
-}, { deep: true, immediate: true });
+// 提供给子组件的方法
+const updateActiveIndex = (index: number) => {
+  if (props.disabled) return;
 
-// 切换面板展开状态
-const toggleItem = (index: number) => {
-  if (props.disabled || panelItems.value[index].disabled) {
-    return;
-  }
-  
-  const currentItem = panelItems.value[index];
-  const isCurrentlyExpanded = currentItem.expanded;
-  
-  // 手风琴模式下，关闭其他面板
   if (props.accordion) {
-    panelItems.value.forEach((item, i) => {
-      if (i !== index) {
-        item.expanded = false;
-      }
-    });
+    // 手风琴模式下，如果点击的是当前激活的索引，则关闭（设为-1）
+    const wasActive = activeIndex.value === index;
+    activeIndex.value = wasActive ? -1 : index;
+
+    // 触发相应的事件
+    if (!wasActive) {
+      emit("open", index);
+    } else {
+      emit("close", index);
+    }
+  } else {
+    // 非手风琴模式下，这里不做特殊处理，由子组件自己控制
+    activeIndex.value = index;
   }
-  
-  // 切换当前面板状态
-  currentItem.expanded = !isCurrentlyExpanded;
-  
-  // 触发事件
-  emit('change', currentItem, index);
-  emit(currentItem.expanded ? 'open' : 'close', currentItem, index);
 };
 
+// 提供给子组件的配置
+provide("hy-folding-panel", {
+  ...toRefs(props),
+  activeIndex,
+  updateActiveIndex,
+});
 // 对外暴露的方法
 defineExpose({
   /**
    * 打开指定索引的面板
    */
-  open: (index: number) => {
-    if (index >= 0 && index < panelItems.value.length) {
-      if (props.accordion) {
-        panelItems.value.forEach((item, i) => {
-          item.expanded = i === index;
-        });
-      } else {
-        panelItems.value[index].expanded = true;
-      }
-      
-      const item = panelItems.value[index];
-      emit('change', item, index);
-      emit('open', item, index);
-    }
+  open: (index: number | string) => {
+    if (props.disabled) return;
+    activeIndex.value = index;
+    emit("open", index);
   },
-  
+
   /**
-   * 关闭指定索引的面板
+   * 关闭所有面板
    */
-  close: (index: number) => {
-    if (index >= 0 && index < panelItems.value.length) {
-      panelItems.value[index].expanded = false;
-      
-      const item = panelItems.value[index];
-      emit('change', item, index);
-      emit('close', item, index);
+  closeAll: () => {
+    if (props.disabled) return;
+    const prevIndex = activeIndex.value;
+    activeIndex.value = -1;
+    if (prevIndex !== -1) {
+      emit("close", prevIndex);
     }
   },
-  
+
   /**
-   * 切换指定索引的面板
+   * 切换指定索引面板的状态
    */
-  toggle: (index: number) => {
-    toggleItem(index);
+  toggle: (index: number | string) => {
+    if (props.disabled) return;
+    updateActiveIndex(index);
   },
-  
+
   /**
-   * 关闭所有面板
+   * 关闭指定索引的面板
    */
-  closeAll: () => {
-    panelItems.value.forEach((item, index) => {
-      item.expanded = false;
-      emit('change', item, index);
-      emit('close', item, index);
-    });
-  }
+  close: (index: number | string) => {
+    if (props.disabled) return;
+    if (activeIndex.value === index) {
+      activeIndex.value = -1;
+      emit("close", index);
+    }
+  },
 });
 </script>
 
-<style lang="scss" scoped>
-.hy-folding-panel {
-  width: 100%;
-  
-  &__wrapper {
-    background-color: #ffffff;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  
-  &__title {
-    padding: 16px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333333;
-    border-bottom: 1px solid #f0f0f0;
-  }
-  
-  &__body {
-    // 主体容器样式
-  }
-  
-  &__list {
-    // 列表容器样式
-  }
-  
-  &__item {
-    position: relative;
-    
-    &--disabled {
-      opacity: 0.6;
-    }
-    
-    &--border {
-      border-bottom: 1px solid #f0f0f0;
-      
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-    
-    &--large {
-      .hy-folding-panel__item-header {
-        padding: 20px 16px;
-        
-        .hy-folding-panel__item-title {
-          font-size: 16px;
-        }
-        
-        .hy-folding-panel__item-value {
-          font-size: 14px;
-        }
-      }
-    }
-    
-    &--medium {
-      .hy-folding-panel__item-header {
-        padding: 16px;
-        
-        .hy-folding-panel__item-title {
-          font-size: 15px;
-        }
-        
-        .hy-folding-panel__item-value {
-          font-size: 13px;
-        }
-      }
-    }
-    
-    &--small {
-      .hy-folding-panel__item-header {
-        padding: 12px 16px;
-        
-        .hy-folding-panel__item-title {
-          font-size: 14px;
-        }
-        
-        .hy-folding-panel__item-value {
-          font-size: 12px;
-        }
-      }
-    }
-  }
-  
-  &__item-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #ffffff;
-    transition: background-color 0.3s;
-    
-    &:active {
-      background-color: #f5f5f5;
-    }
-  }
-  
-  &__item-left {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-  
-  &__item-icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  &__item-title {
-    font-size: 15px;
-    color: #333333;
-    flex: 1;
-  }
-  
-  &__item-right {
-    display: flex;
-    align-items: center;
-  }
-  
-  &__item-value {
-    font-size: 13px;
-    color: #999999;
-    margin-right: 8px;
-  }
-  
-  &__item-arrow {
-    font-size: 12px;
-    color: #cccccc;
-    transition: transform 0.3s;
-    
-    &--up {
-      transform: rotate(0deg);
-    }
-  }
-  
-  &__item-content {
-    background-color: #fafafa;
-    transition: height 0.3s ease;
-    box-sizing: border-box;
-  }
-}
-</style>
+<style lang="scss" scoped></style>