YwxAppThink/app/member/view/profile/index.html

<div class="uc-wrap">
  <div class="layui-card">
    <div class="layui-card-header">个人资料</div>
    <div class="layui-card-body" pad15>
      <form class="layui-form" lay-filter="profileForm">
        <div class="layui-form-item">
          <label class="layui-form-label">头像</label>
          <div class="layui-input-inline">
            <img id="avatarPreview" src="{$profile.avatar|default=''}" class="layui-nav-img"
              style="width:48px;height:48px;border-radius:50%;">
          </div>
          <div class="layui-form-mid layui-word-aux" style="padding-top:14px;">
            <a href="{:url('user/Profile/avatar')}" class="layui-btn layui-btn-xs">修改头像</a>
          </div>
        </div>

        <div class="layui-form-item" style="margin-bottom:0;">
          <label class="layui-form-label">我的勋章</label>
          <div class="layui-input-block">
            {if $medals}
            <div class="profile-medals">
              {volist name="medals" id="m"}
              <span class="profile-medal" title="{$m.title}（{$m.create_at|date='Y-m-d'} 获得）">
                {if $m.image}
                <img src="{$m.image}" alt="{$m.title}">
                {else/}
                <i class="layui-icon layui-icon-trophy"></i>
                {/if}
              </span>
              {/volist}
              <a href="{:url('user/Medal/index')}" class="profile-medal-more">全部 ›</a>
            </div>
            {else/}
            <div class="layui-form-mid layui-word-aux">暂无勋章，去 <a href="{:url('user/Task/index')}">任务中心</a> 领取吧</div>
            {/if}
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-inline">
            <input type="text" value="{$profile.account|default=''}" class="layui-input" disabled>
          </div>
          <div class="layui-form-mid layui-word-aux">不可修改，用于登录</div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">昵称</label>
          <div class="layui-input-inline">
            <input type="text" name="nickname" value="{$profile.nickname|default=''}" lay-verify="required"
              placeholder="请输入昵称" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">手机号</label>
          <div class="layui-input-inline">
            <input type="text" name="mobile" value="{$profile.mobile|default=''}" lay-verify="phone"
              placeholder="请输入手机号" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" value="{$profile.email|default=''}" lay-verify="email"
              placeholder="请输入邮箱" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">个人简介</label>
          <div class="layui-input-block">
            <textarea name="bio" placeholder="请输入个人简介" class="layui-textarea">{$profile.bio|default=''}</textarea>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveProfile">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="layui-card" style="margin-top:16px;">
    <div class="layui-card-header">账号安全</div>
    <div class="layui-card-body" pad15>
      <div class="layui-form-item">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-inline">
          <input type="text" value="********" class="layui-input" disabled>
        </div>
        <div class="layui-form-mid layui-word-aux" style="padding-top:8px;">
          <a href="{:url('user/Profile/password')}" class="layui-btn layui-btn-xs">修改密码</a>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .profile-medals { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:4px; }
  .profile-medal { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:50%; background:linear-gradient(135deg,#fff7e6,#ffe7ba); overflow:hidden; cursor:default; }
  .profile-medal img { width:36px; height:36px; object-fit:cover; }
  .profile-medal .layui-icon { font-size:20px; color:#fa8c16; }
  .profile-medal-more { font-size:12px; color:#999; padding-left:4px; }
  .profile-medal-more:hover { color:#1e9fff; }
</style>

<script>
  layui.use(['form', 'http', 'layer'], function () {
    var form = layui.form, http = layui.http, layer = layui.layer, $ = layui.$;

    form.on('submit(saveProfile)', function (obj) {
      http.post('save', obj.field).then(function (res) {
        if (res.code === 0) {
          layer.msg('保存成功', { icon: 1 });
          try {
            if (window !== top && parent.layui && parent.layui.ywxapp) {
              var nav = parent.document.querySelector('.layui-layout-admin .layui-nav-child, .user-nick');
              if (nav) { nav.textContent = obj.field.nickname; }
            }
          } catch (e) {}
        } else {
          layer.msg(res.message || res.msg || '保存失败', { icon: 2 });
        }
      }).catch(function () {
        layer.msg('请求失败', { icon: 2 });
      });
      return false;
    });
  });
</script>