init
项目初始化
This commit is contained in:
王宏豪
224
pages/profile/profile.js
Normal file
224
pages/profile/profile.js
Normal file
@@ -0,0 +1,224 @@
|
||||
const api = require('../../utils/api');
|
||||
const auth = require('../../utils/auth');
|
||||
|
||||
const ROLE_LABELS = {
|
||||
student: '学员',
|
||||
member: '成员',
|
||||
teacher: '老师',
|
||||
leader: '组长',
|
||||
'group_leader': '组长',
|
||||
admin: '管理员'
|
||||
};
|
||||
const LOGIN_TYPE_LABELS = {
|
||||
wechat: '微信',
|
||||
phone: '手机号',
|
||||
admin: '管理员'
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
view: 'loading',
|
||||
profile: null,
|
||||
phoneLoading: false,
|
||||
phoneError: '',
|
||||
loadError: '',
|
||||
avatarSrc: '',
|
||||
avatarFallback: '明',
|
||||
roleLabel: '',
|
||||
loginTypeLabel: '',
|
||||
classGroups: [],
|
||||
avatarUploading: false
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.setData({ phoneError: '' });
|
||||
this.loadPage();
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.refresh().then(() => wx.stopPullDownRefresh());
|
||||
},
|
||||
|
||||
refresh() {
|
||||
if (this.data.view !== 'profile') {
|
||||
return this.loadPage();
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
api.request({ url: '/api/v1/profile' })
|
||||
.then((res) => {
|
||||
this.applyProfile(res);
|
||||
resolve();
|
||||
})
|
||||
.catch(() => {
|
||||
wx.showToast({ title: '刷新失败', icon: 'none' });
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
loadPage() {
|
||||
this.setData({ loadError: '' });
|
||||
return auth.ensureLogin()
|
||||
.then((token) => {
|
||||
if (!token) {
|
||||
this.showPhoneLogin();
|
||||
return null;
|
||||
}
|
||||
this.setData({ view: 'loading' });
|
||||
return this.loadProfile();
|
||||
})
|
||||
.catch(() => {
|
||||
this.showPhoneLogin();
|
||||
});
|
||||
},
|
||||
|
||||
loadProfile() {
|
||||
return api.request({ url: '/api/v1/profile' })
|
||||
.then((res) => {
|
||||
this.applyProfile(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!auth.getToken()) {
|
||||
this.showPhoneLogin();
|
||||
} else {
|
||||
this.setData({
|
||||
view: 'loadError',
|
||||
loadError: (err && err.error) || '加载失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
applyProfile(res) {
|
||||
const displayName = res.display_name || res.name || '';
|
||||
const classGroups = (res.class_groups || []).map((g) => ({
|
||||
class_id: g.class_id,
|
||||
class_code: g.class_code,
|
||||
period: g.period,
|
||||
group: g.group,
|
||||
role: this.roleLabel(g.role)
|
||||
}));
|
||||
this.setData({
|
||||
view: 'profile',
|
||||
profile: res,
|
||||
phoneError: '',
|
||||
loadError: '',
|
||||
avatarSrc: this.fullUrl(res.wechat_avatar),
|
||||
avatarFallback: this.firstChar(displayName),
|
||||
roleLabel: this.roleLabel(res.role),
|
||||
loginTypeLabel: this.loginTypeLabel(res.login_type),
|
||||
classGroups
|
||||
});
|
||||
},
|
||||
|
||||
showPhoneLogin() {
|
||||
this.setData({
|
||||
view: 'phoneLogin',
|
||||
phoneLoading: false
|
||||
});
|
||||
},
|
||||
|
||||
roleLabel(role) {
|
||||
return ROLE_LABELS[role] || role || '学员';
|
||||
},
|
||||
|
||||
loginTypeLabel(type) {
|
||||
return LOGIN_TYPE_LABELS[type] || type || '微信';
|
||||
},
|
||||
|
||||
fullUrl(rel) {
|
||||
if (!rel) return '';
|
||||
return /^https?:\/\//i.test(rel) ? rel : api.STATIC_BASE_URL + rel;
|
||||
},
|
||||
|
||||
firstChar(str) {
|
||||
const t = (str && typeof str === 'string') ? str.trim() : '';
|
||||
return t ? t.charAt(0) : '明';
|
||||
},
|
||||
|
||||
onChooseAvatar(e) {
|
||||
const path = e.detail && e.detail.avatarUrl;
|
||||
console.log('[avatar] chooseAvatar ->', path);
|
||||
if (!path) {
|
||||
wx.showToast({ title: '未选择头像', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.setData({ avatarUploading: true });
|
||||
wx.uploadFile({
|
||||
url: api.BASE_URL + '/api/v1/profile/avatar',
|
||||
filePath: path,
|
||||
name: 'file',
|
||||
header: { Authorization: 'Bearer ' + auth.getToken() },
|
||||
success: (res) => {
|
||||
console.log('[avatar] upload success', res.statusCode, res.data);
|
||||
let data = {};
|
||||
try {
|
||||
data = JSON.parse(res.data);
|
||||
} catch (e) {
|
||||
data = {};
|
||||
}
|
||||
if (data.success && data.wechat_avatar) {
|
||||
const newAvatar = data.wechat_avatar;
|
||||
const newUrl = this.fullUrl(newAvatar);
|
||||
this.setData({
|
||||
'profile.wechat_avatar': newAvatar,
|
||||
avatarSrc: newUrl
|
||||
});
|
||||
wx.showToast({ title: '头像已更新', icon: 'success' });
|
||||
} else {
|
||||
wx.showToast({ title: data.error || '上传失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[avatar] upload fail', err);
|
||||
console.error('[avatar] filePath', path);
|
||||
wx.showToast({ title: '上传失败', icon: 'none' });
|
||||
},
|
||||
complete: () => {
|
||||
this.setData({ avatarUploading: false });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onGetPhoneNumber(e) {
|
||||
if (this.data.phoneLoading) {
|
||||
return;
|
||||
}
|
||||
const phoneCode = e.detail && e.detail.code;
|
||||
if (!phoneCode) {
|
||||
const message = '未授权手机号，请点击上方按钮重试';
|
||||
this.setData({ phoneError: message });
|
||||
wx.showToast({ title: message, icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.setData({ phoneLoading: true, phoneError: '' });
|
||||
auth.loginWithPhone(phoneCode)
|
||||
.then(() => this.loadProfile())
|
||||
.catch((err) => {
|
||||
const message = (err && err.error) || '手机号登录失败';
|
||||
this.setData({ phoneLoading: false, phoneError: message });
|
||||
wx.showToast({ title: message, icon: 'none', duration: 2500 });
|
||||
});
|
||||
},
|
||||
|
||||
onRetry() {
|
||||
this.loadPage();
|
||||
},
|
||||
|
||||
logout() {
|
||||
wx.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出当前账号吗？',
|
||||
confirmText: '退出',
|
||||
confirmColor: '#c0392b',
|
||||
success: (res) => {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
api.request({ url: '/api/v1/auth/logout', method: 'POST' }).catch(() => {});
|
||||
auth.clearToken();
|
||||
wx.reLaunch({ url: '/pages/home/home' });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
5
pages/profile/profile.json
Normal file
5
pages/profile/profile.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundTextStyle": "dark"
|
||||
}
|
||||
105
pages/profile/profile.wxml
Normal file
105
pages/profile/profile.wxml
Normal file
@@ -0,0 +1,105 @@
|
||||
<view class="page" wx:if="{{view === 'loading'}}">
|
||||
<view class="card skeleton-card">
|
||||
<view class="skeleton skeleton-avatar"></view>
|
||||
<view class="skeleton-line w-60"></view>
|
||||
<view class="skeleton-line w-40"></view>
|
||||
<view class="skeleton-line w-80"></view>
|
||||
<view class="skeleton-line w-70"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page" wx:elif="{{view === 'loadError'}}">
|
||||
<view class="error-card">
|
||||
<view class="error-icon">!</view>
|
||||
<view class="error-title">{{loadError || '加载失败，请稍后再试'}}</view>
|
||||
<button class="btn-retry btn-primary" hover-class="btn-hover" bindtap="onRetry">重新加载</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page" wx:elif="{{view === 'phoneLogin'}}">
|
||||
<view class="login-wrap">
|
||||
<view class="login-card">
|
||||
<view class="login-icon">👤</view>
|
||||
<view class="login-title">微信手机号一键登录</view>
|
||||
<view class="login-desc">未找到你的账号，请使用微信手机号登录。手机号仅用于账号绑定，不会公开展示。</view>
|
||||
<button
|
||||
class="btn-phone btn-primary"
|
||||
open-type="getPhoneNumber"
|
||||
bindgetphonenumber="onGetPhoneNumber"
|
||||
loading="{{phoneLoading}}"
|
||||
disabled="{{phoneLoading}}"
|
||||
hover-class="btn-hover"
|
||||
>{{phoneLoading ? '登录中...' : '微信手机号一键登录'}}</button>
|
||||
<view class="error" wx:if="{{phoneError}}">{{phoneError}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block wx:elif="{{profile}}">
|
||||
<view class="page has-bottom">
|
||||
<view class="card profile-card">
|
||||
<view class="profile-head">
|
||||
<view class="avatar-click">
|
||||
<button
|
||||
class="avatar-btn"
|
||||
open-type="chooseAvatar"
|
||||
bindchooseavatar="onChooseAvatar"
|
||||
disabled="{{avatarUploading}}"
|
||||
hover-class="avatar-hover"
|
||||
>
|
||||
<image wx:if="{{avatarSrc}}" class="avatar" src="{{avatarSrc}}" mode="aspectFill"></image>
|
||||
<text wx:else class="avatar avatar-fallback">{{avatarFallback}}</text>
|
||||
</button>
|
||||
<view class="avatar-camera" wx:if="{{!avatarUploading}}">📷</view>
|
||||
</view>
|
||||
<view class="profile-meta">
|
||||
<view class="profile-row">
|
||||
<text class="profile-name">{{profile.display_name}}</text>
|
||||
<text class="badge role" wx:if="{{roleLabel}}">{{roleLabel}}</text>
|
||||
</view>
|
||||
<view class="profile-sub">{{profile.student_id}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card info-card">
|
||||
<view class="info-title">个人信息</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">姓名</text>
|
||||
<text class="info-value">{{profile.name}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">学号</text>
|
||||
<text class="info-value">{{profile.student_id}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">手机号</text>
|
||||
<text class="info-value">{{profile.phone || '未绑定'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">角色</text>
|
||||
<text class="info-value">{{roleLabel}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">小组</text>
|
||||
<text class="info-value">{{profile.group || '未分组'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">登录方式</text>
|
||||
<text class="info-value">{{loginTypeLabel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card classlist-card" wx:if="{{classGroups.length}}">
|
||||
<view class="info-title">班级分组</view>
|
||||
<view class="class-row" wx:for="{{classGroups}}" wx:key="class_id">
|
||||
<text class="info-label">{{item.period || item.class_code}}</text>
|
||||
<text class="info-value">{{item.group}} · {{item.role}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-actions">
|
||||
<button class="btn-logout" hover-class="btn-hover" bindtap="logout">退出登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
194
pages/profile/profile.wxss
Normal file
194
pages/profile/profile.wxss
Normal file
@@ -0,0 +1,194 @@
|
||||
button::after { border: none; }
|
||||
|
||||
.page {
|
||||
padding: 32rpx;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #FDFBF7;
|
||||
}
|
||||
|
||||
.page.has-bottom {
|
||||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ---- shared feedback ---- */
|
||||
.btn-hover { opacity: .85; transform: scale(.98); }
|
||||
.link-hover { opacity: .7; }
|
||||
|
||||
/* ---- skeleton ---- */
|
||||
.skeleton-card { padding: 40rpx 32rpx; }
|
||||
.skeleton {
|
||||
background: #eee;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.skeleton-avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
.skeleton-line {
|
||||
height: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #eee;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.w-60 { width: 60%; }
|
||||
.w-40 { width: 40%; }
|
||||
.w-80 { width: 80%; }
|
||||
.w-70 { width: 70%; }
|
||||
|
||||
/* ---- error state ---- */
|
||||
.error-card {
|
||||
margin-top: 120rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.error-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
margin: 0 auto 24rpx;
|
||||
border-radius: 50%;
|
||||
background: #fdecea;
|
||||
color: #c0392b;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
.error-title {
|
||||
color: #5A4A3A;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
.btn-retry {
|
||||
display: inline-block;
|
||||
min-width: 240rpx;
|
||||
background: #C67B30;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
/* ---- phone login ---- */
|
||||
.login-wrap {
|
||||
min-height: calc(100vh - 200rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.login-card { width: 100%; text-align: center; }
|
||||
.login-icon { font-size: 96rpx; line-height: 1; margin-bottom: 24rpx; }
|
||||
.login-title { font-size: 40rpx; font-weight: 700; color: #C67B30; margin-bottom: 20rpx; }
|
||||
.login-desc { font-size: 26rpx; color: #8B7A6A; line-height: 1.6; margin-bottom: 48rpx; }
|
||||
.btn-phone { width: 100%; background: #C67B30; color: #fff; border-radius: 12rpx; }
|
||||
.btn-phone[disabled] { background: #d8c7b4; color: #fff; }
|
||||
.error { margin-top: 24rpx; font-size: 26rpx; color: #c0392b; }
|
||||
|
||||
/* ---- profile header ---- */
|
||||
.profile-card { padding: 32rpx; }
|
||||
.profile-head { display: flex; align-items: center; }
|
||||
.avatar,
|
||||
.avatar-fallback {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar { background: #f6efe6; }
|
||||
.avatar-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #C67B30, #e3b37c);
|
||||
color: #fff;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.avatar-click {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.avatar-btn {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.avatar-btn .avatar { display: block; }
|
||||
.avatar-btn[disabled] { opacity: .7; }
|
||||
.avatar-camera {
|
||||
position: absolute;
|
||||
right: -2rpx;
|
||||
bottom: -2rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background: #C67B30;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #FDFBF7;
|
||||
}
|
||||
.avatar-hover { opacity: .85; transform: scale(.98); }
|
||||
.profile-meta { flex: 1; min-width: 0; margin-left: 24rpx; }
|
||||
.profile-row { display: flex; align-items: center; gap: 12rpx; }
|
||||
.profile-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #2C1810;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.profile-sub { margin-top: 8rpx; font-size: 24rpx; color: #8B7A6A; }
|
||||
.badge {
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge.role { background: #f6efe6; color: #C67B30; }
|
||||
|
||||
/* ---- info / class list ---- */
|
||||
.info-card,
|
||||
.classlist-card { padding: 28rpx; }
|
||||
.info-title { font-size: 30rpx; font-weight: 700; color: #2C1810; margin-bottom: 8rpx; }
|
||||
.info-row,
|
||||
.class-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1rpx solid #f2ede7;
|
||||
}
|
||||
.info-row:last-child,
|
||||
.class-row:last-child { border-bottom: none; }
|
||||
.info-label { color: #8B7A6A; font-size: 26rpx; flex-shrink: 0; }
|
||||
.info-value {
|
||||
color: #2C1810;
|
||||
font-size: 28rpx;
|
||||
max-width: 60%;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.classlist-card { margin-top: 24rpx; }
|
||||
.classlist-card .info-title { margin-bottom: 8rpx; }
|
||||
|
||||
/* ---- bottom ---- */
|
||||
.bottom-actions {
|
||||
margin-top: 48rpx;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
.btn-logout {
|
||||
background: #fff;
|
||||
color: #c0392b;
|
||||
border: 1rpx solid #f0b4ae;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user