Press Next

# MatchAuthorizationItem Authorization Info Item Component

Authorization information item component for displaying and editing user avatar and nickname information, typically used as content part of authorization popups.

# Import

import PressMatchAuthorizationItem from 'press-next/press-match-authorization-item/press-match-authorization-item.vue'

# Code Examples

# Basic Usage

<template>
  <PressMatchAuthorizationItem
    desc="To facilitate content display on pages such as scores, authorize us to get your account nickname"
    @avatar-click="handleAvatarClick"
    @nickname-change="handleNicknameChange"
  />
</template>

<script setup>
const handleAvatarClick = () => {
  console.log('Avatar clicked')
}

const handleNicknameChange = (value) => {
  console.log('Nickname changed:', value)
}
</script>

# Custom Avatar and Nickname

<template>
  <PressMatchAuthorizationItem
    desc="Please complete your personal information"
    :avatar-url="avatarUrl"
    :nickname="nickname"
    nickname-placeholder="Please enter your nickname"
    @avatar-click="handleAvatarClick"
    @avatar-change="handleAvatarChange"
    @nickname-change="handleNicknameChange"
    @nickname-blur="handleNicknameBlur"
  />
</template>

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

const avatarUrl = ref('https://example.com/avatar.jpg')
const nickname = ref('User Nickname')

const handleAvatarClick = () => {
  // Open avatar selector
  console.log('Select avatar')
}

const handleAvatarChange = (avatarUrl) => {
  // WeChat Mini Program avatar selection callback
  console.log('Avatar changed:', avatarUrl)
}

const handleNicknameChange = (value) => {
  nickname.value = value
}

const handleNicknameBlur = (value) => {
  console.log('Nickname input completed:', value)
}

const handleNicknameAuth = () => {
  // Trigger WeChat nickname authorization
  console.log('Trigger WeChat nickname authorization')
}
</script>

# Complete Feature Example

<template>
  <div class="authorization-container">
    <PressMatchAuthorizationItem
      desc="For a better user experience, please authorize to get the following information"
      :avatar-url="userInfo.avatar"
      :nickname="userInfo.nickname"
      :default-avatar-url="defaultAvatar"
      nickname-placeholder="Please enter your nickname"
      custom-class="custom-authorization"
      @avatar-click="handleAvatarClick"
      @avatar-change="handleAvatarChange"
      @nickname-change="handleNicknameChange"
      @nickname-blur="handleNicknameBlur"
      @nickname-auth="handleNicknameAuth"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const userInfo = reactive({
  avatar: '',
  nickname: ''
})

const defaultAvatar = 'https://image-1251917893.file.myqcloud.com/general-match-components/img/common/avatar/default-avatar.png'

const handleAvatarClick = () => {
  // WeChat Mini Program will automatically trigger avatar-change event
  // Non-WeChat Mini Program needs to implement avatar selection logic
  // #ifndef MP-WEIXIN
  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      userInfo.avatar = res.tempFiles[0].tempFilePath
      // Upload to server
      uploadAvatar(userInfo.avatar)
    }
  })
  // #endif
}

// WeChat Mini Program avatar selection success callback
const handleAvatarChange = (avatarUrl) => {
  userInfo.avatar = avatarUrl
  // Upload to server
  uploadAvatar(avatarUrl)
}

const handleNicknameChange = (value) => {
  userInfo.nickname = value
}

const handleNicknameBlur = (value) => {
  // Validate nickname format
  if (value.length < 2) {
    wx.showToast({ title: 'Nickname must be at least 2 characters', icon: 'none' })
    return
  }
  if (value.length > 20) {
    wx.showToast({ title: 'Nickname cannot exceed 20 characters', icon: 'none' })
    return
  }
  userInfo.nickname = value
}

const handleNicknameAuth = () => {
  // Trigger WeChat Mini Program nickname authorization
  wx.getUserProfile({
    desc: 'Used to complete member profile',
    success: (res) => {
      userInfo.nickname = res.userInfo.nickName
      wx.showToast({ title: 'Authorization successful', icon: 'success' })
    },
    fail: () => {
      wx.showToast({ title: 'Authorization failed', icon: 'none' })
    }
  })
}

const uploadAvatar = (tempFilePath) => {
  wx.uploadFile({
    url: 'https://your-api.com/upload',
    filePath: tempFilePath,
    name: 'avatar',
    success: (res) => {
      const data = JSON.parse(res.data)
      userInfo.avatar = data.url
    }
  })
}
</script>

# No Description Text

<template>
  <PressMatchAuthorizationItem
    :avatar-url="avatarUrl"
    :nickname="nickname"
    @avatar-click="handleAvatarClick"
    @nickname-change="handleNicknameChange"
  />
</template>

# Custom Description Content

<template>
  <PressMatchAuthorizationItem
    @avatar-click="handleAvatarClick"
    @nickname-change="handleNicknameChange"
  >
    <template #description>
      <div class="custom-desc">
        <p>To provide better service, please authorize to get:</p>
        <ul>
          <li>Avatar information: for personal profile display</li>
          <li>Nickname information: for leaderboard and social features</li>
        </ul>
      </div>
    </template>
  </PressMatchAuthorizationItem>
</template>

# Usage in Popup

<template>
  <PressPopupPlus :show="showAuth" @close="closeAuth">
    <div class="auth-popup">
      <div class="auth-header">
        <h3>Get Authorization Info</h3>
      </div>
      
      <PressMatchAuthorizationItem
        desc="To facilitate content display on pages such as scores, authorize us to get your account nickname"
        :avatar-url="avatarUrl"
        :nickname="nickname"
        @avatar-click="handleAvatarClick"
        @avatar-change="handleAvatarChange"
        @nickname-change="handleNicknameChange"
      />
      
      <div class="auth-footer">
        <PressButton @click="closeAuth">Cancel</PressButton>
        <PressButton type="primary" @click="confirmAuth">Confirm</PressButton>
      </div>
    </div>
  </PressPopupPlus>
</template>

# API

# Props

Parameter Description Type Default
desc Description text string 'To facilitate content display on pages such as scores, authorize us to get your account nickname'
avatar-url Avatar URL string ''
nickname Nickname string ''
default-avatar-url Default avatar URL string 'https://image-1251917893.file.myqcloud.com/general-match-components/img/common/avatar/default-avatar.png'
nickname-placeholder Nickname input placeholder string 'Please enter nickname'
custom-class Custom style class name string ''

# Events

Event Description Callback Parameters Platform
avatar-click Triggered when avatar is clicked - All platforms
avatar-change Triggered after WeChat Mini Program avatar selection succeeds avatarUrl: string WeChat Mini Program only
nickname-change Triggered when nickname input changes (real-time) value: string All platforms
nickname-blur Triggered when nickname input loses focus (input completed) value: string WeChat Mini Program only
nickname-auth Triggered when clicking nickname area, used to trigger custom authorization logic - Non-WeChat Mini Program

# Slots

Name Description
description Custom description content

# Style Variables

The component provides the following CSS variables for custom styling.

Name Default Value Description
--map-authorize-cell-icon-ml $spacing-xs Cell right icon left margin
--map-authorize-desc-mb $spacing-lg Description text bottom margin
--map-authorize-avatar-size .8rem Avatar size
--map-authorize-cell-item-height 1.12rem Cell height
--map-authorize-cell-icon-size .4rem Cell right icon size
--map-authorize-desc-text-color $color-text-invert-default Description text color
--map-authorize-label-text-color $color-text-primary Label text color
--map-authorize-name-text-color $color-text-invert-dark Name text color
--map-authorize-bg-color none Background color
--map-authorize-cell-border-color $color-divider-light Cell border color
--map-authorize-desc-font-size $font-size-sm Description font size
--map-authorize-label-font-size $font-size-lg Label font size
--map-authorize-name-font-size $font-size-lg Name font size
--map-authorize-avatar-border-radius $border-radius-circle Avatar border radius

# Notes

  1. Platform Differences:
    • WeChat Mini Program: Avatar uses open-type="chooseAvatar" native capability, nickname input supports type="nickname" and blur event
    • Non-WeChat Mini Program: Avatar click triggers avatar-click event, nickname click triggers nickname-auth event, requires custom authorization logic
  2. Event Trigger Timing:
    • nickname-change: Triggered on every input (real-time change)
    • nickname-blur: Triggered only on blur (input completed), WeChat Mini Program only
    • avatar-change: Automatically triggered after WeChat Mini Program avatar selection succeeds, also triggers avatar-click
  3. The nickname input field uses the press-field component and supports all field component features
  4. Avatar display priority: avatarUrl > defaultAvatarUrl
  5. The component automatically handles input field styling to maintain consistency with overall design
  6. It's recommended to use with popup components for complete authorization flow experience

# FAQ

# How to customize avatar size?

.custom-authorization {
  --map-authorize-avatar-size: 1rem;
}

# How to modify cell height?

.custom-authorization {
  --map-authorize-cell-item-height: 1.5rem;
}

# How to hide description text?

<PressMatchAuthorizationItem
  desc=""
  @avatar-click="handleAvatarClick"
/>

# How to validate nickname input?

const handleNicknameBlur = (value) => {
  // Length validation
  if (value.length < 2 || value.length > 20) {
    wx.showToast({ title: 'Nickname length should be 2-20 characters', icon: 'none' })
    return
  }
  
  // Special character validation
  const regex = /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/
  if (!regex.test(value)) {
    wx.showToast({ title: 'Nickname can only contain Chinese, English, numbers and underscores', icon: 'none' })
    return
  }
}

# How to use with other components?

<!-- Use in authorization popup -->
<PressMatchMpAuthorizePopup :show="showAuth">
  <PressMatchAuthorizationItem
    :avatar-url="avatarUrl"
    :nickname="nickname"
    @avatar-click="handleAvatarClick"
    @avatar-change="handleAvatarChange"
    @nickname-change="handleNicknameChange"
  />
</PressMatchMpAuthorizePopup>

← MatchBindRolePopup →