WriteOff 核销组件

# WriteOff 核销组件

优惠券核销组件，支持滑动手势核销，提供精美的动画效果和多种布局模式。

# 引入

import PressWriteOff from 'press-plus/press-write-off/press-write-off';

export default {
  components: {
    PressWriteOff,
  }
}

# 代码演示

# 基础用法

<template>
  <PressWriteOff
    :show="show"
    :coupon-info="couponInfo"
    @handleSwipeSuccess="onSwipeSuccess"
  />
</template>

<script>
export default {
  data() {
    return {
      show: true,
      couponInfo: {
        name: '古茗8折券',
        pic: 'https://example.com/coupon.jpg',
        desc: '古茗8折券，满20元可用',
        time: '有效期至2025.12.31',
      }
    };
  },
  methods: {
    onSwipeSuccess() {
      console.log('核销成功');
      // 处理核销成功逻辑
    }
  }
}
</script>

# 水平布局模式

<template>
  <PressWriteOff
    :show="show"
    :is-horizontal="true"
    :coupon-info="couponInfo"
    @handleSwipeSuccess="onSwipeSuccess"
  />
</template>

# 核销成功状态

<template>
  <PressWriteOff
    :show="show"
    :is-check-success="isSuccess"
    :coupon-info="couponInfo"
    @handleSwipeSuccess="onSwipeSuccess"
  />
</template>

<script>
export default {
  data() {
    return {
      show: true,
      isSuccess: false,
      couponInfo: {
        name: '星巴克优惠券',
        pic: 'https://example.com/starbucks.jpg',
        desc: '星巴克满减券，满50减10',
        time: '有效期至2025.06.30',
      }
    };
  },
  methods: {
    onSwipeSuccess() {
      // 模拟核销成功
      this.isSuccess = true;
    }
  }
}
</script>

# API

# Props

参数	说明	类型	默认值
show	是否显示核销弹窗	boolean	`false`
is-horizontal	是否为水平布局模式	boolean	`false`
is-check-success	是否为核销成功状态	boolean	`false`
coupon-info	优惠券信息对象	object	`{ name: '古茗8折券', pic: 'https://picsum.photos/200', desc: '古茗8折券', time: '有效期至2025.12.31' }`

# CouponInfo 数据结构

参数	说明	类型	默认值
name	优惠券名称	string	`'古茗8折券'`
pic	优惠券图片	string	`'https://picsum.photos/200'`
desc	优惠券描述	string	`'古茗8折券'`
time	有效期信息	string	`'有效期至2025.12.31'`

# Events

事件名	说明	回调参数
handleSwipeSuccess	滑动核销成功时触发	-

# 手势操作

# 垂直布局模式（默认）

滑动方向: 从左往右滑动
触发区域: 手势区域
动画效果: 水平滑动动画

# 水平布局模式

滑动方向: 从上往下滑动
触发区域: 手势区域
动画效果: 垂直滑动动画

# 动画效果

组件提供了丰富的动画效果：

标题动画: 核销前后标题切换动画
手势动画: 滑动手势引导动画
核销动画: 优惠券时间区域消失动画
成功动画: 核销成功光效动画

# 样式定制

组件使用 BEM 命名规范，支持样式定制：

.press-write-off {
  // 主容器样式
  
  &__title-wrap {
    // 标题容器样式
  }
  
  &__wrap {
    // 优惠券容器样式
  }
  
  &__gesture {
    // 手势区域样式
  }
}

# 注意事项

组件使用 PressTeleport 实现全屏弹窗效果
手势识别有最小滑动距离（5px）和最大滑动时间（1000ms）限制
水平和垂直布局模式下的手势方向不同
核销成功后手势区域会自动隐藏
建议在移动端使用，手势操作体验更佳

← ActSelectAward ActGoodsDetailBarcode →