MatchMpAuthorizePopup 微信小程序授权弹窗

# MatchMpAuthorizePopup 微信小程序授权弹窗

微信小程序授权弹窗组件，用于获取用户头像和昵称授权，支持头像选择和昵称自定义输入。

# 引入

import PressMatchMpAuthorizePopup from 'press-next/press-match-mp-authorize-popup/press-match-mp-authorize-popup.vue'

# 代码演示

# 基础用法

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="获取您的头像授权"
    desc="为方便成绩等页面内容展示，授权我们获取您的账号昵称"
    @close="onClose"
    @confirm="handleConfirm"
  />
</template>

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

const show = ref(false)

const onClose = () => {
  show.value = false
}

const handleConfirm = () => {
  console.log('确认授权')
  show.value = false
}
</script>

# 自定义头像和昵称

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="获取您的头像授权"
    desc="为方便成绩等页面内容展示，授权我们获取您的账号昵称"
    :avatar-url="avatarUrl"
    :nickname="nickname"
    nickname-placeholder="请输入您的昵称"
    @avatar-click="handleAvatarClick"
    @nickname-change="handleNicknameChange"
    @nickname-auth="handleNicknameAuth"
    @confirm="handleConfirm"
  />
</template>

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

const show = ref(false)
const avatarUrl = ref('')
const nickname = ref('')

const handleAvatarClick = () => {
  // 打开头像选择器
  console.log('选择头像')
}

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

const handleConfirm = () => {
  console.log('确认授权', {
    avatarUrl: avatarUrl.value,
    nickname: nickname.value
  })
}
</script>

# 完整功能示例

<template>
  <div>
    <PressButton @click="showPopup">显示授权弹窗</PressButton>
    
    <PressMatchMpAuthorizePopup
      :show="show"
      title="获取您的头像授权"
      desc="为方便成绩等页面内容展示，授权我们获取您的账号昵称"
      :avatar-url="avatarUrl"
      :nickname="nickname"
      :default-avatar-url="defaultAvatar"
      nickname-placeholder="请输入昵称"
      confirm-text="立即授权"
      @close="onClose"
      @avatar-click="handleAvatarClick"
      @nickname-change="handleNicknameChange"
      @nickname-blur="handleNicknameBlur"
      @nickname-auth="handleNicknameAuth"
      @confirm="handleConfirm"
    />
  </div>
</template>

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

const show = ref(false)
const avatarUrl = ref('')
const nickname = ref('')
const defaultAvatar = 'https://example.com/default-avatar.png'

const showPopup = () => {
  show.value = true
}

const onClose = () => {
  show.value = false
}

const handleAvatarClick = () => {
  // 调用微信小程序头像选择API
  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    success: (res) => {
      avatarUrl.value = res.tempFiles[0].tempFilePath
    }
  })
}

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

const handleNicknameBlur = (value) => {
  console.log('昵称输入完成:', value)
}

const handleConfirm = () => {
  if (!avatarUrl.value) {
    wx.showToast({ title: '请选择头像', icon: 'none' })
    return
  }
  if (!nickname.value.trim()) {
    wx.showToast({ title: '请输入昵称', icon: 'none' })
    return
  }
  
  // 提交授权信息
  console.log('授权信息:', {
    avatarUrl: avatarUrl.value,
    nickname: nickname.value
  })
  show.value = false
}
</script>

# 自定义按钮

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="获取您的头像授权"
    @close="onClose"
  >
    <template #confirm-btn>
      <div class="custom-buttons">
        <PressButton 
          type="default" 
          @click="onClose"
        >
          取消
        </PressButton>
        <PressButton 
          type="primary" 
          @click="handleConfirm"
        >
          确认授权
        </PressButton>
      </div>
    </template>
  </PressMatchMpAuthorizePopup>
</template>

# 自定义描述内容

<template>
  <PressMatchMpAuthorizePopup
    :show="show"
    title="获取您的头像授权"
    @close="onClose"
  >
    <template #description>
      <div class="custom-desc">
        <p>为了更好的用户体验，我们需要获取以下权限：</p>
        <ul>
          <li>头像信息：用于个人资料展示</li>
          <li>昵称信息：用于成绩排行榜显示</li>
        </ul>
      </div>
    </template>
  </PressMatchMpAuthorizePopup>
</template>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	`boolean`	`false`
title	弹窗标题	`string`	`'获取您的头像授权'`
desc	描述文本	`string`	`'为方便成绩等页面内容展示，授权我们获取您的账号昵称'`
avatar-url	头像URL	`string`	`''`
nickname	昵称	`string`	`''`
default-avatar-url	默认头像URL	`string`	`'https://image-1251917893.file.myqcloud.com/general-match-components/img/common/avatar/default-avatar.png'`
nickname-placeholder	昵称输入框占位符	`string`	`'请输入昵称'`
confirm-text	确认按钮文本	`string`	`'确认'`
custom-class	自定义样式类名	`string`	`''`

# Events

事件名	说明	回调参数
avatar-click	点击头像时触发	-
nickname-change	昵称输入变化时触发	`value: string`
nickname-blur	昵称输入失焦时触发	`value: string`
nickname-auth	点击昵称右侧箭头时触发，用于拉起微信昵称授权	-
confirm	点击确认按钮时触发	-
close	关闭弹窗时触发	-

# Slots

名称	说明
description	自定义描述内容
confirm-btn	自定义确认按钮

# 方法

方法名	说明	参数
onClose	关闭弹窗	-

# 注意事项

该组件主要用于微信小程序环境，头像选择需要配合微信小程序API使用
昵称输入框使用了press-field组件，支持所有field组件的特性
头像显示优先级：avatarUrl > defaultAvatarUrl
组件内部会自动处理输入框的样式，保持与整体设计一致
建议在使用前先检查用户是否已经授权，避免重复弹窗

# 常见问题

# 如何获取微信小程序头像？

// 在头像点击事件中调用
const handleAvatarClick = () => {
  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      avatarUrl.value = res.tempFiles[0].tempFilePath
    }
  })
}

# 如何验证昵称格式？

const handleNicknameBlur = (value) => {
  if (value.length < 2) {
    wx.showToast({ title: '昵称至少2个字符', icon: 'none' })
    return
  }
  if (value.length > 20) {
    wx.showToast({ title: '昵称不能超过20个字符', icon: 'none' })
    return
  }
  // 其他验证逻辑...
}

# 如何上传头像到服务器？

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

← MatchModifyTeamEmblemDialog MatchMustReadPopup →