mirror of
https://gitee.com/qingqing-coconut-tea/RcKtFezyRAZX
synced 2026-07-21 10:32:32 +08:00
init
This commit is contained in:
mzltMpfqGS
194
wechat/pages/profile/profile.js
Normal file
194
wechat/pages/profile/profile.js
Normal file
@@ -0,0 +1,194 @@
|
||||
// pages/profile/profile.js
|
||||
// 个人资料逻辑处理
|
||||
|
||||
const app = getApp()
|
||||
const api = require('../../services/api')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userInfo: null,
|
||||
formData: {
|
||||
nickname: '',
|
||||
gender: '',
|
||||
birthday: '',
|
||||
bio: '',
|
||||
email: '',
|
||||
phone: ''
|
||||
},
|
||||
avatarUrl: '',
|
||||
genderIndex: 0,
|
||||
genderList: ['未知', '男', '女'],
|
||||
birthday: '',
|
||||
loading: false
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.checkLoginStatus()
|
||||
},
|
||||
|
||||
// 检查登录状态
|
||||
checkLoginStatus() {
|
||||
const userInfo = wx.getStorageSync('userInfo')
|
||||
if (!userInfo) {
|
||||
wx.redirectTo({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
this.setData({ userInfo })
|
||||
},
|
||||
|
||||
// 加载用户信息
|
||||
loadUserInfo() {
|
||||
api.getUserInfo().then(res => {
|
||||
if (res.code === 200) {
|
||||
const userInfo = res.data
|
||||
this.setData({
|
||||
userInfo,
|
||||
avatarUrl: userInfo.avatar || '',
|
||||
formData: {
|
||||
nickname: userInfo.nickname || '',
|
||||
gender: userInfo.gender || '',
|
||||
birthday: userInfo.birthday || '',
|
||||
bio: userInfo.bio || '',
|
||||
email: userInfo.email || '',
|
||||
phone: userInfo.phone || ''
|
||||
},
|
||||
genderIndex: this.getGenderIndex(userInfo.gender)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取性别索引
|
||||
getGenderIndex(gender) {
|
||||
const index = this.data.genderList.findIndex(item => item === gender)
|
||||
return index >= 0 ? index : 0
|
||||
},
|
||||
|
||||
// 选择头像
|
||||
onChooseAvatar(e) {
|
||||
const { avatarUrl } = e.detail
|
||||
this.setData({ avatarUrl })
|
||||
this.uploadAvatar(avatarUrl)
|
||||
},
|
||||
|
||||
// 上传头像
|
||||
uploadAvatar(filePath) {
|
||||
wx.showLoading({ title: '上传中...' })
|
||||
|
||||
wx.uploadFile({
|
||||
url: api.getBaseUrl() + '/upload',
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
header: { 'Authorization': 'Bearer ' + wx.getStorageSync('token') },
|
||||
success: res => {
|
||||
wx.hideLoading()
|
||||
const data = JSON.parse(res.data)
|
||||
if (data.code === 200) {
|
||||
this.setData({ avatarUrl: data.data.url })
|
||||
wx.showToast({ title: '头像更新成功', icon: 'success' })
|
||||
} else {
|
||||
wx.showToast({ title: data.message || '上传失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
wx.hideLoading()
|
||||
wx.showToast({ title: '上传失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 昵称输入
|
||||
onNicknameInput(e) {
|
||||
const formData = this.data.formData
|
||||
formData.nickname = e.detail.value
|
||||
this.setData({ formData })
|
||||
},
|
||||
|
||||
// 性别选择
|
||||
onGenderChange(e) {
|
||||
const index = e.detail.value
|
||||
const formData = this.data.formData
|
||||
formData.gender = this.data.genderList[index]
|
||||
this.setData({ formData, genderIndex: index })
|
||||
},
|
||||
|
||||
// 生日选择
|
||||
onBirthdayChange(e) {
|
||||
const formData = this.data.formData
|
||||
formData.birthday = e.detail.value
|
||||
this.setData({ formData })
|
||||
},
|
||||
|
||||
// 简介输入
|
||||
onBioInput(e) {
|
||||
const formData = this.data.formData
|
||||
formData.bio = e.detail.value
|
||||
this.setData({ formData })
|
||||
},
|
||||
|
||||
// 邮箱输入
|
||||
onEmailInput(e) {
|
||||
const formData = this.data.formData
|
||||
formData.email = e.detail.value
|
||||
this.setData({ formData })
|
||||
},
|
||||
|
||||
// 保存资料
|
||||
saveProfile() {
|
||||
const { formData, avatarUrl } = this.data
|
||||
|
||||
if (!formData.nickname.trim()) {
|
||||
wx.showToast({ title: '请输入昵称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
this.setData({ loading: true })
|
||||
|
||||
api.updateUserInfo({
|
||||
nickname: formData.nickname,
|
||||
gender: formData.gender,
|
||||
birthday: formData.birthday,
|
||||
bio: formData.bio,
|
||||
email: formData.email,
|
||||
avatar: avatarUrl
|
||||
}).then(res => {
|
||||
this.setData({ loading: false })
|
||||
if (res.code === 200) {
|
||||
wx.setStorageSync('userInfo', res.data)
|
||||
wx.showToast({ title: '保存成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
wx.navigateBack()
|
||||
}, 1500)
|
||||
} else {
|
||||
wx.showToast({ title: res.message || '保存失败', icon: 'none' })
|
||||
}
|
||||
}).catch(() => {
|
||||
this.setData({ loading: false })
|
||||
wx.showToast({ title: '保存失败', icon: 'none' })
|
||||
})
|
||||
},
|
||||
|
||||
// 修改密码
|
||||
goToChangePassword() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/change-password/change-password'
|
||||
})
|
||||
},
|
||||
|
||||
// 绑定手机号
|
||||
goToBindPhone() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/bind-phone/bind-phone'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* @联系作者：16768118056
|
||||
* @描述：（此项目非免费分享）源码百分百可用，搞定毕设不发愁，支持远程调试安装、二次开发、定制、讲解、文档类。
|
||||
* @访问：https://www.notmaker.com/detail/8326a897119d4542896c863a69d7bbe7/gtt20260415，查看完整运行演示。
|
||||
*/
|
||||
10
wechat/pages/profile/profile.json
Normal file
10
wechat/pages/profile/profile.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "编辑资料"
|
||||
}
|
||||
|
||||
/**
|
||||
* @联系作者：16768118056
|
||||
* @描述：（此项目非免费分享）源码百分百可用，搞定毕设不发愁，支持远程调试安装、二次开发、定制、讲解、文档类。
|
||||
* @访问：https://www.notmaker.com/detail/8326a897119d4542896c863a69d7bbe7/gtt20260415，查看完整运行演示。
|
||||
*/
|
||||
91
wechat/pages/profile/profile.wxml
Normal file
91
wechat/pages/profile/profile.wxml
Normal file
@@ -0,0 +1,91 @@
|
||||
<!-- pages/profile/profile.wxml -->
|
||||
<!-- 个人资料视图 -->
|
||||
|
||||
<view class="profile-container">
|
||||
<!-- 头像区域 -->
|
||||
<view class="avatar-section">
|
||||
<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
|
||||
<image class="avatar-img" src="{{avatarUrl || '/static/images/default-avatar.png'}}" mode="aspectFill" />
|
||||
<view class="avatar-tip">点击更换头像</view>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-section">
|
||||
<view class="form-item">
|
||||
<text class="form-label">昵称</text>
|
||||
<input
|
||||
class="form-input"
|
||||
type="nickname"
|
||||
placeholder="请输入昵称"
|
||||
value="{{formData.nickname}}"
|
||||
bindinput="onNicknameInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">性别</text>
|
||||
<picker class="form-picker" mode="selector" range="{{genderList}}" value="{{genderIndex}}" bindchange="onGenderChange">
|
||||
<view class="picker-value">
|
||||
{{genderList[genderIndex]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">生日</text>
|
||||
<picker class="form-picker" mode="date" value="{{formData.birthday}}" bindchange="onBirthdayChange">
|
||||
<view class="picker-value">
|
||||
{{formData.birthday || '请选择生日'}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">简介</text>
|
||||
<input
|
||||
class="form-input"
|
||||
type="nickname"
|
||||
placeholder="请输入个人简介"
|
||||
value="{{formData.bio}}"
|
||||
bindinput="onBioInput"
|
||||
maxlength="100"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">邮箱</text>
|
||||
<input
|
||||
class="form-input"
|
||||
type="nickname"
|
||||
placeholder="请输入邮箱"
|
||||
value="{{formData.email}}"
|
||||
bindinput="onEmailInput"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<button class="save-btn" bindtap="saveProfile" loading="{{loading}}">保存</button>
|
||||
|
||||
<!-- 其他功能 -->
|
||||
<view class="function-list">
|
||||
<view class="function-item" bindtap="goToChangePassword">
|
||||
<text class="function-name">修改密码</text>
|
||||
<text class="iconfont icon-arrow-right"></text>
|
||||
</view>
|
||||
<view class="function-item" bindtap="goToBindPhone">
|
||||
<text class="function-name">绑定手机号</text>
|
||||
<view class="function-value">
|
||||
<text>{{formData.phone || '未绑定'}}</text>
|
||||
<text class="iconfont icon-arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
/**
|
||||
* @联系作者：16768118056
|
||||
* @描述：（此项目非免费分享）源码百分百可用，搞定毕设不发愁，支持远程调试安装、二次开发、定制、讲解、文档类。
|
||||
* @访问：https://www.notmaker.com/detail/8326a897119d4542896c863a69d7bbe7/gtt20260415，查看完整运行演示。
|
||||
*/
|
||||
137
wechat/pages/profile/profile.wxss
Normal file
137
wechat/pages/profile/profile.wxss
Normal file
@@ -0,0 +1,137 @@
|
||||
/* pages/profile/profile.wxss */
|
||||
/* 个人资料样式 */
|
||||
|
||||
.profile-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60rpx 0 40rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.avatar-wrapper::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 80rpx;
|
||||
border: 6rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 140rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
margin: 40rpx 30rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
|
||||
.function-list {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.function-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.function-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.function-value text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.function-value .iconfont {
|
||||
margin-left: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/**
|
||||
* @联系作者：16768118056
|
||||
* @描述：（此项目非免费分享）源码百分百可用，搞定毕设不发愁，支持远程调试安装、二次开发、定制、讲解、文档类。
|
||||
* @访问：https://www.notmaker.com/detail/8326a897119d4542896c863a69d7bbe7/gtt20260415，查看完整运行演示。
|
||||
*/
|
||||
Reference in New Issue
Block a user