MatchFollowMpDialog 关注公众号弹窗

# MatchFollowMpDialog 关注公众号弹窗

用于引导用户关注公众号的弹窗组件，包含二维码展示、描述文案和"不再提示"选项。

# 引入

import PressMatchFollowMpDialog from 'press-next/press-match-follow-mp-dialog/press-match-follow-mp-dialog';

# 代码演示

# 基础用法

<template>
  <PressButton @click="show = true">
    关注公众号
  </PressButton>

  <PressMatchFollowMpDialog
    :show="show"
    title="关注公众号"
    src-pic="https://example.com/qrcode.png"
    button-text="关注领好礼"
    @close="handleClose"
    :on-button-click="handleButtonClick"
    :on-change="handleCheckboxChange"
  />
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);

const handleClose = () => {
  show.value = false;
};

const handleButtonClick = () => {
  console.log('用户点击关注按钮');
  // 跳转到公众号或执行其他操作
  show.value = false;
};

const handleCheckboxChange = (checked) => {
  console.log('不再提示状态:', checked);
  // 保存用户选择到本地存储
  if (checked) {
    localStorage.setItem('hideFollowDialog', 'true');
  }
};
</script>

# 高级用法

<template>
  <PressMatchFollowMpDialog
    :show="show"
    title="关注【和平赛场】公众号"
    src-pic="https://example.com/wechat-qrcode.png"
    button-text="立即关注"
    custom-class="custom-follow-dialog"
    checke-box-icon-size="18px"
    @close="handleClose"
    :on-button-click="handleButtonClick"
    :on-change="handleCheckboxChange"
  >
    <!-- 自定义描述内容 -->
    <template #description>
      <div class="custom-description">
        <p>扫描下方二维码关注公众号</p>
        <p>获取最新赛事资讯和福利活动</p>
        <p class="highlight">首次关注送豪礼！</p>
      </div>
    </template>

    <!-- 自定义底部按钮 -->
    <template #foot-btn>
      <div class="custom-buttons">
        <PressButton
          type="default"
          @click="handleLater"
        >
          稍后再说
        </PressButton>
        <PressButton
          type="primary"
          @click="handleFollow"
        >
          立即关注
        </PressButton>
      </div>
    </template>
  </PressMatchFollowMpDialog>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);

const handleClose = () => {
  console.log('弹窗关闭');
  show.value = false;
};

const handleButtonClick = () => {
  console.log('默认按钮点击');
  // 统计用户行为
  trackUserAction('follow_button_click');
  
  // 跳转到公众号
  window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=xxx');
  show.value = false;
};

const handleCheckboxChange = (checked) => {
  console.log('不再提示选择:', checked);
  
  // 保存到用户偏好设置
  saveUserPreference('hideFollowDialog', checked);
  
  // 如果选择不再提示，记录时间戳
  if (checked) {
    localStorage.setItem('followDialogHideTime', Date.now().toString());
  }
};

const handleLater = () => {
  console.log('用户选择稍后');
  trackUserAction('follow_later');
  show.value = false;
};

const handleFollow = () => {
  console.log('用户选择立即关注');
  trackUserAction('follow_immediately');
  
  // 打开公众号关注页面
  followOfficialAccount();
  show.value = false;
};

// 工具函数
const trackUserAction = (action) => {
  // 发送用户行为统计
  console.log('Track action:', action);
};

const saveUserPreference = (key, value) => {
  // 保存用户偏好到服务器或本地
  localStorage.setItem(key, JSON.stringify(value));
};

const followOfficialAccount = () => {
  // 跳转到公众号关注页面的逻辑
  window.location.href = 'weixin://profile/xxx';
};
</script>

<style scoped>
.custom-description {
  text-align: center;
  line-height: 1.5;
}

.custom-description .highlight {
  color: #ff6b35;
  font-weight: bold;
}

.custom-buttons {
  display: flex;
  gap: 12px;
}

.custom-buttons .press-button {
  flex: 1;
}
</style>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
title	弹窗标题	string	`'关注公众号'`
srcPic	二维码图片地址	string	`'https://placehold.co/160x160'`
customClass	自定义CSS类名	string	`''`
buttonText	按钮文案	string	`'关注领好礼'`
checkeBoxIconSize	复选框图标大小	string	`'16px'`
onButtonClick	按钮点击回调函数	() => void	`() => {}`
onChange	复选框状态变化回调	(value: boolean) => void	`() => {}`

# Events

事件名	说明	回调参数
close	弹窗关闭时触发	-

# Slots

插槽名	说明	参数
description	自定义描述内容区域	-
foot-btn	自定义底部按钮区域	-

# CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式：

# 间距系统

CSS 变量	说明	默认值
--pmsap-body-padding-lr	内容区域左右内边距	`.76rem`
--fm-imgwrap-spacing	图片容器内边距	`$spacing-xs`
--fm-imgwrap-mt	图片容器上边距	`$spacing-md`
--fm-imgwrap-mb	图片容器下边距	`$spacing-md`

# 尺寸系统

CSS 变量	说明	默认值
--fm-imgwrap-width	图片容器宽度	`3.6rem`
--fm-imgwrap-height	图片容器高度	`3.62rem`

# 颜色系统

CSS 变量	说明	默认值
--fm-imgwrap-border-color	图片容器边框颜色	`$color-surface-brand-light2`
--fm-desc-text-color	描述文字颜色	`$color-text-invert-default`
--fm-info-text-color	高亮信息文字颜色	`$color-text-brand`

# 字体系统

CSS 变量	说明	默认值
--fm-desc-font-size	描述字体大小	`$font-size-sm`
--fm-ctrls-font-size	控制区字体大小	`$font-size-sm`

# 圆角系统

CSS 变量	说明	默认值
--fm-imgwrap-border-radius	图片容器圆角	`0`

# 使用示例

/* 自定义关注弹窗样式 */
:root {
  --fm-imgwrap-width: 180px;
  --fm-imgwrap-height: 180px;
  --fm-imgwrap-border-color: #e0e0e0;
  --fm-desc-text-color: #666;
  --fm-info-text-color: #1890ff;
  --fm-imgwrap-border-radius: 8px;
}

/* 或通过customClass覆盖 */
.custom-follow-dialog {
  --pmsap-body-padding-lr: 24px;
  --fm-imgwrap-spacing: 8px;
  --fm-desc-font-size: 16px;
}

# 使用场景

# 1. 公众号关注引导

新用户首次进入应用时展示
重要功能使用前的关注引导
活动页面的公众号推广

# 2. 赛事通知订阅

赛事开始前提醒用户关注获取通知
重要赛事信息推送订阅
赛事结果和奖励通知

# 3. 营销活动推广

节日活动的公众号推广
新功能发布的关注引导
用户福利活动的参与引导

# 注意事项

二维码图片：建议使用高清的公众号二维码，尺寸建议 200x200 像素以上
显示时机：合理控制弹窗显示时机，避免过度打扰用户
用户选择：尊重用户的"不再提示"选择，避免重复弹出
跳转逻辑：确保按钮点击后的跳转逻辑在不同平台上正常工作
小程序兼容：支持微信小程序的 virtualHost 和 styleIsolation 配置
无障碍访问：为二维码图片添加合适的 alt 属性

# 依赖组件

PressMatchPopUp：基础弹窗组件
PressButton：按钮组件
PressCheckbox：复选框组件

← MatchFillApplicationPopup MatchGameLogoPopup →