hy-app 0.5.11 → 0.5.12

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

@@ -1,172 +1,183 @@
-<template>
-    <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>
-</template>
-
-<script lang="ts">
-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
- */
-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
-        }
-    }
-    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 scoped lang="scss">
-@import './index.scss';
-</style>
+<template>
+    <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',
+                            desEllipsis !== 'none' && 'is-ellipsis'
+                        ]"
+                        >{{ 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>
+</template>
+
+<script lang="ts">
+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
+ */
+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
+        }
+    }
+    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 scoped lang="scss">
+@import './index.scss';
+@import '../../libs/css/mixin.scss';
+
+@include is(ellipsis) {
+    @include multiEllipsis(v-bind(desEllipsis));
+}
+</style>

package/components/hy-coupon/index.scss

@@ -5,7 +5,9 @@ $hy-box-width: 180rpx;
 @include b(coupon) {
   width: 100%;
   min-height: 190rpx;
-  max-height: 220rpx;
+  max-height: 330rpx;
+  display: flex;
+  flex-direction: row;
 
   /* 已使用/过期状态的置灰效果 */
   @include m(disabled) {
@@ -30,10 +32,10 @@ $hy-box-width: 180rpx;
   /* 不同类型优惠券的背景色 */
   @include m(moneyOff) {
     background:
-            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #ff7d00 0) top / 100% 60px
+            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #ff7d00 0) top / 100% 85px
             no-repeat,
             radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, #ff7d00 0) bottom / 100%
-            51px no-repeat;
+            85px 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;
@@ -42,14 +44,14 @@ $hy-box-width: 180rpx;
   }
   @include m(discount) {
     background:
-            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #00c6ff 0) top / 100% 60px
+            radial-gradient(circle at $hy-box-width top, transparent 15rpx, #00c6ff 0) top / 100% 70px
             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
+            radial-gradient(circle at $hy-box-width top, transparent 15rpx, $hy-error 0) top / 100% 70px
             no-repeat,
             radial-gradient(circle at $hy-box-width bottom, transparent 15rpx, $hy-error 0) bottom / 100%
             51px no-repeat;
@@ -73,6 +75,7 @@ $hy-box-width: 180rpx;
       width: $hy-box-width;
       padding: $hy-border-margin-padding-base;
       box-sizing: border-box;
+      flex-shrink: 0;
 
       @include e(block) {
         display: flex;
@@ -97,25 +100,23 @@ $hy-box-width: 180rpx;
 
     /* 右侧描述 */
     @include m(right) {
-      flex: 1;
       display: flex;
       flex-direction: column;
-      justify-content: flex-start;
-      text-align: start;
+      box-sizing: border-box;
       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);
+        width: 100%;
       }
 
       @include e(validity) {
+        width: 100%;
         @include lineEllipsis;
       }
 
@@ -123,24 +124,19 @@ $hy-box-width: 180rpx;
         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;
+    margin-left: 20rpx;
     width: 120rpx;
     display: flex;
     align-items: center;

package/components/hy-coupon/props.ts

@@ -1,103 +1,108 @@
-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: ''
+    },
+    /** 描述省略行数，none不省略，1代表一行省略 */
+    desEllipsis: {
+        type: [String, Number],
+        default: 'none'
+    },
+    /** 优惠券开始时间 */
+    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 test,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