Press Next

# MatchFollowMpDialog

A popup component for guiding users to follow WeChat official accounts, including QR code display, description text, and "Don't remind again" option.

# Import

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

# Usage

# Basic Usage

<template>
  <PressButton @click="show = true">
    Follow Official Account
  </PressButton>

  <PressMatchFollowMpDialog
    :show="show"
    title="Follow Official Account"
    src-pic="https://example.com/qrcode.png"
    button-text="Follow for Rewards"
    @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('User clicked follow button');
  // Navigate to official account or perform other actions
  show.value = false;
};

const handleCheckboxChange = (checked) => {
  console.log('Don\'t remind again status:', checked);
  // Save user choice to local storage
  if (checked) {
    localStorage.setItem('hideFollowDialog', 'true');
  }
};
</script>

# Advanced Usage

<template>
  <PressMatchFollowMpDialog
    :show="show"
    title="Follow【Peace Arena】Official Account"
    src-pic="https://example.com/wechat-qrcode.png"
    button-text="Follow Now"
    custom-class="custom-follow-dialog"
    checke-box-icon-size="18px"
    @close="handleClose"
    :on-button-click="handleButtonClick"
    :on-change="handleCheckboxChange"
  >
    <!-- Custom description content -->
    <template #description>
      <div class="custom-description">
        <p>Scan the QR code below to follow our official account</p>
        <p>Get the latest match news and promotional activities</p>
        <p class="highlight">First-time followers get exclusive rewards!</p>
      </div>
    </template>

    <!-- Custom footer buttons -->
    <template #foot-btn>
      <div class="custom-buttons">
        <PressButton
          type="default"
          @click="handleLater"
        >
          Later
        </PressButton>
        <PressButton
          type="primary"
          @click="handleFollow"
        >
          Follow Now
        </PressButton>
      </div>
    </template>
  </PressMatchFollowMpDialog>
</template>

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

const show = ref(false);

const handleClose = () => {
  console.log('Dialog closed');
  show.value = false;
};

const handleButtonClick = () => {
  console.log('Default button clicked');
  // Track user behavior
  trackUserAction('follow_button_click');
  
  // Navigate to official account
  window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=xxx');
  show.value = false;
};

const handleCheckboxChange = (checked) => {
  console.log('Don\'t remind again selection:', checked);
  
  // Save to user preferences
  saveUserPreference('hideFollowDialog', checked);
  
  // If user chooses not to remind again, record timestamp
  if (checked) {
    localStorage.setItem('followDialogHideTime', Date.now().toString());
  }
};

const handleLater = () => {
  console.log('User chose later');
  trackUserAction('follow_later');
  show.value = false;
};

const handleFollow = () => {
  console.log('User chose to follow immediately');
  trackUserAction('follow_immediately');
  
  // Open official account follow page
  followOfficialAccount();
  show.value = false;
};

// Utility functions
const trackUserAction = (action) => {
  // Send user behavior analytics
  console.log('Track action:', action);
};

const saveUserPreference = (key, value) => {
  // Save user preference to server or local storage
  localStorage.setItem(key, JSON.stringify(value));
};

const followOfficialAccount = () => {
  // Logic to navigate to official account follow page
  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

Prop Description Type Default
show Whether to show dialog boolean false
title DialogPlus title string '关注公众号'
srcPic QR code image URL string 'https://placehold.co/160x160'
customClass Custom CSS class name string ''
buttonText Button text string '关注领好礼'
checkeBoxIconSize Checkbox icon size string '16px'
onButtonClick Button click callback function () => void () => {}
onChange Checkbox state change callback (value: boolean) => void () => {}

# Events

Event Description Parameters
close Triggered when dialog is closed -

# Slots

Slot Description Parameters
description Custom description content area -
foot-btn Custom footer button area -

# CSS Variables

The component provides the following CSS variables for custom styling:

# Spacing System

CSS Variable Description Default Value
--pmsap-body-padding-lr Content area left and right padding .76rem
--fm-imgwrap-spacing Image container padding $spacing-xs
--fm-imgwrap-mt Image container top margin $spacing-md
--fm-imgwrap-mb Image container bottom margin $spacing-md

# Size System

CSS Variable Description Default Value
--fm-imgwrap-width Image container width 3.6rem
--fm-imgwrap-height Image container height 3.62rem

# Color System

CSS Variable Description Default Value
--fm-imgwrap-border-color Image container border color $color-surface-brand-light2
--fm-desc-text-color Description text color $color-text-invert-default
--fm-info-text-color Highlight info text color $color-text-brand

# Font System

CSS Variable Description Default Value
--fm-desc-font-size Description font size $font-size-sm
--fm-ctrls-font-size Control area font size $font-size-sm

# Border Radius System

CSS Variable Description Default Value
--fm-imgwrap-border-radius Image container border radius 0

# Usage Example

/* Custom follow dialog styles */
: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;
}

/* Or override via customClass */
.custom-follow-dialog {
  --pmsap-body-padding-lr: 24px;
  --fm-imgwrap-spacing: 8px;
  --fm-desc-font-size: 16px;
}

# Use Cases

# 1. Official Account Follow Guidance

  • Display to new users when they first enter the app
  • Guide users to follow before using important features
  • Promote official account on activity pages

# 2. Match Notification Subscription

  • Remind users to follow for match notifications before events start
  • Subscribe to important match information push notifications
  • Notify about match results and rewards

# 3. Marketing Activity Promotion

  • Promote official account during holiday activities
  • Guide users to follow when releasing new features
  • Guide users to participate in user benefit activities

# Notes

  1. QR Code Image: Recommend using high-definition official account QR codes, suggested size 200x200 pixels or above
  2. Display Timing: Reasonably control dialog display timing to avoid over-disturbing users
  3. User Choice: Respect users' "Don't remind again" choice and avoid repeated popups
  4. Navigation Logic: Ensure button click navigation logic works properly on different platforms
  5. Mini Program Compatibility: Supports WeChat mini program virtualHost and styleIsolation configuration
  6. Accessibility: Add appropriate alt attributes for QR code images

# Dependencies

  • PressMatchPopUp: Base popup component
  • PressButton: Button component
  • PressCheckbox: Checkbox component

← MatchGameLogoPopup →