统一排行榜对齐星雀UI，页面资源后台配置实时刷新
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
40
miniprogram/pages/phone-auth/phone-auth.js
Normal file
40
miniprogram/pages/phone-auth/phone-auth.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import { submit } from '../../utils/phone-auth';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
show: false,
|
||||
avatar: '',
|
||||
avatarFile: null,
|
||||
phoneCode: '',
|
||||
phoneGot: false
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => this.setData({ show: true }), 100);
|
||||
},
|
||||
onAvatar(e) {
|
||||
const p = e.detail.avatarUrl;
|
||||
this.setData({ avatar: p, avatarFile: p });
|
||||
},
|
||||
onPhone(e) {
|
||||
if (e.detail.code) {
|
||||
this.setData({ phoneCode: e.detail.code, phoneGot: true });
|
||||
}
|
||||
},
|
||||
async submit() {
|
||||
const { phoneCode, avatarFile } = this.data;
|
||||
if (!avatarFile || !phoneCode) return;
|
||||
try {
|
||||
wx.showLoading({ title: '认证中...', mask: true });
|
||||
await submit(phoneCode, avatarFile);
|
||||
wx.hideLoading();
|
||||
// 成功，重启小程序，此时check返回false，用户无感进入
|
||||
wx.reLaunch({ url: '/pages/index/index' });
|
||||
} catch (e) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: e.message, icon: 'none' });
|
||||
}
|
||||
},
|
||||
exit() {
|
||||
wx.exitMiniProgram();
|
||||
}
|
||||
});
|
||||
3
miniprogram/pages/phone-auth/phone-auth.json
Normal file
3
miniprogram/pages/phone-auth/phone-auth.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
41
miniprogram/pages/phone-auth/phone-auth.wxml
Normal file
41
miniprogram/pages/phone-auth/phone-auth.wxml
Normal file
@@ -0,0 +1,41 @@
|
||||
<!-- 极简认证卡片 - 居中模态 -->
|
||||
<view class="mask">
|
||||
<view class="card">
|
||||
<!-- 图标 -->
|
||||
<view class="icon-box">
|
||||
<image class="icon" src="/images/auth-shield.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class="title">完善资料</view>
|
||||
<view class="subtitle">仅需两步，即可开始</view>
|
||||
|
||||
<!-- 步骤1: 头像 -->
|
||||
<view class="step">
|
||||
<view class="step-number">1</view>
|
||||
<view class="step-text">设置你的头像(一定要选哦)</view>
|
||||
</view>
|
||||
<button class="avatar-btn" open-type="chooseAvatar" bindchooseavatar="onAvatar">
|
||||
<image class="avatar-img" src="{{avatar || '/images/default-avatar.png'}}" mode="aspectFill" />
|
||||
<text class="avatar-tip">{{avatar ? '点击更换' : '点击选择(必选)'}}</text>
|
||||
</button>
|
||||
|
||||
<!-- 步骤2: 手机号 -->
|
||||
<view class="step">
|
||||
<view class="step-number">2</view>
|
||||
<view class="step-text">绑定微信手机号</view>
|
||||
</view>
|
||||
<button class="phone-btn" open-type="getPhoneNumber" bindgetphonenumber="onPhone">
|
||||
<text class="phone-icon"></text>
|
||||
<text>{{phoneGot ? '已获取' : '一键获取'}}</text>
|
||||
</button>
|
||||
|
||||
<!-- 提交 -->
|
||||
<button class="submit-btn" bindtap="submit" disabled="{{!phoneGot || submitting}}">
|
||||
{{submitting ? '认证中...' : '完成认证'}}
|
||||
</button>
|
||||
|
||||
<!-- 退出 -->
|
||||
<view class="exit" bindtap="exit">暂不认证，退出</view>
|
||||
</view>
|
||||
</view>
|
||||
169
miniprogram/pages/phone-auth/phone-auth.wxss
Normal file
169
miniprogram/pages/phone-auth/phone-auth.wxss
Normal file
@@ -0,0 +1,169 @@
|
||||
/* 极简居中卡片设计 - 世界级UI */
|
||||
|
||||
/* 遮罩 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(6rpx);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
width: 640rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx;
|
||||
padding: 60rpx 48rpx 48rpx;
|
||||
box-shadow: 0 20rpx 60rpx rgba(0,0,0,0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* 图标区域 */
|
||||
.icon-box {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f4ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 步骤 */
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f4ff;
|
||||
color: #4a6cf7;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 28rpx;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* 头像按钮 */
|
||||
.avatar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #f8f9ff;
|
||||
border: 2rpx solid #eef0f6;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
margin-left: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 手机号按钮 */
|
||||
.phone-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #4a6cf7;
|
||||
border-radius: 48rpx;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.phone-icon {
|
||||
margin-right: 12rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 提交按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #1a1a1a;
|
||||
border-radius: 48rpx;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
background: #ccc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 退出 */
|
||||
.exit {
|
||||
font-size: 26rpx;
|
||||
color: #aaa;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
Reference in New Issue
Block a user