56 lines
1.8 KiB
Plaintext
56 lines
1.8 KiB
Plaintext
|
<view class="container">
|
||
|
|
<!-- Logo和标题 -->
|
||
|
|
<view class="header">
|
||
|
|
<view class="logo">微</view>
|
||
|
|
<text class="title">微信登录授权</text>
|
||
|
|
<text class="subtitle">请授权获取您的头像和昵称信息</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 用户信息卡片 -->
|
||
|
|
<view class="user-card">
|
||
|
|
<button class="avatar-picker" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
|
||
|
|
<view class="avatar-wrapper {{avatarUrl ? 'has-avatar' : ''}}">
|
||
|
|
<image wx:if="{{avatarUrl}}" class="avatar-image" src="{{avatarUrl}}" mode="aspectFill"></image>
|
||
|
|
<text wx:else class="avatar-icon">👤</text>
|
||
|
|
</view>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<view class="nickname-wrapper">
|
||
|
|
<view class="nickname-btn-wrapper">
|
||
|
|
<input class="nickname-btn-input"
|
||
|
|
type="nickname"
|
||
|
|
placeholder="点击授权昵称"
|
||
|
|
value="{{nickname}}"
|
||
|
|
bindinput="onNicknameInput"
|
||
|
|
maxlength="20"
|
||
|
|
placeholder-class="nickname-placeholder" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 授权按钮 -->
|
||
|
|
<view class="auth-btn {{canSubmit ? '' : 'disabled'}}"
|
||
|
|
bindtap="handleLogin">
|
||
|
|
<text wx:if="{{isLoading}}">授权中...</text>
|
||
|
|
<text wx:elif="{{loginSuccess}}">✓ 已授权</text>
|
||
|
|
<text wx:else>立即授权</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 授权说明 -->
|
||
|
|
<view class="permissions">
|
||
|
|
<view class="permissions-title">授权说明</view>
|
||
|
|
<view class="permission-item">
|
||
|
|
<text class="dot">•</text>
|
||
|
|
<text>获取您的公开信息（昵称、头像）</text>
|
||
|
|
</view>
|
||
|
|
<view class="permission-item">
|
||
|
|
<text class="dot">•</text>
|
||
|
|
<text>用于完善您的个人资料</text>
|
||
|
|
</view>
|
||
|
|
<view class="permission-item">
|
||
|
|
<text class="dot">•</text>
|
||
|
|
<text>我们承诺保护您的隐私安全</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|