MatchSetAwardPopup 选择奖品图弹窗

# MatchSetAwardPopup 选择奖品图弹窗

选择奖品图弹窗组件，用于展示和选择奖品图标。支持上传新图标、选择已有图标、自定义样式等功能。

# 特性

🖼️ 图标添加 - 支持通过点击按钮触发添加奖品图标，支持自定义图标样式和图片
🎯 图标选择 - 支持从已有图标中选择
🎨 自定义样式 - 丰富的CSS变量支持主题定制
📍 灵活定位 - 支持四个角落的选中标记位置（右上、左上、右下、左下）
🔘 自定义图标 - 支持自定义选中标记和添加按钮的图标样式
🎭 插槽支持 - 支持完全自定义选中标记、添加按钮和确认按钮
📱 响应式设计 - 适配不同屏幕尺寸
⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

电竞比赛奖品设置
活动奖励配置
游戏道具选择
积分商城商品管理

# 引入

import PressMatchSetAwardPopup from 'press-next/press-match-set-award-popup/press-match-set-award-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchSetAwardPopup
    :show="showPopup"
    :award-list="awardList"
    :selected-id="selectedId"
    @close="onClose"
    @add-click="onAddClick"
    @award-click="onAwardClick"
    @btn-click="onBtnClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchSetAwardPopup from 'press-next/press-match-set-award-popup/press-match-set-award-popup';

const showPopup = ref(false);
const selectedId = ref('');
const awardList = ref([
  { id: 1, name: '金币', imageUrl: 'https://example.com/coin.png' },
  { id: 2, name: '钻石', imageUrl: 'https://example.com/diamond.png' },
  { id: 3, name: '宝箱', imageUrl: 'https://example.com/chest.png' }
]);

const onClose = () => {
  showPopup.value = false;
};

const onAddClick = () => {
  console.log('点击添加按钮');
  // 可以触发文件选择器、打开图库等操作
  // 或者跳转到上传页面
};

const onAwardClick = (item: any, index: number) => {
  selectedId.value = item.id;
  console.log('选中奖品:', item, index);
};

const onBtnClick = (id: string | number) => {
  console.log('确认选择:', id);
  showPopup.value = false;
};
</script>

# 自定义标题

<template>
  <PressMatchSetAwardPopup
    :show="showPopup"
    title="选择您的奖品"
    :award-list="awardList"
    @close="onClose"
  />
</template>

# 自定义选中标记位置

组件支持四个角落的选中标记位置：top-right（默认）、top-left、bottom-right、bottom-left

<template>
  <div>
    <!-- 右上角（默认） -->
    <PressMatchSetAwardPopup
      :show="showPopup1"
      :award-list="awardList"
      mark-position="top-right"
      @close="onClose"
    />
    
    <!-- 左上角 -->
    <PressMatchSetAwardPopup
      :show="showPopup2"
      :award-list="awardList"
      mark-position="top-left"
      @close="onClose"
    />
    
    <!-- 右下角 -->
    <PressMatchSetAwardPopup
      :show="showPopup3"
      :award-list="awardList"
      mark-position="bottom-right"
      @close="onClose"
    />
    
    <!-- 左下角 -->
    <PressMatchSetAwardPopup
      :show="showPopup4"
      :award-list="awardList"
      mark-position="bottom-left"
      @close="onClose"
    />
  </div>
</template>

# 自定义选中图标

通过 check-icon-class 或 check-icon-url 属性自定义选中标记的图标样式

<template>
  <!-- 使用iconfont图标 -->
  <PressMatchSetAwardPopup
    :show="showPopup1"
    :award-list="awardList"
    check-icon-class="pmg-iconfont pmg-icon-check-circle-fill"
    @close="onClose"
  />
  
  <!-- 使用图片图标 -->
  <PressMatchSetAwardPopup
    :show="showPopup2"
    :award-list="awardList"
    check-icon-url="https://example.com/check-icon.png"
    @close="onClose"
  />
</template>

# 自定义添加按钮图标

通过 add-icon-class 或 add-icon-url 属性自定义添加按钮的图标样式

<template>
  <!-- 使用iconfont图标 -->
  <PressMatchSetAwardPopup
    :show="showPopup1"
    :award-list="awardList"
    add-icon-class="pmg-iconfont pmg-icon-camera"
    @close="onClose"
    @add-click="onAddClick"
  />
  
  <!-- 使用图片图标 -->
  <PressMatchSetAwardPopup
    :show="showPopup2"
    :award-list="awardList"
    add-icon-url="https://example.com/add-icon.png"
    @close="onClose"
    @add-click="onAddClick"
  />
</template>

# 使用插槽

<template>
  <PressMatchSetAwardPopup
    :show="showPopup"
    :award-list="awardList"
    @close="onClose"
  >
    <!-- 自定义添加按钮 -->
    <template #add-button>
      <div class="custom-add-btn" @click="handleAddClick">
        <div class="icon">📷</div>
        <div class="text">上传</div>
      </div>
    </template>
    
    <!-- 自定义选中标记 -->
    <template #selected-mark="{ item, index }">
      <div class="custom-mark">
        <div class="badge">✓</div>
        <div class="text">{{ item.name }}</div>
      </div>
    </template>
    
    <!-- 自定义确认按钮 -->
    <template #confirm-btn>
      <button class="custom-confirm-btn" @click="handleConfirm">
        立即选择
      </button>
    </template>
  </PressMatchSetAwardPopup>
</template>

# 自定义按钮样式

<template>
  <!-- 朴素按钮 -->
  <PressMatchSetAwardPopup
    :show="showPlain"
    :award-list="awardList"
    button-type="primary"
    :button-plain="true"
    @close="() => showPlain = false"
  />
  
  <!-- 大尺寸按钮 -->
  <PressMatchSetAwardPopup
    :show="showLarge"
    :award-list="awardList"
    button-size="large"
    @close="() => showLarge = false"
  />
  
  <!-- 自定义样式 -->
  <PressMatchSetAwardPopup
    :show="showCustom"
    :award-list="awardList"
    btn-text="立即选择"
    :button-style="{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }"
    @close="() => showCustom = false"
  />
</template>

# 自定义主题

<template>
  <PressMatchSetAwardPopup
    custom-class="my-custom-theme"
    :show="showPopup"
    :award-list="awardList"
    @close="onClose"
  />
</template>

<style>
.my-custom-theme {
  --pmsap-body-bg-color: #f5f5f5;
  --pmsap-award-item-border-radius: .16rem;
  --pmsap-confirm-btn-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>

# API

# Props

参数	说明	类型	默认值
custom-class	自定义样式类	string	`''`
show	是否显示弹窗	boolean	`false`
title	弹窗标题	string	`'选择奖品图'`
award-list	奖品列表	AwardItem[]	`[]`
selected-id	选中的奖品ID	string \| number	`''`
button-type	按钮类型	'primary' \| 'default' \| 'info' \| 'warning' \| 'danger'	`'primary'`
button-plain	是否为朴素按钮	boolean	`false`
button-size	按钮尺寸	'normal' \| 'large' \| 'small' \| 'mini'	`'large'`
button-open-type	微信开放能力	string	`''`
btn-text	确认按钮文本	string	`'确定'`
z-index	弹窗层级	number	`100`
button-style	确认按钮样式	object	`{}`
mark-position	选中标记位置	'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'	`'top-right'`
check-icon-class	选中图标类名	string	`'pmg-iconfont pmg-icon-success'`
check-icon-url	选中图标图片URL	string	`''`
add-icon-class	添加按钮图标类名	string	`'pmg-iconfont pmg-icon-plus'`
add-icon-url	添加按钮图片URL	string	`''`

# 类型定义

// 按钮类型
type ButtonType = 'primary' | 'default' | 'info' | 'warning' | 'danger';

// 按钮尺寸
type ButtonSize = 'normal' | 'large' | 'small' | 'mini';

// 选中标记位置
type MarkPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

// 奖品数据结构
interface AwardItem {
  id: string | number; // 奖品ID
  name?: string; // 奖品名称
  imageUrl: string; // 奖品图片URL
}

# Slots

名称	说明	参数
add-button	自定义添加按钮	-
selected-mark	自定义选中标记	`{ item: AwardItem, index: number }`
confirm-btn	自定义确认按钮	-

# Events

事件名	说明	回调参数
close	关闭弹窗时触发	-
add-click	点击添加按钮时触发	-
award-click	点击奖品图标时触发	`item: AwardItem, index: number`
btn-click	点击确认按钮时触发	`selectedId: string \\| number`

# 注意事项

# 使用建议

图片格式：建议使用 PNG 或 JPG 格式的图片，尺寸建议为正方形
图片大小：单个图片建议不超过 2MB，以保证加载速度
选中状态：通过 selected-id 控制选中状态，需要与 award-list 中的 id 对应
添加图标：组件不包含文件上传逻辑，需要业务方监听 add-click 事件并自行实现图片选择和上传功能
图标管理：建议在外部维护 award-list，添加新图标后更新列表数据
标记位置：根据界面设计选择合适的标记位置，默认为右上角

# 性能优化

图片建议使用 CDN 加速
大量图标时考虑分页加载
使用图片懒加载优化首屏性能

# 兼容性

支持 Vue 3.0+
兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
支持微信小程序、支付宝小程序等平台

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

# 间距系统 (Spacing)

名称	默认值	描述
--pmsap-body-padding	.2rem .04rem .16rem	内容区域内边距
--pmsap-grid-gap	.32rem	奖品网格间距
--pmsap-check-icon-padding	.02rem .04rem 0 0	选中图标内边距
--pmsap-foot-margin	0 0 1rem 0	底部区域外边距
--pmsap-confirm-btn-margin	0	确定按钮外边距
--pmsap-common-popup-foot-padding-tb	0	弹窗底部内边距（上下）

# 块状系统 (Box Model)

名称	默认值	描述
--pmsap-grid-display	grid	网格显示方式
--pmsap-grid-template-columns	repeat(4, 1fr)	网格列模板
--pmsap-upload-item-width	1.44rem	上传按钮宽度
--pmsap-upload-item-height	1.44rem	上传按钮高度
--pmsap-upload-image-width	.8rem	上传按钮图片宽度
--pmsap-upload-image-height	.8rem	上传按钮图片高度
--pmsap-award-item-width	1.44rem	奖品项宽度
--pmsap-award-item-height	1.44rem	奖品项高度
--pmsap-award-item-overflow	hidden	奖品项溢出处理
--pmsap-award-image-width	.8rem	奖品图片宽度
--pmsap-award-image-height	.8rem	奖品图片高度
--pmsap-selected-mark-width	.5rem	选中标记宽度
--pmsap-selected-mark-height	.5rem	选中标记高度
--pmsap-selected-mark-overflow	hidden	选中标记溢出处理
--pmsap-triangle-width	0	三角形宽度
--pmsap-triangle-height	0	三角形高度
--pmsap-check-image-width	.24rem	选中图标图片宽度
--pmsap-check-image-height	.24rem	选中图标图片高度
--pmsap-confirm-btn-width	100%	确定按钮宽度
--pmsap-confirm-btn-height	.8rem	确定按钮高度

# 颜色系统 (Colors)

名称	默认值	描述
--pmsap-body-bg-color	$color-surface-default	内容区域背景色
--pmsap-upload-item-bg-color	$color-surface-secondary	上传按钮背景色
--pmsap-upload-icon-color	$color-border-secondary	上传图标颜色
--pmsap-award-item-bg-color	$color-surface-secondary	奖品项背景色
--pmsap-award-item-border-color	transparent	奖品项边框色
--pmsap-award-item-selected-border-color	$color-border-brand	选中奖品项边框色
--pmsap-selected-mark-bg-color	$color-surface-brand	选中标记背景色
--pmsap-triangle-border-left-color	transparent	三角形左侧边框颜色（右上）
--pmsap-triangle-top-left-border-right-color	transparent	三角形右侧边框颜色（左上）
--pmsap-triangle-bottom-right-border-left-color	transparent	三角形左侧边框颜色（右下）
--pmsap-triangle-bottom-left-border-right-color	transparent	三角形右侧边框颜色（左下）
--pmsap-check-icon-color	$color-text-invert-light	选中图标颜色
--pmsap-confirm-btn-bg-color	$color-surface-brand	确定按钮背景色
--pmsap-confirm-btn-text-color	$color-text-invert-light	确定按钮文字颜色

# 字体系统 (Typography)

名称	默认值	描述
--pmsap-upload-icon-font-size	.72rem	上传图标字体大小
--pmsap-check-icon-font-size	.24rem	选中图标字体大小
--pmsap-confirm-btn-font-size	$font-size-lg	确定按钮字体大小
--pmsap-confirm-btn-font-weight	$font-weight-bold	确定按钮字体粗细

# 圆角系统 (Border Radius)

名称	默认值	描述
--pmsap-upload-item-border-radius	0	上传按钮圆角
--pmsap-award-item-border-radius	0	奖品项圆角
--pmsap-confirm-btn-border-radius	$border-radius-999	确定按钮圆角

# 其他属性 (Others)

名称	默认值	描述
--pmsap-upload-item-position	relative	上传按钮定位方式
--pmsap-upload-item-border	1px solid $color-divider-default	上传按钮边框
--pmsap-upload-image-object-fit	cover	上传按钮图片填充方式
--pmsap-award-item-position	relative	奖品项定位方式
--pmsap-award-item-border	1px solid $color-divider-default	奖品项边框
--pmsap-award-image-object-fit	cover	奖品图片填充方式
--pmsap-selected-mark-position	absolute	选中标记定位方式
--pmsap-check-icon-position	relative	选中图标定位方式
--pmsap-check-icon-z-index	1	选中图标层级
--pmsap-check-image-object-fit	contain	选中图标图片填充方式
--pmsap-triangle-position	absolute	三角形定位方式
--pmsap-triangle-content	''	三角形伪元素内容

# 标记位置相关 (Mark Position)

名称	默认值	描述
--pmsap-selected-mark-top	0	选中标记顶部位置（右上）
--pmsap-selected-mark-right	0	选中标记右侧位置（右上）
--pmsap-mark-top-left-top	0	选中标记顶部位置（左上）
--pmsap-mark-top-left-left	0	选中标记左侧位置（左上）
--pmsap-mark-top-left-justify	flex-start	左上角标记水平对齐
--pmsap-mark-top-left-align	flex-start	左上角标记垂直对齐
--pmsap-mark-bottom-right-bottom	0	选中标记底部位置（右下）
--pmsap-mark-bottom-right-right	0	选中标记右侧位置（右下）
--pmsap-mark-bottom-right-justify	flex-end	右下角标记水平对齐
--pmsap-mark-bottom-right-align	flex-end	右下角标记垂直对齐
--pmsap-mark-bottom-left-bottom	0	选中标记底部位置（左下）
--pmsap-mark-bottom-left-left	0	选中标记左侧位置（左下）
--pmsap-mark-bottom-left-justify	flex-start	左下角标记水平对齐
--pmsap-mark-bottom-left-align	flex-end	左下角标记垂直对齐

# 三角形相关 (Triangle)

名称	默认值	描述
--pmsap-triangle-top	0	三角形顶部位置（右上）
--pmsap-triangle-right	0	三角形右侧位置（右上）
--pmsap-triangle-border-top-width	.5rem	三角形顶部边框宽度（右上）
--pmsap-triangle-border-top-style	solid	三角形顶部边框样式（右上）
--pmsap-triangle-border-left-width	.5rem	三角形左侧边框宽度（右上）
--pmsap-triangle-border-left-style	solid	三角形左侧边框样式（右上）
--pmsap-triangle-top-left-top	0	三角形顶部位置（左上）
--pmsap-triangle-top-left-left	0	三角形左侧位置（左上）
--pmsap-triangle-top-left-border-top-width	.5rem	三角形顶部边框宽度（左上）
--pmsap-triangle-top-left-border-top-style	solid	三角形顶部边框样式（左上）
--pmsap-triangle-top-left-border-right-width	.5rem	三角形右侧边框宽度（左上）
--pmsap-triangle-top-left-border-right-style	solid	三角形右侧边框样式（左上）
--pmsap-triangle-bottom-right-bottom	0	三角形底部位置（右下）
--pmsap-triangle-bottom-right-right	0	三角形右侧位置（右下）
--pmsap-triangle-bottom-right-border-bottom-width	.5rem	三角形底部边框宽度（右下）
--pmsap-triangle-bottom-right-border-bottom-style	solid	三角形底部边框样式（右下）
--pmsap-triangle-bottom-right-border-left-width	.5rem	三角形左侧边框宽度（右下）
--pmsap-triangle-bottom-right-border-left-style	solid	三角形左侧边框样式（右下）
--pmsap-triangle-bottom-left-bottom	0	三角形底部位置（左下）
--pmsap-triangle-bottom-left-left	0	三角形左侧位置（左下）
--pmsap-triangle-bottom-left-border-bottom-width	.5rem	三角形底部边框宽度（左下）
--pmsap-triangle-bottom-left-border-bottom-style	solid	三角形底部边框样式（左下）
--pmsap-triangle-bottom-left-border-right-width	.5rem	三角形右侧边框宽度（左下）
--pmsap-triangle-bottom-left-border-right-style	solid	三角形右侧边框样式（左下）

← MatchScheduleTitle MatchShareInvite →