68 lines
2.6 KiB
Plaintext
68 lines
2.6 KiB
Plaintext
<!--Soul创业派对 - 头像昵称引导页，仅头像+昵称-->
|
||
<view class="page">
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-back" bindtap="goBack"><text class="back-icon">‹</text></view>
|
||
<text class="nav-title">完善资料</text>
|
||
<view class="nav-placeholder"></view>
|
||
</view>
|
||
<view style="height: {{statusBarHeight + 44}}px;"></view>
|
||
|
||
<view class="content">
|
||
<!-- 引导文案 -->
|
||
<view class="guide-card">
|
||
<text class="guide-icon">👋</text>
|
||
<text class="guide-title">完善头像和昵称</text>
|
||
<text class="guide-desc">让他人更好地认识你，展示更专业的形象</text>
|
||
</view>
|
||
|
||
<!-- 头像 -->
|
||
<view class="avatar-section">
|
||
<view class="avatar-wrap" bindtap="onAvatarTap">
|
||
<view class="avatar-inner">
|
||
<image wx:if="{{avatar}}" class="avatar-img" src="{{avatar}}" mode="aspectFill"/>
|
||
<view wx:else class="avatar-placeholder">{{nickname ? nickname[0] : '?'}}</view>
|
||
</view>
|
||
<view class="avatar-camera">📷</view>
|
||
</view>
|
||
<text class="avatar-change">点击更换头像</text>
|
||
</view>
|
||
|
||
<!-- 昵称 -->
|
||
<view class="form-section">
|
||
<text class="form-label">昵称</text>
|
||
<view class="form-input-wrap">
|
||
<input
|
||
class="form-input-inner"
|
||
type="nickname"
|
||
placeholder="请输入昵称"
|
||
value="{{nickname}}"
|
||
bindinput="onNicknameInput"
|
||
bindchange="onNicknameChange"
|
||
maxlength="20"
|
||
/>
|
||
</view>
|
||
<text class="input-tip">微信用户可点击输入框自动填充昵称，或手动输入</text>
|
||
</view>
|
||
|
||
<view class="save-btn" bindtap="saveProfile" disabled="{{saving}}">
|
||
{{saving ? '保存中...' : '完成'}}
|
||
</view>
|
||
|
||
<view class="link-row" bindtap="goToFullProfile">
|
||
<text class="link-text">完善更多资料</text>
|
||
<text class="link-arrow">→</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 头像弹窗：使用微信头像 -->
|
||
<view class="modal-overlay" wx:if="{{showAvatarModal}}" bindtap="closeAvatarModal">
|
||
<view class="modal-content avatar-modal" catchtap="stopPropagation">
|
||
<view class="modal-close" bindtap="closeAvatarModal">✕</view>
|
||
<text class="avatar-modal-title">使用微信头像</text>
|
||
<text class="avatar-modal-desc">点击下方按钮，一键同步当前微信头像</text>
|
||
<button class="btn-choose-avatar" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">使用微信头像</button>
|
||
<view class="avatar-modal-cancel" bindtap="closeAvatarModal">取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|