Press Plus

# WriteOff

Coupon write-off component that supports swipe gestures for redemption, providing beautiful animations and multiple layout modes.

# Import

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

export default {
  components: {
    PressWriteOff,
  }
}

# Usage

# Basic Usage

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

<script>
export default {
  data() {
    return {
      show: true,
      couponInfo: {
        name: 'Gming 20% Off',
        pic: 'https://example.com/coupon.jpg',
        desc: 'Gming 20% off coupon, minimum spend $20',
        time: 'Valid until 2025.12.31',
      }
    };
  },
  methods: {
    onSwipeSuccess() {
      console.log('Write-off successful');
      // Handle write-off success logic
    }
  }
}
</script>

# Horizontal Layout Mode

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

# Success State

<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: 'Starbucks Coupon',
        pic: 'https://example.com/starbucks.jpg',
        desc: 'Starbucks discount coupon, $10 off when you spend $50',
        time: 'Valid until 2025.06.30',
      }
    };
  },
  methods: {
    onSwipeSuccess() {
      // Simulate write-off success
      this.isSuccess = true;
    }
  }
}
</script>

# API

# Props

Attribute Description Type Default
show Whether to show the write-off dialog boolean false
is-horizontal Whether to use horizontal layout mode boolean false
is-check-success Whether in write-off success state boolean false
coupon-info Coupon information object object { name: 'Gming 20% Off', pic: 'https://picsum.photos/200', desc: 'Gming 20% Off', time: 'Valid until 2025.12.31' }

# CouponInfo Data Structure

Attribute Description Type Default
name Coupon name string 'Gming 20% Off'
pic Coupon image string 'https://picsum.photos/200'
desc Coupon description string 'Gming 20% Off'
time Validity period string 'Valid until 2025.12.31'

# Events

Event Description Parameters
handleSwipeSuccess Triggered when swipe write-off succeeds -

# Gesture Operations

# Vertical Layout Mode (Default)

  • Swipe Direction: Swipe from left to right
  • Trigger Area: Gesture area
  • Animation Effect: Horizontal swipe animation

# Horizontal Layout Mode

  • Swipe Direction: Swipe from top to bottom
  • Trigger Area: Gesture area
  • Animation Effect: Vertical swipe animation

# Animation Effects

The component provides rich animation effects:

  • Title Animation: Title transition animation before and after write-off
  • Gesture Animation: Swipe gesture guide animation
  • Write-off Animation: Coupon time area disappearing animation
  • Success Animation: Write-off success light effect animation

# Style Customization

The component uses BEM naming convention and supports style customization:

.press-write-off {
  // Main container styles
  
  &__title-wrap {
    // Title container styles
  }
  
  &__wrap {
    // Coupon container styles
  }
  
  &__gesture {
    // Gesture area styles
  }
}

# Notes

  1. The component uses PressTeleport to achieve full-screen dialog effect
  2. Gesture recognition has minimum swipe distance (5px) and maximum swipe time (1000ms) limitations
  3. Different gesture directions for horizontal and vertical layout modes
  4. Gesture area automatically hides after successful write-off
  5. Recommended for mobile use for better gesture experience

← ActGoodsDetailBarcode →