Initial commit

This commit is contained in:
admin
2025-12-08 14:39:07 +08:00
commit 9d4f78656b
782 changed files with 66418 additions and 0 deletions

View File

@@ -0,0 +1,339 @@
const app = getApp()
Page({
data: {
user: {},
isFormOpen: false,
isDevtools: false,
formData: {
name: '',
phone: '',
age: '',
company_name: '',
position: '',
wechat_nickname: '',
avatar: ''
}
},
onLoad(options) {
try {
const sys = wx.getSystemInfoSync()
this.setData({ isDevtools: sys.platform === 'devtools' })
} catch (e) {}
// 检查是否已登录
const app = getApp();
if (app.globalData.userInfo) {
this.setData({ user: app.globalData.userInfo });
this.initFormData(app.globalData.userInfo);
} else {
// 设置回调,等待登录完成
app.loginCallback = (user) => {
this.setData({ user: user });
this.initFormData(user);
}
}
this.fetchUser(); // Still fetch latest data just in case
if (options.action === 'bind_phone') {
this.checkBindPhone();
}
this.ensureNickname()
},
onShow() {
const app = getApp();
if (app.globalData.profileAction === 'bind_phone') {
app.globalData.profileAction = null; // Clear it
this.checkBindPhone();
}
this.ensureNickname()
this.fetchUser() // Always refresh user data on show to update stats
},
checkBindPhone() {
// Only prompt if phone is truly missing
const app = getApp()
const hasPhone = this.data.user.phone || (app.globalData.userInfo && app.globalData.userInfo.phone);
if (!hasPhone) {
this.setData({ isFormOpen: true });
wx.showToast({
title: '请先激活手机号',
icon: 'none',
duration: 2000
})
}
},
initFormData(user) {
this.setData({
formData: {
name: user.name,
phone: user.phone,
age: user.age,
company_name: user.company_name,
position: user.position,
wechat_nickname: user.wechat_nickname,
avatar: user.avatar
}
})
},
toggleForm() {
this.setData({
isFormOpen: !this.data.isFormOpen
});
},
fetchUser() {
const { request } = require('../../utils/request')
request({ url: '/user/' })
.then((data) => {
this.setData({
user: data,
formData: {
name: data.name,
phone: data.phone,
age: data.age,
company_name: data.company_name,
position: data.position,
wechat_nickname: data.wechat_nickname,
avatar: data.avatar
}
})
this.ensureNickname()
})
.catch(() => {
this.setData({
user: {
id: '8839201',
name: '学员用户',
avatar:
'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&auto=format&fit=crop&q=60',
stats: {
learning: 12,
coupons: 3,
hours: 28
}
}
})
})
},
handleInput(e) {
const field = e.currentTarget.dataset.field;
const value = e.detail.value;
this.setData({
[`formData.${field}`]: value
});
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
const app = getApp()
wx.showLoading({ title: '上传中...' })
const header = {}
if (app.globalData.token) {
header['Authorization'] = `Bearer ${app.globalData.token}`
}
wx.uploadFile({
url: `${app.globalData.baseUrl}/file/`,
filePath: avatarUrl,
name: 'file',
header: header,
success: (res) => {
wx.hideLoading()
if (res.statusCode === 200 || res.statusCode === 201) {
const data = JSON.parse(res.data)
// Handle wrapped response from FitJSONRenderer
const path = data.data && data.data.path ? data.data.path : data.path;
if (path) {
this.setData({
'formData.avatar': path,
'user.avatar': path
})
} else {
wx.showToast({ title: '上传失败:无路径', icon: 'none' })
console.error('Upload response missing path:', data)
}
} else {
wx.showToast({ title: '上传失败', icon: 'none' })
console.error('Upload failed:', res)
}
},
fail: (err) => {
wx.hideLoading()
console.error(err)
wx.showToast({ title: '上传出错', icon: 'none' })
}
})
},
onNicknameChange(e) {
this.setData({
'formData.wechat_nickname': e.detail.value
})
},
ensureNickname() {
const has = this.data.formData && this.data.formData.wechat_nickname
if (has) return
// Only auto-fetch if we are in devtools (mock mode).
// Real getUserProfile requires a tap event, so we cannot auto-call it.
if (this.data.isDevtools) {
this.fetchNickname()
}
},
fetchNickname() {
if (this.data.isDevtools) {
const nick = '微信用户'
const app = getApp()
app.globalData.userInfo = {
...app.globalData.userInfo,
wechat_nickname: nick,
name: app.globalData.userInfo && app.globalData.userInfo.name ? app.globalData.userInfo.name : nick
}
this.setData({
'formData.wechat_nickname': nick,
'formData.name': this.data.formData.name || nick,
'user.name': this.data.user.name || nick
})
return
}
if (wx.getUserProfile) {
wx.getUserProfile({ desc: '完善资料' }).then(res => {
const info = res.userInfo || {}
const nick = info.nickName || '微信用户'
const avatar = info.avatarUrl || this.data.formData.avatar
const app = getApp()
app.globalData.userInfo = {
...app.globalData.userInfo,
wechat_nickname: nick,
name: app.globalData.userInfo && app.globalData.userInfo.name ? app.globalData.userInfo.name : nick,
avatar: avatar
}
this.setData({
'formData.wechat_nickname': nick,
'formData.name': this.data.formData.name || nick,
'formData.avatar': avatar,
'user.name': this.data.user.name || nick,
'user.avatar': avatar
})
}).catch(err => {
console.error('getUserProfile error:', err)
})
}
},
getPhoneNumber(e) {
const detail = e && e.detail ? e.detail : {}
if (detail.code) {
const { request } = require('../../utils/request')
wx.showLoading({ title: '获取中...' })
request({
url: '/user/phone/',
method: 'POST',
data: { code: detail.code }
}).then(res => {
wx.hideLoading()
const app = getApp()
app.globalData.userInfo = {
...app.globalData.userInfo,
phone: res.phone
}
this.setData({
'user.phone': res.phone,
'formData.phone': res.phone
})
wx.showToast({ title: '获取成功', icon: 'success' })
}).catch(err => {
wx.hideLoading()
console.error('user/phone request error:', err)
wx.showToast({ title: '获取失败,请检查网络', icon: 'none' })
})
} else {
// DevTools 兜底:工具环境无法下发 code直接模拟请求后端获取默认手机号
if (this.data.isDevtools) {
const { request } = require('../../utils/request')
wx.showLoading({ title: '模拟获取中...' })
request({
url: '/user/phone/',
method: 'POST',
data: { code: 'mock_devtools' }
}).then(res => {
wx.hideLoading()
const app = getApp()
app.globalData.userInfo = {
...app.globalData.userInfo,
phone: res.phone
}
this.setData({
'user.phone': res.phone,
'formData.phone': res.phone
})
wx.showToast({ title: '工具模拟成功', icon: 'success' })
}).catch(err => {
wx.hideLoading()
console.error('devtools mock phone error:', err)
wx.showToast({ title: '工具模拟失败', icon: 'none' })
})
return
}
const msg = detail.errMsg || '未获取到授权码'
console.error('getPhoneNumber error:', detail)
wx.showToast({ title: msg.includes('deny') ? '用户拒绝授权' : msg, icon: 'none' })
}
},
simulateGetPhone() {
if (!this.data.isDevtools) return
const { request } = require('../../utils/request')
wx.showLoading({ title: '模拟获取中...' })
request({
url: '/user/phone/',
method: 'POST',
data: { code: 'mock_devtools' }
}).then(res => {
wx.hideLoading()
const app = getApp()
app.globalData.userInfo = {
...app.globalData.userInfo,
phone: res.phone
}
this.setData({
'user.phone': res.phone,
'formData.phone': res.phone
})
wx.showToast({ title: '工具模拟成功', icon: 'success' })
}).catch(err => {
wx.hideLoading()
console.error('simulateGetPhone error:', err)
wx.showToast({ title: '工具模拟失败', icon: 'none' })
})
},
handleSubmit() {
this.submitData();
},
submitData() {
const { request } = require('../../utils/request')
console.log(this.data.formData);
request({ url: '/user/', method: 'POST', data: this.data.formData })
.then((data) => {
console.log(data)
// Update user data to reflect changes immediately
const app = getApp()
app.globalData.userInfo = {
...app.globalData.userInfo,
...data
}
this.setData({
user: {
...this.data.user,
...data,
stats: this.data.user.stats // preserve stats
},
isFormOpen: false
});
wx.showToast({
title: '保存成功',
icon: 'success'
})
})
},
navigateToCoupons() {
wx.navigateTo({
url: '/pages/coupon/coupon'
})
}
})

View File

@@ -0,0 +1,5 @@
{
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor": "#ff9900",
"navigationBarTextStyle": "white"
}

View File

@@ -0,0 +1,107 @@
<view class="container">
<view class="profile-header">
<view class="user-info">
<button class="avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style="padding:0;border:none;background:transparent;">
<image class="avatar" src="{{user.avatar}}" mode="aspectFill"></image>
</button>
<view class="user-details">
<view class="username">{{user.name}}</view>
<!-- <view class="userid">ID: {{user.id}}</view> -->
</view>
</view>
<view class="stats-card">
<view class="stat-item">
<view class="stat-val">{{user.stats.learning}}</view>
<view class="stat-label">在学课程</view>
</view>
<view class="stat-item">
<view class="stat-val">{{user.stats.coupons}}</view>
<view class="stat-label">可用优惠券</view>
</view>
<!-- <view class="stat-item">
<view class="stat-val">{{user.stats.hours}}h</view>
<view class="stat-label">学习时长</view>
</view> -->
</view>
</view>
<!-- Menu List -->
<view class="menu-list">
<view class="menu-item" bindtap="navigateToCoupons">
<view class="menu-left">
<image class="menu-icon" src="/assets/icons/coupon-icon.png" mode="aspectFit"></image>
<text class="menu-text">我的优惠券</text>
</view>
<view class="menu-right">
<text class="menu-arrow">></text>
</view>
</view>
</view>
<view class="form-section">
<view class="form-title-bar" bindtap="toggleForm">
<view class="title-left">
<image class="menu-icon" src="/assets/icons/profile-icon.png" mode="aspectFit"></image>
<text class="form-title">绑定个人信息</text>
</view>
<text class="toggle-icon">{{isFormOpen ? '▲' : '▼'}}</text>
</view>
<view class="form-content" wx:if="{{isFormOpen}}">
<view class="form-group">
<text class="label">头像</text>
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar-upload" src="{{formData.avatar || user.avatar || '/assets/icons/default-avatar.png'}}" mode="aspectFill"></image>
</button>
</view>
<view class="form-group">
<text class="label">微信昵称</text>
<view class="input-wrap">
<input type="nickname" placeholder="请输入微信昵称" bind:change="onNicknameChange" bindinput="handleInput" data-field="wechat_nickname" value="{{formData.wechat_nickname}}"/>
<button size="mini" type="default" bindtap="fetchNickname" wx:if="{{!formData.wechat_nickname}}" style="font-size:24rpx;margin-left:10rpx;padding:0 20rpx;line-height:60rpx;height:60rpx;">获取微信昵称</button>
</view>
</view>
<view class="form-group">
<text class="label">学员姓名</text>
<view class="input-wrap">
<input type="text" placeholder="请输入真实姓名" bindinput="handleInput" data-field="name" value="{{formData.name}}"/>
</view>
</view>
<view class="form-group">
<text class="label">联系电话</text>
<view class="input-wrap" style="display:flex;align-items:center;">
<input type="number" placeholder="请输入手机号码" disabled="true" bindinput="handleInput" data-field="phone" value="{{formData.phone}}" style="flex:1;"/>
<button size="mini" type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="font-size:24rpx;margin-left:10rpx;padding:0 20rpx;line-height:60rpx;height:60rpx;">获取号码</button>
<button wx:if="{{isDevtools}}" size="mini" type="default" bindtap="simulateGetPhone" style="font-size:24rpx;margin-left:10rpx;padding:0 20rpx;line-height:60rpx;height:60rpx;">模拟获取号码</button>
</view>
</view>
<view class="form-group">
<text class="label">年龄</text>
<view class="input-wrap">
<input type="number" placeholder="0" bindinput="handleInput" data-field="age" value="{{formData.age}}"/>
</view>
</view>
<view class="form-group">
<text class="label">公司名称</text>
<view class="input-wrap">
<input type="text" placeholder="请输入公司名称" bindinput="handleInput" data-field="company_name" value="{{formData.company_name}}"/>
</view>
</view>
<view class="form-group">
<text class="label">职位</text>
<view class="input-wrap">
<input type="text" placeholder="请输入职位" bindinput="handleInput" data-field="position" value="{{formData.position}}"/>
</view>
</view>
<button class="submit-btn" bindtap="handleSubmit">保存信息</button>
</view>
</view>
</view>

View File

@@ -0,0 +1,206 @@
.container {
min-height: 100vh;
background-color: var(--background-color);
}
.profile-header {
background-color: var(--surface-color);
padding: 40rpx 40rpx 100rpx 40rpx;
position: relative;
margin-bottom: 60rpx;
}
.user-info {
display: flex;
align-items: center;
gap: 30rpx;
justify-content: flex-start; /* Ensure items start from left */
}
.avatar-btn {
padding: 0;
border: none;
background: transparent;
margin: 0; /* Ensure no auto margin */
width: 128rpx !important;
height: 128rpx !important;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0; /* Prevent shrinking */
}
.avatar-btn::after {
border: none;
}
.avatar {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
border: 4rpx solid var(--surface-color);
box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
background-color: #eee;
display: block;
}
.user-details {
display: flex;
flex-direction: column;
align-items: flex-start; /* Ensure text aligns left */
flex: 1; /* Take remaining space */
text-align: left; /* Force text align left */
}
.username {
font-size: 40rpx;
font-weight: bold;
color: var(--text-main);
}
.userid {
font-size: 28rpx;
color: var(--text-secondary);
}
.stats-card {
position: absolute;
bottom: -40rpx;
left: 40rpx;
right: 40rpx;
background-color: var(--surface-color);
border-radius: 20rpx;
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
padding: 30rpx;
display: flex;
justify-content: space-around;
text-align: center;
}
.stat-val {
font-size: 36rpx;
font-weight: bold;
color: var(--text-main);
}
.stat-label {
font-size: 24rpx;
color: var(--text-light);
}
/* Menu List */
.menu-list {
margin: 0 30rpx 30rpx 30rpx;
background-color: var(--surface-color);
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx;
transition: background-color 0.2s;
}
.menu-item:active {
background-color: var(--surface-hover);
}
.menu-left {
display: flex;
align-items: center;
gap: 20rpx;
}
.menu-icon {
width: 40rpx;
height: 40rpx;
}
.menu-text {
font-size: 30rpx;
color: var(--text-main);
font-weight: 500;
}
.menu-arrow {
color: var(--text-light);
font-size: 28rpx;
}
.form-section {
padding: 40rpx;
background-color: var(--surface-color);
margin: 0 30rpx 40rpx 30rpx;
border-radius: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.form-title-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.title-left {
display: flex;
align-items: center;
gap: 20rpx;
}
.toggle-icon {
font-size: 24rpx;
color: var(--text-light);
padding: 10rpx;
}
.form-content {
margin-top: 20rpx;
}
.blue-line {
width: 8rpx;
height: 32rpx;
background-color: var(--primary-color);
border-radius: 4rpx;
}
.form-title {
font-size: 30rpx;
font-weight: 500;
color: var(--text-main);
}
.form-group {
margin-bottom: 30rpx;
}
.label {
font-size: 24rpx;
color: var(--text-secondary);
margin-bottom: 10rpx;
display: block;
}
.input-wrap {
background-color: var(--background-color);
padding: 24rpx;
border-radius: 20rpx;
border: 2rpx solid var(--border-color);
}
.form-row {
display: flex;
gap: 30rpx;
}
.half {
flex: 1;
}
.submit-btn {
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
color: var(--text-white);
border-radius: 20rpx;
margin-top: 40rpx;
font-weight: bold;
font-size: 32rpx;
}
/* Avatar Upload */
.avatar-wrapper {
padding: 0;
width: 120rpx !important;
height: 120rpx !important;
border-radius: 20rpx;
margin: 0;
background-color: transparent;
border: none;
}
.avatar-wrapper::after {
border: none;
}
.avatar-upload {
width: 120rpx;
height: 120rpx;
border-radius: 20rpx;
background-color: #eee;
}