资料头像

一、作用

展示会员资料，维护昵称、头像、手机号和邮箱

二、头像显示

<img src="{$member.avatar_url}" alt="{$member.nickname}">

三、头像变量

变量	说明
$member.avatar	头像存储值
$member.avatar_url	头像访问地址
$member.default_avatar_url	默认头像
$member.initial	昵称首字

四、头像上传

<form action="{member_url path=profile}" method="post" enctype="multipart/form-data">
  <input type="hidden" name="_token" value="{$csrf}">
  <div data-member-avatar>
    <div data-member-avatar-preview>
      <img src="{$member.avatar_url}" alt="{$member.nickname}">
    </div>
    <button type="button" data-member-avatar-choose>上传头像</button>
    <input type="hidden" name="avatar" value="{$member.avatar}" data-member-avatar-value>
    <input type="file" name="avatar_file" accept="image/*" data-member-avatar-file>
  </div>
  <button type="submit">保存</button>
</form>

五、头像接口

fetch('/member/avatar', {
  method: 'POST',
  headers: {'X-CSRF-TOKEN': '{$csrf}'},
  body: formData
})

字段	说明
file	AJAX 上传头像文件
avatar_file	资料表单提交头像文件
avatar	已上传头像存储值

六、修改手机号

<form action="{member_url path=profile}" method="post">
  <input type="hidden" name="_token" value="{$csrf}">
  <input type="text" name="mobile" placeholder="新手机号">
  <input type="text" name="mobile_code" placeholder="短信验证码">
  <button type="button" data-send-member-mobile-code data-purpose="profile_mobile">获取验证码</button>
  <button type="submit">提交</button>
</form>

七、修改邮箱

<form action="{member_url path=profile}" method="post">
  <input type="hidden" name="_token" value="{$csrf}">
  <input type="email" name="email" placeholder="新邮箱">
  <input type="text" name="email_code" placeholder="邮箱验证码">
  <button type="button" data-send-member-email-code data-purpose="profile">获取验证码</button>
  <button type="submit">提交</button>
</form>

八、按需脚本

{theme_asset path='js/member-avatar.js' version=2026052801}
{public_asset path='assets/cms/js/member-verification.js' version=2026052402}