# PressConvertExchangeTemplate Exchange Template Component

# 📦 Component Introduction

PressConvertExchangeTemplate is a template component that encapsulates exchange list and point consumption functionality, integrating press-convert-exchange-list and press-convert-point-cost sub-components to provide complete point exchange features.

✨ Architecture Advantages:

Mixin Shared Logic - Avoid code duplication
Independent Template Files - Support different DOM structures
Auto Props Pass-through - Using v-bind="{ ...$props, ...$attrs }" and explicit event forwarding
Easy to Maintain and Extend - Modify logic only in mixin, modify structure only in corresponding template

# 🏗️ Architecture Design

# File Structure

press-convert-exchange-template/
├── press-convert-exchange-template.vue  # Main component (routing dispatcher)
├── template-mixin.js                    # Common logic Mixin
├── pwd/
│   └── index.vue                       # PWD template (independent DOM structure)
├── party/
│   └── index.vue                       # Party template (independent DOM structure)
├── demo.vue                             # Example code
└── README.md                            # Documentation

# Architecture Principle

┌─────────────────────────────────────────────┐
│  press-convert-exchange-template.vue        │
│  (Main component - dispatcher)              │
│                                             │
│  <TemplatePwd v-if="type === 'pwd'" ... />  │
│  <TemplateParty v-else ... />               │
└──────────┬──────────────────────────────────┘
           │
           ├─── type="pwd" ──→ pwd/index.vue (PWD template)
           │                    ├─ mixins: [templateMixin]
           │                    ├─ Independent DOM structure
           │                    └─ Exclusive prop: pwdWrapBg
           │
           └─── type="party" ──→ party/index.vue (Party template)
                                  ├─ mixins: [templateMixin]
                                  └─ Independent DOM structure

┌─────────────────────────────────────┐
│  template-mixin.js                  │
│  (Common logic - shared by all)     │
│                                     │
│  - props definition                 │
│  - emits definition                 │
│  - methods (event handlers)         │
│  - components (sub-components)      │
└─────────────────────────────────────┘

# Template Layout Structure

Both templates share the same DOM layout:

┌─────────────────────┐
│   point-cost        │  ← Point info + refresh button
│     <slot />        │  ← Default slot (inside point-cost)
├─────────────────────┤
│   exchange-list     │  ← Exchange item list
└─────────────────────┘

# 🎯 Features

✅ Support 2 preset templates (PWD/Party), each with independent DOM structure
✅ Exchange list display
✅ Point information display
✅ Slot extension support
✅ Event callback handling
✅ Mixin shared logic, avoid code duplication

# 📖 Usage

# Basic Usage - Using PWD Template

<template>
  <PressConvertExchangeTemplate
    type="pwd"
    :exchange-list="exchangeList"
    :point-icon="pointIcon"
    :point-info="pointInfo"
    @exchangeClick="handleExchangeClick"
    @showRewardExplain="handleShowRewardExplain"
    @refresh="handleRefresh"
  />
</template>

<script>
import PressConvertExchangeTemplate from 'press-plus/press-convert-exchange-template/press-convert-exchange-template';

export default {
  components: {
    PressConvertExchangeTemplate,
  },
  data() {
    return {
      pointIcon: 'https://example.com/point-icon.png',
      exchangeList: [
        {
          pic: 'https://example.com/reward.png',
          name: '$100 Coupon',
          need_money: 1000,
          num: 50,
          showMoney: true,
          btnTxt: 'Exchange Now',
          disabled: false,
        },
      ],
      pointInfo: {
        pointIcon: 'https://example.com/point-icon.png',
        pointCount: 5000,
        expireTime: '30 days',
      },
    };
  },
  methods: {
    handleExchangeClick(item) {
      console.log('Exchange item:', item);
    },
    handleShowRewardExplain(index) {
      console.log('Show reward explanation:', index);
    },
    handleRefresh() {
      console.log('Refresh points');
    },
  },
};
</script>

# Switch Between Templates

<!-- PWD Template - PWD exclusive layout -->
<PressConvertExchangeTemplate type="pwd" ... />

<!-- Party Template - Party carnival layout -->
<PressConvertExchangeTemplate type="party" ... />

# Using Slots

The default slot is located inside the point-cost component (within the point info area).

<PressConvertExchangeTemplate
  type="pwd"
  :exchange-list="exchangeList"
  :point-icon="pointIcon"
  :point-info="pointInfo"
>
  <div class="custom-content">
    <button @click="handleCustomAction">
      View More Rewards
    </button>
  </div>
</PressConvertExchangeTemplate>

# 📋 Props

# Template Configuration

Prop	Type	Default	Description
type	String	`'pwd'`	Template type: `'pwd'` / `'party'`

Prop	Type	Default	Description
exchangeList	Array	`[]`	Exchange list data
pointIcon	String	`''`	Point icon URL
exchangeListBg	String	`''`	Exchange list background image
tagBg	String	`''`	Exchange list tag background image
redeemRewardBg	String	`''`	Reward box background image
rewardTextColor	String	`''`	Reward text color
rewardBtnBg	String	`''`	Reward button background image
rewardBtnTextColor	String	`''`	Reward button text color

Prop	Type	Default	Description
pointInfo	Object	`{}`	Point information object
pointTextColor	String	`''`	Point text color

# PWD Template Exclusive

Prop	Type	Default	Description
pwdWrapBg	String	`''`	Background image for PWD template outer container

# exchangeList Data Structure

[
  {
    pic: 'https://example.com/reward.png',  // Reward image
    name: '$100 Coupon',                     // Reward name
    need_money: 1000,                        // Required points
    num: 50,                                 // Remaining quantity
    showMoney: true,                         // Show points or not
    btnTxt: 'Exchange Now',                  // Button text
    disabled: false,                         // Disabled or not
  }
]

# pointInfo Data Structure

{
  pointIcon: 'https://example.com/point-icon.png',  // Point icon
  pointCount: 5000,                                  // Point count
  expireTime: '30 days',                             // Expiration hint, displays as "X后失效"; 0 = no expiry
}

# 🎪 Events

Event	Parameters	Description
exchangeClick	item: Object	Triggered when exchange button is clicked, returns exchange item data
showRewardExplain	index: Number	Triggered when reward image is clicked, returns index
refresh	-	Triggered when refresh button is clicked

# 🎨 Slots

Slot	Description
default	Default slot, located inside the point-cost component

# 💡 Template Differences

# PWD Template (pwd/index.vue)

Layout:

point-cost (point info + refresh)
  └─ <slot />
exchange-list

Features:

Supports pwdWrapBg outer container background image
Suitable for PWD activity scenarios

# Party Template (party/index.vue)