MatchBindRolePopup 绑定角色弹窗

# MatchBindRolePopup 绑定角色弹窗

# 介绍

绑定角色弹窗组件，用于用户绑定参赛角色时的手机号验证。组件包含用户信息展示、手机号输入、验证码输入、协议勾选、切换账号等功能，支持外部控制按钮状态和表单验证逻辑。

# 引入

import PressMatchBindRolePopup from 'press-next/press-match-bind-role-popup/press-match-bind-role-popup.vue';

# 代码演示

# 基础用法

<PressMatchBindRolePopup
  :show="show"
  :user-info="userInfo"
  :title="title"
  :button-text="buttonText"
  :agreement-name="agreementName"
  :send-code-disabled="sendCodeDisabled"
  :confirm-button-disabled="confirmButtonDisabled"
  @close="onClose"
  @confirm="onConfirm"
  @send-code="onSendCode"
  @view-agreement="onViewAgreement"
  @switch-account="onSwitchAccount"
  @phone-change="onPhoneChange"
  @verify-code-change="onVerifyCodeChange"
/>

export default {
  data() {
    return {
      show: false,
      userInfo: {
        id: 'roleId123',
        name: '角色昵称亲昵萌萌萌',
        avatar: 'https://via.placeholder.com/60x60',
        tagList: ['微信', 'VIP用户'],
      },
      title: '选择参赛角色',
      buttonText: '确定',
      agreementName: '用户协议',
      sendCodeDisabled: false,
      confirmButtonDisabled: false,
      countdown: 0,
    };
  },
  methods: {
    onClose() {
      this.show = false;
    },
    onConfirm(data) {
      console.log('确认绑定:', data);
      // data 包含: { phone: string, code: string, agreed: boolean }
      this.show = false;
    },
    onSendCode(phoneNumber) {
      console.log('发送验证码:', phoneNumber);
      // 开始倒计时
      this.startCountdown();
    },
    onViewAgreement() {
      console.log('查看协议');
      // 这里可以打开协议页面
    },
    onSwitchAccount() {
      console.log('切换账号');
      // 这里可以处理切换账号逻辑
    },
    onPhoneChange(phone) {
      console.log('手机号变更:', phone);
      // 可以在这里进行实时验证
      this.updateButtonStates();
    },
    onVerifyCodeChange(code) {
      console.log('验证码变更:', code);
      // 可以在这里进行实时验证
      this.updateButtonStates();
    },
    startCountdown() {
      this.countdown = 60;
      this.sendCodeDisabled = true;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
          this.sendCodeDisabled = false;
        }
      }, 1000);
    },
    updateButtonStates() {
      // 根据表单状态更新按钮状态
      // 这里可以添加具体的验证逻辑
    },
  },
};

# 外部状态控制

组件支持外部控制按钮状态和表单值，提供更灵活的验证逻辑：

<PressMatchBindRolePopup
  :show="show"
  :user-info="userInfo"
  :phone-value="phoneNumber"
  :verify-code-value="verifyCode"
  :agreed-value="agreed"
  :send-code-disabled="sendCodeDisabled"
  :confirm-button-disabled="confirmButtonDisabled"
  :send-code-button-text="sendCodeButtonText"
  @phone-change="onPhoneChange"
  @verify-code-change="onVerifyCodeChange"
/>

export default {
  data() {
    return {
      phoneNumber: '',
      verifyCode: '',
      agreed: false,
      sendCodeDisabled: false,
      confirmButtonDisabled: true,
      sendCodeButtonText: '发送验证码',
    };
  },
  methods: {
    onPhoneChange(phone) {
      this.phoneNumber = phone;
      this.updateButtonStates();
    },
    onVerifyCodeChange(code) {
      this.verifyCode = code;
      this.updateButtonStates();
    },
    updateButtonStates() {
      // 发送验证码按钮：手机号11位且不在倒计时中
      this.sendCodeDisabled = this.phoneNumber.length !== 11 || this.countdown > 0;
      
      // 确认按钮：手机号11位 + 验证码6位 + 已同意协议
      this.confirmButtonDisabled = !(
        this.phoneNumber.length === 11 &&
        this.verifyCode.length === 6 &&
        this.agreed
      );
    },
  },
};

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`100`
custom-class	自定义样式类	string	`''`
user-info	用户角色信息	RoleInfo	`undefined`
title	弹窗标题	string	`'选择参赛角色'`
is-pop-up-round	弹窗是否圆角	boolean	`true`
button-text	确认按钮文案	string	`'确定'`
show-switch-button	是否显示切换账号按钮	boolean	`true`
agreement-name	协议名称	string	`''`
send-code-button-text	验证码按钮文案	string	`'发送验证码'`
send-code-disabled	验证码按钮是否禁用	boolean	`false`
confirm-button-disabled	确认按钮是否禁用	boolean	`false`
phone-value	手机号输入框的值	string	`''`
verify-code-value	验证码输入框的值	string	`''`
agreed-value	协议勾选状态	boolean	`false`

# RoleInfo 数据结构

键名	说明	类型	默认值
id	角色ID	string	-
name	角色昵称	string	-
avatar	角色头像URL	string	-
tagList	角色标签列表	string[]	`[]`

# Events

事件名	说明	回调参数
close	关闭弹窗时触发	-
confirm	确认绑定时触发	data: { phone: string, code: string, agreed: boolean }
send-code	发送验证码时触发	phone: string
view-agreement	查看协议时触发	-
switch-account	切换账号时触发	-
phone-change	手机号输入变更时触发	phone: string
verify-code-change	验证码输入变更时触发	code: string

# 组件内部状态

组件内部维护以下状态，可通过 Props 进行外部控制：

状态	说明	类型	对应 Props
phoneNumber	手机号码	string	`phone-value`
verifyCode	验证码	string	`verify-code-value`
agreed	是否同意协议	boolean	`agreed-value`

# 插槽

插槽名	说明	插槽参数
confirm-btn	自定义确认按钮	-

# 功能特性

# 🔐 灵活的状态控制

支持外部控制按钮禁用状态
支持外部控制表单输入值
实时输入变更事件通知
可自定义验证逻辑

# 👤 丰富的用户信息展示

角色头像、昵称展示
可配置的角色标签列表
切换账号功能支持
响应式用户信息布局

# 💡 用户体验优化

协议未勾选时显示提示气泡
输入框支持清空功能
按钮禁用状态视觉反馈
响应式布局适配

# 🎨 高度可定制

支持自定义标题和按钮文案
支持自定义协议名称
完整的 SCSS 变量系统
语义化命名规范
主题色彩系统

# 📱 跨平台兼容

支持 H5、小程序等多端运行
微信小程序 WXSS 编译优化
CSS 嵌套语法自动平铺处理
标签选择器兼容性适配

# 样式变量

组件提供了下列 SCSS 变量，可用于自定义样式。变量采用节点语义化命名规范，按功能区域分组。

# 变量命名规范

变量命名采用 $mbrp-{节点}-{属性} 的格式，其中：

mbrp 是组件前缀 (match-bind-role-popup)
{节点} 表示具体的 DOM 节点或功能区域
{属性} 表示具体的样式属性

# 间距系统

变量名	默认值	描述
`$mbrp-header-area-padding-horizontal`	`var(--mbrp-header-area-padding-horizontal, .48rem)`	头部区域左右内边距
`$mbrp-header-area-margin-bottom`	`var(--mbrp-header-area-margin-bottom, .48rem)`	头部区域下边距
`$mbrp-user-info-area-padding`	`var(--mbrp-user-info-area-padding, .4rem)`	用户信息区域内边距
`$mbrp-user-info-area-padding-vertical`	`var(--mbrp-user-info-area-padding-vertical, .32rem)`	用户信息区域垂直内边距
`$mbrp-user-info-area-margin`	`var(--mbrp-user-info-area-margin, .2rem 0 .48rem)`	用户信息区域外边距
`$mbrp-avatar-area-margin-right`	`var(--mbrp-avatar-area-margin-right, .32rem)`	头像右边距
`$mbrp-user-details-area-min-height`	`var(--mbrp-user-details-area-min-height, .92rem)`	用户详情最小高度
`$mbrp-user-details-area-flex`	`var(--mbrp-user-details-area-flex, 1)`	用户详情弹性宽度
`$mbrp-username-area-margin-bottom`	`var(--mbrp-username-area-margin-bottom, .16rem)`	用户名下边距
`$mbrp-user-tags-margin-top`	`var(--mbrp-user-tags-margin-top, .16rem)`	用户标签容器上间距
`$mbrp-user-tags-area-gap`	`var(--mbrp-user-tags-area-gap, .1rem)`	用户标签容器间距
`$mbrp-user-tag-area-padding`	`var(--mbrp-user-tag-area-padding, .02rem .1rem)`	单个用户标签内边距
`$mbrp-form-item-area-margin-bottom`	`var(--mbrp-form-item-area-margin-bottom, .32rem)`	表单项下边距
`$mbrp-form-item-area-padding-left`	`var(--mbrp-form-item-area-padding-left, .24rem)`	表单项左内边距
`$mbrp-phone-input-area-margin-right`	`var(--mbrp-phone-input-area-margin-right, .24rem)`	手机号输入框右边距
`$mbrp-agreement-area-margin-top`	`var(--mbrp-agreement-area-margin-top, 1.36rem)`	协议区域上边距
`$mbrp-agreement-area-margin-bottom`	`var(--mbrp-agreement-area-margin-bottom, .4rem)`	协议区域下边距
`$mbrp-agreement-area-gap`	`var(--mbrp-agreement-area-gap, .16rem)`	协议区域元素间距
`$mbrp-agreement-tooltip-area-padding`	`var(--mbrp-agreement-tooltip-area-padding, 0 .16rem)`	协议提示框内边距
`$mbrp-footer-area-margin-top`	`var(--mbrp-footer-area-margin-top, .48rem)`	底部区域上边距

# 尺寸系统

变量名	默认值	描述
`$mbrp-avatar-area-size`	`var(--mbrp-avatar-area-size, 1.2rem)`	头像尺寸
`$mbrp-user-tag-area-height`	`var(--mbrp-user-tag-area-height, .34rem)`	用户标签高度
`$mbrp-phone-input-area-height`	`var(--mbrp-phone-input-area-height, .88rem)`	手机号输入框高度
`$mbrp-verify-input-area-height`	`var(--mbrp-verify-input-area-height, .88rem)`	验证码输入框高度
`$mbrp-send-code-btn-area-height`	`var(--mbrp-send-code-btn-area-height, .88rem)`	发送验证码按钮高度
`$mbrp-send-code-btn-area-min-width`	`var(--mbrp-send-code-btn-area-min-width, 1.72rem)`	发送验证码按钮最小宽度
`$mbrp-agreement-checkbox-area-size`	`var(--mbrp-agreement-checkbox-area-size, .32rem)`	协议复选框尺寸
`$mbrp-agreement-checkbox-area-margin-top`	`var(--mbrp-agreement-checkbox-area-margin-top, .02rem)`	协议复选框上边距
`$mbrp-agreement-tooltip-area-height`	`var(--mbrp-agreement-tooltip-area-height, .38rem)`	协议提示框高度
`$mbrp-agreement-tooltip-area-margin-bottom`	`var(--mbrp-agreement-tooltip-area-margin-bottom, 1.12rem)`	协议提示框下边距
`$mbrp-agreement-tooltip-arrow-area-width`	`var(--mbrp-agreement-tooltip-arrow-area-width, .16rem)`	协议提示框箭头宽度
`$mbrp-agreement-tooltip-arrow-area-height`	`var(--mbrp-agreement-tooltip-arrow-area-height, .1rem)`	协议提示框箭头高度
`$mbrp-confirm-btn-area-height`	`var(--mbrp-confirm-btn-area-height, .88rem)`	确认按钮高度
`$mbrp-phone-input-area-width`	`var(--mbrp-phone-input-area-width, 6.4rem)`	手机号输入框宽度

# 颜色系统

变量名	默认值	描述
`$mbrp-header-area-primary-color`	`var(--mbrp-header-area-primary-color, $color-text-brand)`	头部区域主色
`$mbrp-header-area-bg-color`	`var(--mbrp-header-area-bg-color, $color-surface-default)`	头部区域背景颜色
`$mbrp-header-area-text-color`	`var(--mbrp-header-area-text-color, $color-text-secondary)`	头部区域文本颜色
`$mbrp-user-info-area-bg-color`	`var(--mbrp-user-info-area-bg-color, $color-surface-brand-light)`	用户信息区域背景颜色
`$mbrp-username-area-text-color`	`var(--mbrp-username-area-text-color, $color-text-secondary)`	用户名文字颜色
`$mbrp-user-tag-area-bg-color`	`var(--mbrp-user-tag-area-bg-color, $color-surface-brand-light2)`	用户标签背景颜色
`$mbrp-user-tag-area-text-color`	`var(--mbrp-user-tag-area-text-color, $color-text-brand)`	用户标签文字颜色
`$mbrp-form-area-disabled-color`	`var(--mbrp-form-area-disabled-color, $color-border-tertiary)`	表单禁用颜色
`$mbrp-form-area-disabled-bg-color`	`var(--mbrp-form-area-disabled-bg-color, $color-surface-secondary)`	表单禁用背景颜色
`$mbrp-form-area-disabled-text-color`	`var(--mbrp-form-area-disabled-text-color, $color-border-tertiary)`	表单禁用文字颜色
`$mbrp-form-area-disabled-border-color`	`var(--mbrp-form-area-disabled-border-color, $color-surface-secondary)`	表单禁用边框颜色
`$mbrp-confirm-btn-disabled-bg-color`	`var(--mbrp-confirm-btn-disabled-bg-color, $color-surface-secondary)`	确认按钮禁用背景颜色
`$mbrp-confirm-btn-disabled-text-color`	`var(--mbrp-confirm-btn-disabled-text-color, $color-text-invert-default)`	确认按钮禁用文字颜色
`$mbrp-confirm-btn-disabled-border-color`	`var(--mbrp-confirm-btn-disabled-border-color, $color-border-tertiary)`	确认按钮禁用边框颜色
`$mbrp-agreement-area-text-color`	`var(--mbrp-agreement-area-text-color, $color-text-secondary)`	协议文本颜色
`$mbrp-agreement-area-link-color`	`var(--mbrp-agreement-area-link-color, $color-text-brand)`	协议链接颜色
`$mbrp-agreement-tooltip-area-bg-color`	`var(--mbrp-agreement-tooltip-area-bg-color, $color-surface-dark)`	协议提示框背景颜色
`$mbrp-agreement-tooltip-area-text-color`	`var(--mbrp-agreement-tooltip-area-text-color, $color-text-invert-light)`	协议提示框文字颜色

# 字体系统

变量名	默认值	描述
`$mbrp-header-area-text-align`	`var(--mbrp-header-area-text-align, center)`	头部区域文本对齐方式
`$mbrp-header-title-area-font-size`	`var(--mbrp-header-title-area-font-size, .32rem)`	头部标题字体大小
`$mbrp-header-title-area-font-weight`	`var(--mbrp-header-title-area-font-weight, 600)`	头部标题字重
`$mbrp-header-title-area-line-height`	`var(--mbrp-header-title-area-line-height, .32rem)`	头部标题行高
`$mbrp-header-title-area-margin`	`var(--mbrp-header-title-area-margin, 0)`	头部标题外边距
`$mbrp-username-area-font-size`	`var(--mbrp-username-area-font-size, .28rem)`	用户名字体大小
`$mbrp-username-area-font-weight`	`var(--mbrp-username-area-font-weight, 600)`	用户名字重
`$mbrp-username-area-line-height`	`var(--mbrp-username-area-line-height, .42rem)`	用户名行高
`$mbrp-user-tag-area-font-size`	`var(--mbrp-user-tag-area-font-size, .2rem)`	用户标签字体大小
`$mbrp-user-tag-area-line-height`	`var(--mbrp-user-tag-area-line-height, .34rem)`	用户标签行高
`$mbrp-send-code-btn-area-font-size`	`var(--mbrp-send-code-btn-area-font-size, .24rem)`	发送验证码按钮字体大小
`$mbrp-agreement-area-font-size`	`var(--mbrp-agreement-area-font-size, .24rem)`	协议文本字体大小
`$mbrp-agreement-area-line-height`	`var(--mbrp-agreement-area-line-height, .32rem)`	协议文本行高
`$mbrp-agreement-tooltip-area-font-size`	`var(--mbrp-agreement-tooltip-area-font-size, .2rem)`	协议提示框字体大小
`$mbrp-confirm-btn-area-font-size`	`var(--mbrp-confirm-btn-area-font-size, .28rem)`	确认按钮字体大小

# 圆角系统

变量名	默认值	描述
`$mbrp-form-area-border-radius-md`	`var(--mbrp-form-area-border-radius-md, $border-radius-md)`	表单组件中等圆角
`$mbrp-avatar-area-border-radius-circle`	`var(--mbrp-avatar-area-border-radius-circle, $border-radius-circle)`	头像圆形边框
`$mbrp-button-area-border-radius-square`	`var(--mbrp-button-area-border-radius-square, $border-radius-none)`	按钮方形边框（无圆角）
`$mbrp-user-info-area-border-radius`	`var(--mbrp-user-info-area-border-radius, $border-radius-md $border-radius-md 0 0)`	用户信息区域圆角
`$mbrp-agreement-tooltip-area-border-radius`	`var(--mbrp-agreement-tooltip-area-border-radius, $border-radius-xs)`	协议提示框圆角

# 边框系统

变量名	默认值	描述
`$mbrp-form-input-area-border`	`var(--mbrp-form-input-area-border, .01rem solid $color-border-tertiary)`	表单输入框边框
`$mbrp-form-input-area-border-width`	`var(--mbrp-form-input-area-border-width, .01rem)`	表单输入框边框宽度
`$mbrp-send-code-btn-area-border-width`	`var(--mbrp-send-code-btn-area-border-width, .01rem 0 .01rem .01rem)`	发送验证码按钮边框宽度
`$mbrp-confirm-btn-border-width`	`var(--mbrp-confirm-btn-border-width, .01rem)`	确认按钮边框宽度
`$mbrp-confirm-btn-disabled-border-width`	`var(--mbrp-confirm-btn-disabled-border-width, .01rem)`	确认按钮禁用边框宽度

# 其他属性

变量名	默认值	描述
`$mbrp-form-field-cell-vertical-padding`	`var(--mbrp-form-field-cell-vertical-padding, 0)`	表单字段单元格垂直内边距
`$mbrp-form-field-cell-horizontal-padding`	`var(--mbrp-form-field-cell-horizontal-padding, 0)`	表单字段单元格水平内边距
`$mbrp-form-field-cell-background-color`	`var(--mbrp-form-field-cell-background-color, transparent)`	表单字段单元格背景颜色
`$mbrp-confirm-btn-area-disabled-opacity`	`var(--mbrp-confirm-btn-area-disabled-opacity, 1)`	确认按钮禁用透明度
`$mbrp-send-code-btn-area-disabled-opacity`	`var(--mbrp-send-code-btn-area-disabled-opacity, 1)`	发送验证码按钮禁用透明度
`$mbrp-confirm-btn-disabled-opacity`	`var(--mbrp-confirm-btn-disabled-opacity, 1)`	确认按钮禁用状态透明度
`$mbrp-agreement-checkbox-area-unchecked-icon`	`var(--mbrp-agreement-checkbox-area-unchecked-icon, url(...))`	协议复选框未选中图标
`$mbrp-agreement-checkbox-area-checked-icon`	`var(--mbrp-agreement-checkbox-area-checked-icon, url(...))`	协议复选框选中图标
`$mbrp-agreement-checkbox-area-icon-position`	`var(--mbrp-agreement-checkbox-area-icon-position, center)`	协议复选框图标位置
`$mbrp-agreement-checkbox-area-icon-size`	`var(--mbrp-agreement-checkbox-area-icon-size, 100% 100%)`	协议复选框图标尺寸
`$mbrp-agreement-tooltip-arrow-area-clip-path`	`var(--mbrp-agreement-tooltip-arrow-area-clip-path, polygon(0% 0%, 100% 0%, 50% 100%))`	协议提示框倒三角图形
`$mbrp-agreement-tooltip-arrow-area-transform`	`var(--mbrp-agreement-tooltip-arrow-area-transform, translateX(-50%) translateY(100%))`	协议提示框箭头位置
`$mbrp-agreement-tooltip-arrow-area-position-left`	`var(--mbrp-agreement-tooltip-arrow-area-position-left, 50%)`	协议提示框箭头左定位
`$mbrp-agreement-tooltip-arrow-area-position-bottom`	`var(--mbrp-agreement-tooltip-arrow-area-position-bottom, .02rem)`	协议提示框箭头底部定位
`$mbrp-user-details-area-input-width`	`var(--mbrp-user-details-area-input-width, 100%)`	用户详情输入框宽度
`$mbrp-input-icon-clear-font-family`	`var(--mbrp-input-icon-clear-font-family, 'press-icon')`	输入框清除按钮主题字体
`$mbrp-input-icon-clear-font-color`	`var(--mbrp-input-icon-clear-font-color, #000)`	输入框清除按钮颜色
`$mbrp-input-icon-clear-font-content`	`var(--mbrp-input-icon-clear-font-content, '\e68b')`	输入框清除按钮样式
`$mbrp-input-icon-clear-font-size`	`var(--mbrp-input-icon-clear-font-size, .32rem)`	输入框清除按钮大小
`$mbrp-input-field-control-font-size`	`var(--mbrp-input-field-control-font-size, .28rem)`	输入框控件字体大小
`$mbrp-input-field-control-text-color`	`var(--mbrp-input-field-control-text-color, $color-text-primary)`	输入框控件文字颜色
`$mbrp-input-field-control-font-weight`	`var(--mbrp-input-field-control-font-weight, normal)`	输入框控件字重
`$mbrp-input-field-control-font-family`	`var(--mbrp-input-field-control-font-family, inherit)`	输入框控件字体

← MatchAuthorizationItem MatchCardInfo →